@k3-universe/react-kit 0.0.9 → 0.0.10

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import type { FormBuilderSectionConfig } from '../../../kit/builder/form/components/FormBuilder';
 import { createSection, createField, commonValidations, createDependency, conditions, validators } from '../../../kit/builder/form/utils';
 
 const meta: Meta<typeof FormBuilder> = {
@@ -221,3 +222,103 @@ export const ComplexExample: Story = {
     );
   }
 };
+
+export const ComplexTabsExample: Story = {
+  name: 'Complex example (Tabs)',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Complex tabs form submitted:', data);
+    };
+
+    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+      console.log(`[Tabs] Field ${name} changed to:`, value);
+      console.log('[Tabs] All form values:', allValues);
+    };
+
+    const sections: FormBuilderSectionConfig[] = [
+      {
+        title: 'Profile Builder',
+        layout: 'tabs',
+        variant: 'card',
+        defaultTabId: 'basic',
+        tabsListClassName: 'w-full',
+        tabsContentClassName: 'mt-2',
+        tabs: [
+          {
+            id: 'basic',
+            label: 'Basic Info',
+            sections: [
+              createSection.card('Basic Information', [
+                createField.text('firstName', 'First Name', { required: true }),
+                createField.text('lastName', 'Last Name', { required: true }),
+                createField.email('email', 'Email Address', { required: true }),
+                createField.date('dateOfBirth', 'Date of Birth', { required: true }),
+              ], { grid: { cols: 1, mdCols: 2, gap: 'gap-4' } }),
+            ],
+          },
+          {
+            id: 'address',
+            label: 'Addresses',
+            sections: [
+              createSection.card('Address Information', [
+                createField.object('address', 'Primary Address', [
+                  createField.text('street', 'Street Address', { required: true, gridCols: 2 }),
+                  createField.text('city', 'City', { required: true }),
+                  createField.text('state', 'State/Province', { required: true }),
+                  createField.text('postalCode', 'Postal Code', { required: true }),
+                  createField.select('country', 'Country', [
+                    { label: 'United States', value: 'US' },
+                    { label: 'Canada', value: 'CA' },
+                    { label: 'United Kingdom', value: 'UK' },
+                    { label: 'Australia', value: 'AU' },
+                  ], { required: true, defaultValue: 'US' }),
+                ], { gridCols: 2 }),
+                createField.checkbox('sameAsShipping', 'Billing same as shipping', { defaultValue: true, gridCols: 2 }),
+                createField.object('billingAddress', 'Billing Address', [
+                  createField.text('street', 'Street Address', { required: true, gridCols: 2 }),
+                  createField.text('city', 'City', { required: true }),
+                  createField.text('state', 'State/Province', { required: true }),
+                  createField.text('postalCode', 'Postal Code', { required: true }),
+                  createField.select('country', 'Country', [
+                    { label: 'United States', value: 'US' },
+                    { label: 'Canada', value: 'CA' },
+                    { label: 'United Kingdom', value: 'UK' },
+                    { label: 'Australia', value: 'AU' },
+                  ], { required: true, defaultValue: 'US' }),
+                ], { gridCols: 2, dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())] }),
+              ]),
+            ],
+          },
+          {
+            id: 'employment',
+            label: 'Employment',
+            sections: [
+              createSection.card('Employment Information', [
+                createField.select('employmentStatus', 'Employment Status', [
+                  { label: 'Employed', value: 'employed' },
+                  { label: 'Self-employed', value: 'self_employed' },
+                  { label: 'Unemployed', value: 'unemployed' },
+                  { label: 'Student', value: 'student' },
+                ], { required: true }),
+                createField.text('company', 'Company Name', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))] }),
+                createField.text('jobTitle', 'Job Title', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))] }),
+                createField.text('businessName', 'Business Name', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))] }),
+                createField.text('school', 'School/University', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))] }),
+              ]),
+            ],
+          },
+        ],
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Professional Profile (Tabs)</h1>
+          <p className="text-gray-600 mt-2">This story shows how to organize complex forms into tabs.</p>
+        </div>
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+      </div>
+    );
+  },
+};

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import type { FormBuilderSectionConfig } from '../../../kit/builder/form/components/FormBuilder';
 import { createSection, createField, createDependency, conditions } from '../../../kit/builder/form/utils';
 
 const meta: Meta<typeof FormBuilder> = {
@@ -11,6 +12,154 @@ const meta: Meta<typeof FormBuilder> = {
   },
 };
 
