@k3-universe/react-kit 0.0.9 → 0.0.11

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

@@ -0,0 +1,210 @@
+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 Autocomplete',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FormBuilder>
+
+const CITY_OPTIONS = [
+  { 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 SingleAutocomplete: Story = {
+  name: 'Single select (clearable + custom allowed)',
+  args: {
+    sections: [
+      {
+        title: 'Destination',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'city',
+            label: 'City',
+            type: 'autocomplete',
+            placeholder: 'Select a city...',
+            searchPlaceholder: 'Search cities...',
+            autocompleteMode: 'client',
+            options: CITY_OPTIONS,
+            clearable: true,
+            allowCustomValue: true,
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (single):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}
+
+// ---- Server edit page (prefilled IDs -> fetch labels) ----
+const ALL_SERVER_OPTIONS = Array.from({ length: 100 }).map((_, i) => ({
+  label: `Server Option ${i + 1}`,
+  value: i + 1,
+}));
+
+function makeServerFetcher(all = ALL_SERVER_OPTIONS, minLatency = 250) {
+  return async ({ search, page = 1, pageSize = 10 }: { search: string; page?: number; pageSize: number; }) => {
+    const q = (search || '').toLowerCase();
+    const filtered = q ? all.filter(o => o.label.toLowerCase().includes(q)) : all;
+    const start = (page - 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 };
+  };
+}
+
+async function loadSelectedByIds(values: Array<string | number>) {
+  // Simulate server lookup for labels by ID
+  await new Promise(r => setTimeout(r, 150));
+  const nums = values.map(v => (typeof v === 'string' ? Number(v) : v));
+  return ALL_SERVER_OPTIONS.filter(o => nums.includes(o.value));
+}
+
+export const ServerEditPrefilledByIds: Story = {
+  name: 'Server edit page (prefilled IDs)',
+  args: {
+    sections: [
+      {
+        title: 'Server Field (Edit)',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'cities',
+            label: 'Cities',
+            type: 'autocomplete',
+            autocompleteMode: 'server',
+            fetcher: makeServerFetcher(),
+            // No local options; labels are not yet known for current values
+            options: [],
+            pageSize: 10,
+            multiple: true,
+            clearable: true,
+            chipVariant: 'secondary',
+            // Provide resolver to fetch labels for the current values
+            loadSelected: loadSelectedByIds,
+            // Pre-seed labels so chips render labels immediately on load
+            initialSelectedOptions: ALL_SERVER_OPTIONS.filter(o => [2, 5, 17].includes(o.value)),
+          },
+        ],
+      },
+    ],
+    // Simulate edit page: IDs persisted in DB without labels
+    defaultValues: {
+      cities: [2, 5, 17],
+    },
+    onSubmit: (data: unknown) => {
+      console.log('Submit (server edit):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}
+
+export const MultiAutocompleteChips: Story = {
+  name: 'Multi select with chips',
+  args: {
+    sections: [
+      {
+        title: 'Destinations',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'cities',
+            label: 'Cities',
+            type: 'autocomplete',
+            placeholder: 'Select cities...',
+            searchPlaceholder: 'Type to search cities...',
+            autocompleteMode: 'client',
+            options: CITY_OPTIONS,
+            multiple: true,
+            clearable: true,
+            chipVariant: 'secondary',
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (multi):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}
+
+export const TaggingAutocomplete: Story = {
+  name: 'Tagging (no options, custom values)',
+  args: {
+    sections: [
+      {
+        title: 'Tags',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'tags',
+            label: 'Tags',
+            type: 'autocomplete',
+            placeholder: 'Type and press Enter to add tags',
+            searchPlaceholder: 'Type a tag and press Enter',
+            autocompleteMode: 'client',
+            options: [],
+            multiple: true,
+            allowCustomValue: true,
+            clearable: true,
+            chipVariant: 'outline',
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (tagging):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}

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.DateTime.stories.tsx

@@ -0,0 +1,66 @@
+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 (DateTime)',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FormBuilder>
+
+export const DateTimeFields: Story = {
+  name: 'Date/Time fields',
+  args: {
+    sections: [
+      {
+        title: 'Date & Time',
+        description: 'Examples of DateTimePicker, DateTimeRangePicker and TimeRangePicker fields',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'dt',
+            label: 'Date & Time',
+            type: 'date_time',
+            timePrecision: 'minute',
+            hourCycle: 24,
+          },
+          {
+            name: 'dtRange',
+            label: 'Date & Time Range',
+            type: 'date_time_range',
+            numberOfMonths: 2,
+            timePrecision: 'minute',
+            hourCycle: 24,
+          },
+          {
+            name: 'timeRange',
+            label: 'Time Range',
+            type: 'time_range',
+            timePrecision: 'minute',
+            hourCycle: 24,
+            minuteStep: 5,
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      // Showing output in console for demo
+      // eslint-disable-next-line no-console
+      console.log('Submit (date/time):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-5xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </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>
+  ),
+}