add eslint / prettier

2026-02-23 14:19:16 +01:00
parent 01b00b5717
commit c2e370f0a8
34 changed files with 1305 additions and 470 deletions
--- a/src/components/Button.stories.tsx
+++ b/src/components/Button.stories.tsx
@@ -9,77 +9,79 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.'
-      }
-    }
+        component:
+          'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
+      },
+    },
  },
  argTypes: {
    label: {
      description: 'Visible button label text.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    type: {
      description: 'Base visual style.',
      options: ['solid', 'outlined', 'noborder'],
      control: 'inline-radio',
-      table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } }
+      table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
    },
    variant: {
-      description: 'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
+      description:
+        'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
      options: ['primary', 'secondary', 'important'],
      control: 'inline-radio',
-      table: { type: { summary: "'primary' | 'secondary' | 'important'" } }
+      table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
    },
    size: {
      description: 'Button size.',
      options: ['sm', 'md', 'lg', 'full'],
      control: 'inline-radio',
-      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } }
+      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
    },
    to: {
      description: 'Navigation path. When set, the component renders a `<Link>`.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    htmlType: {
      description: 'HTML button type used when rendering a native `<button>`.',
      options: ['button', 'submit', 'reset'],
      control: 'inline-radio',
-      table: { type: { summary: "'button' | 'submit' | 'reset'" } }
+      table: { type: { summary: "'button' | 'submit' | 'reset'" } },
    },
    disabled: {
      description: 'Disables interaction and hover/click states.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    icon: {
      description: 'Optional icon component (for example Heroicons).',
      control: false,
-      table: { type: { summary: 'ElementType' } }
+      table: { type: { summary: 'ElementType' } },
    },
    ariaLabel: {
      description: 'Accessible label. Falls back to `label` when not provided.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    className: {
      description: 'Extra CSS classes for the root element.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    onClick: {
      description: 'Click handler callback.',
      action: 'clicked',
-      table: { type: { summary: 'MouseEventHandler<HTMLElement>' } }
-    }
+      table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
+    },
  },
  args: {
    type: 'solid',
    variant: 'primary',
    size: 'md',
-    label: 'Save'
-  }
+    label: 'Save',
+  },
 } satisfies Meta<typeof Button>;

 export default meta;
@@ -91,37 +93,37 @@ export const SolidImportant: Story = {
  args: {
    type: 'solid',
    variant: 'important',
-    label: 'Delete'
-  }
+    label: 'Delete',
+  },
 };

 export const OutlinedSecondary: Story = {
  args: {
    type: 'outlined',
    variant: 'secondary',
-    label: 'Cancel'
-  }
+    label: 'Cancel',
+  },
 };

 export const IconOnly: Story = {
  args: {
    icon: PlusIcon,
    label: undefined,
-    ariaLabel: 'Add item'
-  }
+    ariaLabel: 'Add item',
+  },
 };

 export const LinkButton: Story = {
  args: {
    to: '/demo',
-    label: 'Go to demo'
-  }
+    label: 'Go to demo',
+  },
 };

 export const Disabled: Story = {
  args: {
-    disabled: true
-  }
+    disabled: true,
+  },
 };

 export const SizeMatrix: Story = {
@@ -132,5 +134,5 @@ export const SizeMatrix: Story = {
      <Button {...args} size="lg" label="Large" />
      <Button {...args} size="full" label="Full width" />
    </div>
-  )
+  ),
 };
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -24,40 +24,40 @@ const SIZE_CLASS: Record<ComponentSize, string> = {
  sm: 'h-8 px-3 text-xs',
  md: 'h-10 px-4 text-sm',
  lg: 'h-12 px-5 text-base',
-  full: 'h-10 w-full px-4 text-sm'
+  full: 'h-10 w-full px-4 text-sm',
 };

 const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
  sm: 'h-8 w-8 !p-0',
  md: 'h-10 w-10 !p-0',
  lg: 'h-12 w-12 !p-0',
-  full: 'h-10 w-full !p-0'
+  full: 'h-10 w-full !p-0',
 };

 const ICON_CLASS: Record<ComponentSize, string> = {
  sm: 'h-4 w-4',
  md: 'h-4 w-4',
  lg: 'h-5 w-5',
-  full: 'h-4 w-4'
+  full: 'h-4 w-4',
 };

 const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
  sm: 'h-4 w-4',
  md: 'h-5 w-5',
  lg: 'h-6 w-6',
-  full: 'h-5 w-5'
+  full: 'h-5 w-5',
 };

 const TYPE_CLASS: Record<ButtonType, string> = {
  solid: 'btn-solid',
  outlined: 'btn-outlined',
-  noborder: 'btn-noborder'
+  noborder: 'btn-noborder',
 };

 const VARIANT_CLASS: Record<ButtonVariant, string> = {
  primary: 'btn-primary',
  secondary: 'btn-secondary',
-  important: 'btn-important'
+  important: 'btn-important',
 };

 function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
