@codefast/ui 0.0.8 → 0.0.10

package/src/context-menu.tsx

@@ -2,257 +2,266 @@
 
 import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenu
  * -------------------------------------------------------------------------- */
 
+type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>;
 const ContextMenu = ContextMenuPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuTrigger
  * -------------------------------------------------------------------------- */
 
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuGroup
  * -------------------------------------------------------------------------- */
 
+type ContextMenuGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSub
  * -------------------------------------------------------------------------- */
 
+type ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.Sub>;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioGroup
  * -------------------------------------------------------------------------- */
 
+type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  ContextMenuPrimitive.ContextMenuSubTriggerProps & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto size-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+type ContextMenuSubTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>;
 
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuSubContent
- * -------------------------------------------------------------------------- */
+interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
+  inset?: boolean;
+}
 
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  ContextMenuPrimitive.ContextMenuSubContentProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.SubContent
+const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
+  ({ className, inset, children, ...props }, ref) => (
+    <ContextMenuPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none",
+        inset && "pl-8",
         className,
       )}
       {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  ),
+);
+
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuSubContent
+ * -------------------------------------------------------------------------- */
+
+type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuPrimitive.SubContent>;
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
+
+const ContextMenuSubContent = React.forwardRef<ContextMenuSubContentElement, ContextMenuSubContentProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  ),
+);
+
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuContent
  * -------------------------------------------------------------------------- */
 
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  ContextMenuPrimitive.ContextMenuContentProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
+type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Content>;
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+
+const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  ),
+);
+
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuItem
+ * -------------------------------------------------------------------------- */
+
+type ContextMenuItemElement = React.ElementRef<typeof ContextMenuPrimitive.Item>;
+
+interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
+  inset?: boolean;
+}
+
+const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItemProps>(
+  ({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        inset && "pl-8",
         className,
       )}
       {...props}
     />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+  ),
+);
 
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuItem
- * -------------------------------------------------------------------------- */
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  ContextMenuPrimitive.ContextMenuItemProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  ContextMenuPrimitive.ContextMenuCheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>;
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
+
+const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
+  ({ className, children, checked, ...props }, ref) => (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  ),
+);
+
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioItem
  * -------------------------------------------------------------------------- */
 
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  ContextMenuPrimitive.ContextMenuRadioItemProps
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
+type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.RadioItem>;
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
+
+const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <DotFilledIcon className="size-4 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  ),
+);
+
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuLabel
  * -------------------------------------------------------------------------- */
 
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  ContextMenuPrimitive.ContextMenuLabelProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "text-foreground px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
+type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimitive.Label>;
+
+interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
+  inset?: boolean;
+}
+
+const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(
+  ({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+      {...props}
+    />
+  ),
+);
+
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSeparator
  * -------------------------------------------------------------------------- */
 
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  ContextMenuPrimitive.ContextMenuSeparatorProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("bg-border -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
+type ContextMenuSeparatorElement = React.ElementRef<typeof ContextMenuPrimitive.Separator>;
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
+
+const ContextMenuSeparator = React.forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />
+  ),
+);
+
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuShortcut
  * -------------------------------------------------------------------------- */
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
+
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): React.JSX.Element {
+  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuArrow
  * -------------------------------------------------------------------------- */
 
-const ContextMenuArrow = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Arrow>,
-  ContextMenuPrimitive.ContextMenuArrowProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Arrow
-    ref={ref}
-    className={cn("fill-popover", className)}
-    {...props}
-  />
-));
+type ContextMenuArrowElement = React.ElementRef<typeof ContextMenuPrimitive.Arrow>;
+type ContextMenuArrowProps = ContextMenuPrimitive.ContextMenuArrowProps;
+
+const ContextMenuArrow = React.forwardRef<ContextMenuArrowElement, ContextMenuArrowProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Arrow ref={ref} className={cn("fill-popover", className)} {...props} />
+  ),
+);
+
 ContextMenuArrow.displayName = ContextMenuPrimitive.Arrow.displayName;
 
 /* -----------------------------------------------------------------------------
@@ -275,4 +284,19 @@ export {
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
   ContextMenuArrow,
+  type ContextMenuProps,
+  type ContextMenuTriggerProps,
+  type ContextMenuContentProps,
+  type ContextMenuItemProps,
+  type ContextMenuCheckboxItemProps,
+  type ContextMenuRadioItemProps,
+  type ContextMenuLabelProps,
+  type ContextMenuSeparatorProps,
+  type ContextMenuShortcutProps,
+  type ContextMenuGroupProps,
+  type ContextMenuSubProps,
+  type ContextMenuSubContentProps,
+  type ContextMenuSubTriggerProps,
+  type ContextMenuRadioGroupProps,
+  type ContextMenuArrowProps,
 };

package/src/data-table.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import type * as ReactTable from "@tanstack/react-table";
+import { type SortDirection } from "@tanstack/react-table";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
@@ -23,32 +24,22 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 import { Button } from "./button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: DataTableViewOptions
  * -------------------------------------------------------------------------- */
 
