@codefast/ui 0.0.8 → 0.0.10

package/src/separator.tsx

@@ -8,31 +8,25 @@ import { cn } from "./utils";
  * Component: Separator
  * -------------------------------------------------------------------------- */
 
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  SeparatorPrimitive.SeparatorProps
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
+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) => (
     <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}
     />
   ),
 );
+
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Separator };
+export { Separator, type SeparatorProps };

package/src/sheet.tsx

@@ -27,126 +27,110 @@ const sheetVariants = cva({
   },
 });
 
+type SheetVariantsProps = VariantProps<typeof sheetVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Sheet
  * -------------------------------------------------------------------------- */
 
+type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
 const Sheet = SheetPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetTrigger
  * -------------------------------------------------------------------------- */
 
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>;
 const SheetTrigger = SheetPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetClose
  * -------------------------------------------------------------------------- */
 
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>;
 const SheetClose = SheetPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetContent
  * -------------------------------------------------------------------------- */
 
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetPrimitive.DialogContentProps & VariantProps<typeof sheetVariants>
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPrimitive.Portal>
-    <SheetPrimitive.Overlay
-      className={cn(
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
-      )}
-    />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close
+type SheetContentElement = React.ElementRef<typeof SheetPrimitive.Content>;
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & SheetVariantsProps;
+
+const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPrimitive.Portal>
+      <SheetPrimitive.Overlay
         className={cn(
-          "focus:ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
         )}
-      >
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPrimitive.Portal>
-));
+      />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close
+          className={cn(
+            "data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          )}
+        >
+          <Cross2Icon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPrimitive.Portal>
+  ),
+);
+
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetHeader
  * -------------------------------------------------------------------------- */
 
-function SheetHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        "flex flex-col space-y-2 text-center sm:text-left",
-        className,
-      )}
-      {...props}
-    />
-  );
+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} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Component: SheetFooter
  * -------------------------------------------------------------------------- */
 
-function SheetFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-        className,
-      )}
-      {...props}
-    />
-  );
+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} />;
 }
+
 SheetFooter.displayName = "SheetFooter";
 
 /* -----------------------------------------------------------------------------
  * Component: SheetTitle
  * -------------------------------------------------------------------------- */
 
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  SheetPrimitive.DialogTitleProps
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
+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} />
 ));
