@codefast/ui 0.0.64 → 0.0.66

package/src/react/progress.tsx

@@ -11,9 +11,9 @@ import { cn } from '../lib/utils';
 type ProgressElement = React.ElementRef<typeof ProgressPrimitive.Root>;
 type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>;
 
-const Progress = React.forwardRef<ProgressElement, ProgressProps>(({ className, value, ...props }, ref) => (
+const Progress = React.forwardRef<ProgressElement, ProgressProps>(({ className, value, ...props }, forwardedRef) => (
   <ProgressPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
     {...props}
   >

package/src/react/quote.tsx

@@ -11,10 +11,10 @@ interface QuoteProps extends React.QuoteHTMLAttributes<HTMLQuoteElement> {
   asChild?: boolean;
 }
 
-const Quote = React.forwardRef<QuoteElement, QuoteProps>(({ asChild, ...props }, ref) => {
+const Quote = React.forwardRef<QuoteElement, QuoteProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'q';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Quote.displayName = 'Quote';

package/src/react/radio-cards.tsx

@@ -11,8 +11,8 @@ import { cn } from '../lib/utils';
 type RadioCardsElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
 type RadioCardsProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
 
-const RadioCards = React.forwardRef<RadioCardsElement, RadioCardsProps>(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+const RadioCards = React.forwardRef<RadioCardsElement, RadioCardsProps>(({ className, ...props }, forwardedRef) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={forwardedRef} />;
 });
 
 RadioCards.displayName = RadioGroupPrimitive.Root.displayName;
@@ -24,18 +24,20 @@ RadioCards.displayName = RadioGroupPrimitive.Root.displayName;
 type RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
 type RadioCardsItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
 
-const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'text-foreground focus-visible:bg-primary/10 group peer flex cursor-pointer items-center justify-center rounded-md border p-4 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-checked:outline aria-checked:outline-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
+const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(
+  ({ className, ...props }, forwardedRef) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={forwardedRef}
+        className={cn(
+          'text-foreground focus-visible:bg-primary/10 group peer flex cursor-pointer items-center justify-center rounded-md border p-4 focus-visible:outline focus-visible:outline-2 disabled:cursor-default disabled:opacity-50 aria-checked:outline aria-checked:outline-2',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 
 RadioCardsItem.displayName = RadioGroupPrimitive.Item.displayName;
 

package/src/react/radio-group.tsx

@@ -11,8 +11,8 @@ import { cn } from '../lib/utils';
 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} />;
+const RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(({ className, ...props }, forwardedRef) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={forwardedRef} />;
 });
 
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
@@ -24,20 +24,22 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 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-input hover:border-primary text-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex size-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
-    </RadioGroupPrimitive.Item>
-  );
-});
+const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(
+  ({ className, ...props }, forwardedRef) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={forwardedRef}
+        className={cn(
+          'border-input hover:border-primary text-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex size-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
+      </RadioGroupPrimitive.Item>
+    );
+  },
+);
 
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 

package/src/react/radio.tsx

@@ -14,20 +14,22 @@ 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}
-      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,
-      )}
-      type="radio"
-      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
-      {...props}
-    />
-  );
-});
+const Radio = React.forwardRef<RadioElement, RadioProps>(
+  ({ className, onValueChange, onChange, ...props }, forwardedRef) => {
+    return (
+      <input
+        ref={forwardedRef}
+        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,
+        )}
+        type="radio"
+        onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
+        {...props}
+      />
+    );
+  },
+);
 
 Radio.displayName = 'Radio';
 

package/src/react/scroll-area.tsx

