@k3-universe/react-kit 0.0.1

package/src/stories/kit/builder/Form.Dynamic.stories.tsx

@@ -0,0 +1,214 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import { createSection, createField, createDependency, conditions } from '../../../kit/builder/form/utils';
+
+const meta: Meta<typeof FormBuilder> = {
+  title: 'Kit/Builder/Form',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormBuilder>;
+
+export const DynamicExample: Story = {
+  name: 'Dynamic example',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Dynamic form submitted:', data);
+    };
+  
+    const handleFieldChange = (name: string, value: unknown) => {
+      console.log(`Field ${name} changed to:`, value);
+      if (name === 'productType' && value === 'subscription') {
+        console.log('Subscription product selected - additional fields will appear');
+      }
+      if (name === 'hasDiscount' && value === true) {
+        console.log('Discount enabled - discount fields will appear');
+      }
+    };
+  
+    const sections = [
+      createSection.card('Product Configuration', [
+        createField.select(
+          'productType',
+          'Product Type',
+          [
+            { label: 'One-time Purchase', value: 'onetime' },
+            { label: 'Subscription', value: 'subscription' },
+            { label: 'Bundle', value: 'bundle' },
+            { label: 'Digital Download', value: 'digital' },
+          ],
+          { required: true, placeholder: 'Select product type' },
+        ),
+        createField.text('productName', 'Product Name', { required: true, placeholder: 'Enter product name' }),
+        createField.number('basePrice', 'Base Price ($)', { required: true, placeholder: '29.99' }),
+        createField.select(
+          'billingCycle',
+          'Billing Cycle',
+          [
+            { label: 'Monthly', value: 'monthly' },
+            { label: 'Quarterly', value: 'quarterly' },
+            { label: 'Yearly', value: 'yearly' },
+          ],
+          {
+            required: true,
+            placeholder: 'Select billing cycle',
+            dependencies: [createDependency.showWhen('productType', conditions.equals('subscription'))],
+          },
+        ),
+        createField.number('trialDays', 'Free Trial Days', {
+          placeholder: '14',
+          defaultValue: 0,
+          dependencies: [createDependency.showWhen('productType', conditions.equals('subscription'))],
+        }),
+        createField.array(
+          'bundleItems',
+          'Bundle Items',
+          [
+            createField.text('itemName', 'Item Name', { required: true, placeholder: 'Item name' }),
+            createField.number('itemPrice', 'Item Price ($)', { required: true, placeholder: '9.99' }),
+            createField.number('quantity', 'Quantity', { required: true, defaultValue: 1, placeholder: '1' }),
+          ],
+          {
+            gridCols: 2,
+            defaultValue: [{ itemName: '', itemPrice: 0, quantity: 1 }],
+            dependencies: [createDependency.showWhen('productType', conditions.equals('bundle'))],
+          },
+        ),
+        createField.select(
+          'fileFormat',
+          'File Format',
+          [
+            { label: 'PDF', value: 'pdf' },
+            { label: 'ZIP Archive', value: 'zip' },
+            { label: 'Video (MP4)', value: 'mp4' },
+            { label: 'Audio (MP3)', value: 'mp3' },
+            { label: 'Software Installer', value: 'exe' },
+          ],
+          { required: true, placeholder: 'Select file format', dependencies: [createDependency.showWhen('productType', conditions.equals('digital'))] },
+        ),
+        createField.number('fileSizeMB', 'File Size (MB)', { placeholder: '50', dependencies: [createDependency.showWhen('productType', conditions.equals('digital'))] }),
+      ]),
+  
+      createSection.card('Pricing & Discounts', [
+        createField.checkbox('hasDiscount', 'Apply Discount', { defaultValue: false, gridCols: 2 }),
+        createField.select(
+          'discountType',
+          'Discount Type',
+          [
+            { label: 'Percentage', value: 'percentage' },
+            { label: 'Fixed Amount', value: 'fixed' },
+            { label: 'Buy One Get One', value: 'bogo' },
+          ],
+          { required: true, placeholder: 'Select discount type', dependencies: [createDependency.showWhen('hasDiscount', conditions.isTrue())] },
+        ),
+        createField.number('discountValue', 'Discount Value', {
+          required: true,
+          placeholder: '10',
+          dependencies: [createDependency.showWhen('hasDiscount', conditions.isTrue()), createDependency.showWhen('discountType', value => value !== 'bogo')],
+        }),
+        createField.date('discountStartDate', 'Discount Start Date', { dependencies: [createDependency.showWhen('hasDiscount', conditions.isTrue())] }),
+        createField.date('discountEndDate', 'Discount End Date', { dependencies: [createDependency.showWhen('hasDiscount', conditions.isTrue())] }),
+        createField.number('minimumQuantity', 'Minimum Quantity for Discount', { placeholder: '2', defaultValue: 1, dependencies: [createDependency.showWhen('hasDiscount', conditions.isTrue())] }),
+      ]),
+  
+      createSection.card('Shipping Configuration', [
+        createField.checkbox('requiresShipping', 'Requires Physical Shipping', {
+          defaultValue: true,
+          gridCols: 2,
+          dependencies: [
+            createDependency.setValueWhen('productType', conditions.equals('digital'), false),
+            createDependency.disableWhen('productType', conditions.equals('digital')),
+          ],
+        }),
+        createField.number('weight', 'Weight (lbs)', { placeholder: '1.5', dependencies: [createDependency.showWhen('requiresShipping', conditions.isTrue())] }),
+        createField.object(
+          'dimensions',
+          'Dimensions (inches)',
+          [
+            createField.number('length', 'Length', { required: true, placeholder: '10' }),
+            createField.number('width', 'Width', { required: true, placeholder: '8' }),
+            createField.number('height', 'Height', { required: true, placeholder: '2' }),
+          ],
+          { dependencies: [createDependency.showWhen('requiresShipping', conditions.isTrue())] },
+        ),
+        createField.select(
+          'shippingClass',
+          'Shipping Class',
+          [
+            { label: 'Standard', value: 'standard' },
+            { label: 'Express', value: 'express' },
+            { label: 'Overnight', value: 'overnight' },
+            { label: 'Fragile', value: 'fragile' },
+            { label: 'Hazardous', value: 'hazardous' },
+          ],
+          { required: true, defaultValue: 'standard', placeholder: 'Select shipping class', dependencies: [createDependency.showWhen('requiresShipping', conditions.isTrue())] },
+        ),
+        createField.checkbox('freeShipping', 'Offer Free Shipping', { defaultValue: false, dependencies: [createDependency.showWhen('requiresShipping', conditions.isTrue())] }),
+        createField.number('freeShippingThreshold', 'Free Shipping Threshold ($)', { placeholder: '50', dependencies: [createDependency.showWhen('requiresShipping', conditions.isTrue()), createDependency.showWhen('freeShipping', conditions.isTrue())] }),
+      ]),
+  
+      createSection.card('Inventory Management', [
+        createField.checkbox('trackInventory', 'Track Inventory', {
+          defaultValue: true,
+          gridCols: 2,
+          dependencies: [createDependency.setValueWhen('productType', conditions.equals('digital'), false)],
+        }),
+        createField.number('stockQuantity', 'Stock Quantity', { required: true, placeholder: '100', dependencies: [createDependency.showWhen('trackInventory', conditions.isTrue())] }),
+        createField.number('lowStockThreshold', 'Low Stock Alert Threshold', { placeholder: '10', dependencies: [createDependency.showWhen('trackInventory', conditions.isTrue())] }),
+        createField.checkbox('allowBackorders', 'Allow Backorders', { defaultValue: false, dependencies: [createDependency.showWhen('trackInventory', conditions.isTrue())] }),
+        createField.text('sku', 'SKU (Stock Keeping Unit)', { placeholder: 'PROD-001', dependencies: [createDependency.showWhen('trackInventory', conditions.isTrue())] }),
+        createField.text('barcode', 'Barcode', { placeholder: '123456789012', dependencies: [createDependency.showWhen('trackInventory', conditions.isTrue())] }),
+      ]),
+  
+      createSection.card('Marketing & SEO', [
+        createField.text('metaTitle', 'Meta Title', { placeholder: 'SEO-friendly title', gridCols: 2 }),
+        createField.textarea('metaDescription', 'Meta Description', { placeholder: 'SEO-friendly description (150-160 characters)', gridCols: 2 }),
+        createField.array('tags', 'Product Tags', [createField.text('tag', 'Tag', { required: true, placeholder: 'e.g., electronics, gadgets' })], { gridCols: 2, defaultValue: [{ tag: '' }] }),
+        createField.checkbox('featured', 'Featured Product', { defaultValue: false }),
+        createField.checkbox('newProduct', 'Mark as New', { defaultValue: false }),
+        createField.select(
+          'visibility',
+          'Product Visibility',
+          [
+            { label: 'Public', value: 'public' },
+            { label: 'Private', value: 'private' },
+            { label: 'Password Protected', value: 'password' },
+            { label: 'Coming Soon', value: 'coming_soon' },
+          ],
+          { required: true, defaultValue: 'public', placeholder: 'Select visibility' },
+        ),
+        createField.text('password', 'Access Password', { placeholder: 'Enter password', dependencies: [createDependency.showWhen('visibility', conditions.equals('password'))] }),
+        createField.date('launchDate', 'Launch Date', { dependencies: [createDependency.showWhen('visibility', conditions.equals('coming_soon'))] }),
+      ]),
+    ];
+  
+    return (
+      <div className="max-w-6xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Dynamic Product Configuration</h1>
+          <p className="text-gray-600 mt-2">
+            This form demonstrates advanced field dependencies and real-time interactions. Watch how fields appear, disappear, and change based on your selections.
+          </p>
+          <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+            <h3 className="font-semibold text-blue-900">Try these interactions:</h3>
+            <ul className="mt-2 text-sm text-blue-800 space-y-1">
+              <li>• Change Product Type to see different field sets</li>
+              <li>• Enable "Apply Discount" to reveal discount configuration</li>
+              <li>• Toggle "Requires Physical Shipping" for shipping options</li>
+              <li>• Select "Digital Download" to auto-disable shipping</li>
+              <li>• Choose "Password Protected" visibility for password field</li>
+            </ul>
+          </div>
+        </div>
+  
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} submitLabel="Save Product Configuration" resetLabel="Reset All" className="space-y-8" />
+      </div>
+    );
+  },
+};

