@codefast/ui 0.0.9 → 0.0.11

package/src/select.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  CaretSortIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "./utils";
 
@@ -14,156 +9,153 @@ import { cn } from "./utils";
  * Component: Select
  * -------------------------------------------------------------------------- */
 
-type SelectProps = SelectPrimitive.SelectProps;
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
 const Select = SelectPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectGroup
  * -------------------------------------------------------------------------- */
 
-type SelectGroupProps = SelectPrimitive.SelectGroupProps;
+type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
 const SelectGroup = SelectPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectValue
  * -------------------------------------------------------------------------- */
 
-type SelectValueProps = SelectPrimitive.SelectValueProps;
+type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;
 const SelectValue = SelectPrimitive.Value;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectTrigger
  * -------------------------------------------------------------------------- */
 
-type SelectTriggerProps = SelectPrimitive.SelectTriggerProps;
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "border-input placeholder:text-muted-foreground focus:ring-offset-background focus:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="size-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
+type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
+type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+
+const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <CaretSortIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  ),
+);
+
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectScrollUpButton
  * -------------------------------------------------------------------------- */
 
-type SelectScrollUpButtonProps = SelectPrimitive.SelectScrollUpButtonProps;
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  SelectScrollUpButtonProps
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUpIcon />
-  </SelectPrimitive.ScrollUpButton>
-));
+type SelectScrollUpButtonElement = React.ElementRef<typeof SelectPrimitive.ScrollUpButton>;
+type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>;
+
+const SelectScrollUpButton = React.forwardRef<SelectScrollUpButtonElement, SelectScrollUpButtonProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  ),
+);
+
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectScrollDownButton
  * -------------------------------------------------------------------------- */
 
-type SelectScrollDownButtonProps = SelectPrimitive.SelectScrollDownButtonProps;
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  SelectScrollDownButtonProps
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+type SelectScrollDownButtonElement = React.ElementRef<typeof SelectPrimitive.ScrollDownButton>;
+type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>;
+
+const SelectScrollDownButton = React.forwardRef<SelectScrollDownButtonElement, SelectScrollDownButtonProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  ),
+);
+
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectContent
  * -------------------------------------------------------------------------- */
 
-type SelectContentProps = SelectPrimitive.SelectContentProps;
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  SelectContentProps
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
+type SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;
+type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+
+const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
+  ({ className, children, position = "popper", ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
         className={cn(
-          "p-1",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
         )}
+        position={position}
+        {...props}
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  ),
+);
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectLabel
  * -------------------------------------------------------------------------- */
 
-type SelectLabelProps = SelectPrimitive.SelectLabelProps;
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  SelectLabelProps
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
+type SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
+type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
+
+const SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
 ));
+
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectItem
  * -------------------------------------------------------------------------- */
 
-type SelectItemProps = SelectPrimitive.SelectItemProps;
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  SelectItemProps
->(({ className, children, ...props }, ref) => (
+type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
+type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
+
+const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -180,23 +172,22 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
+
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectSeparator
  * -------------------------------------------------------------------------- */
 
-type SelectSeparatorProps = SelectPrimitive.SelectSeparatorProps;
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  SelectSeparatorProps
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
+type SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;
+type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;
+
+const SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ),
+);
+
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 /* -----------------------------------------------------------------------------

package/src/separator.tsx

@@ -8,28 +8,21 @@ import { cn } from "./utils";
  * Component: Separator
  * -------------------------------------------------------------------------- */
 
-type SeparatorProps = SeparatorPrimitive.SeparatorProps;
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  SeparatorProps
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
+type SeparatorElement = React.ElementRef<typeof SeparatorPrimitive.Root>;
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+
+const Separator = React.forwardRef<SeparatorElement, SeparatorProps>(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
       orientation={orientation}
-      className={cn(
-        "bg-border shrink-0",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className,
-      )}
+      className={cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
       {...props}
     />
   ),
 );
+
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------

package/src/sheet.tsx

@@ -33,55 +33,54 @@ type SheetVariantsProps = VariantProps<typeof sheetVariants>;
  * Component: Sheet
  * -------------------------------------------------------------------------- */
 
