@codefast/ui 0.0.50 → 0.0.52

package/src/react/radio-group.tsx

@@ -9,21 +9,11 @@ import { cn } from '../lib/utils';
  * -------------------------------------------------------------------------- */
 
 type RadioGroupElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
-type RadioGroupProps = React.ComponentPropsWithoutRef<
-  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}
-      />
-    );
-  },
-);
+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;
 
@@ -32,14 +22,9 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
  * -------------------------------------------------------------------------- */
 
 type RadioGroupItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
-type RadioGroupItemProps = React.ComponentPropsWithoutRef<
-  typeof RadioGroupPrimitive.Item
->;
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
 
-const RadioGroupItem = React.forwardRef<
-  RadioGroupItemElement,
-  RadioGroupItemProps
->(({ className, ...props }, ref) => {
+const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
@@ -60,9 +45,4 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  RadioGroup,
-  RadioGroupItem,
-  type RadioGroupProps,
-  type RadioGroupItemProps,
-};
+export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps };

package/src/react/radio.tsx

@@ -14,24 +14,20 @@ 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(
-          'before:border-input hover:before:border-primary checked:before:border-primary checked:after:bg-primary peer relative flex appearance-none items-center justify-center rounded-full before:size-4 before:rounded-full before:border checked:after:absolute checked:after:size-2.5 checked:after:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
+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(
+        'before:border-input hover:before:border-primary checked:before:border-primary checked:after:bg-primary peer relative flex appearance-none items-center justify-center rounded-full before:size-4 before:rounded-full before:border checked:after:absolute checked:after:size-2.5 checked:after:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 
 Radio.displayName = 'Radio';
 

package/src/react/resizable.tsx

@@ -12,15 +12,10 @@ import { cn } from '../lib/utils';
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<
-  typeof ResizablePrimitive.PanelGroup
->): React.JSX.Element {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React.JSX.Element {
   return (
     <ResizablePrimitive.PanelGroup
-      className={cn(
-        'flex size-full data-[panel-group-direction=vertical]:flex-col',
-        className,
-      )}
+      className={cn('flex size-full data-[panel-group-direction=vertical]:flex-col', className)}
       {...props}
     />
   );

package/src/react/scroll-area.tsx

@@ -9,26 +9,16 @@ import { cn } from '../lib/utils';
  * -------------------------------------------------------------------------- */
 
 type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Root>;
-type ScrollAreaProps = React.ComponentPropsWithoutRef<
-  typeof ScrollAreaPrimitive.Root
->;
-
-const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(
-  ({ children, className, ...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>
-  ),
-);
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>;
+
+const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(({ children, className, ...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;
 
@@ -36,33 +26,26 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
  * Component: ScrollAreaScrollbar
  * -------------------------------------------------------------------------- */
 
-type ScrollAreaScrollbarElement = React.ElementRef<
-  typeof ScrollAreaPrimitive.Scrollbar
->;
-type ScrollAreaScrollbarProps = React.ComponentPropsWithoutRef<
-  typeof 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',
-      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>
-));
+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',
+        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;
 
@@ -70,9 +53,4 @@ ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  ScrollArea,
-  ScrollAreaScrollbar,
-  type ScrollAreaProps,
-  type ScrollAreaScrollbarProps,
-};
+export { ScrollArea, ScrollAreaScrollbar, type ScrollAreaProps, type ScrollAreaScrollbarProps };

package/src/react/section.tsx

@@ -11,13 +11,11 @@ interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Section = React.forwardRef<SectionElement, SectionProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : 'section';
+const Section = React.forwardRef<SectionElement, SectionProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : 'section';
 
-    return <Component ref={ref} {...props} />;
-  },
-);
+  return <Component ref={ref} {...props} />;
+});
 
 Section.displayName = 'Section';
 

package/src/react/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 '../lib/utils';
 
@@ -21,18 +16,14 @@ const Select = SelectPrimitive.Root;
  * Component: SelectGroup
  * -------------------------------------------------------------------------- */
 
-type SelectGroupProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Group
->;
+type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
 const SelectGroup = SelectPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectValue
  * -------------------------------------------------------------------------- */
 
-type SelectValueProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Value
->;
+type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;
 const SelectValue = SelectPrimitive.Value;
 
 /* -----------------------------------------------------------------------------
@@ -40,28 +31,25 @@ const SelectValue = SelectPrimitive.Value;
  * -------------------------------------------------------------------------- */
 
 type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
-type SelectTriggerProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Trigger
->;
-
-const SelectTrigger = React.forwardRef<
-  SelectTriggerElement,
-  SelectTriggerProps
->(({ children, className, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:truncate',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="size-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
+type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+
+const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
+  ({ children, className, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:truncate',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <CaretSortIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  ),
+);
 
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
@@ -69,28 +57,20 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
  * Component: SelectScrollUpButton
  * -------------------------------------------------------------------------- */
 
-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-pointer 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-pointer items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  ),
+);
 
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
@@ -98,71 +78,59 @@ SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
  * Component: SelectScrollDownButton
  * -------------------------------------------------------------------------- */
 
-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-pointer items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-));
+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-pointer items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  ),
+);
 
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SelectContent
  * -------------------------------------------------------------------------- */
 
 type SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;
-type SelectContentProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Content
->;
-
-const SelectContent = React.forwardRef<
-  SelectContentElement,
-  SelectContentProps
->(({ children, className, 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 data-[state=open]:fade-in 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-32 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 SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+
+const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
+  ({ children, className, 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 data-[state=open]:fade-in 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-32 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;
 
@@ -171,19 +139,11 @@ SelectContent.displayName = SelectPrimitive.Content.displayName;
  * -------------------------------------------------------------------------- */
 
 type SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
-type SelectLabelProps = React.ComponentPropsWithoutRef<
-  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}
-    />
-  ),
-);
+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;
 
@@ -192,29 +152,25 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
  * -------------------------------------------------------------------------- */
 
 type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
-type SelectItemProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Item
->;
+type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
 
-const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(
-  ({ children, className, ...props }, ref) => (
-    <SelectPrimitive.Item
-      ref={ref}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  ),
-);
+const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
 
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
@@ -222,23 +178,14 @@ SelectItem.displayName = SelectPrimitive.Item.displayName;
  * Component: SelectSeparator
  * -------------------------------------------------------------------------- */
 
-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}
-  />
-));
+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/react/separator.tsx

@@ -9,24 +9,15 @@ import { cn } from '../lib/utils';
  * -------------------------------------------------------------------------- */
 
 type SeparatorElement = React.ElementRef<typeof SeparatorPrimitive.Root>;
-type SeparatorProps = React.ComponentPropsWithoutRef<
-  typeof SeparatorPrimitive.Root
->;
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
 
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref,
-  ) => (
+  ({ 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}
     />
   ),