svg]:size-4 [&>svg]:shrink-0",
- "after:absolute after:-inset-2 md:after:hidden",
- "peer-data-[size=sm]/menu-button:top-1",
- "peer-data-[size=default]/menu-button:top-1.5",
- "peer-data-[size=lg]/menu-button:top-2.5",
- "group-data-[collapsible=icon]:hidden",
- showOnHover &&
- "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
- className,
- )}
- {...props}
- />
- );
+}: useRender.ComponentProps<"button"> &
+ React.ComponentProps<"button"> & {
+ showOnHover?: boolean;
+ }) {
+ return useRender({
+ defaultTagName: "button",
+ props: mergeProps<"button">(
+ {
+ className: cn(
+ "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+ showOnHover &&
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0",
+ className,
+ ),
+ },
+ props,
+ ),
+ render,
+ state: {
+ slot: "sidebar-menu-action",
+ sidebar: "menu-action",
+ },
+ });
}
function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
@@ -533,12 +533,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">)
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
- "pointer-events-none absolute inset-e-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
- "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
- "peer-data-[size=sm]/menu-button:top-1",
- "peer-data-[size=default]/menu-button:top-1.5",
- "peer-data-[size=lg]/menu-button:top-2.5",
- "group-data-[collapsible=icon]:hidden",
+ "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
className,
)}
{...props}
@@ -553,9 +548,10 @@ function SidebarMenuSkeleton({
}: React.ComponentProps<"div"> & {
showIcon?: boolean;
}) {
- const width = React.useMemo(() => {
+ // Random width between 50 to 90%.
+ const [width] = React.useState(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
- }, []);
+ });
return (
- {showIcon && }
+ {showIcon && }
) {
data-slot="sidebar-menu-sub"
data-sidebar="menu-sub"
className={cn(
- "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
- "group-data-[collapsible=icon]:hidden",
+ "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
className,
)}
{...props}
@@ -605,35 +600,35 @@ function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">)
}
function SidebarMenuSubButton({
- asChild = false,
+ render,
size = "md",
isActive = false,
className,
...props
-}: React.ComponentProps<"a"> & {
- asChild?: boolean;
- size?: "sm" | "md";
- isActive?: boolean;
-}) {
- const Comp = asChild ? SlotPrimitive.Root : "a";
-
- return (
- span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
- "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
- size === "sm" && "text-xs",
- size === "md" && "text-sm",
- "group-data-[collapsible=icon]:hidden",
- className,
- )}
- {...props}
- />
- );
+}: useRender.ComponentProps<"a"> &
+ React.ComponentProps<"a"> & {
+ size?: "sm" | "md";
+ isActive?: boolean;
+ }) {
+ return useRender({
+ defaultTagName: "a",
+ props: mergeProps<"a">(
+ {
+ className: cn(
+ "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-[size=md]:text-sm data-[size=sm]:text-xs data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ className,
+ ),
+ },
+ props,
+ ),
+ render,
+ state: {
+ slot: "sidebar-menu-sub-button",
+ sidebar: "menu-sub-button",
+ size,
+ active: isActive,
+ },
+ });
}
export {
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 39860defd..91fff3a28 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,15 +1,8 @@
-import { Slider as SliderPrimitive } from "radix-ui";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
import * as React from "react";
import { cn } from "@/utils/style";
-function Slider({
- className,
- defaultValue,
- value,
- min = 0,
- max = 100,
- ...props
-}: React.ComponentProps) {
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: SliderPrimitive.Root.Props) {
const _values = React.useMemo(
() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
[value, defaultValue, min, max],
@@ -17,33 +10,33 @@ function Slider({
return (
-
-
-
- {Array.from({ length: _values.length }, (_, index) => (
-
- ))}
+
+
+
+
+ {Array.from({ length: _values.length }, (_, index) => (
+
+ ))}
+
);
}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index a34993aa0..375d6ac07 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,64 +1,29 @@
-import type * as React from "react";
-
-import {
- SwitchIcon as SwitchIconPrimitive,
- Switch as SwitchPrimitive,
- type SwitchProps as SwitchPrimitiveProps,
- SwitchThumb as SwitchThumbPrimitive,
-} from "@/components/primitives/switch";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import { cn } from "@/utils/style";
-type SwitchProps = SwitchPrimitiveProps & {
- pressedWidth?: number;
- startIcon?: React.ReactElement;
- endIcon?: React.ReactElement;
- thumbIcon?: React.ReactElement;
-};
-
-function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, ...props }: SwitchProps) {
+function Switch({
+ className,
+ size = "default",
+ ...props
+}: SwitchPrimitive.Root.Props & {
+ size?: "sm" | "default";
+}) {
return (
-
-
- {thumbIcon && (
-
- {thumbIcon}
-
- )}
-
-
- {startIcon && (
-
- {startIcon}
-
- )}
- {endIcon && (
-
- {endIcon}
-
- )}
-
+
+
);
}
-export { Switch, type SwitchProps };
+export { Switch };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index e47e803ca..f1bd75683 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,9 +1,8 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
import { cva, type VariantProps } from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import type * as React from "react";
import { cn } from "@/utils/style";
-function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps) {
+function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
return (
& VariantProps) {
+}: TabsPrimitive.List.Props & VariantProps) {
return (
) {
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
return (
- ) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
return (
-
+
);
}
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 604fd8d2e..982cca895 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {