v0.1.7

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 dist/
 build/
 coverage/
+storybook-static/
 
 # Vite / tooling caches
 .vite/
@@ -47,4 +48,4 @@ crashlytics-build.properties
 fabric.properties
 
 # Editor-based HTTP Client
-http-client.private.env.json
+http-client.private.env.json

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: var(--bg-page);
+  color: var(--text-primary);
+}

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import '@mdxeditor/editor/style.css';
+import './preview.css';
+import '../src/styles/base.css';
+import '../src/styles/components.css';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    )
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    layout: 'centered'
+  }
+};
+
+export default preview;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panic/web-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "AGPL-3.0-only",
   "description": "Core components for panic.haus web applications",
   "type": "module",
@@ -27,6 +27,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn clean && vite build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/base.css dist/styles/base.css && tailwindcss -c tailwind.build.config.cjs -i src/styles/components.css -o dist/styles/components.css --minify && tailwindcss -c tailwind.build.config.cjs -i src/styles/utilities.css -o dist/styles/utilities.css --minify && cp tailwind-preset.cjs dist/tailwind-preset.cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prepublishOnly": "yarn build",
     "publish:nexus": "npm publish --registry ${NEXUS_NPM_REGISTRY:-https://nexus.beatrice.wtf/repository/npm-hosted/}"
   },
@@ -47,16 +49,27 @@
     }
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-themes": "^10.2.10",
+    "@storybook/react": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "@codemirror/language": "^6.11.3",
     "@heroicons/react": "^2.2.0",
+    "@lezer/highlight": "^1.2.1",
     "@mdxeditor/editor": "^3.52.4",
+    "@testing-library/dom": "^10.4.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "postcss": "^8.4.49",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0",
+    "storybook": "^10.2.10",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.6.2",
-    "vite": "^7.0.0"
+    "vite": "^7.0.0",
+    "yjs": "^13.6.24"
   }
 }

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: './tailwind.storybook.config.cjs'
+    }
+  }
+};

src/components/Button.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlusIcon } from '@heroicons/react/24/solid';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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' } }
+    },
+    type: {
+      description: 'Base visual style.',
+      options: ['solid', 'outlined', 'noborder'],
+      control: 'inline-radio',
+      table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } }
+    },
+    variant: {
+      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'" } }
+    },
+    size: {
+      description: 'Button size.',
+      options: ['sm', 'md', 'lg', 'full'],
+      control: 'inline-radio',
+      table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } }
+    },
+    to: {
+      description: 'Navigation path. When set, the component renders a `<Link>`.',
+      control: 'text',
+      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'" } }
+    },
+    disabled: {
+      description: 'Disables interaction and hover/click states.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    icon: {
+      description: 'Optional icon component (for example Heroicons).',
+      control: false,
+      table: { type: { summary: 'ElementType' } }
+    },
+    ariaLabel: {
+      description: 'Accessible label. Falls back to `label` when not provided.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the root element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    onClick: {
+      description: 'Click handler callback.',
+      action: 'clicked',
+      table: { type: { summary: 'MouseEventHandler<HTMLElement>' } }
+    }
+  },
+  args: {
+    type: 'solid',
+    variant: 'primary',
+    size: 'md',
+    label: 'Save'
+  }
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SolidPrimary: Story = {};
+
+export const SolidImportant: Story = {
+  args: {
+    type: 'solid',
+    variant: 'important',
+    label: 'Delete'
+  }
+};
+
+export const OutlinedSecondary: Story = {
+  args: {
+    type: 'outlined',
+    variant: 'secondary',
+    label: 'Cancel'
+  }
+};
+
+export const IconOnly: Story = {
+  args: {
+    icon: PlusIcon,
+    label: undefined,
+    ariaLabel: 'Add item'
+  }
+};
+
+export const LinkButton: Story = {
+  args: {
+    to: '/demo',
+    label: 'Go to demo'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true
+  }
+};
+
+export const SizeMatrix: Story = {
+  render: (args) => (
+    <div className="grid grid-cols-1 gap-3">
+      <Button {...args} size="sm" label="Small" />
+      <Button {...args} size="md" label="Medium" />
+      <Button {...args} size="lg" label="Large" />
+      <Button {...args} size="full" label="Full width" />
+    </div>
+  )
+};

src/components/Chip.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  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.'
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      description: 'Chip visual style.',
+      options: ['solid', 'outlined'],
+      control: 'inline-radio',
+      table: { type: { summary: "'solid' | 'outlined'" } }
+    },
+    tone: {
+      description: 'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    as: {
+      description: "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
+      control: false,
+      table: { type: { summary: 'ElementType' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the root element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    children: {
+      description: 'Text or React node rendered inside the chip.',
+      control: 'text',
+      table: { type: { summary: 'ReactNode' } }
+    }
+  },
+  args: {
+    children: 'Published',
+    variant: 'solid'
+  }
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SolidDefault: Story = {};
+
+export const OutlinedIndigo: Story = {
+  args: {
+    variant: 'outlined',
+    tone: 'indigo-700',
+    children: 'Draft'
+  }
+};
+
+export const OutlinedCyan: Story = {
+  args: {
+    variant: 'outlined',
+    tone: 'cyan-700',
+    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="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>
+    </div>
+  )
+};

src/components/Chip.tsx

@@ -1,11 +1,12 @@
-import type { ElementType, ReactNode } from 'react';
+import * as tailwindColors from 'tailwindcss/colors';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
 
 type ChipVariant = 'solid' | 'outlined';
-type ChipTone = 'neutral' | 'indigo' | 'cyan';
 
 type ChipProps<T extends ElementType> = {
   variant?: ChipVariant;
-  tone?: ChipTone;
+  // Tailwind color token, e.g. "cyan-700", "indigo-500", "rose-600".
+  tone?: string;
   as?: T;
   className?: string;
   children: ReactNode;
@@ -16,21 +17,49 @@ const variantClassMap: Record<ChipVariant, string> = {
   outlined: 'chip-outlined'
 };
 
-const toneClassMap: Record<ChipTone, string> = {
-  neutral: 'chip-neutral',
-  indigo: 'chip-indigo',
-  cyan: 'chip-cyan'
-};
+type TailwindPalette = Record<string, string>;
+
+function resolveTailwindToneColor(tone: string | undefined): string | null {
+  const normalizedTone = tone?.trim().toLowerCase();
+  if (normalizedTone == null || normalizedTone === '') {
+    return null;
+  }
+
+  const colorSource = tailwindColors as unknown as Record<string, unknown>;
+  const lastDashIndex = normalizedTone.lastIndexOf('-');
+
+  if (lastDashIndex === -1) {
+    const direct = colorSource[normalizedTone];
+    return typeof direct === 'string' ? direct : null;
+  }
+
+  const colorName = normalizedTone.slice(0, lastDashIndex);
+  const shade = normalizedTone.slice(lastDashIndex + 1);
+  const palette = colorSource[colorName];
+
+  if (palette == null || typeof palette !== 'object') {
+    return null;
+  }
+
+  const shadeColor = (palette as TailwindPalette)[shade];
+  return typeof shadeColor === 'string' ? shadeColor : null;
+}
 
 export function Chip<T extends ElementType = 'span'>({
   variant = 'solid',
-  tone = 'neutral',
+  tone,
   as,
   className = '',
   children
 }: Readonly<ChipProps<T>>) {
   const Component = as ?? 'span' as ElementType;
-  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
+  const toneColor = resolveTailwindToneColor(tone);
+  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}>{children}</Component>;
+  return <Component className={classes} style={toneStyle}>{children}</Component>;
 }

src/components/Dropdown.stories.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from './Dropdown';
+
+const choices = [
+  { id: 'draft', label: 'Draft' },
+  { id: 'review', label: 'In review' },
+  { id: 'published', label: 'Published' }
+];
+
+const meta = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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' } }
+    },
+    value: {
+      description: 'Current selected value (must match one `choices[].id`).',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    choices: {
+      description: "Options list in `{ id: string; label: string }` format.",
+      control: 'object',
+      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'" } }
+    },
+    layout: {
+      description: 'Label/control layout mode.',
+      options: ['stacked', 'inline'],
+      control: 'inline-radio',
+      table: { type: { summary: "'stacked' | 'inline'" } }
+    },
+    disabled: {
+      description: 'Disables the field.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    required: {
+      description: 'Sets the native HTML `required` attribute.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    error: {
+      description: 'Error message shown below the field.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the wrapper.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    selectClassName: {
+      description: 'Extra CSS classes for the `<select>` element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    onChange: {
+      description: 'Callback fired with the newly selected value.',
+      action: 'changed',
+      table: { type: { summary: '(value: string) => void' } }
+    }
+  },
+  args: {
+    label: 'Status',
+    value: 'draft',
+    choices,
+    size: 'md',
+    layout: 'stacked'
+  }
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Stacked: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <Dropdown
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    );
+  }
+};
+
+export const Inline: Story = {
+  args: {
+    layout: 'inline',
+    size: 'sm'
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <Dropdown
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    );
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true
+  }
+};
+
+export const WithError: Story = {
+  args: {
+    error: 'Please choose a valid status'
+  }
+};
+
+export const SizeMatrix: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <div className="grid grid-cols-1 gap-3">
+        <Dropdown {...args} value={value} size="sm" label="Small" onChange={setValue} />
+        <Dropdown {...args} value={value} size="md" label="Medium" onChange={setValue} />
+        <Dropdown {...args} value={value} size="lg" label="Large" onChange={setValue} />
+        <Dropdown {...args} value={value} size="full" label="Full" onChange={setValue} />
+      </div>
+    );
+  }
+};