-type SheetProps = SheetPrimitive.DialogProps;
+type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
 const Sheet = SheetPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetTrigger
  * -------------------------------------------------------------------------- */
 
-type SheetTriggerProps = SheetPrimitive.DialogTriggerProps;
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>;
 const SheetTrigger = SheetPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetClose
  * -------------------------------------------------------------------------- */
 
-type SheetCloseProps = SheetPrimitive.DialogCloseProps;
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>;
 const SheetClose = SheetPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetContent
  * -------------------------------------------------------------------------- */
 
-type SheetContentProps = SheetPrimitive.DialogContentProps & SheetVariantsProps;
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPrimitive.Portal>
-    <SheetPrimitive.Overlay
-      className={cn(
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
-      )}
-    />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close
+type SheetContentElement = React.ElementRef<typeof SheetPrimitive.Content>;
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & SheetVariantsProps;
+
+const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPrimitive.Portal>
+      <SheetPrimitive.Overlay
         className={cn(
-          "focus:ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
         )}
-      >
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPrimitive.Portal>
-));
+      />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close
+          className={cn(
+            "data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          )}
+        >
+          <Cross2Icon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPrimitive.Portal>
+  ),
+);
+
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
@@ -89,19 +88,9 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
  * -------------------------------------------------------------------------- */
 
 type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-function SheetHeader({
-  className,
-  ...props
-}: SheetHeaderProps): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        "flex flex-col space-y-2 text-center sm:text-left",
-        className,
-      )}
-      {...props}
-    />
-  );
+
+function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Element {
+  return <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -109,54 +98,39 @@ function SheetHeader({
  * -------------------------------------------------------------------------- */
 
 type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
-function SheetFooter({
-  className,
-  ...props
-}: SheetFooterProps): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-        className,
-      )}
-      {...props}
-    />
-  );
+
+function SheetFooter({ className, ...props }: SheetFooterProps): React.JSX.Element {
+  return <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />;
 }
+
 SheetFooter.displayName = "SheetFooter";
 
 /* -----------------------------------------------------------------------------
  * Component: SheetTitle
  * -------------------------------------------------------------------------- */
 
-type SheetTitleProps = SheetPrimitive.DialogTitleProps;
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  SheetTitleProps
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
+type SheetTitleElement = React.ElementRef<typeof SheetPrimitive.Title>;
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>;
+
+const SheetTitle = React.forwardRef<SheetTitleElement, SheetTitleProps>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn("text-foreground text-lg font-semibold", className)} {...props} />
 ));
+
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetDescription
  * -------------------------------------------------------------------------- */
 
-type SheetDescriptionProps = SheetPrimitive.DialogDescriptionProps;
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  SheetDescriptionProps
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
+type SheetDescriptionElement = React.ElementRef<typeof SheetPrimitive.Description>;
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>;
+
+const SheetDescription = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <SheetPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 /* -----------------------------------------------------------------------------

package/src/skeleton.tsx

@@ -6,13 +6,9 @@ import { cn } from "./utils";
  * -------------------------------------------------------------------------- */
 
 type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
 function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element {
-  return (
-    <div
-      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
+  return <div className={cn("bg-primary/10 animate-pulse rounded-md", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/slider.tsx

@@ -8,25 +8,27 @@ import { cn } from "./utils";
  * Component: Slider
  * -------------------------------------------------------------------------- */
 
-type SliderProps = SliderPrimitive.SliderProps;
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(({ className, ...props }, ref) => (
+type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
+
+const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className,
-    )}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}
   >
     <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
       <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring focus-visible:ring-offset-background block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb
+      className={cn(
+        "border-primary/50 bg-background block size-4 rounded-full border shadow transition-colors disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      )}
+    />
   </SliderPrimitive.Root>
 ));
+
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------

package/src/sonner.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { useTheme } from "next-themes";
 import { toast, Toaster as Sonner } from "sonner";
-import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Sonner
@@ -21,14 +20,11 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
       className="toaster group"
       toastOptions={{
         classNames: {
-          toast: cn(
+          toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          ),
           description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}