package/src/stories/kit/builder/Form.Simple.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import { createSection, createField, commonValidations } from '../../../kit/builder/form/utils';
+
+const meta: Meta<typeof FormBuilder> = {
+  title: 'Kit/Builder/Form',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormBuilder>;
+
+export const SimpleExample: Story = {
+  name: 'Simple example',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Form submitted:', data);
+    };
+  
+    const sections = [
+      createSection.card('Contact Information', [
+        createField.text('name', 'Full Name', {
+          required: true,
+          placeholder: 'Enter your full name',
+        }),
+        createField.email('email', 'Email Address', {
+          required: true,
+          placeholder: 'Enter your email address',
+        }),
+        createField.text('phone', 'Phone Number', {
+          validation: commonValidations.phone,
+          placeholder: '+1 (555) 123-4567',
+        }),
+        createField.select(
+          'subject',
+          'Subject',
+          [
+            { label: 'General Inquiry', value: 'general' },
+            { label: 'Technical Support', value: 'support' },
+            { label: 'Sales Question', value: 'sales' },
+            { label: 'Partnership', value: 'partnership' },
+          ],
+          {
+            required: true,
+            placeholder: 'Select a subject',
+          },
+        ),
+        createField.textarea('message', 'Message', {
+          required: true,
+          placeholder: 'Enter your message here...',
+          gridCols: 2,
+        }),
+        createField.checkbox('subscribe', 'Subscribe to newsletter', {
+          defaultValue: false,
+          gridCols: 2,
+        }),
+      ]),
+    ];
+  
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-gray-900">Contact Us</h1>
+          <p className="text-gray-600 mt-2">
+            Fill out the form below and we'll get back to you as soon as possible.
+          </p>
+        </div>
+  
+        <FormBuilder sections={sections} onSubmit={handleSubmit} className="space-y-6" />
+      </div>
+    );
+  },
+};