@@ -79,7 +79,7 @@ export function Button({
  disabled = false,
  icon: Icon,
  ariaLabel,
-  className = ''
+  className = '',
 }: Readonly<ButtonProps>) {
  const isIconOnly = Icon != null && !label;
  const resolvedVariant = resolveVariant(type, variant);
@@ -89,8 +89,10 @@ export function Button({
    isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
    Icon && label ? 'gap-1.5' : '',
    disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
-    className
-  ].join(' ').trim();
+    className,
+  ]
+    .join(' ')
+    .trim();
  const computedAriaLabel = ariaLabel ?? label;
  const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
  const content = (
--- a/src/components/Chip.stories.tsx
+++ b/src/components/Chip.stories.tsx
@@ -8,42 +8,44 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.'
-      }
-    }
+        component:
+          'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
+      },
+    },
  },
  argTypes: {
    variant: {
      description: 'Chip visual style.',
      options: ['solid', 'outlined'],
      control: 'inline-radio',
-      table: { type: { summary: "'solid' | 'outlined'" } }
+      table: { type: { summary: "'solid' | 'outlined'" } },
    },
    tone: {
-      description: 'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
+      description:
+        'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    as: {
      description: "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
      control: false,
-      table: { type: { summary: 'ElementType' } }
+      table: { type: { summary: 'ElementType' } },
    },
    className: {
      description: 'Extra CSS classes for the root element.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    children: {
      description: 'Text or React node rendered inside the chip.',
      control: 'text',
-      table: { type: { summary: 'ReactNode' } }
-    }
+      table: { type: { summary: 'ReactNode' } },
+    },
  },
  args: {
    children: 'Published',
-    variant: 'solid'
-  }
+    variant: 'solid',
+  },
 } satisfies Meta<typeof Chip>;

 export default meta;
@@ -55,29 +57,41 @@ export const OutlinedIndigo: Story = {
  args: {
    variant: 'outlined',
    tone: 'indigo-700',
-    children: 'Draft'
-  }
+    children: 'Draft',
+  },
 };

 export const OutlinedCyan: Story = {
  args: {
    variant: 'outlined',
    tone: 'cyan-700',
-    children: 'Archived'
-  }
+    children: 'Archived',
+  },
 };

 export const ToneMatrix: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-2">
      <Chip variant="solid">Default</Chip>
-      <Chip variant="solid" tone="indigo-700">Indigo</Chip>
-      <Chip variant="solid" tone="cyan-700">Cyan</Chip>
-      <Chip variant="solid" tone="rose-600">Rose</Chip>
+      <Chip variant="solid" tone="indigo-700">
+        Indigo
+      </Chip>
+      <Chip variant="solid" tone="cyan-700">
+        Cyan
+      </Chip>
+      <Chip variant="solid" tone="rose-600">
+        Rose
+      </Chip>
      <Chip variant="outlined">Default</Chip>
-      <Chip variant="outlined" tone="indigo-700">Indigo</Chip>
-      <Chip variant="outlined" tone="cyan-700">Cyan</Chip>
-      <Chip variant="outlined" tone="rose-600">Rose</Chip>
+      <Chip variant="outlined" tone="indigo-700">
+        Indigo
+      </Chip>
+      <Chip variant="outlined" tone="cyan-700">
+        Cyan
+      </Chip>
+      <Chip variant="outlined" tone="rose-600">
+        Rose
+      </Chip>
    </div>
-  )
+  ),
 };
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -14,7 +14,7 @@ type ChipProps<T extends ElementType> = {

 const variantClassMap: Record<ChipVariant, string> = {
  solid: 'chip-solid',
-  outlined: 'chip-outlined'
+  outlined: 'chip-outlined',
 };

 type TailwindPalette = Record<string, string>;
@@ -50,16 +50,21 @@ export function Chip<T extends ElementType = 'span'>({
  tone,
  as,
  className = '',
-  children
+  children,
 }: Readonly<ChipProps<T>>) {
-  const Component = as ?? 'span' as ElementType;
+  const Component = as ?? ('span' as ElementType);
  const toneColor = resolveTailwindToneColor(tone);
-  const toneStyle: CSSProperties | undefined = toneColor == null
-    ? undefined
-    : variant === 'solid'
-      ? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
-      : { borderColor: toneColor, color: toneColor };
+  const toneStyle: CSSProperties | undefined =
+    toneColor == null
+      ? undefined
+      : variant === 'solid'
+        ? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
+        : { borderColor: toneColor, color: toneColor };
  const classes = `chip-root ${variantClassMap[variant]} ${className}`.trim();

-  return <Component className={classes} style={toneStyle}>{children}</Component>;
+  return (
+    <Component className={classes} style={toneStyle}>
+      {children}
+    </Component>
+  );
 }
--- a/src/components/Dropdown.stories.tsx
+++ b/src/components/Dropdown.stories.tsx
@@ -5,7 +5,7 @@ import { Dropdown } from './Dropdown';
 const choices = [
  { id: 'draft', label: 'Draft' },
  { id: 'review', label: 'In review' },
-  { id: 'published', label: 'Published' }
+  { id: 'published', label: 'Published' },
 ];

 const meta = {
@@ -15,76 +15,77 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Styled select component with label, error state, stacked/inline layout, and multiple sizes.'
-      }
-    }
+        component:
+          'Styled select component with label, error state, stacked/inline layout, and multiple sizes.',
+      },
+    },
  },
  argTypes: {
    label: {
      description: 'Label text shown above (stacked) or on the left (inline).',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    value: {
      description: 'Current selected value (must match one `choices[].id`).',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    choices: {
-      description: "Options list in `{ id: string; label: string }` format.",
+      description: 'Options list in `{ id: string; label: string }` format.',
      control: 'object',
-      table: { type: { summary: 'Array<{ id: string; label: string }>' } }
+      table: { type: { summary: 'Array<{ id: string; label: string }>' } },
    },
    size: {
      description: 'Control size.',
      options: ['sm', 'md', 'lg', 'full'],
      control: 'inline-radio',
-      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } }
+      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
    },
    layout: {
      description: 'Label/control layout mode.',
      options: ['stacked', 'inline'],
      control: 'inline-radio',
-      table: { type: { summary: "'stacked' | 'inline'" } }
+      table: { type: { summary: "'stacked' | 'inline'" } },
    },
    disabled: {
      description: 'Disables the field.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    required: {
      description: 'Sets the native HTML `required` attribute.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    error: {
      description: 'Error message shown below the field.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    className: {
      description: 'Extra CSS classes for the wrapper.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    selectClassName: {
      description: 'Extra CSS classes for the `<select>` element.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    onChange: {
      description: 'Callback fired with the newly selected value.',
      action: 'changed',
-      table: { type: { summary: '(value: string) => void' } }
-    }
+      table: { type: { summary: '(value: string) => void' } },
+    },
  },
  args: {
    label: 'Status',
    value: 'draft',
    choices,
    size: 'md',
-    layout: 'stacked'
-  }
+    layout: 'stacked',
+  },
 } satisfies Meta<typeof Dropdown>;

 export default meta;
