@codefast/ui 0.0.40 → 0.0.42

package/src/react/slider.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Slider
@@ -11,26 +11,33 @@ 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

@@ -1,18 +1,18 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { useTheme } from "next-themes";
-import { toast, Toaster as Sonner } from "sonner";
+import * as React from 'react';
+import { useTheme } from 'next-themes';
+import { toast, Toaster as Sonner } from 'sonner';
 
 /* -----------------------------------------------------------------------------
  * Component: Sonner
  * -------------------------------------------------------------------------- */
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
-type Theme = "light" | "dark" | "system" | undefined;
+type Theme = 'light' | 'dark' | 'system' | undefined;
 
 function Toaster({ ...props }: ToasterProps): React.JSX.Element {
-  const { theme = "system" } = useTheme() as { theme: Theme };
+  const { theme = 'system' } = useTheme() as { theme: Theme };
 
   return (
     <Sonner
@@ -21,10 +21,12 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
       toastOptions={{
         classNames: {
           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",
+            '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',
         },
       }}
       {...props}

package/src/react/spinner.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Spinner
@@ -23,7 +23,10 @@ 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) => (
@@ -33,9 +36,9 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
             style={
               {
                 width: `${(100 / spinnerCount).toString()}%`,
-                "--spinner-delay": `-${((spinnerCount - i) * 100).toString()}ms`,
-                "--spinner-rotate": `${((360 / spinnerCount) * i).toString()}deg`,
-                "--spinner-duration": `${(spinnerCount * 100).toString()}ms`,
+                '--spinner-delay': `-${((spinnerCount - i) * 100).toString()}ms`,
+                '--spinner-rotate': `${((360 / spinnerCount) * i).toString()}deg`,
+                '--spinner-duration': `${(spinnerCount * 100).toString()}ms`,
               } as React.CSSProperties
             }
           />
@@ -53,13 +56,15 @@ 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>
     );
   },
 );
 
-Spinner.displayName = "Spinner";
+Spinner.displayName = 'Spinner';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/strong.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 
 /* -----------------------------------------------------------------------------
  * Component: Strong
@@ -11,13 +11,15 @@ 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";
+Strong.displayName = 'Strong';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/switch.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Switch
@@ -11,18 +11,20 @@ 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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Table
@@ -8,13 +8,19 @@ 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";
+Table.displayName = 'Table';
 
 /* -----------------------------------------------------------------------------
  * Component: TableHeader
@@ -23,11 +29,13 @@ 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";
+TableHeader.displayName = 'TableHeader';
 
 /* -----------------------------------------------------------------------------
  * Component: TableBody
@@ -36,11 +44,17 @@ 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";
+TableBody.displayName = 'TableBody';
 
 /* -----------------------------------------------------------------------------
  * Component: TableFooter
@@ -49,11 +63,20 @@ 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} />
-));
-
-TableFooter.displayName = "TableFooter";
+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';
 
 /* -----------------------------------------------------------------------------
  * Component: TableRow
@@ -62,15 +85,20 @@ 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}
-  />
-));
-
-TableRow.displayName = "TableRow";
+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';
 
 /* -----------------------------------------------------------------------------
  * Component: TableHead
@@ -79,18 +107,20 @@ 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}
-  />
-));
-
-TableHead.displayName = "TableHead";
+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';
 
 /* -----------------------------------------------------------------------------
  * Component: TableCell
@@ -99,11 +129,20 @@ 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} />
-));
-
-TableCell.displayName = "TableCell";
+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';
 
 /* -----------------------------------------------------------------------------
  * Component: TableCaption
@@ -112,11 +151,17 @@ 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} />
-));
-
-TableCaption.displayName = "TableCaption";
+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';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/tabs.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Tabs
@@ -18,16 +18,18 @@ 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;
 
@@ -36,18 +38,22 @@ 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;
 
@@ -56,18 +62,22 @@ 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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 
 /* -----------------------------------------------------------------------------
  * Component: Text
@@ -7,25 +7,28 @@ import { Slot } from "@radix-ui/react-slot";
 
 type TextElement = HTMLParagraphElement;
 
-interface TextParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  as?: "p";
+interface TextParagraphProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  as?: 'p';
 }
 
 interface TextSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-  as: "span";
+  as: 'span';
 }
 
 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";
+Text.displayName = 'Text';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/textarea.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Textarea
@@ -8,20 +8,22 @@ 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";
+Textarea.displayName = 'Textarea';
 
 /* -----------------------------------------------------------------------------
  * Exports