@codefast/ui 0.0.40 → 0.0.42

package/src/react/context-menu.tsx

@@ -1,9 +1,13 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenu
@@ -16,56 +20,70 @@ const ContextMenu = ContextMenuPrimitive.Root;
  * Component: ContextMenuTrigger
  * -------------------------------------------------------------------------- */
 
-type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Trigger
+>;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuGroup
  * -------------------------------------------------------------------------- */
 
-type ContextMenuGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>;
+type ContextMenuGroupProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Group
+>;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSub
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.Sub>;
+type ContextMenuSubProps = React.ComponentProps<
+  typeof ContextMenuPrimitive.Sub
+>;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioGroup
  * -------------------------------------------------------------------------- */
 
-type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>;
+type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioGroup
+>;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSubTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>;
+type ContextMenuSubTriggerElement = React.ElementRef<
+  typeof ContextMenuPrimitive.SubTrigger
+>;
 
-interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
+interface ContextMenuSubTriggerProps
+  extends React.ComponentPropsWithoutRef<
+    typeof ContextMenuPrimitive.SubTrigger
+  > {
   inset?: boolean;
 }
 
-const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
-  ({ children, className, inset, ...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>
-  ),
-);
+const ContextMenuSubTrigger = React.forwardRef<
+  ContextMenuSubTriggerElement,
+  ContextMenuSubTriggerProps
+>(({ children, className, inset, ...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;
 
@@ -73,23 +91,28 @@ 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 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 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-32 rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  ),
-);
+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 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 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-32 rounded-md border p-1 shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
 
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
@@ -97,23 +120,28 @@ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
  * Component: ContextMenuContent
  * -------------------------------------------------------------------------- */
 
-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 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-32 rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  ),
-);
+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 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-32 rounded-md border p-1 shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
 
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
@@ -121,25 +149,29 @@ ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
  * Component: ContextMenuItem
  * -------------------------------------------------------------------------- */
 
-type ContextMenuItemElement = React.ElementRef<typeof ContextMenuPrimitive.Item>;
+type ContextMenuItemElement = React.ElementRef<
+  typeof ContextMenuPrimitive.Item
+>;
 
-interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<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(
-        "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}
-    />
-  ),
-);
+const ContextMenuItem = React.forwardRef<
+  ContextMenuItemElement,
+  ContextMenuItemProps
+>(({ 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;
 
@@ -147,58 +179,69 @@ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
  * Component: ContextMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
-type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>;
-type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
-
-const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
-  ({ children, className, 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
+>(({ children, className, 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
  * -------------------------------------------------------------------------- */
 
-type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.RadioItem>;
-type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
-
-const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
-  ({ children, className, ...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
+>(({ children, className, ...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;
 
@@ -206,21 +249,29 @@ ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
  * Component: ContextMenuLabel
  * -------------------------------------------------------------------------- */
 
-type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimitive.Label>;
+type ContextMenuLabelElement = React.ElementRef<
+  typeof ContextMenuPrimitive.Label
+>;
 
-interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<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}
-    />
-  ),
-);
+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;
 
@@ -228,14 +279,23 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
  * Component: ContextMenuSeparator
  * -------------------------------------------------------------------------- */
 
-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} />
-  ),
-);
+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;
 
@@ -245,22 +305,40 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 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} />;
+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
  * -------------------------------------------------------------------------- */
 
-type ContextMenuArrowElement = React.ElementRef<typeof ContextMenuPrimitive.Arrow>;
+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} />
-  ),
-);
+const ContextMenuArrow = React.forwardRef<
+  ContextMenuArrowElement,
+  ContextMenuArrowProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Arrow
+    ref={ref}
+    className={cn('fill-popover', className)}
+    {...props}
+  />
+));
 
 ContextMenuArrow.displayName = ContextMenuPrimitive.Arrow.displayName;
 

package/src/react/data-table.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import type * as ReactTable from "@tanstack/react-table";
+import * as React from 'react';
+import type * as ReactTable from '@tanstack/react-table';
 import {
   ArrowDownIcon,
   ArrowUpIcon,
@@ -12,8 +12,8 @@ import {
   DoubleArrowRightIcon,
   EyeNoneIcon,
   MixerHorizontalIcon,
-} from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
+} from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -22,9 +22,15 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "./dropdown-menu";
-import { Button } from "./button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+} from './dropdown-menu';
+import { Button } from './button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select';
 
 /* -----------------------------------------------------------------------------
  * Component: DataTableViewOptions
@@ -34,11 +40,17 @@ interface DataTableViewOptionsProps<TData> {
   table: ReactTable.Table<TData>;
 }
 
-function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<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>
@@ -48,7 +60,10 @@ function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>
         <DropdownMenuSeparator />
         {table
           .getAllColumns()
-          .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== 'undefined' && column.getCanHide(),
+          )
           .map((column) => {
             return (
               <DropdownMenuCheckboxItem
@@ -72,7 +87,8 @@ function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>
  * Component: DataTablePagination
  * -------------------------------------------------------------------------- */
 
-interface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTablePaginationProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
   table: ReactTable.Table<TData>;
 }
 
@@ -82,9 +98,13 @@ function DataTablePagination<TData>({
   ...props
 }: 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">
@@ -108,7 +128,8 @@ function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-28 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
@@ -167,7 +188,8 @@ function DataTablePagination<TData>({
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
-interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
   column: ReactTable.Column<TData, TValue>;
   title: string;
 }
@@ -182,10 +204,14 @@ function DataTableColumnHeader<TData, TValue>({
   }
 
   return (
-    <div className={cn("flex items-center space-x-2", className)}>
+    <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>
             <SortIcon sorted={column.getIsSorted()} />
           </Button>
@@ -222,11 +248,15 @@ function DataTableColumnHeader<TData, TValue>({
   );
 }
 
-function SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {
+function SortIcon({
+  sorted,
+}: {
+  sorted: false | ReactTable.SortDirection;
+}): React.JSX.Element {
   switch (sorted) {
-    case "desc":
+    case 'desc':
       return <ArrowDownIcon className="ml-2 size-4" />;
-    case "asc":
+    case 'asc':
       return <ArrowUpIcon className="ml-2 size-4" />;
     default:
       return <CaretSortIcon className="ml-2 size-4" />;