@@ -103,13 +104,13 @@ export const Stacked: Story = {
        }}
      />
    );
-  }
+  },
 };

 export const Inline: Story = {
  args: {
    layout: 'inline',
-    size: 'sm'
+    size: 'sm',
  },
  render: (args) => {
    const [value, setValue] = useState(args.value);
@@ -123,19 +124,19 @@ export const Inline: Story = {
        }}
      />
    );
-  }
+  },
 };

 export const Disabled: Story = {
  args: {
-    disabled: true
-  }
+    disabled: true,
+  },
 };

 export const WithError: Story = {
  args: {
-    error: 'Please choose a valid status'
-  }
+    error: 'Please choose a valid status',
+  },
 };

 export const SizeMatrix: Story = {
@@ -149,5 +150,5 @@ export const SizeMatrix: Story = {
        <Dropdown {...args} value={value} size="full" label="Full" onChange={setValue} />
      </div>
    );
-  }
+  },
 };
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -34,35 +34,36 @@ export function Dropdown({
  onChange,
  error,
  className = '',
-  selectClassName = ''
+  selectClassName = '',
 }: Readonly<DropdownProps>) {
  const containerSizeClass = {
    sm: 'max-w-xs',
    md: 'max-w-sm',
    lg: 'max-w-md',
-    full: 'max-w-none'
+    full: 'max-w-none',
  }[size];

  const selectSizeClass = {
    sm: 'h-8 !text-xs',
    md: 'h-10 text-sm',
    lg: 'h-12 text-sm',
-    full: 'h-10 text-sm'
+    full: 'h-10 text-sm',
  }[size];

  const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
    onChange?.(event.target.value);
  };

-  const wrapperClass = layout === 'inline'
-    ? 'inline-flex w-auto items-center gap-2'
-    : 'block w-full gap-1';
+  const wrapperClass =
+    layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';

  const selectWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';

  return (
-    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+    <label
+      className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+    >
      {label ? <span className={labelClass}>{label}</span> : null}
      <div className={selectWrapperClass}>
        <select
@@ -78,11 +79,17 @@ export function Dropdown({
            </option>
          ))}
        </select>
-        <span className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}>
+        <span
+          className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}
+        >
          <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
        </span>
      </div>
-      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+      {error ? (
+        <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
+          {error}
+        </span>
+      ) : null}
    </label>
  );
 }
--- a/src/components/Form.stories.tsx
+++ b/src/components/Form.stories.tsx
@@ -12,35 +12,36 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Surface container with a title bar and a responsive content grid, intended for CMS forms.'
-      }
-    }
+        component:
+          'Surface container with a title bar and a responsive content grid, intended for CMS forms.',
+      },
+    },
  },
  argTypes: {
    title: {
      description: 'Form title displayed in the header bar.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    titleBarRight: {
      description: 'Optional node rendered on the right side of the title bar.',
      control: false,
-      table: { type: { summary: 'ReactNode' } }
+      table: { type: { summary: 'ReactNode' } },
    },
    children: {
      description: 'Form content rendered inside the responsive grid.',
      control: false,
-      table: { type: { summary: 'ReactNode' } }
+      table: { type: { summary: 'ReactNode' } },
    },
    className: {
      description: 'Extra CSS classes for the root container.',
      control: 'text',
-      table: { type: { summary: 'string' } }
-    }
+      table: { type: { summary: 'string' } },
+    },
  },
  args: {
-    title: 'Post details'
-  }
+    title: 'Post details',
+  },
 } satisfies Meta<typeof Form>;

 export default meta;
@@ -56,13 +57,13 @@ export const Basic: Story = {
          value="draft"
          choices={[
            { id: 'draft', label: 'Draft' },
-            { id: 'published', label: 'Published' }
+            { id: 'published', label: 'Published' },
          ]}
        />
        <InputField label="Slug" type="text" value="a-short-post-title" />
      </>
-    )
-  }
+    ),
+  },
 };

 export const WithActions: Story = {
@@ -71,10 +72,7 @@ export const WithActions: Story = {
    const [status, setStatus] = useState('draft');

    return (
-      <Form
-        {...args}
-        titleBarRight={<Button type="solid" size="sm" label="Save" />}
-      >
+      <Form {...args} titleBarRight={<Button type="solid" size="sm" label="Save" />}>
        <div className="col-span-2">
          <InputField
            label="Title"
@@ -91,11 +89,11 @@ export const WithActions: Story = {
          choices={[
            { id: 'draft', label: 'Draft' },
            { id: 'review', label: 'In review' },
-            { id: 'published', label: 'Published' }
+            { id: 'published', label: 'Published' },
          ]}
        />
        <InputField label="Slug" type="text" value="storybook-powered-cms" />
      </Form>
    );
-  }
+  },
 };
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -11,14 +11,15 @@ type FormProps = {
 export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
  return (
    <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
-      <div className="flex items-center justify-between border-b px-4 py-3 sm:px-5" style={{ borderColor: 'var(--surface-divider)' }}>
+      <div
+        className="flex items-center justify-between border-b px-4 py-3 sm:px-5"
+        style={{ borderColor: 'var(--surface-divider)' }}
+      >
        <Label variant="h4">{title}</Label>
        {titleBarRight ? <div>{titleBarRight}</div> : null}
      </div>

-      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
-        {children}
-      </div>
+      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">{children}</div>
    </div>
  );
 }
