@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/src/components/radio-group.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 /* -----------------------------------------------------------------------------
  * Component: RadioGroup
@@ -18,13 +16,7 @@ type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
  * @since 0.3.16-canary.0
  */
 function RadioGroup({ className, ...props }: RadioGroupProps): JSX.Element {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      data-slot="radio-group"
-      {...props}
-    />
-  );
+  return <RadioGroupPrimitive.Root className={cn("grid w-full gap-3", className)} data-slot="radio-group" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -43,30 +35,18 @@ function RadioGroupItem({ className, ...props }: RadioGroupItemProps): JSX.Eleme
   return (
     <RadioGroupPrimitive.Item
       className={cn(
-        "peer inline-flex size-4 shrink-0 items-center justify-center",
-        "rounded-full border border-input shadow-xs outline-hidden",
-        "transition-[border-color,background-color,box-shadow] duration-150 ease-spring",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "hover:not-disabled:not-aria-checked:border-ring/60",
-        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "disabled:opacity-50",
-        "aria-checked:border-primary aria-checked:bg-primary",
-        "focus-visible:aria-checked:ring-primary/20",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60",
-        "aria-checked:aria-invalid:bg-destructive",
-        "dark:bg-input/30",
-        "dark:focus-visible:aria-checked:ring-primary/40",
-        "dark:aria-invalid:ring-destructive/40",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className,
       )}
       data-slot="radio-group-item"
       {...props}
     >
       <RadioGroupPrimitive.Indicator
-        className={cn("size-1", "rounded-full", "bg-background")}
+        className="flex size-4 items-center justify-center"
         data-slot="radio-group-indicator"
-      />
+      >
+        <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
+      </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
 }

package/src/components/radio.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { composeEventHandlers } from "radix-ui/internal";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import { composeEventHandlers } from "@radix-ui/primitive";
 
 /* -----------------------------------------------------------------------------
  * Component: Radio
@@ -23,31 +21,12 @@ function Radio({ className, onChange, onValueChange, ...props }: RadioProps): JS
   return (
     <input
       className={cn(
-        "peer inline-flex size-4 shrink-0 items-center justify-center",
-        "rounded-full border border-input shadow-xs outline-hidden",
-        "appearance-none",
-        "after:size-full after:rounded-full after:bg-background after:transition-[width,height] after:duration-200 after:ease-spring",
-        "motion-reduce:after:transition-none motion-reduce:after:duration-0",
-        "checked:border-primary checked:bg-primary",
-        "checked:after:size-1",
-        "hover:not-disabled:not-checked:border-ring/60",
-        "focus-visible:ring-3 focus-visible:ring-ring/50",
-        "focus-visible:not-checked:border-ring",
-        "focus-visible:checked:ring-primary/20",
-        "disabled:opacity-50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "checked:aria-invalid:bg-destructive",
-        "hover:not-disabled:not-checked:aria-invalid:border-destructive/60",
-        "dark:not-checked:after:bg-input/30",
-        "dark:focus-visible:checked:ring-primary/40",
-        "dark:aria-invalid:ring-destructive/40",
+        "peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-background shadow-xs outline-none before:size-2 before:scale-0 before:rounded-full before:bg-primary-foreground before:transition-transform before:duration-control-indicator before:ease-spring after:absolute after:-inset-x-3 after:-inset-y-2 checked:border-primary checked:bg-primary checked:before:scale-100 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-checked:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 checked:aria-invalid:bg-destructive dark:not-checked:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       data-slot="radio"
       type="radio"
-      onChange={composeEventHandlers(onChange, (event) =>
-        onValueChange?.(event.currentTarget.value),
-      )}
+      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
       {...props}
     />
   );

package/src/components/resizable.tsx

@@ -1,10 +1,7 @@
-"use client";
-
 import type { ComponentProps, JSX } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
 
 import { cn } from "#/lib/utils";
-import { GripVerticalIcon } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels";
 
 /* -----------------------------------------------------------------------------
  * Component: ResizableGroup
@@ -21,7 +18,7 @@ type ResizableGroupProps = ComponentProps<typeof ResizablePrimitive.Group>;
 function ResizableGroup({ className, ...props }: ResizableGroupProps): JSX.Element {
   return (
     <ResizablePrimitive.Group
-      className={cn("flex size-full", className)}
+      className={cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className)}
       data-slot="resizable-group"
       {...props}
     />
@@ -58,35 +55,17 @@ interface ResizableSeparatorProps extends ComponentProps<typeof ResizablePrimiti
 /**
  * @since 0.3.16-canary.0
  */