src/components/Dropdown.tsx

@@ -44,7 +44,7 @@ export function Dropdown({
   }[size];
 
   const selectSizeClass = {
-    sm: 'h-8 text-xs',
+    sm: 'h-8 !text-xs',
     md: 'h-10 text-sm',
     lg: 'h-12 text-sm',
     full: 'h-10 text-sm'
@@ -58,7 +58,7 @@ export function Dropdown({
     ? 'inline-flex w-auto items-center gap-2'
     : 'block w-full gap-1';
 
-  const selectWrapperClass = 'relative';
+  const selectWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
   const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
 
   return (

src/components/Form.stories.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import { Dropdown } from './Dropdown';
+import { Form } from './Form';
+import { InputField } from './InputField';
+
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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' } }
+    },
+    titleBarRight: {
+      description: 'Optional node rendered on the right side of the title bar.',
+      control: false,
+      table: { type: { summary: 'ReactNode' } }
+    },
+    children: {
+      description: 'Form content rendered inside the responsive grid.',
+      control: false,
+      table: { type: { summary: 'ReactNode' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the root container.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    }
+  },
+  args: {
+    title: 'Post details'
+  }
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: (
+      <>
+        <InputField label="Title" type="text" value="A short post title" />
+        <Dropdown
+          label="Status"
+          value="draft"
+          choices={[
+            { id: 'draft', label: 'Draft' },
+            { id: 'published', label: 'Published' }
+          ]}
+        />
+        <InputField label="Slug" type="text" value="a-short-post-title" />
+      </>
+    )
+  }
+};
+
+export const WithActions: Story = {
+  render: (args) => {
+    const [title, setTitle] = useState('Storybook powered CMS');
+    const [status, setStatus] = useState('draft');
+
+    return (
+      <Form
+        {...args}
+        titleBarRight={<Button type="solid" size="sm" label="Save" />}
+      >
+        <div className="col-span-2">
+          <InputField
+            label="Title"
+            type="text"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            size="full"
+          />
+        </div>
+        <Dropdown
+          label="Status"
+          value={status}
+          onChange={setStatus}
+          choices={[
+            { id: 'draft', label: 'Draft' },
+            { id: 'review', label: 'In review' },
+            { id: 'published', label: 'Published' }
+          ]}
+        />
+        <InputField label="Slug" type="text" value="storybook-powered-cms" />
+      </Form>
+    );
+  }
+};

src/components/InputField.stories.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { InputField } from './InputField';
+
+const meta = {
+  title: 'Components/InputField',
+  component: InputField,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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' } }
+    },
+    placeholder: {
+      description: 'Input placeholder text.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    type: {
+      description: 'Native input type.',
+      options: ['text', 'password', 'email'],
+      control: 'inline-radio',
+      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'" } }
+    },
+    layout: {
+      description: 'Label/input layout mode.',
+      options: ['stacked', 'inline'],
+      control: 'inline-radio',
+      table: { type: { summary: "'stacked' | 'inline'" } }
+    },
+    value: {
+      description: 'Controlled input value.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    name: {
+      description: 'Native input `name` attribute.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    disabled: {
+      description: 'Disables the input.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    required: {
+      description: 'Sets the native HTML `required` attribute.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    error: {
+      description: 'Validation message shown below the field.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    rightIcon: {
+      description: 'Optional trailing icon node (ignored for password type because toggle icon is used).',
+      control: false,
+      table: { type: { summary: 'ReactNode' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the outer wrapper.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    inputClassName: {
+      description: 'Extra CSS classes for the `<input>` element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    onChange: {
+      description: 'Change handler callback.',
+      action: 'changed',
+      table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } }
+    },
+    onBlur: {
+      description: 'Blur handler callback.',
+      control: false,
+      table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } }
+    },
+    inputRef: {
+      description: 'Ref forwarded to the native `<input>` element.',
+      control: false,
+      table: { type: { summary: 'Ref<HTMLInputElement>' } }
+    }
+  },
+  args: {
+    label: 'Email',
+    type: 'email',
+    placeholder: 'name@example.com',
+    value: '',
+    size: 'md',
+    layout: 'stacked'
+  }
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {
+    type: 'text',
+    label: 'Title',
+    placeholder: 'Write a title'
+  },
+  render: (args) => {
+    const [value, setValue] = useState('Storybook integration');
+    return (
+      <InputField
+        {...args}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+          args.onChange?.(event);
+        }}
+      />
+    );
+  }
+};
+
+export const PasswordWithToggle: Story = {
+  args: {
+    type: 'password',
+    label: 'Password',
+    placeholder: 'Type a strong password'
+  },
+  render: (args) => {
+    const [value, setValue] = useState('pa55word');
+    return (
+      <InputField
+        {...args}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+          args.onChange?.(event);
+        }}
+      />
+    );
+  }
+};
+
+export const InlineWithIcon: Story = {
+  args: {
+    type: 'text',
+    label: 'Search',
+    layout: 'inline',
+    size: 'sm',
+    rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />
+  },
+  render: (args) => {
+    const [value, setValue] = useState('posts');
+    return (
+      <InputField
+        {...args}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+          args.onChange?.(event);
+        }}
+      />
+    );
+  }
+};
+
+export const Error: Story = {
+  args: {
+    type: 'email',
+    label: 'Email',
+    value: 'invalid.mail',
+    error: 'Enter a valid email address'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    type: 'text',
+    label: 'Read only field',
+    value: 'Locked content',
+    disabled: true
+  }
+};
+
+export const SizeMatrix: Story = {
+  args: {
+    type: 'text',
+    label: 'Name',
+    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)} />
+      </div>
+    );
+  }
+};