--- a/src/components/InputField.stories.tsx
+++ b/src/components/InputField.stories.tsx
@@ -10,94 +10,96 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Text input field with optional label, validation state, size/layout variants, and password visibility toggle.'
-      }
-    }
+        component:
+          'Text input field with optional label, validation state, size/layout variants, and password visibility toggle.',
+      },
+    },
  },
  argTypes: {
    label: {
      description: 'Label text shown above (stacked) or on the left (inline).',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    placeholder: {
      description: 'Input placeholder text.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    type: {
      description: 'Native input type.',
      options: ['text', 'password', 'email'],
      control: 'inline-radio',
-      table: { type: { summary: "'text' | 'password' | 'email'" } }
+      table: { type: { summary: "'text' | 'password' | 'email'" } },
    },
    size: {
      description: 'Input size.',
      options: ['sm', 'md', 'lg', 'full'],
      control: 'inline-radio',
-      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } }
+      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
    },
    layout: {
      description: 'Label/input layout mode.',
      options: ['stacked', 'inline'],
      control: 'inline-radio',
-      table: { type: { summary: "'stacked' | 'inline'" } }
+      table: { type: { summary: "'stacked' | 'inline'" } },
    },
    value: {
      description: 'Controlled input value.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    name: {
      description: 'Native input `name` attribute.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    disabled: {
      description: 'Disables the input.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    required: {
      description: 'Sets the native HTML `required` attribute.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    error: {
      description: 'Validation message shown below the field.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    rightIcon: {
-      description: 'Optional trailing icon node (ignored for password type because toggle icon is used).',
+      description:
+        'Optional trailing icon node (ignored for password type because toggle icon is used).',
      control: false,
-      table: { type: { summary: 'ReactNode' } }
+      table: { type: { summary: 'ReactNode' } },
    },
    className: {
      description: 'Extra CSS classes for the outer wrapper.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    inputClassName: {
      description: 'Extra CSS classes for the `<input>` element.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    onChange: {
      description: 'Change handler callback.',
      action: 'changed',
-      table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } }
+      table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } },
    },
    onBlur: {
      description: 'Blur handler callback.',
      control: false,
-      table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } }
+      table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } },
    },
    inputRef: {
      description: 'Ref forwarded to the native `<input>` element.',
      control: false,
-      table: { type: { summary: 'Ref<HTMLInputElement>' } }
-    }
+      table: { type: { summary: 'Ref<HTMLInputElement>' } },
+    },
  },
  args: {
    label: 'Email',
@@ -105,8 +107,8 @@ const meta = {
    placeholder: 'name@example.com',
    value: '',
    size: 'md',
-    layout: 'stacked'
-  }
+    layout: 'stacked',
+  },
 } satisfies Meta<typeof InputField>;

 export default meta;
@@ -116,7 +118,7 @@ export const Text: Story = {
  args: {
    type: 'text',
    label: 'Title',
-    placeholder: 'Write a title'
+    placeholder: 'Write a title',
  },
  render: (args) => {
    const [value, setValue] = useState('Storybook integration');
@@ -130,14 +132,14 @@ export const Text: Story = {
        }}
      />
    );
-  }
+  },
 };

 export const PasswordWithToggle: Story = {
  args: {
    type: 'password',
    label: 'Password',
-    placeholder: 'Type a strong password'
+    placeholder: 'Type a strong password',
  },
  render: (args) => {
    const [value, setValue] = useState('pa55word');
@@ -151,7 +153,7 @@ export const PasswordWithToggle: Story = {
        }}
      />
    );
-  }
+  },
 };

 export const InlineWithIcon: Story = {
@@ -160,7 +162,7 @@ export const InlineWithIcon: Story = {
    label: 'Search',
    layout: 'inline',
    size: 'sm',
-    rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />
+    rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
  },
  render: (args) => {
    const [value, setValue] = useState('posts');
@@ -174,7 +176,7 @@ export const InlineWithIcon: Story = {
        }}
      />
    );