@@ -24,9 +24,9 @@ type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Root>;
 type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue;
 
 const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(
-  ({ __scopeScrollArea, children, className, size = '2', ...props }: ScopedProps<ScrollAreaProps>, ref) => (
+  ({ __scopeScrollArea, children, className, size = '2', ...props }: ScopedProps<ScrollAreaProps>, forwardedRef) => (
     <CarouselProvider scope={__scopeScrollArea} size={size}>
-      <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+      <ScrollAreaPrimitive.Root ref={forwardedRef} className={cn('relative overflow-hidden', className)} {...props}>
         <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit] [&>*]:h-full">
           {children}
         </ScrollAreaPrimitive.Viewport>
@@ -80,13 +80,13 @@ type ScrollAreaScrollbarProps = React.ComponentPropsWithoutRef<typeof ScrollArea
 const ScrollAreaScrollbar = React.forwardRef<ScrollAreaScrollbarElement, ScrollAreaScrollbarProps>(
   (
     { __scopeScrollArea, className, orientation = 'vertical', ...props }: ScopedProps<ScrollAreaScrollbarProps>,
-    ref,
+    forwardedRef,
   ) => {
     const { size } = useCarouselContext(SCROLL_AREA_NAME, __scopeScrollArea);
 
     return (
       <ScrollAreaPrimitive.Scrollbar
-        ref={ref}
+        ref={forwardedRef}
         className={scrollAreaScrollbarVariants({ orientation, size, className })}
         orientation={orientation}
         {...props}

package/src/react/section.tsx

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

package/src/react/select.tsx

@@ -34,11 +34,11 @@ type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
 type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
 
 const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <SelectPrimitive.Trigger
-      ref={ref}
+      ref={forwardedRef}
       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',
+        '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-default disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:truncate',
         className,
       )}
       {...props}
@@ -61,9 +61,9 @@ type SelectScrollUpButtonElement = React.ElementRef<typeof SelectPrimitive.Scrol
 type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>;
 
 const SelectScrollUpButton = React.forwardRef<SelectScrollUpButtonElement, SelectScrollUpButtonProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <SelectPrimitive.ScrollUpButton
-      ref={ref}
+      ref={forwardedRef}
       className={cn('flex cursor-pointer items-center justify-center py-1', className)}
       {...props}
     >
@@ -82,9 +82,9 @@ type SelectScrollDownButtonElement = React.ElementRef<typeof SelectPrimitive.Scr
 type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>;
 
 const SelectScrollDownButton = React.forwardRef<SelectScrollDownButtonElement, SelectScrollDownButtonProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <SelectPrimitive.ScrollDownButton
-      ref={ref}
+      ref={forwardedRef}
       className={cn('flex cursor-pointer items-center justify-center py-1', className)}
       {...props}
     >
@@ -103,10 +103,10 @@ 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) => (
+  ({ children, className, position = 'popper', ...props }, forwardedRef) => (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         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' &&
@@ -141,8 +141,8 @@ SelectContent.displayName = SelectPrimitive.Content.displayName;
 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} />
+const SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(({ className, ...props }, forwardedRef) => (
+  <SelectPrimitive.Label ref={forwardedRef} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
 ));
 
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
@@ -154,23 +154,25 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 type SelectItemElement = React.ElementRef<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 }, forwardedRef) => (
+    <SelectPrimitive.Item
+      ref={forwardedRef}
+      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;
 
@@ -182,8 +184,8 @@ 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} />
+  ({ className, ...props }, forwardedRef) => (
+    <SelectPrimitive.Separator ref={forwardedRef} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
   ),
 );
 

package/src/react/separator.tsx

@@ -12,9 +12,9 @@ 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) => (
+  ({ className, orientation = 'horizontal', decorative = true, ...props }, forwardedRef) => (
     <SeparatorPrimitive.Root
-      ref={ref}
+      ref={forwardedRef}
       className={cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className)}
       decorative={decorative}
       orientation={orientation}

package/src/react/sheet.tsx

@@ -58,10 +58,10 @@ type SheetContentElement = React.ElementRef<typeof SheetPrimitive.Content>;
 type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & SheetContentVariantsProps;
 
 const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
-  ({ children, side = 'right', className, ...props }, ref) => (
+  ({ children, side = 'right', className, ...props }, forwardedRef) => (
     <SheetPrimitive.Portal>
       <SheetPrimitive.Overlay className="data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
-      <SheetPrimitive.Content ref={ref} className={sheetContentVariants({ side, className })} {...props}>
+      <SheetPrimitive.Content ref={forwardedRef} className={sheetContentVariants({ side, className })} {...props}>
         {children}
         <SheetPrimitive.Close className="data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm p-1 opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
           <Cross2Icon className="size-4" />
@@ -108,7 +108,7 @@ type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function SheetFooter({ className, ...props }: SheetFooterProps): React.JSX.Element {
   return (
     <footer
-      className={cn('flex shrink-0 flex-col-reverse px-6 pb-6 pt-4 sm:flex-row sm:justify-end sm:space-x-2', className)}
+      className={cn('flex shrink-0 flex-col-reverse gap-2 px-6 pb-6 pt-4 sm:flex-row sm:justify-end', className)}
       {...props}
     />
   );
@@ -123,8 +123,12 @@ SheetFooter.displayName = 'SheetFooter';
 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} />
+const SheetTitle = React.forwardRef<SheetTitleElement, SheetTitleProps>(({ className, ...props }, forwardedRef) => (
+  <SheetPrimitive.Title
+    ref={forwardedRef}
+    className={cn('text-foreground text-lg font-semibold', className)}
+    {...props}
+  />
 ));
 
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
@@ -137,8 +141,12 @@ type SheetDescriptionElement = React.ElementRef<typeof SheetPrimitive.Descriptio
 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} />
+  ({ className, ...props }, forwardedRef) => (
+    <SheetPrimitive.Description
+      ref={forwardedRef}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
   ),
 );
 

package/src/react/slider.tsx

@@ -11,9 +11,9 @@ import { cn } from '../lib/utils';
 type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
 type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
 
-const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...props }, ref) => (
+const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...props }, forwardedRef) => (
   <SliderPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn('relative flex w-full touch-none select-none items-center', className)}
     {...props}
   >