src/components/InputField.tsx

@@ -53,7 +53,7 @@ export function InputField({
   }[size];
 
   const inputSizeClass = {
-    sm: 'h-8 text-xs',
+    sm: 'h-8 !text-xs',
     md: 'h-10 text-sm',
     lg: 'h-12 text-sm',
     full: 'h-10 text-sm'

src/components/Label.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './Label';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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'" } }
+    },
+    as: {
+      description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
+      control: false,
+      table: { type: { summary: 'ElementType' } }
+    },
+    className: {
+      description: 'Extra CSS classes.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    children: {
+      description: 'Label content.',
+      control: 'text',
+      table: { type: { summary: 'ReactNode' } }
+    }
+  },
+  args: {
+    variant: 'body',
+    children: 'Label text'
+  }
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Body: Story = {};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'This field is required'
+  }
+};
+
+export const Code: Story = {
+  args: {
+    variant: 'code',
+    children: 'const isPublished = true;'
+  }
+};
+
+export const VariantScale: Story = {
+  render: () => (
+    <div className="flex max-w-md flex-col gap-2">
+      <Label variant="caption">Caption</Label>
+      <Label variant="h1">Heading 1</Label>
+      <Label variant="h2">Heading 2</Label>
+      <Label variant="h3">Heading 3</Label>
+      <Label variant="h4">Heading 4</Label>
+      <Label variant="body">Primary body copy</Label>
+      <Label variant="body2">Secondary body copy</Label>
+      <Label variant="error">Error copy</Label>
+      <Label variant="code">npm run build</Label>
+    </div>
+  )
+};