-  }
+  },
 };

 export const Error: Story = {
@@ -182,8 +184,8 @@ export const Error: Story = {
    type: 'email',
    label: 'Email',
    value: 'invalid.mail',
-    error: 'Enter a valid email address'
-  }
+    error: 'Enter a valid email address',
+  },
 };

 export const Disabled: Story = {
@@ -191,25 +193,45 @@ export const Disabled: Story = {
    type: 'text',
    label: 'Read only field',
    value: 'Locked content',
-    disabled: true
-  }
+    disabled: true,
+  },
 };

 export const SizeMatrix: Story = {
  args: {
    type: 'text',
    label: 'Name',
-    placeholder: 'Enter value'
+    placeholder: 'Enter value',
  },
  render: (args) => {
    const [value, setValue] = useState('Beatrice');
    return (
      <div className="grid grid-cols-1 gap-3">
-        <InputField {...args} value={value} size="sm" onChange={(event) => setValue(event.target.value)} />
-        <InputField {...args} value={value} size="md" onChange={(event) => setValue(event.target.value)} />
-        <InputField {...args} value={value} size="lg" onChange={(event) => setValue(event.target.value)} />
-        <InputField {...args} value={value} size="full" onChange={(event) => setValue(event.target.value)} />
+        <InputField
+          {...args}
+          value={value}
+          size="sm"
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <InputField
+          {...args}
+          value={value}
+          size="md"
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <InputField
+          {...args}
+          value={value}
+          size="lg"
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <InputField
+          {...args}
+          value={value}
+          size="full"
+          onChange={(event) => setValue(event.target.value)}
+        />
      </div>
    );
-  }
+  },
 };
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -42,26 +42,25 @@ export function InputField({
  error,
  rightIcon,
  className = '',
-  inputClassName = ''
+  inputClassName = '',
 }: Readonly<InputFieldProps>) {
  const [showPassword, setShowPassword] = useState(false);
  const containerSizeClass = {
    sm: 'max-w-xs',
    md: 'max-w-sm',
    lg: 'max-w-md',
-    full: 'max-w-none'
+    full: 'max-w-none',
  }[size];

  const inputSizeClass = {
    sm: 'h-8 !text-xs',
    md: 'h-10 text-sm',
    lg: 'h-12 text-sm',
-    full: 'h-10 text-sm'
+    full: 'h-10 text-sm',
  }[size];

-  const wrapperClass = layout === 'inline'
-    ? 'inline-flex w-auto items-center gap-2'
-    : 'block w-full gap-1';
+  const wrapperClass =
+    layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
  const isPasswordType = type === 'password';
  const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
@@ -69,7 +68,9 @@ export function InputField({
  const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';

  return (
-    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+    <label
+      className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+    >
      {label ? <span className={labelClass}>{label}</span> : null}
      <div className={inputWrapperClass}>
        <input
@@ -100,7 +101,11 @@ export function InputField({
          </span>
        ) : null}
      </div>
-      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+      {error ? (
+        <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
+          {error}
+        </span>
+      ) : null}
    </label>
  );
 }
--- a/src/components/Label.stories.tsx
+++ b/src/components/Label.stories.tsx
@@ -8,37 +8,42 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Typography helper component for headings, body text, caption, error text, and inline code styles.'
-      }
-    }
+        component:
+          'Typography helper component for headings, body text, caption, error text, and inline code styles.',
+      },
+    },
  },
  argTypes: {
    variant: {
      description: 'Typography style preset.',
      options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
      control: 'select',
-      table: { type: { summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'" } }
+      table: {
+        type: {
+          summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
+        },
+      },
    },
    as: {
      description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
      control: false,
-      table: { type: { summary: 'ElementType' } }
+      table: { type: { summary: 'ElementType' } },
    },
    className: {
      description: 'Extra CSS classes.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    children: {
      description: 'Label content.',
      control: 'text',
-      table: { type: { summary: 'ReactNode' } }
-    }
+      table: { type: { summary: 'ReactNode' } },
+    },
  },
  args: {
    variant: 'body',
-    children: 'Label text'
-  }
+    children: 'Label text',
+  },
 } satisfies Meta<typeof Label>;

 export default meta;
@@ -49,15 +54,15 @@ export const Body: Story = {};
 export const Error: Story = {
  args: {
    variant: 'error',
-    children: 'This field is required'
-  }
+    children: 'This field is required',
+  },
 };

 export const Code: Story = {
  args: {
    variant: 'code',
-    children: 'const isPublished = true;'
-  }
+    children: 'const isPublished = true;',
+  },
 };

 export const VariantScale: Story = {
@@ -73,5 +78,5 @@ export const VariantScale: Story = {
      <Label variant="error">Error copy</Label>
      <Label variant="code">npm run build</Label>
    </div>
-  )
+  ),
 };
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -1,15 +1,6 @@
 import type { ElementType, ReactNode } from 'react';