+export const DynamicTabsExample: Story = {
+  name: 'Dynamic example (Tabs)',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Dynamic tabs form submitted:', data);
+    };
+
+    const handleFieldChange = (name: string, value: unknown) => {
+      console.log(`[Tabs] Field ${name} changed to:`, value);
+    };
+
+    const sections: FormBuilderSectionConfig[] = [
+      {
+        title: 'Product Builder',
+        layout: 'tabs',
+        variant: 'card',
+        defaultTabId: 'product',
+        tabsListClassName: 'w-full',
+        tabsContentClassName: 'mt-2',
+        tabs: [
+          {
+            id: 'product',
+            label: 'Product',
+            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'))] }),
+              ]),
+            ],
+          },
+          {
+            id: 'pricing',
+            label: 'Pricing',
+            sections: [
+              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())] }),
+              ]),
+            ],
+          },
+          {
+            id: 'shipping',
+            label: 'Shipping',
+            sections: [
+              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())] }),
+              ]),
+            ],
+          },
+          {
+            id: 'inventory',
+            label: 'Inventory',
+            sections: [
+              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())] }),
+              ]),
+            ],
+          },
+          {
+            id: 'marketing',
+            label: 'Marketing',
+            sections: [
+              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 (Tabs)</h1>
+          <p className="text-gray-600 mt-2">The same dynamic form organized into tabs for better navigation.</p>
+        </div>
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} submitLabel="Save Product Configuration" resetLabel="Reset All" className="space-y-8" />
+      </div>
+    );
+  },
+};
+
 export default meta;
 
 type Story = StoryObj<typeof FormBuilder>;

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+
+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 Pickers: Story = {
+  name: 'Pickers (Date, Date Range, Month, Month Range)',
+  args: {
+    sections: [
+      {
+        title: 'Pickers',
+        description: 'Showcase of DatePicker, DateRangePicker, MonthPicker, and MonthRangePicker via FormBuilder fields',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'dateSingle',
+            label: 'Date (DatePicker)',
+            type: 'date_picker',
+            placeholder: 'Select a date',
+            minDate: new Date(new Date().getFullYear(), 0, 1),
+            maxDate: new Date(new Date().getFullYear(), 11, 31),
+          },
+          {
+            name: 'dateRange',
+            label: 'Date Range (DateRangePicker)',
+            type: 'date_range',
+            placeholder: 'Select a date range',
+            numberOfMonths: 2,
+            popoverSide: 'bottom',
+          },
+          {
+            name: 'monthSingle',
+            label: 'Month (MonthPicker)',
+            type: 'month',
+            placeholder: 'Select a month',
+            minDate: new Date(new Date().getFullYear() - 1, 0, 1),
+            maxDate: new Date(new Date().getFullYear() + 1, 11, 31),
+          },
+          {
+            name: 'monthRange',
+            label: 'Month Range (MonthRangePicker)',
+            type: 'month_range',
+            placeholder: 'Select a start and end month',
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (pickers):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-4xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}

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

@@ -12,10 +12,66 @@ const meta: Meta<typeof SectionBuilder> = {
   render: (args) => <SectionBuilder {...args} />,
 };
 
-export default meta;
-
 type Story = StoryObj<typeof SectionBuilder>;
 
+export const TabsLayout: Story = {
+  name: 'Tabs layout',
+  args: {
+    sections: [
+      {
+        id: 'tabs-1',
+        title: 'Tabbed Section',
+        subtitle: 'Demonstrates tabs with nested sections',
+        variant: 'card',
+        layout: 'tabs',
+        tabsListClassName: 'w-full',
+        tabsContentClassName: 'mt-2',
+        tabs: [
+          {
+            id: 'tab-a',
+            label: 'Overview',
+            node: {
+              id: 'tab-a-node',
+              layout: 'grid',
+              grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
+              children: [
+                { key: 't1', content: demoBox('Overview content A'), span: { md: 6 } },
+                { key: 't2', content: demoBox('Overview content B'), span: { md: 6 } },
+              ],
+            },
+          },
+          {
+            id: 'tab-b',
+            label: 'Details',
+            node: {
+              id: 'tab-b-node',
+              layout: 'grid',
+              grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
+              children: [
+                {
+                  id: 'inner-details',
+                  title: 'Inner details section',
+                  variant: 'separator',
+                  layout: 'grid',
+                  grid: { cols: 1, mdCols: 12 },
+                  children: [
+                    { key: 'd1', content: demoBox('Detail 1'), span: { md: 4 } },
+                    { key: 'd2', content: demoBox('Detail 2'), span: { md: 4 } },
+                    { key: 'd3', content: demoBox('Detail 3'), span: { md: 4 } },
+                  ],
+                } as unknown as SectionNode,
+              ],
+            },
+          },
+        ],
+      } as unknown as SectionNode,
+    ],
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export default meta;
+
 function demoBox(text: string, className?: string) {
   return (
     <div className={['rounded border p-3 text-sm', className].filter(Boolean).join(' ')}>

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

@@ -96,3 +96,30 @@ export const CustomRender: Story = {
   } satisfies Partial<AutocompleteProps>,
   render: (args) => <Autocomplete {...args} />,
 };
+
+export const MultiSelectWithChips: Story = {
+  name: 'Multi select with chips',
+  args: {
+    mode: 'client',
+    options: CITY_OPTIONS,
+    multiple: true,
+    placeholder: 'Select cities...',
+    searchPlaceholder: 'Type to search cities...',
+    chipVariant: 'secondary',
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};
+
+export const TaggingNoOptions: Story = {
+  name: 'Tagging (no options)',
+  args: {
+    mode: 'client',
+    options: [],
+    multiple: true,
+    allowCustomValue: true,
+    placeholder: 'Type and press Enter to add tags',
+    searchPlaceholder: 'Type a tag and press Enter',
+    chipVariant: 'outline',
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};

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

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { DatePicker } from '../../../kit/components/datepicker/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Kit/Components/DatePicker',
+  component: DatePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const WithConstraints: Story = {
+  name: 'With constraints',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const now = new Date();
+      const minDate = new Date(now.getFullYear(), now.getMonth(), 5);
+      const maxDate = new Date(now.getFullYear(), now.getMonth(), 25);
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} minDate={minDate} maxDate={maxDate} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledSingleDates: Story = {
+  name: 'Disabled single dates',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const today = new Date();
+      const d1 = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+      const d3 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} disabledDates={[d1, d2, d3]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledDateRanges: Story = {
+  name: 'Disabled date ranges',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const base = new Date();
+      const range1 = { from: new Date(base.getFullYear(), base.getMonth(), 10), to: new Date(base.getFullYear(), base.getMonth(), 15) };
+      const range2 = { from: new Date(base.getFullYear(), base.getMonth(), 20), to: new Date(base.getFullYear(), base.getMonth(), 22) };
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} disabledDates={[range1, range2]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const ControlledOpen: Story = {
+  name: 'Controlled open + custom footer labels',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const [open, setOpen] = React.useState(false);
+      return (
+        <div className="p-6 space-y-4">
+          <button type="button" className="underline text-sm" onClick={() => setOpen((o) => !o)}>
+            Toggle popover
+          </button>
+          <DatePicker
+            value={value}
+            onChange={setValue}
+            open={open}
+            onOpenChange={setOpen}
+            clearLabel="Reset"
+            closeLabel="Done"
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};