@codefast/ui 0.0.50 → 0.0.53

package/src/react/sheet.tsx

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
-import { type VariantProps } from 'cva';
 import { cn, cva } from '../lib/utils';
+import type { VariantProps } from 'cva';
 
 /* -----------------------------------------------------------------------------
  * Variant: Sheet
@@ -40,18 +40,14 @@ const Sheet = SheetPrimitive.Root;
  * Component: SheetTrigger
  * -------------------------------------------------------------------------- */
 
-type SheetTriggerProps = React.ComponentPropsWithoutRef<
-  typeof SheetPrimitive.Trigger
->;
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>;
 const SheetTrigger = SheetPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetClose
  * -------------------------------------------------------------------------- */
 
-type SheetCloseProps = React.ComponentPropsWithoutRef<
-  typeof SheetPrimitive.Close
->;
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>;
 const SheetClose = SheetPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
@@ -59,20 +55,13 @@ const SheetClose = SheetPrimitive.Close;
  * -------------------------------------------------------------------------- */
 
 type SheetContentElement = React.ElementRef<typeof SheetPrimitive.Content>;
-type SheetContentProps = React.ComponentPropsWithoutRef<
-  typeof SheetPrimitive.Content
-> &
-  SheetVariantsProps;
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & SheetVariantsProps;
 
 const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
   ({ children, side = 'right', className, ...props }, ref) => (
     <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={sheetVariants({ side, className })}
-        {...props}
-      >
+      <SheetPrimitive.Content ref={ref} className={sheetVariants({ side, className })} {...props}>
         {children}
         <SheetPrimitive.Close className="data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm 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" />
@@ -91,19 +80,8 @@ 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} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -112,19 +90,8 @@ 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';
@@ -134,19 +101,11 @@ SheetFooter.displayName = 'SheetFooter';
  * -------------------------------------------------------------------------- */
 
 type SheetTitleElement = React.ElementRef<typeof SheetPrimitive.Title>;
-type SheetTitleProps = React.ComponentPropsWithoutRef<
-  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 }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn('text-foreground text-lg font-semibold', className)} {...props} />
+));
 
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
@@ -154,23 +113,14 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName;
  * Component: SheetDescription
  * -------------------------------------------------------------------------- */
 
-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}
-  />
-));
+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/react/skeleton.tsx

@@ -8,12 +8,7 @@ import { cn } from '../lib/utils';
 type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
 
 function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element {
-  return (
-    <div
-      className={cn('bg-primary/10 animate-pulse rounded', className)}
-      {...props}
-    />
-  );
+  return <div className={cn('bg-primary/10 animate-pulse rounded', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/react/slider.tsx

@@ -11,33 +11,26 @@ 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) => (
-    <SliderPrimitive.Root
-      ref={ref}
-      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>
-
-      {(props.value ?? props.defaultValue ?? []).map((value, index) => (
-        <SliderPrimitive.Thumb
-          // eslint-disable-next-line react/no-array-index-key -- index is stable
-          key={index}
-          className="border-primary/50 bg-background block size-4 rounded-full border shadow transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
-          {...(props.tabIndex !== undefined
-            ? { tabIndex: props.tabIndex }
-            : undefined)}
-        />
-      ))}
-    </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)}
+    {...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>
+
+    {(props.value ?? props.defaultValue ?? []).map((value, index) => (
+      <SliderPrimitive.Thumb
+        // eslint-disable-next-line react/no-array-index-key -- index is stable
+        key={index}
+        className="border-primary/50 bg-background block size-4 rounded-full border shadow transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        {...(props.tabIndex !== undefined ? { tabIndex: props.tabIndex } : undefined)}
+      />
+    ))}
+  </SliderPrimitive.Root>
+));
 
 Slider.displayName = SliderPrimitive.Root.displayName;
 

package/src/react/sonner.tsx

@@ -23,10 +23,8 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
           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}

package/src/react/spinner.tsx

@@ -23,10 +23,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
     const spinner = (
       <span
         ref={ref}
-        className={cn(
-          'relative flex size-4 items-center justify-center opacity-60',
-          className,
-        )}
+        className={cn('relative flex size-4 items-center justify-center opacity-60', className)}
         {...props}
       >
         {Array.from({ length: spinnerCount }, (_, i) => (
@@ -56,9 +53,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
           {children}
         </span>
         <VisuallyHidden>{children}</VisuallyHidden>
-        <span className="absolute inset-0 flex items-center justify-center">
-          {spinner}
-        </span>
+        <span className="absolute inset-0 flex items-center justify-center">{spinner}</span>
       </span>
     );
   },

package/src/react/strong.tsx

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

package/src/react/switch.tsx

@@ -11,20 +11,18 @@ 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) => (
-    <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',
-        className,
-      )}
-      {...props}
-      ref={ref}
-    >
-      <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>
-  ),
-);
+const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, ref) => (
+  <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',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <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>
+));
 
 Switch.displayName = SwitchPrimitives.Root.displayName;
 