-type LabelVariant =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'body'
-  | 'body2'
-  | 'caption'
-  | 'error'
-  | 'code';
+type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code';

 type LabelProps<T extends ElementType> = {
  variant?: LabelVariant;
@@ -27,7 +18,7 @@ const variantClassMap: Record<LabelVariant, string> = {
  body2: 'ui-body-secondary text-sm',
  caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
  error: 'ui-error text-sm',
-  code: 'ui-code text-sm font-mono'
+  code: 'ui-code text-sm font-mono',
 };

 const variantTagMap: Record<LabelVariant, ElementType> = {
@@ -39,14 +30,14 @@ const variantTagMap: Record<LabelVariant, ElementType> = {
  body2: 'p',
  caption: 'p',
  error: 'p',
-  code: 'code'
+  code: 'code',
 };

 export function Label<T extends ElementType = 'p'>({
  variant = 'body',
  as,
  className = '',
-  children
+  children,
 }: Readonly<LabelProps<T>>) {
  const Component = as ?? variantTagMap[variant];
  const classes = `${variantClassMap[variant]} ${className}`.trim();
--- a/src/components/MDXEditorField.stories.tsx
+++ b/src/components/MDXEditorField.stories.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { headingsPlugin, listsPlugin, markdownShortcutPlugin, quotePlugin } from '@mdxeditor/editor';
+import {
+  headingsPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  quotePlugin,
+} from '@mdxeditor/editor';
 import { MDXEditorField } from './MDXEditorField';

-const basePlugins = [
-  headingsPlugin(),
-  listsPlugin(),
-  quotePlugin(),
-  markdownShortcutPlugin()
-];
+const basePlugins = [headingsPlugin(), listsPlugin(), quotePlugin(), markdownShortcutPlugin()];

 const sampleMarkdown = `# Hello from MDXEditor

@@ -25,88 +25,89 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.'
-      }
-    }
+        component:
+          'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
+      },
+    },
  },
  argTypes: {
    label: {
      description: 'Field label shown above the editor.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    markdown: {
      description: 'Controlled markdown content value.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    readOnly: {
      description: 'Enables read-only mode.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    disabled: {
      description: 'Disables editing and applies disabled visuals.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    themeClassName: {
      description: 'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    plugins: {
      description: 'MDXEditor plugins array.',
      control: false,
-      table: { type: { summary: 'MDXEditorProps["plugins"]' } }
+      table: { type: { summary: 'MDXEditorProps["plugins"]' } },
    },
    contentEditableClassName: {
      description: 'CSS class used on the content editable area.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    className: {
      description: 'Extra CSS classes for the outer wrapper.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    editorWrapperClassName: {
      description: 'Extra CSS classes for the editor shell element.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    editorWrapperStyle: {
      description: 'Inline style object for the editor shell.',
      control: 'object',
-      table: { type: { summary: 'CSSProperties' } }
+      table: { type: { summary: 'CSSProperties' } },
    },
    editorClassName: {
      description: 'Extra CSS classes for the MDXEditor instance.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    error: {
      description: 'Error message shown below the editor.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    onChange: {
      description: 'Callback fired when markdown changes in editable mode.',
      action: 'changed',
-      table: { type: { summary: '(markdown: string) => void' } }
+      table: { type: { summary: '(markdown: string) => void' } },
    },
    editorRef: {
      description: 'Ref to MDXEditor methods.',
      control: false,
-      table: { type: { summary: 'Ref<MDXEditorMethods | null>' } }
-    }
+      table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
+    },
  },
  args: {
    label: 'Content',
    markdown: sampleMarkdown,
    plugins: basePlugins,
-    themeClassName: ''
-  }
+    themeClassName: '',
+  },
 } satisfies Meta<typeof MDXEditorField>;

 export default meta;
@@ -128,34 +129,28 @@ export const Editable: Story = {
        />
      </div>
    );
-  }
+  },
 };

 export const ReadOnly: Story = {
  args: {
-    readOnly: true
+    readOnly: true,
  },
  render: (args) => (
    <div className="w-full max-w-2xl">
-      <MDXEditorField
-        {...args}
-        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
-      />
+      <MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
    </div>
-  )
+  ),
 };

 export const DisabledWithError: Story = {
  args: {
    disabled: true,
-    error: 'Editor is currently disabled'
+    error: 'Editor is currently disabled',
  },
  render: (args) => (
    <div className="w-full max-w-2xl">
-      <MDXEditorField
-        {...args}
-        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
-      />
+      <MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
    </div>
-  )
+  ),
 };
--- a/src/components/MDXEditorField.tsx
+++ b/src/components/MDXEditorField.tsx
@@ -33,20 +33,28 @@ export function MDXEditorField({
  editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
  editorWrapperStyle,
  editorClassName = '',
-  error
+  error,
 }: Readonly<MDXEditorFieldProps>) {
  const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
  const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
-  const resolvedEditorWrapperClassName = `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
+  const resolvedEditorWrapperClassName =
+    `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
  const resolvedEditorWrapperStyle: CSSProperties = {
    backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
    borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
-    ...editorWrapperStyle
+    ...editorWrapperStyle,
  };

  return (
    <div className={className}>
-      {label ? <Label variant="body" className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}>{label}</Label> : null}
+      {label ? (
+        <Label
+          variant="body"
+          className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}
+        >
+          {label}
+        </Label>
+      ) : null}
      <div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
        <MDXEditor
          key={editorModeKey}
@@ -59,7 +67,11 @@ export function MDXEditorField({
          plugins={plugins}
        />
      </div>
-      {error ? <Label variant="error" className="mt-2 ui-error">{error}</Label> : null}
+      {error ? (
+        <Label variant="error" className="mt-2 ui-error">
+          {error}
+        </Label>
+      ) : null}
    </div>
  );
 }
--- a/src/components/SidebarNavItem.stories.tsx
+++ b/src/components/SidebarNavItem.stories.tsx
@@ -10,43 +10,44 @@ const meta = {
    layout: 'padded',
    docs: {
      description: {
-        component: 'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.'
-      }
-    }
+        component:
+          'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.',
+      },
+    },
  },
  argTypes: {
    to: {
      description: 'Destination route path.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    label: {
      description: 'Navigation item label.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    icon: {
      description: 'Icon component rendered before the label.',
      control: false,
-      table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } }
+      table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } },
    },
    collapsed: {
      description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    onClick: {
      description: 'Optional click callback (for example to close mobile drawer).',
      action: 'clicked',
-      table: { type: { summary: '() => void' } }
-    }
+      table: { type: { summary: '() => void' } },
+    },
  },
  args: {
    to: '/',
    label: 'Dashboard',
    icon: HomeIcon,
-    collapsed: false
-  }
+    collapsed: false,
+  },
 } satisfies Meta<typeof SidebarNavItem>;

 export default meta;
@@ -57,14 +58,19 @@ export const Expanded: Story = {
    <nav className="flex w-56 flex-col gap-1">
      <SidebarNavItem {...args} />
      <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
-      <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed={args.collapsed} />
+      <SidebarNavItem
+        to="/profile"
+        label="Profile"
+        icon={UserCircleIcon}
+        collapsed={args.collapsed}
+      />
    </nav>
-  )
+  ),
 };

 export const Collapsed: Story = {
  args: {
-    collapsed: true
+    collapsed: true,
  },
  render: (args) => (
    <nav className="flex w-14 flex-col gap-1">
@@ -72,5 +78,5 @@ export const Collapsed: Story = {
      <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
      <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
    </nav>
-  )
+  ),
 };
--- a/src/components/SidebarNavItem.tsx
+++ b/src/components/SidebarNavItem.tsx
@@ -11,7 +11,13 @@ type SidebarNavItemProps = {
  onClick?: () => void;
 };

-export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
+export function SidebarNavItem({
+  to,
+  label,
+  icon: Icon,
+  collapsed,
+  onClick,
+}: Readonly<SidebarNavItemProps>) {
  const layoutClass = collapsed
    ? 'mx-auto w-8 justify-center px-0'
    : 'px-2 lg:w-full lg:justify-start';
@@ -20,14 +26,18 @@ export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Re
    <NavLink
      to={to}
      onClick={onClick}
-      className={({ isActive }) => (
+      className={({ isActive }) =>
        `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
          isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
        }`
-      )}
+      }
    >
      <Icon className="h-4 w-4 shrink-0" />
-      {!collapsed ? <span className="ml-2 truncate leading-none">{label}</span> : <span className="ml-2 lg:hidden">{label}</span>}
+      {!collapsed ? (
+        <span className="ml-2 truncate leading-none">{label}</span>
+      ) : (
+        <span className="ml-2 lg:hidden">{label}</span>
+      )}
    </NavLink>
  );
 }
--- a/src/components/Table.stories.tsx
+++ b/src/components/Table.stories.tsx
@@ -20,7 +20,7 @@ const rows: UserRow[] = [
  { id: '5', name: 'Andrea Pini', role: 'EDITOR', status: 'Pending', posts: 9 },
  { id: '6', name: 'Sofia Denti', role: 'AUTHOR', status: 'Active', posts: 7 },
  { id: '7', name: 'Marco Serra', role: 'AUTHOR', status: 'Active', posts: 18 },
-  { id: '8', name: 'Elena Neri', role: 'EDITOR', status: 'Active', posts: 31 }
+  { id: '8', name: 'Elena Neri', role: 'EDITOR', status: 'Active', posts: 31 },
 ];

 const headers: TableHeader<UserRow>[] = [
@@ -30,14 +30,14 @@ const headers: TableHeader<UserRow>[] = [
    value: (row) => row.name,
    sortable: true,
    sortField: 'name',
-    cellClassName: 'table-cell-primary'
+    cellClassName: 'table-cell-primary',
  },
  {
    id: 'role',
    label: 'Role',
    value: (row) => row.role,
    sortable: true,
-    sortField: 'role'
+    sortField: 'role',
  },
  {
    id: 'status',
@@ -46,15 +46,15 @@ const headers: TableHeader<UserRow>[] = [
      <Chip variant="outlined" tone={row.status === 'Active' ? 'indigo-700' : 'cyan-700'}>
        {row.status}
      </Chip>
-    )
+    ),
  },
  {
    id: 'posts',
    label: 'Posts',
    value: (row) => row.posts,
    sortable: true,
-    sortField: 'posts'
-  }
+    sortField: 'posts',
+  },
 ];

 type UsersTableProps = {
@@ -117,49 +117,50 @@ const meta = {
  parameters: {
    docs: {
      description: {
-        component: 'Generic data table with loading/empty states, optional sorting controls, and optional pagination footer.'
-      }
-    }
+        component:
+          'Generic data table with loading/empty states, optional sorting controls, and optional pagination footer.',
+      },
+    },
  },
  argTypes: {
    data: {
      description: 'Rows rendered in the table body.',
      control: 'object',
-      table: { type: { summary: 'UserRow[]' } }
+      table: { type: { summary: 'UserRow[]' } },
    },
    isLoading: {
      description: 'When true, shows the loading indicator row.',
      control: 'boolean',
-      table: { type: { summary: 'boolean' } }
+      table: { type: { summary: 'boolean' } },
    },
    emptyMessage: {
      description: 'Message shown when `data` is empty and `isLoading` is false.',
      control: 'text',
-      table: { type: { summary: 'string' } }
+      table: { type: { summary: 'string' } },
    },
    sorting: {
-      description: "Current sort state object. Use `null` for no active sorting.",
+      description: 'Current sort state object. Use `null` for no active sorting.',
      control: 'object',
-      table: { type: { summary: "{ field: string; direction: 'asc' | 'desc' } | null" } }
+      table: { type: { summary: "{ field: string; direction: 'asc' | 'desc' } | null" } },
    },
    onSortChange: {
      description: 'Callback fired when a sortable header is clicked.',
      action: 'sort changed',
-      table: { type: { summary: '(field: string) => void' } }
+      table: { type: { summary: '(field: string) => void' } },
    },
    pagination: {
      description: 'Pagination config object. When omitted, pagination footer is hidden.',
      control: 'object',
      table: {
        type: {
-          summary: '{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }'
-        }
-      }
-    }
+          summary: '{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }',
+        },
+      },
+    },
  },
  args: {
-    data: rows
-  }
+    data: rows,
+  },
 } satisfies Meta<typeof UsersTable>;

 export default meta;
@@ -169,22 +170,22 @@ export const WithRows: Story = {};

 export const Loading: Story = {
  args: {
-    isLoading: true
-  }
+    isLoading: true,
+  },
 };

 export const Empty: Story = {
  args: {
    data: [],
-    emptyMessage: 'No users found'
-  }
+    emptyMessage: 'No users found',
+  },
 };

 export const InteractiveSortingAndPagination: Story = {
  render: () => {
    const [sorting, setSorting] = useState<SortState | null>({
      field: 'name',
-      direction: 'asc'
+      direction: 'asc',
    });
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(5);
@@ -220,9 +221,9 @@ export const InteractiveSortingAndPagination: Story = {
          onPageSizeChange: (next) => {
            setPage(1);
            setPageSize(next);
-          }
+          },
        }}
      />
    );
-  }
+  },
 };
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,5 +1,11 @@
 import type { ReactNode } from 'react';
-import { ArrowPathIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import {
+  ArrowPathIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+} from '@heroicons/react/24/solid';
 import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
 import { Button } from './Button';
 import { Dropdown } from './Dropdown';
@@ -46,7 +52,7 @@ export function Table<T>({
  className = '',
  sorting = null,
  onSortChange,
-  pagination
+  pagination,
 }: Readonly<TableProps<T>>) {
  const canGoPrev = pagination != null && pagination.page > 1;
  const canGoNext = pagination != null && pagination.page < pagination.totalPages;
@@ -58,15 +64,19 @@ export function Table<T>({
          <thead className="table-head">
            <tr>
              {headers.map((header) => {
-                const canSort = header.sortable === true
-                  && typeof onSortChange === 'function'
-                  && typeof header.sortField === 'string'
-                  && header.sortField.length > 0;
+                const canSort =
+                  header.sortable === true &&
+                  typeof onSortChange === 'function' &&
+                  typeof header.sortField === 'string' &&
+                  header.sortField.length > 0;
                const isActiveSort = canSort && sorting?.field === header.sortField;
                const sortDirection = isActiveSort ? sorting?.direction : null;

                return (
-                  <th key={header.id} className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}>
+                  <th
+                    key={header.id}
+                    className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}
+                  >
                    {canSort ? (
                      <button
                        type="button"
@@ -75,16 +85,16 @@ export function Table<T>({
                        aria-label={`Sort by ${header.label}`}
                      >
                        <span>{header.label}</span>
-                        <span className="table-sort-icon" aria-hidden="true" data-sort-state={sortDirection ?? 'none'}>
-                          {sortDirection === 'asc' ? (
-                            <ChevronUpIcon className="h-4 w-4" />
-                          ) : null}
+                        <span
+                          className="table-sort-icon"
+                          aria-hidden="true"
+                          data-sort-state={sortDirection ?? 'none'}
+                        >
+                          {sortDirection === 'asc' ? <ChevronUpIcon className="h-4 w-4" /> : null}
                          {sortDirection === 'desc' ? (
                            <ChevronDownIcon className="h-4 w-4" />
                          ) : null}
-                          {sortDirection == null ? (
-                            <ArrowsUpDownIcon className="h-4 w-4" />
-                          ) : null}
+                          {sortDirection == null ? <ArrowsUpDownIcon className="h-4 w-4" /> : null}
                        </span>
                      </button>
                    ) : (
@@ -99,7 +109,11 @@ export function Table<T>({
            {isLoading ? (
              <tr className="table-body-row">
                <td colSpan={headers.length} className="px-4 py-6 text-center">
-                  <Label as="span" variant="body2" className="inline-flex items-center justify-center ui-loading">
+                  <Label
+                    as="span"
+                    variant="body2"
+                    className="inline-flex items-center justify-center ui-loading"
+                  >
                    <ArrowPathIcon className="h-5 w-5 animate-spin" aria-hidden="true" />
                  </Label>
                </td>
@@ -114,28 +128,31 @@ export function Table<T>({
                </td>
              </tr>
            ) : null}
-            {!isLoading && data.map((row, index) => (
-              <tr key={rowKey(row, index)} className="table-body-row">
-                {headers.map((header) => {
-                  const content = typeof header.value === 'function'
-                    ? (header.value as (item: T) => ReactNode)(row)
-                    : header.value;
-                  return (
-                    <td key={`${header.id}-${index}`} className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}>
-                      {content}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
+            {!isLoading &&
+              data.map((row, index) => (
+                <tr key={rowKey(row, index)} className="table-body-row">
+                  {headers.map((header) => {
+                    const content =
+                      typeof header.value === 'function'
+                        ? (header.value as (item: T) => ReactNode)(row)
+                        : header.value;
+                    return (
+                      <td
+                        key={`${header.id}-${index}`}
+                        className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}
+                      >
+                        {content}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
          </tbody>
        </table>
      </div>
      {pagination ? (
        <div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-          <Label variant="body2">
-            {pagination.total} results
-          </Label>
+          <Label variant="body2">{pagination.total} results</Label>
          <div className="flex flex-wrap items-center gap-2">
            {pagination.onPageSizeChange ? (
              <Dropdown
@@ -143,7 +160,7 @@ export function Table<T>({
                value={String(pagination.pageSize)}
                choices={[5, 10, 20, 50, 100].map((size) => ({
                  id: String(size),
-                  label: String(size)
+                  label: String(size),
                }))}
                size="sm"
                layout="inline"
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -91,4 +91,3 @@
  --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
  --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
 }
-