-function ResizableSeparator({
-  className,
-  withHandle,
-  ...props
-}: ResizableSeparatorProps): JSX.Element {
+function ResizableSeparator({ className, withHandle, ...props }: ResizableSeparatorProps): JSX.Element {
   return (
     <ResizablePrimitive.Separator
       className={cn(
-        "flex items-center justify-center",
-        "bg-border outline-hidden",
-        "focus-visible:bg-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "aria-[orientation=horizontal]:h-px",
-        "aria-[orientation=vertical]:w-px",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className,
       )}
       data-slot="resizable-separator"
       {...props}
     >
-      {withHandle ? (
-        <div
-          className={cn(
-            "z-10 flex h-4 w-3 items-center justify-center",
-            "rounded-sm border",
-            "bg-border",
-          )}
-        >
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      ) : null}
+      {withHandle ? <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" /> : null}
     </ResizablePrimitive.Separator>
   );
 }

package/src/components/scroll-area.tsx

@@ -1,14 +1,10 @@
-"use client";
-
-import type { ScrollAreaScrollbarVariants } from "#/variants/scroll-area";
-import type { Scope } from "@radix-ui/react-context";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { Context } from "radix-ui/internal";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-
+import type { ScrollAreaScrollbarVariants } from "#/variants/scroll-area";
 import { scrollAreaScrollbarVariants } from "#/variants/scroll-area";
-import { createContextScope } from "@radix-ui/react-context";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 /* -----------------------------------------------------------------------------
  * Context: ScrollArea
@@ -16,9 +12,9 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 const SCROLL_AREA_NAME = "ScrollArea";
 
-type ScopedProps<P> = P & { __scopeScrollArea?: Scope };
+type ScopedProps<P> = P & { __scopeScrollArea?: Context.Scope };
 
-const [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
+const [createScrollAreaContext] = Context.createContextScope(SCROLL_AREA_NAME);
 
 type ScrollAreaContextValue = Pick<ScrollAreaScrollbarVariants, "size">;
 
@@ -32,35 +28,17 @@ const [ScrollAreaContextProvider, useScrollAreaContext] =
 /**
  * @since 0.3.16-canary.0
  */
-type ScrollAreaProps = ScopedProps<
-  ComponentProps<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue
->;
+type ScrollAreaProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue>;
 
 /**
  * @since 0.3.16-canary.0
  */
-function ScrollArea({
-  __scopeScrollArea,
-  children,
-  className,
-  size,
-  ...props
-}: ScrollAreaProps): JSX.Element {
+function ScrollArea({ __scopeScrollArea, children, className, size, ...props }: ScrollAreaProps): JSX.Element {
   return (
     <ScrollAreaContextProvider scope={__scopeScrollArea} size={size}>
-      <ScrollAreaPrimitive.Root
-        className={cn("relative", className)}
-        data-slot="scroll-area"
-        {...props}
-      >
+      <ScrollAreaPrimitive.Root className={cn("relative", className)} data-slot="scroll-area" {...props}>
         <ScrollAreaPrimitive.Viewport
-          className={cn(
-            "size-full",
-            "rounded-[inherit] ring-ring/50 outline-ring",
-            "transition-[box-shadow] duration-150 ease-snappy",
-            "motion-reduce:transition-none motion-reduce:duration-0",
-            "focus-visible:ring-4 focus-visible:outline-1",
-          )}
+          className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1"
           data-slot="scroll-area-viewport"
         >
           {children}
@@ -96,12 +74,14 @@ function ScrollAreaScrollbar({
   return (
     <ScrollAreaPrimitive.Scrollbar
       className={scrollAreaScrollbarVariants({ className, orientation, size })}
+      data-orientation={orientation}
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
-        className={cn("relative flex-1", "rounded-full", "bg-border")}
+        className="relative flex-1 rounded-full bg-border"
+        data-slot="scroll-area-thumb"
       />
     </ScrollAreaPrimitive.Scrollbar>
   );

package/src/components/select.tsx

@@ -1,12 +1,8 @@
-"use client";
-
-import type { VariantProps } from "#/lib/utils";
-import { cn } from "#/lib/utils";
-import type { ComponentProps, JSX } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
 
-import { buttonVariants } from "#/variants/button";
+import { cn } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Select
@@ -36,8 +32,8 @@ type SelectGroupProps = ComponentProps<typeof SelectPrimitive.Group>;
 /**
  * @since 0.3.16-canary.0
  */
-function SelectGroup({ ...props }: SelectGroupProps): JSX.Element {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+function SelectGroup({ className, ...props }: SelectGroupProps): JSX.Element {
+  return <SelectPrimitive.Group className={cn("scroll-my-1 p-1", className)} data-slot="select-group" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -64,30 +60,26 @@ function SelectValue({ ...props }: SelectValueProps): JSX.Element {
  * @since 0.3.16-canary.0
  */
 interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
-  size?: VariantProps<typeof buttonVariants>["size"];
+  size?: "default" | "sm";
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function SelectTrigger({ children, className, size, ...props }: SelectTriggerProps): JSX.Element {
+function SelectTrigger({ children, className, size = "default", ...props }: SelectTriggerProps): JSX.Element {
   return (
     <SelectPrimitive.Trigger
-      className={buttonVariants({
-        className: [
-          "[&_svg:not([class*='text-'])]:text-muted-foreground focus:ring-ring/50 focus:border-ring w-fit justify-between px-3 font-normal focus:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:truncate",
-          className,
-        ],
-        size,
-        variant: "outline",
-      })}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       data-size={size}
       data-slot="select-trigger"
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon asChild className={cn("size-4 shrink-0", "opacity-50")}>
-        <ChevronDownIcon />
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -108,11 +100,14 @@ type SelectScrollUpButtonProps = ComponentProps<typeof SelectPrimitive.ScrollUpB
 function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): JSX.Element {
   return (
     <SelectPrimitive.ScrollUpButton
-      className={cn("flex items-center justify-center", "py-1", "text-muted-foreground", className)}
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       data-slot="select-scroll-up-button"
       {...props}
     >
-      <ChevronUpIcon size={16} />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -132,11 +127,14 @@ type SelectScrollDownButtonProps = ComponentProps<typeof SelectPrimitive.ScrollD
 function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): JSX.Element {
   return (
     <SelectPrimitive.ScrollDownButton
-      className={cn("flex items-center justify-center", "py-1", "text-muted-foreground", className)}
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       data-slot="select-scroll-down-button"
       {...props}
     >
-      <ChevronDownIcon size={16} />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownButton>
   );
 }
@@ -154,35 +152,23 @@ type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content>;
  * @since 0.3.16-canary.0
  */
 function SelectContent({
+  align = "center",
   children,
   className,
   position = "item-aligned",
   ...props
 }: SelectContentProps): JSX.Element {
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal data-slot="select-portal">
       <SelectPrimitive.Content
+        align={align}
         className={cn(
-          "relative z-50",
-          "max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-select-content-transform-origin)",
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-[align-trigger=true]:animate-none data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
           position === "popper" &&
-            "data-side-top:-translate-y-1 data-side-right:translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1",
+            "data-side-top:-translate-y-1 data-side-right:translate-x-1 rtl:data-side-right:-translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1 rtl:data-side-left:translate-x-1",
           className,
         )}
+        data-align-trigger={position === "item-aligned"}
         data-slot="select-content"
         position={position}
         {...props}
@@ -190,10 +176,10 @@ function SelectContent({
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && "",
           )}
+          data-position={position}
         >
           {children}
         </SelectPrimitive.Viewport>
@@ -218,7 +204,7 @@ type SelectLabelProps = ComponentProps<typeof SelectPrimitive.Label>;
 function SelectLabel({ className, ...props }: SelectLabelProps): JSX.Element {
   return (
     <SelectPrimitive.Label
-      className={cn("flex items-center gap-x-2", "px-2 py-1.5", "text-sm font-semibold", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       data-slot="select-label"
       {...props}
     />
@@ -241,24 +227,15 @@ function SelectItem({ children, className, ...props }: SelectItemProps): JSX.Ele
   return (
     <SelectPrimitive.Item
       className={cn(
-        "relative flex w-full items-center py-1.5 pr-8 pl-2",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80",
-        "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       data-slot="select-item"
       {...props}
     >
-      <span className={cn("absolute flex items-center justify-center", "right-2")}>
+      <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -281,7 +258,7 @@ type SelectSeparatorProps = ComponentProps<typeof SelectPrimitive.Separator>;
 function SelectSeparator({ className, ...props }: SelectSeparatorProps): JSX.Element {
   return (
     <SelectPrimitive.Separator
-      className={cn("mx-2 my-1 h-px", "bg-border", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       data-slot="select-separator"
       {...props}
     />

package/src/components/separator.tsx

@@ -1,12 +1,9 @@
-"use client";
-
-import type { SeparatorVariants } from "#/variants/separator";
+import { Separator as SeparatorPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-
+import type { SeparatorVariants } from "#/variants/separator";
 import { separatorVariants } from "#/variants/separator";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 /* -----------------------------------------------------------------------------
  * Component: Separator
@@ -21,13 +18,7 @@ interface SeparatorProps
 /**
  * @since 0.3.16-canary.0
  */
-function Separator({
-  align,
-  className,
-  decorative = true,
-  orientation,
-  ...props
-}: SeparatorProps): JSX.Element {
+function Separator({ align, className, decorative = true, orientation, ...props }: SeparatorProps): JSX.Element {
   return (
     <SeparatorPrimitive.Root
       className={separatorVariants({ align, className, orientation })}
@@ -54,12 +45,7 @@ type SeparatorItemProps = ComponentProps<"div">;
 function SeparatorItem({ className, ...props }: SeparatorItemProps): JSX.Element {
   return (
     <div
-      className={cn(
-        "absolute",
-        "mx-2 px-2",
-        "bg-background text-sm text-muted-foreground",
-        className,
-      )}
+      className={cn("absolute mx-2 bg-background px-2 text-sm text-muted-foreground", className)}
       data-slot="separator-item"
       {...props}
     />