@codefast/ui 0.0.40 → 0.0.42

package/src/react/select.tsx

@@ -1,9 +1,14 @@
-"use client";
-
-import * as React from "react";
-import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { cn } from "../lib/utils";
+'use client';
+
+import * as React from 'react';
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Select
@@ -16,14 +21,18 @@ 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;
 
 /* -----------------------------------------------------------------------------
@@ -31,25 +40,28 @@ 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;
 
@@ -57,20 +69,28 @@ 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-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronUpIcon />
-    </SelectPrimitive.ScrollUpButton>
-  ),
-);
+type SelectScrollUpButtonElement = React.ElementRef<
+  typeof SelectPrimitive.ScrollUpButton
+>;
+type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.ScrollUpButton
+>;
+
+const SelectScrollUpButton = React.forwardRef<
+  SelectScrollUpButtonElement,
+  SelectScrollUpButtonProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+));
 
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
@@ -78,59 +98,71 @@ 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-default 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-default 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}
+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
         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,
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
         )}
-        position={position}
-        {...props}
       >
-        <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>
-  ),
-);
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
 
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
@@ -139,11 +171,19 @@ 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;
 
@@ -152,25 +192,29 @@ 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-default 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-default 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;
 
@@ -178,14 +222,23 @@ 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

@@ -1,23 +1,32 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Separator
  * -------------------------------------------------------------------------- */
 
 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}
     />
   ),

package/src/react/sheet.tsx

@@ -1,29 +1,29 @@
-"use client";
+'use client';
 
-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 * 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';
 
 /* -----------------------------------------------------------------------------
  * Variant: Sheet
  * -------------------------------------------------------------------------- */
 
 const sheetVariants = cva({
-  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500 animate-ease-in-out fixed z-50 gap-4 p-6 shadow-lg",
+  base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500 animate-ease-in-out fixed z-50 gap-4 p-6 shadow-lg',
   variants: {
     side: {
-      top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b",
+      top: 'data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b',
       bottom:
-        "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 border-t",
-      left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        'data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 border-t',
+      left: 'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
       right:
-        "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+        'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
     },
   },
   defaultVariants: {
-    side: "right",
+    side: 'right',
   },
 });
 
@@ -40,14 +40,18 @@ 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;
 
 /* -----------------------------------------------------------------------------
@@ -55,13 +59,20 @@ 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) => (
+  ({ 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" />
@@ -80,8 +91,19 @@ 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}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------
@@ -90,22 +112,41 @@ function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Eleme
 
 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";
+SheetFooter.displayName = 'SheetFooter';
 
 /* -----------------------------------------------------------------------------
  * Component: SheetTitle
  * -------------------------------------------------------------------------- */
 
 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;
 
@@ -113,14 +154,23 @@ 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

@@ -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: Skeleton
@@ -8,7 +8,12 @@ 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}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------