package/src/stories/kit/builder/Page.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Page, type PageAction } from '../../../kit/builder/page';
+import { Button } from '../../../shadcn/ui/button';
+import { Plus, Download, MoreHorizontal, RefreshCw, Trash2 } from 'lucide-react';
+
+const meta: Meta<typeof Page> = {
+  title: 'kit/Builder/Page',
+  component: Page,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Page>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => (
+    <Page title="Orders" subtitle="Manage and review customer orders" containerWidth="lg">
+      <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
+        Page content goes here.
+      </div>
+    </Page>
+  ),
+};
+
+export const WithActions: Story = {
+  name: 'With actions',
+  render: () => {
+    const actions: PageAction[] = [
+      {
+        type: 'button',
+        label: 'New Order',
+        variant: 'default',
+        leftIcon: <Plus className="h-4 w-4" />,
+        onClick: () => console.log('new'),
+      },
+      {
+        type: 'button',
+        label: 'Export',
+        variant: 'outline',
+        leftIcon: <Download className="h-4 w-4" />,
+        onClick: () => console.log('export'),
+      },
+      {
+        type: 'dropdown',
+        trigger: {
+          label: 'More',
+          variant: 'ghost',
+          leftIcon: <MoreHorizontal className="h-4 w-4" />,
+        },
+        items: [
+          { label: 'Refresh', leftIcon: <RefreshCw className="h-4 w-4" />, onSelect: () => console.log('refresh') },
+          { type: 'separator' },
+          { label: 'Delete selected', leftIcon: <Trash2 className="h-4 w-4" />, destructive: true, onSelect: () => console.log('delete') },
+        ],
+      },
+    ];
+
+    return (
+      <Page title="Orders" subtitle="Manage and review customer orders" actions={actions} containerWidth="xl">
+        <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
+          Content with actions.
+        </div>
+      </Page>
+    );
+  },
+};
+
+export const WithFooter: Story = {
+  name: 'With footer',
+  render: () => (
+    <Page
+      title="Settings"
+      subtitle="Configure your workspace"
+      containerWidth="md"
+      footerLeft={<span className="text-xs">Last updated 2 hours ago</span>}
+      footerRight={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => console.log('cancel')}>Cancel</Button>
+          <Button onClick={() => console.log('save')}>Save changes</Button>
+        </div>
+      }
+    >
+      <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
+        Settings content here.
+      </div>
+    </Page>
+  ),
+};