src/components/MDXEditorField.stories.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { headingsPlugin, listsPlugin, markdownShortcutPlugin, quotePlugin } from '@mdxeditor/editor';
+import { MDXEditorField } from './MDXEditorField';
+
+const basePlugins = [
+  headingsPlugin(),
+  listsPlugin(),
+  quotePlugin(),
+  markdownShortcutPlugin()
+];
+
+const sampleMarkdown = `# Hello from MDXEditor
+
+This is a paragraph with **bold** and _italic_ text.
+
+- First bullet
+- Second bullet
+`;
+
+const meta = {
+  title: 'Components/MDXEditorField',
+  component: MDXEditorField,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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' } }
+    },
+    markdown: {
+      description: 'Controlled markdown content value.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    readOnly: {
+      description: 'Enables read-only mode.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    disabled: {
+      description: 'Disables editing and applies disabled visuals.',
+      control: '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' } }
+    },
+    plugins: {
+      description: 'MDXEditor plugins array.',
+      control: false,
+      table: { type: { summary: 'MDXEditorProps["plugins"]' } }
+    },
+    contentEditableClassName: {
+      description: 'CSS class used on the content editable area.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the outer wrapper.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    editorWrapperClassName: {
+      description: 'Extra CSS classes for the editor shell element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    editorWrapperStyle: {
+      description: 'Inline style object for the editor shell.',
+      control: 'object',
+      table: { type: { summary: 'CSSProperties' } }
+    },
+    editorClassName: {
+      description: 'Extra CSS classes for the MDXEditor instance.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    error: {
+      description: 'Error message shown below the editor.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    onChange: {
+      description: 'Callback fired when markdown changes in editable mode.',
+      action: 'changed',
+      table: { type: { summary: '(markdown: string) => void' } }
+    },
+    editorRef: {
+      description: 'Ref to MDXEditor methods.',
+      control: false,
+      table: { type: { summary: 'Ref<MDXEditorMethods | null>' } }
+    }
+  },
+  args: {
+    label: 'Content',
+    markdown: sampleMarkdown,
+    plugins: basePlugins,
+    themeClassName: ''
+  }
+} satisfies Meta<typeof MDXEditorField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Editable: Story = {
+  render: (args) => {
+    const [markdown, setMarkdown] = useState(args.markdown);
+    return (
+      <div className="w-full max-w-2xl">
+        <MDXEditorField
+          {...args}
+          markdown={markdown}
+          onChange={(next) => {
+            setMarkdown(next);
+            args.onChange?.(next);
+          }}
+          editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+        />
+      </div>
+    );
+  }
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true
+  },
+  render: (args) => (
+    <div className="w-full max-w-2xl">
+      <MDXEditorField
+        {...args}
+        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+      />
+    </div>
+  )
+};
+
+export const DisabledWithError: Story = {
+  args: {
+    disabled: true,
+    error: 'Editor is currently disabled'
+  },
+  render: (args) => (
+    <div className="w-full max-w-2xl">
+      <MDXEditorField
+        {...args}
+        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+      />
+    </div>
+  )
+};