package/src/react/table.tsx

@@ -8,17 +8,11 @@ import { cn } from '../lib/utils';
 type TableElement = HTMLTableElement;
 type TableProps = React.HTMLAttributes<HTMLTableElement>;
 
-const Table = React.forwardRef<TableElement, TableProps>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table
-        ref={ref}
-        className={cn('w-full caption-bottom text-sm', className)}
-        {...props}
-      />
-    </div>
-  ),
-);
+const Table = React.forwardRef<TableElement, TableProps>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  </div>
+));
 
 Table.displayName = 'Table';
 
@@ -29,11 +23,9 @@ 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 }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
 
 TableHeader.displayName = 'TableHeader';
 
@@ -44,15 +36,9 @@ 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 }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
 
 TableBody.displayName = 'TableBody';
 
@@ -63,18 +49,9 @@ 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 }, ref) => (
+  <tfoot ref={ref} className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />
+));
 
 TableFooter.displayName = 'TableFooter';
 
@@ -85,18 +62,13 @@ TableFooter.displayName = 'TableFooter';
 type TableRowElement = HTMLTableRowElement;
 type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
 
-const TableRow = React.forwardRef<TableRowElement, TableRowProps>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const TableRow = React.forwardRef<TableRowElement, TableRowProps>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition', className)}
+    {...props}
+  />
+));
 
 TableRow.displayName = 'TableRow';
 
@@ -107,18 +79,16 @@ TableRow.displayName = 'TableRow';
 type TableHeadElement = HTMLTableCellElement;
 type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
 
-const TableHead = React.forwardRef<TableHeadElement, TableHeadProps>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={cn(
-        'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const TableHead = React.forwardRef<TableHeadElement, TableHeadProps>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
 
 TableHead.displayName = 'TableHead';
 
@@ -129,18 +99,9 @@ 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 }, ref) => (
+  <td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+));
 
 TableCell.displayName = 'TableCell';
 
@@ -151,15 +112,9 @@ 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 }, ref) => (
+  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
+));
 
 TableCaption.displayName = 'TableCaption';
 

package/src/react/tabs.tsx

@@ -18,18 +18,16 @@ 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) => (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center gap-1 rounded-md p-1',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const TabsList = React.forwardRef<TabsListElement, TabsListProps>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center gap-1 rounded-md p-1',
+      className,
+    )}
+    {...props}
+  />
+));
 
 TabsList.displayName = TabsPrimitive.List.displayName;
 
@@ -38,22 +36,18 @@ 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) => (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      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,
-      )}
-      {...props}
-    />
-  ),
-);
+type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
+
+const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    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,
+    )}
+    {...props}
+  />
+));
 
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
@@ -62,22 +56,18 @@ 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) => (
-    <TabsPrimitive.Content
-      ref={ref}
-      className={cn(
-        'mt-2 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+
+const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
 
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 

package/src/react/text.tsx

@@ -7,8 +7,7 @@ import { Slot } from '@radix-ui/react-slot';
 
 type TextElement = HTMLParagraphElement;
 
-interface TextParagraphProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+interface TextParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
   as?: 'p';
 }
 
@@ -20,13 +19,11 @@ type TextProps = (TextParagraphProps | TextSpanProps) & {
   asChild?: boolean;
 };
 
-const Text = React.forwardRef<TextElement, TextProps>(
-  ({ as: Tag = 'p', asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : Tag;
+const Text = React.forwardRef<TextElement, TextProps>(({ as: Tag = 'p', asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : Tag;
 
-    return <Component ref={ref} {...props} />;
-  },
-);
+  return <Component ref={ref} {...props} />;
+});
 
 Text.displayName = 'Text';
 

package/src/react/textarea.tsx

@@ -8,20 +8,18 @@ import { cn } from '../lib/utils';
 type TextareaElement = HTMLTextAreaElement;
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = React.forwardRef<TextareaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 
 Textarea.displayName = 'Textarea';