package/src/stories/kit/builder/Section.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SectionBuilder from '../../../kit/builder/section/SectionBuilder';
+import type { SectionLeaf, SectionNode } from '../../../kit/builder/section/types';
+
+const meta: Meta<typeof SectionBuilder> = {
+  title: 'Kit/Builder/Section',
+  component: SectionBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SectionBuilder>;
+
+function demoBox(text: string, className?: string) {
+  return (
+    <div className={['rounded border p-3 text-sm', className].filter(Boolean).join(' ')}>
+      {text}
+    </div>
+  );
+}
+
+const gridLeaves: SectionLeaf[] = [
+  { key: 'a', content: demoBox('A'), span: { md: 6 } },
+  { key: 'b', content: demoBox('B'), span: { md: 6 } },
+  { key: 'c', content: demoBox('C'), span: { md: 4 } },
+  { key: 'd', content: demoBox('D'), span: { md: 4 } },
+  { key: 'e', content: demoBox('E'), span: { md: 4 } },
+];
+
+export const GridLayout: Story = {
+  name: 'Grid layout',
+  args: {
+    sections: [
+      {
+        id: 'grid-1',
+        title: 'Grid (responsive spans)',
+        subtitle: 'Uses md column spans 6/6 then 4/4/4',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
+        children: gridLeaves,
+      },
+    ] satisfies SectionNode[],
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export const WithLabels: Story = {
+  name: 'Leaves with labels',
+  args: {
+    sections: [
+      {
+        id: 'labels-1',
+        title: 'Label layouts',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 12 },
+        children: [
+          {
+            key: 'l1',
+            label: 'Inline label',
+            labelLayout: 'inline',
+            inlineLabelWidthClass: 'w-40',
+            content: demoBox('Value content inline'),
+            span: { md: 12 },
+          },
+          {
+            key: 'l2',
+            label: 'Stacked label',
+            labelLayout: 'stacked',
+            description: 'Optional description appears under value',
+            content: demoBox('Value content stacked'),
+            span: { md: 6 },
+          },
+          {
+            key: 'l3',
+            label: 'No description',
+            labelLayout: 'stacked',
+            content: demoBox('Another value'),
+            span: { md: 6 },
+          },
+        ],
+      },
+    ] satisfies SectionNode[],
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export const FlexLayout: Story = {
+  name: 'Flex layout',
+  args: {
+    sections: [
+      {
+        id: 'flex-1',
+        title: 'Horizontal flex with wrap',
+        variant: 'card',
+        layout: 'flex',
+        flex: { direction: 'row', wrap: true, gap: 'gap-3', align: 'start', justify: 'start' },
+        children: [
+          { key: 'f1', content: demoBox('Item 1'), className: 'w-56' },
+          { key: 'f2', content: demoBox('Item 2'), className: 'w-56' },
+          { key: 'f3', content: demoBox('Item 3'), className: 'w-56' },
+          { key: 'f4', content: demoBox('Item 4'), className: 'w-56' },
+        ],
+      },
+    ] satisfies SectionNode[],
+  },
+};
+
+export const NestedSections: Story = {
+  name: 'Nested sections',
+  args: {
+    sections: [
+      {
+        id: 'outer',
+        title: 'Outer section',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 12 },
+        children: [
+          {
+            id: 'inner-1',
+            title: 'Inner A',
+            variant: 'separator',
+            layout: 'grid',
+            grid: { cols: 1, mdCols: 12 },
+            children: [
+              { key: 'ia', content: demoBox('Inner A1'), span: { md: 6 } },
+              { key: 'ib', content: demoBox('Inner A2'), span: { md: 6 } },
+            ],
+          },
+          {
+            id: 'inner-2',
+            title: 'Inner B',
+            variant: 'plain',
+            layout: 'grid',
+            grid: { cols: 1, mdCols: 12 },
+            children: [
+              { key: 'ic', content: demoBox('Inner B1'), span: { md: 4 } },
+              { key: 'id', content: demoBox('Inner B2'), span: { md: 4 } },
+              { key: 'ie', content: demoBox('Inner B3'), span: { md: 4 } },
+            ],
+          },
+        ],
+      } as unknown as SectionNode,
+    ],
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export const CustomLeafRenderer: Story = {
+  name: 'Custom leaf renderer',
+  args: {
+    sections: [
+      {
+        id: 'custom-1',
+        title: 'Custom renderer',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 12 },
+        children: [
+          { key: 'x', label: 'Name', labelLayout: 'inline', content: 'Jane Doe', span: { md: 6 } },
+          { key: 'y', label: 'Email', labelLayout: 'inline', content: 'jane@example.com', span: { md: 6 } },
+        ],
+      },
+    ] satisfies SectionNode[],
+    renderLeaf: (leaf) => (
+      <div className="rounded border p-3">
+        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{leaf.label ?? 'Field'}</div>
+        <div className="text-sm">{leaf.content}</div>
+      </div>
+    ),
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};

package/src/stories/kit/components/Autocomplete.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Autocomplete, type AutocompleteProps } from '../../../kit/components/autocomplete/Autocomplete';
+import type { AutocompleteOption, AutocompleteFetchResult } from '../../../kit/components/autocomplete/types';
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Kit/Components/Autocomplete',
+  component: Autocomplete,
+  parameters: {
+    controls: { expanded: true },
+  },
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['client', 'server'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Autocomplete>;
+
+// Client-side options
+const CITY_OPTIONS: AutocompleteOption[] = [
+  { label: 'New York', value: 'nyc' },
+  { label: 'San Francisco', value: 'sf' },
+  { label: 'Los Angeles', value: 'la' },
+  { label: 'Seattle', value: 'sea' },
+  { label: 'Austin', value: 'aus' },
+  { label: 'Chicago', value: 'chi' },
+  { label: 'Miami', value: 'mia' },
+  { label: 'Boston', value: 'bos' },
+  { label: 'Denver', value: 'den' },
+  { label: 'Portland', value: 'pdx' },
+];
+
+export const ClientMode: Story = {
+  name: 'Client mode',
+  args: {
+    mode: 'client',
+    options: CITY_OPTIONS,
+    placeholder: 'Select a city...',
+    searchPlaceholder: 'Search cities...',
+    pageSize: 5,
+    defaultOpen: false,
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};
+
+// Mock server fetcher
+function makeServerFetcher(all: AutocompleteOption[], minLatency = 350) {
+  return async ({ search, page, pageSize }: {
+    search: string;
+    page?: number;
+    pageSize: number;
+  }): Promise<AutocompleteFetchResult> => {
+    const q = (search || '').toLowerCase();
+    const resolvedPage = page ?? 1;
+    const filtered = q ? all.filter(o => o.label.toLowerCase().includes(q)) : all;
+    const start = (resolvedPage - 1) * pageSize;
+    const slice = filtered.slice(start, start + pageSize);
+    const hasMore = start + pageSize < filtered.length;
+    await new Promise(r => setTimeout(r, minLatency));
+    return { items: slice, hasMore, nextCursor: null };
+  };
+}
+
+const MANY_OPTIONS: AutocompleteOption[] = Array.from({ length: 100 }).map((_, i) => ({
+  label: `Option ${i + 1}`,
+  value: i + 1,
+}));
+
+export const ServerMode: Story = {
+  name: 'Server mode (infinite scroll)',
+  args: {
+    mode: 'server',
+    fetcher: makeServerFetcher(MANY_OPTIONS),
+    placeholder: 'Pick an option...',
+    searchPlaceholder: 'Search options...',
+    pageSize: 10,
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};
+
+export const CustomRender: Story = {
+  name: 'Custom option rendering',
+  args: {
+    mode: 'client',
+    options: CITY_OPTIONS,
+    renderOption: (option, selected) => (
+      <div className="flex items-center gap-2">
+        <span className="inline-block h-2 w-2 rounded-full bg-primary" />
+        <span className={selected ? 'font-medium' : undefined}>{option.label}</span>
+      </div>
+    ),
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};