src/components/SidebarNavItem.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline';
+import { SidebarNavItem } from './SidebarNavItem';
+
+const meta = {
+  title: 'Components/SidebarNavItem',
+  component: SidebarNavItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        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' } }
+    },
+    label: {
+      description: 'Navigation item label.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    icon: {
+      description: 'Icon component rendered before the label.',
+      control: false,
+      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' } }
+    },
+    onClick: {
+      description: 'Optional click callback (for example to close mobile drawer).',
+      action: 'clicked',
+      table: { type: { summary: '() => void' } }
+    }
+  },
+  args: {
+    to: '/',
+    label: 'Dashboard',
+    icon: HomeIcon,
+    collapsed: false
+  }
+} satisfies Meta<typeof SidebarNavItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Expanded: Story = {
+  render: (args) => (
+    <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} />
+    </nav>
+  )
+};
+
+export const Collapsed: Story = {
+  args: {
+    collapsed: true
+  },
+  render: (args) => (
+    <nav className="flex w-14 flex-col gap-1">
+      <SidebarNavItem {...args} />
+      <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
+      <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
+    </nav>
+  )
+};

src/components/Table.stories.tsx

@@ -0,0 +1,228 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SortState } from '../types/sort';
+import { Chip } from './Chip';
+import { Table, type TableHeader } from './Table';
+
+type UserRow = {
+  id: string;
+  name: string;
+  role: 'ADMIN' | 'EDITOR' | 'AUTHOR';
+  status: 'Active' | 'Pending';
+  posts: number;
+};
+
+const rows: UserRow[] = [
+  { id: '1', name: 'Beatrice Rosa', role: 'ADMIN', status: 'Active', posts: 48 },
+  { id: '2', name: 'Luca Valli', role: 'EDITOR', status: 'Active', posts: 26 },
+  { id: '3', name: 'Marta Bellini', role: 'AUTHOR', status: 'Pending', posts: 4 },
+  { id: '4', name: 'Giulia Fontana', role: 'AUTHOR', status: 'Active', posts: 12 },
+  { 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 }
+];
+
+const headers: TableHeader<UserRow>[] = [
+  {
+    id: 'name',
+    label: 'Name',
+    value: (row) => row.name,
+    sortable: true,
+    sortField: 'name',
+    cellClassName: 'table-cell-primary'
+  },
+  {
+    id: 'role',
+    label: 'Role',
+    value: (row) => row.role,
+    sortable: true,
+    sortField: 'role'
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    value: (row) => (
+      <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'
+  }
+];
+
+type UsersTableProps = {
+  data: UserRow[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  sorting?: SortState | null;
+  onSortChange?: (field: string) => void;
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+  };
+};
+
+function UsersTable(props: Readonly<UsersTableProps>) {
+  return (
+    <Table<UserRow>
+      headers={headers}
+      data={props.data}
+      rowKey={(row) => row.id}
+      isLoading={props.isLoading}
+      emptyMessage={props.emptyMessage}
+      sorting={props.sorting}
+      onSortChange={props.onSortChange}
+      pagination={props.pagination}
+    />
+  );
+}
+
+function sortRows(data: UserRow[], sorting: SortState | null): UserRow[] {
+  if (!sorting) {
+    return data;
+  }
+
+  const sorted = [...data];
+  sorted.sort((a, b) => {
+    const left = a[sorting.field as keyof UserRow];
+    const right = b[sorting.field as keyof UserRow];
+    if (left === right) {
+      return 0;
+    }
+    if (typeof left === 'number' && typeof right === 'number') {
+      return sorting.direction === 'asc' ? left - right : right - left;
+    }
+    return sorting.direction === 'asc'
+      ? String(left).localeCompare(String(right))
+      : String(right).localeCompare(String(left));
+  });
+  return sorted;
+}
+
+const meta = {
+  title: 'Components/Table',
+  component: UsersTable,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        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[]' } }
+    },
+    isLoading: {
+      description: 'When true, shows the loading indicator row.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    emptyMessage: {
+      description: 'Message shown when `data` is empty and `isLoading` is false.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    sorting: {
+      description: "Current sort state object. Use `null` for no active sorting.",
+      control: 'object',
+      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' } }
+    },
+    pagination: {
+      description: 'Pagination config object. When omitted, pagination footer is hidden.',
+      control: 'object',
+      table: {
+        type: {
+          summary: '{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }'
+        }
+      }
+    }
+  },
+  args: {
+    data: rows
+  }
+} satisfies Meta<typeof UsersTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithRows: Story = {};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    data: [],
+    emptyMessage: 'No users found'
+  }
+};
+
+export const InteractiveSortingAndPagination: Story = {
+  render: () => {
+    const [sorting, setSorting] = useState<SortState | null>({
+      field: 'name',
+      direction: 'asc'
+    });
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(5);
+
+    const sorted = useMemo(() => sortRows(rows, sorting), [sorting]);
+    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+    const safePage = Math.min(page, totalPages);
+    const start = (safePage - 1) * pageSize;
+    const pagedRows = sorted.slice(start, start + pageSize);
+
+    return (
+      <UsersTable
+        data={pagedRows}
+        sorting={sorting}
+        onSortChange={(field) => {
+          setPage(1);
+          setSorting((prev) => {
+            if (!prev || prev.field !== field) {
+              return { field, direction: 'asc' };
+            }
+            if (prev.direction === 'asc') {
+              return { field, direction: 'desc' };
+            }
+            return null;
+          });
+        }}
+        pagination={{
+          page: safePage,
+          pageSize,
+          total: sorted.length,
+          totalPages,
+          onPageChange: setPage,
+          onPageSizeChange: (next) => {
+            setPage(1);
+            setPageSize(next);
+          }
+        }}
+      />
+    );
+  }
+};