+
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: SheetDescription
  * -------------------------------------------------------------------------- */
 
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  SheetPrimitive.DialogDescriptionProps
->(({ 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;
 
 /* -----------------------------------------------------------------------------
@@ -162,4 +146,12 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
+  type SheetProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
 };

package/src/skeleton.tsx

@@ -5,20 +5,14 @@ import { cn } from "./utils";
  * Component: Skeleton
  * -------------------------------------------------------------------------- */
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
-  return (
-    <div
-      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element {
+  return <div className={cn("bg-primary/10 animate-pulse rounded-md", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Skeleton };
+export { Skeleton, type SkeletonProps };

package/src/slider.tsx

@@ -8,28 +8,31 @@ import { cn } from "./utils";
  * Component: Slider
  * -------------------------------------------------------------------------- */
 
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderPrimitive.SliderProps
->(({ className, ...props }, ref) => (
+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,
-    )}
+    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>
-    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring focus-visible:ring-offset-background block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb
+      className={cn(
+        "border-primary/50 bg-background block size-4 rounded-full border shadow transition-colors disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      )}
+    />
   </SliderPrimitive.Root>
 ));
+
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Slider };
+export { Slider, type SliderProps };

package/src/sonner.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { useTheme } from "next-themes";
 import { toast, Toaster as Sonner } from "sonner";
-import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Sonner
@@ -21,14 +20,11 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
       className="toaster group"
       toastOptions={{
         classNames: {
-          toast: cn(
+          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}
@@ -40,4 +36,4 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Toaster, toast };
+export { Toaster, toast, type ToasterProps };

package/src/spinner.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Spinner
+ * -------------------------------------------------------------------------- */
+
+const spinnerCount = 8;
+
+type SpinnerElement = HTMLSpanElement;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  loading?: boolean;
+}
+
+const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
+  ({ className, loading = true, children, ...props }, ref) => {
+    if (!loading) {
+      return children;
+    }
+
+    const spinner = (
+      <span
+        ref={ref}
+        className={cn("relative flex size-4 items-center justify-center opacity-60", className)}
+        {...props}
+      >
+        {Array.from({ length: spinnerCount }, (_, i) => (
+          <span
+            key={i}
+            className={cn(
+              "absolute h-full rotate-[var(--spinner-rotate)]",
+              "before:fade-out-25 before:animate-out before:repeat-infinite before:block before:h-1/3 before:w-full before:rounded-full before:bg-current before:[animation-delay:var(--spinner-delay)] before:[animation-duration:var(--spinner-duration)]",
+            )}
+            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`,
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </span>
+    );
+
+    if (children === undefined) {
+      return spinner;
+    }
+
+    return (
+      <span className="relative">
+        <span
+          aria-hidden
+          className="invisible contents"
+          // Workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
+          {...{ inert: "" }}
+        >
+          {children}
+        </span>
+
+        <span className="absolute inset-0 flex items-center justify-center">{spinner}</span>
+      </span>
+    );
+  },
+);
+
+Spinner.displayName = "Spinner";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Spinner, type SpinnerProps };

package/src/strong.tsx

@@ -5,18 +5,22 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Strong
  * -------------------------------------------------------------------------- */
 
-const Strong = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
->(({ asChild, ...props }, ref) => {
+type StrongElement = HTMLElement;
+
+interface StrongProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+
+const Strong = React.forwardRef<StrongElement, StrongProps>(({ asChild, ...props }, ref) => {
   const Comp = asChild ? Slot : "strong";
 
   return <Comp ref={ref} {...props} />;
 });
+
 Strong.displayName = "Strong";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Strong };
+export { Strong, type StrongProps };

package/src/switch.tsx

@@ -8,13 +8,14 @@ import { cn } from "./utils";
  * Component: Switch
  * -------------------------------------------------------------------------- */
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  SwitchPrimitives.SwitchProps
->(({ className, ...props }, ref) => (
+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(
-      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-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-colors disabled:cursor-not-allowed disabled:opacity-50",
+      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className,
     )}
     {...props}
@@ -23,10 +24,11 @@ const Switch = React.forwardRef<
     <SwitchPrimitives.Thumb className="bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" />
   </SwitchPrimitives.Root>
 ));
+
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Switch };
+export { Switch, type SwitchProps };

package/src/table.tsx

@@ -5,94 +5,81 @@ import { cn } from "./utils";
  * Component: Table
  * -------------------------------------------------------------------------- */
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+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}
-    />
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
   </div>
 ));
+
 Table.displayName = "Table";
 
 /* -----------------------------------------------------------------------------
  * Component: TableHeader
  * -------------------------------------------------------------------------- */
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+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} />
 ));
+
 TableHeader.displayName = "TableHeader";
 
 /* -----------------------------------------------------------------------------
  * Component: TableBody
  * -------------------------------------------------------------------------- */
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
+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} />
 ));
+
 TableBody.displayName = "TableBody";
 
 /* -----------------------------------------------------------------------------
  * Component: TableFooter
  * -------------------------------------------------------------------------- */
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
-    {...props}
-  />
+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";
 
 /* -----------------------------------------------------------------------------
  * Component: TableRow
  * -------------------------------------------------------------------------- */
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+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-colors",
-      className,
-    )}
+    className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
     {...props}
   />
 ));
+
 TableRow.displayName = "TableRow";
 
 /* -----------------------------------------------------------------------------
  * Component: TableHead
  * -------------------------------------------------------------------------- */
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+type TableHeadElement = HTMLTableCellElement;
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+
+const TableHead = React.forwardRef<TableHeadElement, TableHeadProps>(({ className, ...props }, ref) => (
   <th
     ref={ref}
     className={cn(
@@ -102,38 +89,33 @@ const TableHead = React.forwardRef<
     {...props}
   />
 ));
+
 TableHead.displayName = "TableHead";
 
 /* -----------------------------------------------------------------------------
  * Component: TableCell
  * -------------------------------------------------------------------------- */
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
+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";
 
 /* -----------------------------------------------------------------------------
  * Component: TableCaption
  * -------------------------------------------------------------------------- */
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("text-muted-foreground mt-4 text-sm", className)}
-    {...props}
-  />
+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";
 
 /* -----------------------------------------------------------------------------
@@ -149,4 +131,12 @@ export {
   TableRow,
   TableCell,
   TableCaption,
+  type TableProps,
+  type TableHeaderProps,
+  type TableBodyProps,
+  type TableFooterProps,
+  type TableHeadProps,
+  type TableRowProps,
+  type TableCellProps,
+  type TableCaptionProps,
 };