@codefast/ui 0.0.9 → 0.0.10

package/src/radio-group.tsx

@@ -8,35 +8,29 @@ import { cn } from "./utils";
  * Component: RadioGroup
  * -------------------------------------------------------------------------- */
 
-type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
+type RadioGroupElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
+type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+
+const RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
 });
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: RadioGroupItem
  * -------------------------------------------------------------------------- */
 
-type RadioGroupItemProps = RadioGroupPrimitive.RadioGroupItemProps;
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupItemProps
->(({ className, ...props }, ref) => {
+type RadioGroupItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+
+const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-compound text-compound-foreground focus-visible:ring-offset-background focus-visible:ring-ring aria-checked:border-primary group aspect-square size-4 rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         className,
       )}
       {...props}
@@ -49,15 +43,11 @@ const RadioGroupItem = React.forwardRef<
     </RadioGroupPrimitive.Item>
   );
 });
+
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  RadioGroup,
-  RadioGroupItem,
-  type RadioGroupProps,
-  type RadioGroupItemProps,
-};
+export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps };

package/src/radio.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Radio
+ * -------------------------------------------------------------------------- */
+
+type RadioElement = HTMLInputElement;
+
+interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onValueChange?: (value: string) => void;
+}
+
+const Radio = React.forwardRef<RadioElement, RadioProps>(({ className, onValueChange, onChange, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      type="radio"
+      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
+      className={cn(
+        "peer relative flex appearance-none items-center justify-center rounded-full",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "before:border-compound/70 before:size-4 before:rounded-full before:border",
+        "hover:before:border-compound",
+        "checked:before:border-primary",
+        "checked:after:bg-primary checked:after:absolute checked:after:size-2.5 checked:after:rounded-full",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+Radio.displayName = "Radio";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Radio };

package/src/resizable.tsx

@@ -12,13 +12,10 @@ import { cn } from "./utils";
 function ResizablePanelGroup({
   className,
   ...props
-}: ResizablePrimitive.PanelGroupProps): React.JSX.Element {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React.JSX.Element {
   return (
     <ResizablePrimitive.PanelGroup
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
+      className={cn("flex h-full w-full", "data-[panel-group-direction=vertical]:flex-col", className)}
       {...props}
     />
   );
@@ -38,13 +35,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: ResizablePrimitive.PanelResizeHandleProps & {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean;
 }): React.JSX.Element {
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "bg-border focus-visible:ring-ring focus-visible:ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         className,
       )}
       {...props}

package/src/scroll-area.tsx

@@ -8,60 +8,49 @@ import { cn } from "./utils";
  * Component: ScrollArea
  * -------------------------------------------------------------------------- */
 
-type ScrollAreaProps = ScrollAreaPrimitive.ScrollAreaProps;
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaProps
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Root>;
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>;
+
+const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
     <ScrollAreaScrollbar orientation="vertical" />
     <ScrollAreaScrollbar orientation="horizontal" />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
+
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ScrollAreaScrollbar
  * -------------------------------------------------------------------------- */
 
-type ScrollAreaScrollbarProps = ScrollAreaPrimitive.ScrollAreaScrollbarProps;
-const ScrollAreaScrollbar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
-  ScrollAreaScrollbarProps
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.Scrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-px",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
-  </ScrollAreaPrimitive.Scrollbar>
-));
+type ScrollAreaScrollbarElement = React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>;
+type ScrollAreaScrollbarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>;
+
+const ScrollAreaScrollbar = React.forwardRef<ScrollAreaScrollbarElement, ScrollAreaScrollbarProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.Scrollbar
+      ref={ref}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+    </ScrollAreaPrimitive.Scrollbar>
+  ),
+);
+
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  ScrollArea,
-  ScrollAreaScrollbar,
-  type ScrollAreaProps,
-  type ScrollAreaScrollbarProps,
-};
+export { ScrollArea, ScrollAreaScrollbar, type ScrollAreaProps, type ScrollAreaScrollbarProps };

package/src/section.tsx

@@ -5,16 +5,18 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Section
  * -------------------------------------------------------------------------- */
 
+type SectionElement = HTMLElement;
+
 interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
-const Section = React.forwardRef<HTMLElement, SectionProps>(
-  ({ asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : "section";
 
-    return <Comp ref={ref} {...props} />;
-  },
-);
+const Section = React.forwardRef<SectionElement, SectionProps>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "section";
+
+  return <Comp ref={ref} {...props} />;
+});
+
 Section.displayName = "Section";
 
 /* -----------------------------------------------------------------------------

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;
 
 /* -----------------------------------------------------------------------------