src/styles/components.css

@@ -223,40 +223,17 @@
 }
 
 .chip-solid {
-  color: #ffffff;
-}
-
-.chip-outlined {
-  background-color: transparent;
-}
-
-.chip-neutral.chip-solid {
   border-color: var(--ghost-border);
   background-color: var(--ghost-border);
   color: var(--text-primary);
 }
 
-.chip-neutral.chip-outlined {
+.chip-outlined {
+  background-color: transparent;
   border-color: var(--ghost-border);
   color: var(--text-secondary);
 }
 
-.chip-indigo.chip-solid {
-  @apply border-indigo-700 bg-indigo-700 text-white;
-}
-
-.chip-indigo.chip-outlined {
-  @apply border-indigo-700 text-indigo-300;
-}
-
-.chip-cyan.chip-solid {
-  @apply border-cyan-700 bg-cyan-700 text-white;
-}
-
-.chip-cyan.chip-outlined {
-  @apply border-cyan-700 text-cyan-300;
-}
-
 .alert-error {
   border: 1px solid var(--error-border);
   background-color: var(--error-bg);
@@ -310,4 +287,3 @@
   color: var(--text-secondary);
   @apply px-4 py-3 text-sm;
 }
-

tailwind.storybook.config.cjs

@@ -0,0 +1,14 @@
+const webUiPreset = require('./tailwind-preset.cjs');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [webUiPreset],
+  content: [
+    './src/**/*.{ts,tsx,js,jsx,mdx}',
+    './.storybook/**/*.{ts,tsx,js,jsx,mdx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

tsconfig.build.json

@@ -8,5 +8,6 @@
     "outDir": "dist",
     "declarationMap": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.stories.ts", "src/**/*.stories.tsx"]
 }