-function DataTableViewOptions<TData>({
-  table,
-}: {
+interface DataTableViewOptionsProps<TData> {
   table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}
+
+function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
           <MixerHorizontalIcon className="mr-2 size-4" />
           View
         </Button>
@@ -58,10 +49,7 @@ function DataTableViewOptions<TData>({
         <DropdownMenuSeparator />
         {table
           .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== "undefined" && column.getCanHide(),
-          )
+          .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
           .map((column) => {
             return (
               <DropdownMenuCheckboxItem
@@ -85,21 +73,19 @@ function DataTableViewOptions<TData>({
  * Component: DataTablePagination
  * -------------------------------------------------------------------------- */
 
+interface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
+  table: ReactTable.Table<TData>;
+}
+
 function DataTablePagination<TData>({
   table,
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-  table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}: DataTablePaginationProps<TData>): React.JSX.Element {
   return (
-    <div
-      className={cn("flex items-center justify-between px-2", className)}
-      {...props}
-    >
+    <div className={cn("flex items-center justify-between px-2", className)} {...props}>
       <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
@@ -123,8 +109,7 @@ function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
         </div>
         <div className="flex items-center space-x-2">
           <Button
@@ -183,14 +168,16 @@ function DataTablePagination<TData>({
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: ReactTable.Column<TData, TValue>;
+  title: string;
+}
+
 function DataTableColumnHeader<TData, TValue>({
   column,
   title,
   className,
-}: React.HTMLAttributes<HTMLDivElement> & {
-  column: ReactTable.Column<TData, TValue>;
-  title: string;
-}): React.JSX.Element {
+}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -199,19 +186,9 @@ function DataTableColumnHeader<TData, TValue>({
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="xs"
-            className="data-[state=open]:bg-accent -ml-3"
-          >
+          <Button variant="ghost" size="xs" className="data-[state=open]:bg-accent -ml-3">
             <span>{title}</span>
-            {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 size-4" />
-            ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 size-4" />
-            ) : (
-              <CaretSortIcon className="ml-2 size-4" />
-            )}
+            <SortIcon sorted={column.getIsSorted()} />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
@@ -246,10 +223,28 @@ function DataTableColumnHeader<TData, TValue>({
   );
 }
 
+function SortIcon({ sorted }: { sorted: false | SortDirection }): React.JSX.Element {
+  switch (sorted) {
+    case "desc":
+      return <ArrowDownIcon className="ml-2 size-4" />;
+    case "asc":
+      return <ArrowUpIcon className="ml-2 size-4" />;
+    default:
+      return <CaretSortIcon className="ml-2 size-4" />;
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { DataTableViewOptions, DataTablePagination, DataTableColumnHeader };
+export {
+  DataTableViewOptions,
+  DataTablePagination,
+  DataTableColumnHeader,
+  type DataTableViewOptionsProps,
+  type DataTablePaginationProps,
+  type DataTableColumnHeaderProps,
+};
 
 export * from "@tanstack/react-table";