package/src/react/spinner.tsx

@@ -15,14 +15,14 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
-  ({ children, className, loading = true, ...props }, ref) => {
+  ({ children, className, loading = true, ...props }, forwardedRef) => {
     if (!loading) {
       return children;
     }
 
     const spinner = (
       <span
-        ref={ref}
+        ref={forwardedRef}
         className={cn('relative flex size-4 items-center justify-center opacity-60', className)}
         {...props}
       >

package/src/react/strong.tsx

@@ -11,10 +11,10 @@ interface StrongProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Strong = React.forwardRef<StrongElement, StrongProps>(({ asChild, ...props }, ref) => {
+const Strong = React.forwardRef<StrongElement, StrongProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'strong';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Strong.displayName = 'Strong';

package/src/react/switch.tsx

@@ -11,14 +11,14 @@ import { cn } from '../lib/utils';
 type SwitchElement = React.ElementRef<typeof SwitchPrimitives.Root>;
 type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
 
-const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, ref) => (
+const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, forwardedRef) => (
   <SwitchPrimitives.Root
     className={cn(
-      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50',
       className,
     )}
     {...props}
-    ref={ref}
+    ref={forwardedRef}
   >
     <SwitchPrimitives.Thumb className="bg-background pointer-events-none block size-4 rounded-full shadow-lg transition data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" />
   </SwitchPrimitives.Root>

package/src/react/table.tsx

@@ -8,9 +8,9 @@ import { cn } from '../lib/utils';
 type TableElement = HTMLTableElement;
 type TableProps = React.HTMLAttributes<HTMLTableElement>;
 
-const Table = React.forwardRef<TableElement, TableProps>(({ className, ...props }, ref) => (
+const Table = React.forwardRef<TableElement, TableProps>(({ className, ...props }, forwardedRef) => (
   <div className="relative w-full overflow-auto">
-    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    <table ref={forwardedRef} className={cn('w-full caption-bottom text-sm', className)} {...props} />
   </div>
 ));
 
@@ -23,8 +23,8 @@ Table.displayName = 'Table';
 type TableHeaderElement = HTMLTableSectionElement;
 type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-const TableHeader = React.forwardRef<TableHeaderElement, TableHeaderProps>(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+const TableHeader = React.forwardRef<TableHeaderElement, TableHeaderProps>(({ className, ...props }, forwardedRef) => (
+  <thead ref={forwardedRef} className={cn('[&_tr]:border-b', className)} {...props} />
 ));
 
 TableHeader.displayName = 'TableHeader';
@@ -36,8 +36,8 @@ TableHeader.displayName = 'TableHeader';
 type TableBodyElement = HTMLTableSectionElement;
 type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-const TableBody = React.forwardRef<TableBodyElement, TableBodyProps>(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+const TableBody = React.forwardRef<TableBodyElement, TableBodyProps>(({ className, ...props }, forwardedRef) => (
+  <tbody ref={forwardedRef} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
 ));
 
 TableBody.displayName = 'TableBody';
@@ -49,8 +49,12 @@ TableBody.displayName = 'TableBody';
 type TableFooterElement = HTMLTableSectionElement;
 type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-const TableFooter = React.forwardRef<TableFooterElement, TableFooterProps>(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />
+const TableFooter = React.forwardRef<TableFooterElement, TableFooterProps>(({ className, ...props }, forwardedRef) => (
+  <tfoot
+    ref={forwardedRef}
+    className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
 ));
 
 TableFooter.displayName = 'TableFooter';
@@ -62,9 +66,9 @@ TableFooter.displayName = 'TableFooter';
 type TableRowElement = HTMLTableRowElement;
 type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
 
-const TableRow = React.forwardRef<TableRowElement, TableRowProps>(({ className, ...props }, ref) => (
+const TableRow = React.forwardRef<TableRowElement, TableRowProps>(({ className, ...props }, forwardedRef) => (
   <tr
-    ref={ref}
+    ref={forwardedRef}
     className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition', className)}
     {...props}
   />
@@ -79,9 +83,9 @@ TableRow.displayName = 'TableRow';
 type TableHeadElement = HTMLTableCellElement;
 type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
 
-const TableHead = React.forwardRef<TableHeadElement, TableHeadProps>(({ className, ...props }, ref) => (
+const TableHead = React.forwardRef<TableHeadElement, TableHeadProps>(({ className, ...props }, forwardedRef) => (
   <th
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
       className,
@@ -99,8 +103,8 @@ TableHead.displayName = 'TableHead';
 type TableCellElement = HTMLTableCellElement;
 type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
 
-const TableCell = React.forwardRef<TableCellElement, TableCellProps>(({ className, ...props }, ref) => (
-  <td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+const TableCell = React.forwardRef<TableCellElement, TableCellProps>(({ className, ...props }, forwardedRef) => (
+  <td ref={forwardedRef} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
 ));
 
 TableCell.displayName = 'TableCell';
@@ -112,9 +116,11 @@ TableCell.displayName = 'TableCell';
 type TableCaptionElement = HTMLTableCaptionElement;
 type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
 
-const TableCaption = React.forwardRef<TableCaptionElement, TableCaptionProps>(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
-));
+const TableCaption = React.forwardRef<TableCaptionElement, TableCaptionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <caption ref={forwardedRef} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
+  ),
+);
 
 TableCaption.displayName = 'TableCaption';
 

package/src/react/tabs.tsx

@@ -18,9 +18,9 @@ const Tabs = TabsPrimitive.Root;
 type TabsListElement = React.ElementRef<typeof TabsPrimitive.List>;
 type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 
-const TabsList = React.forwardRef<TabsListElement, TabsListProps>(({ className, ...props }, ref) => (
+const TabsList = React.forwardRef<TabsListElement, TabsListProps>(({ className, ...props }, forwardedRef) => (
   <TabsPrimitive.List
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center gap-1 rounded-md p-1',
       className,
@@ -38,9 +38,9 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 type TabsTriggerElement = React.ElementRef<typeof TabsPrimitive.Trigger>;
 type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
 
-const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(({ className, ...props }, ref) => (
+const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(({ className, ...props }, forwardedRef) => (
   <TabsPrimitive.Trigger
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium outline-transparent transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
       className,
@@ -58,9 +58,9 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 type TabsContentElement = React.ElementRef<typeof TabsPrimitive.Content>;
 type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 
-const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(({ className, ...props }, ref) => (
+const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(({ className, ...props }, forwardedRef) => (
   <TabsPrimitive.Content
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'mt-2 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
       className,

package/src/react/text-input.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import * as React from 'react';
+import { Input, type InputProps, InputSlot, type InputSlotProps } from './input';
+
+/* -----------------------------------------------------------------------------
+ * Component: TextInput
+ * -------------------------------------------------------------------------- */
+
+type TextInputElement = HTMLInputElement;
+interface TextInputProps extends InputProps, Omit<InputSlotProps, 'prefix'> {}
+
+const TextInput = React.forwardRef<TextInputElement, TextInputProps>(
+  ({ className, loading, loaderPosition, prefix, suffix, inputSize, ...props }, ref) => {
+    return (
+      <Input
+        className={className}
+        inputSize={inputSize}
+        loaderPosition={loaderPosition}
+        loading={loading}
+        prefix={prefix}
+        suffix={suffix}
+      >
+        <InputSlot ref={ref} {...props} />
+      </Input>
+    );
+  },
+);
+
+TextInput.displayName = 'TextInput';
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { TextInput, type TextInputProps };

package/src/react/text.tsx

@@ -19,10 +19,10 @@ type TextProps = (TextParagraphProps | TextSpanProps) & {
   asChild?: boolean;
 };
 
-const Text = React.forwardRef<TextElement, TextProps>(({ as: Tag = 'p', asChild, ...props }, ref) => {
+const Text = React.forwardRef<TextElement, TextProps>(({ as: Tag = 'p', asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : Tag;
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Text.displayName = 'Text';