@k3-universe/react-kit 0.0.8 → 0.0.10

package/storybook-static/assets/Form.Dynamic.stories-DFW6wIuT.js

@@ -0,0 +1,502 @@
+import{j as a}from"./jsx-runtime-D_zvdyIk.js";import{F as p}from"./FormBuilder-BQBBxo_k.js";import{c as l,a as e}from"./section-factories-DCCY9R35.js";import{c as i,a as t}from"./dependencies-ctrV69dx.js";import"./iframe-v7iAhKit.js";import"./preload-helper-Dp1pzeXC.js";import"./schemas-CGNYCiJ6.js";import"./utils-D-KgF5mV.js";import"./button-0oMkiryo.js";import"./index-DbaA6-o1.js";import"./index-CGrAONsN.js";import"./label-Do8ODIVk.js";import"./index-Tp9IdbR8.js";import"./index-DrN5n71E.js";import"./index-CwBdPBFz.js";import"./Autocomplete-Cpg4CaJe.js";import"./popover-CcciSWAw.js";import"./index-DW48STyt.js";import"./index-CDY5kTx5.js";import"./index-BVDb4dFc.js";import"./index-0-qMRXou.js";import"./Combination-BdQWAuko.js";import"./index-BfiCOk42.js";import"./index-D8RXF03I.js";import"./index-nqc17SX4.js";import"./index-Bw1A27Kp.js";import"./index-jrimW4QO.js";import"./index-AvwFFKJc.js";import"./index-ByqivBWx.js";import"./command-Csa9p8_a.js";import"./index-Z6wF44KX.js";import"./dialog-CsnqITTn.js";import"./x-B1a4fyWM.js";import"./createLucideIcon-BrHXro7t.js";import"./badge-BnQWua6u.js";import"./check-B9hBGj6o.js";import"./input-11YRd9gD.js";import"./textarea-Dw2vruMl.js";import"./select-DDrkxaOg.js";import"./index-BdQq_4o_.js";import"./index-Bv9yk470.js";import"./index-B_qx7A5T.js";import"./index-_RPqOjlQ.js";import"./index-C9Ta0ZTH.js";import"./chevron-down-D_37S6il.js";import"./checkbox-CyIeaWHX.js";import"./switch-CKGRuk3u.js";import"./radio-group-DiJ0Y_KQ.js";import"./index-CWjrGFAQ.js";import"./circle-C5Lzx6Nx.js";import"./card-BJpPOzP8.js";import"./table-CP3vMqFn.js";import"./trash-2-xdbApPby.js";import"./grip-vertical-BxXG8KNA.js";import"./SectionBuilder-BQW705x0.js";import"./separator-o5SAUnaJ.js";import"./tabs-CopK2m3j.js";const Se={title:"Kit/Builder/Form",component:p,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},d={name:"Dynamic example (Tabs)",render:()=>{const c=r=>{console.log("Dynamic tabs form submitted:",r)},o=(r,n)=>{console.log(`[Tabs] Field ${r} changed to:`,n)},u=[{title:"Product Builder",layout:"tabs",variant:"card",defaultTabId:"product",tabsListClassName:"w-full",tabsContentClassName:"mt-2",tabs:[{id:"product",label:"Product",sections:[l.card("Product Configuration",[e.select("productType","Product Type",[{label:"One-time Purchase",value:"onetime"},{label:"Subscription",value:"subscription"},{label:"Bundle",value:"bundle"},{label:"Digital Download",value:"digital"}],{required:!0,placeholder:"Select product type"}),e.text("productName","Product Name",{required:!0,placeholder:"Enter product name"}),e.number("basePrice","Base Price ($)",{required:!0,placeholder:"29.99"}),e.select("billingCycle","Billing Cycle",[{label:"Monthly",value:"monthly"},{label:"Quarterly",value:"quarterly"},{label:"Yearly",value:"yearly"}],{required:!0,placeholder:"Select billing cycle",dependencies:[i.showWhen("productType",t.equals("subscription"))]}),e.number("trialDays","Free Trial Days",{placeholder:"14",defaultValue:0,dependencies:[i.showWhen("productType",t.equals("subscription"))]}),e.array("bundleItems","Bundle Items",[e.text("itemName","Item Name",{required:!0,placeholder:"Item name"}),e.number("itemPrice","Item Price ($)",{required:!0,placeholder:"9.99"}),e.number("quantity","Quantity",{required:!0,defaultValue:1,placeholder:"1"})],{gridCols:2,defaultValue:[{itemName:"",itemPrice:0,quantity:1}],dependencies:[i.showWhen("productType",t.equals("bundle"))]}),e.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:!0,placeholder:"Select file format",dependencies:[i.showWhen("productType",t.equals("digital"))]}),e.number("fileSizeMB","File Size (MB)",{placeholder:"50",dependencies:[i.showWhen("productType",t.equals("digital"))]})])]},{id:"pricing",label:"Pricing",sections:[l.card("Pricing & Discounts",[e.checkbox("hasDiscount","Apply Discount",{defaultValue:!1,gridCols:2}),e.select("discountType","Discount Type",[{label:"Percentage",value:"percentage"},{label:"Fixed Amount",value:"fixed"},{label:"Buy One Get One",value:"bogo"}],{required:!0,placeholder:"Select discount type",dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.number("discountValue","Discount Value",{required:!0,placeholder:"10",dependencies:[i.showWhen("hasDiscount",t.isTrue()),i.showWhen("discountType",r=>r!=="bogo")]}),e.date("discountStartDate","Discount Start Date",{dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.date("discountEndDate","Discount End Date",{dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.number("minimumQuantity","Minimum Quantity for Discount",{placeholder:"2",defaultValue:1,dependencies:[i.showWhen("hasDiscount",t.isTrue())]})])]},{id:"shipping",label:"Shipping",sections:[l.card("Shipping Configuration",[e.checkbox("requiresShipping","Requires Physical Shipping",{defaultValue:!0,gridCols:2,dependencies:[i.setValueWhen("productType",t.equals("digital"),!1),i.disableWhen("productType",t.equals("digital"))]}),e.number("weight","Weight (lbs)",{placeholder:"1.5",dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.object("dimensions","Dimensions (inches)",[e.number("length","Length",{required:!0,placeholder:"10"}),e.number("width","Width",{required:!0,placeholder:"8"}),e.number("height","Height",{required:!0,placeholder:"2"})],{dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.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:!0,defaultValue:"standard",placeholder:"Select shipping class",dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.checkbox("freeShipping","Offer Free Shipping",{defaultValue:!1,dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.number("freeShippingThreshold","Free Shipping Threshold ($)",{placeholder:"50",dependencies:[i.showWhen("requiresShipping",t.isTrue()),i.showWhen("freeShipping",t.isTrue())]})])]},{id:"inventory",label:"Inventory",sections:[l.card("Inventory Management",[e.checkbox("trackInventory","Track Inventory",{defaultValue:!0,gridCols:2,dependencies:[i.setValueWhen("productType",t.equals("digital"),!1)]}),e.number("stockQuantity","Stock Quantity",{required:!0,placeholder:"100",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.number("lowStockThreshold","Low Stock Alert Threshold",{placeholder:"10",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.checkbox("allowBackorders","Allow Backorders",{defaultValue:!1,dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.text("sku","SKU (Stock Keeping Unit)",{placeholder:"PROD-001",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.text("barcode","Barcode",{placeholder:"123456789012",dependencies:[i.showWhen("trackInventory",t.isTrue())]})])]},{id:"marketing",label:"Marketing",sections:[l.card("Marketing & SEO",[e.text("metaTitle","Meta Title",{placeholder:"SEO-friendly title",gridCols:2}),e.textarea("metaDescription","Meta Description",{placeholder:"SEO-friendly description (150-160 characters)",gridCols:2}),e.array("tags","Product Tags",[e.text("tag","Tag",{required:!0,placeholder:"e.g., electronics, gadgets"})],{gridCols:2,defaultValue:[{tag:""}]}),e.checkbox("featured","Featured Product",{defaultValue:!1}),e.checkbox("newProduct","Mark as New",{defaultValue:!1}),e.select("visibility","Product Visibility",[{label:"Public",value:"public"},{label:"Private",value:"private"},{label:"Password Protected",value:"password"},{label:"Coming Soon",value:"coming_soon"}],{required:!0,defaultValue:"public",placeholder:"Select visibility"}),e.text("password","Access Password",{placeholder:"Enter password",dependencies:[i.showWhen("visibility",t.equals("password"))]}),e.date("launchDate","Launch Date",{dependencies:[i.showWhen("visibility",t.equals("coming_soon"))]})])]}]}];return a.jsxs("div",{className:"max-w-6xl mx-auto p-6",children:[a.jsxs("div",{className:"mb-8",children:[a.jsx("h1",{className:"text-3xl font-bold text-gray-900",children:"Dynamic Product Configuration (Tabs)"}),a.jsx("p",{className:"text-gray-600 mt-2",children:"The same dynamic form organized into tabs for better navigation."})]}),a.jsx(p,{sections:u,onSubmit:c,onFieldChange:o,submitLabel:"Save Product Configuration",resetLabel:"Reset All",className:"space-y-8"})]})}},s={name:"Dynamic example",render:()=>{const c=r=>{console.log("Dynamic form submitted:",r)},o=(r,n)=>{console.log(`Field ${r} changed to:`,n),r==="productType"&&n==="subscription"&&console.log("Subscription product selected - additional fields will appear"),r==="hasDiscount"&&n===!0&&console.log("Discount enabled - discount fields will appear")},u=[l.card("Product Configuration",[e.select("productType","Product Type",[{label:"One-time Purchase",value:"onetime"},{label:"Subscription",value:"subscription"},{label:"Bundle",value:"bundle"},{label:"Digital Download",value:"digital"}],{required:!0,placeholder:"Select product type"}),e.text("productName","Product Name",{required:!0,placeholder:"Enter product name"}),e.number("basePrice","Base Price ($)",{required:!0,placeholder:"29.99"}),e.select("billingCycle","Billing Cycle",[{label:"Monthly",value:"monthly"},{label:"Quarterly",value:"quarterly"},{label:"Yearly",value:"yearly"}],{required:!0,placeholder:"Select billing cycle",dependencies:[i.showWhen("productType",t.equals("subscription"))]}),e.number("trialDays","Free Trial Days",{placeholder:"14",defaultValue:0,dependencies:[i.showWhen("productType",t.equals("subscription"))]}),e.array("bundleItems","Bundle Items",[e.text("itemName","Item Name",{required:!0,placeholder:"Item name"}),e.number("itemPrice","Item Price ($)",{required:!0,placeholder:"9.99"}),e.number("quantity","Quantity",{required:!0,defaultValue:1,placeholder:"1"})],{gridCols:2,defaultValue:[{itemName:"",itemPrice:0,quantity:1}],dependencies:[i.showWhen("productType",t.equals("bundle"))]}),e.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:!0,placeholder:"Select file format",dependencies:[i.showWhen("productType",t.equals("digital"))]}),e.number("fileSizeMB","File Size (MB)",{placeholder:"50",dependencies:[i.showWhen("productType",t.equals("digital"))]})]),l.card("Pricing & Discounts",[e.checkbox("hasDiscount","Apply Discount",{defaultValue:!1,gridCols:2}),e.select("discountType","Discount Type",[{label:"Percentage",value:"percentage"},{label:"Fixed Amount",value:"fixed"},{label:"Buy One Get One",value:"bogo"}],{required:!0,placeholder:"Select discount type",dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.number("discountValue","Discount Value",{required:!0,placeholder:"10",dependencies:[i.showWhen("hasDiscount",t.isTrue()),i.showWhen("discountType",r=>r!=="bogo")]}),e.date("discountStartDate","Discount Start Date",{dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.date("discountEndDate","Discount End Date",{dependencies:[i.showWhen("hasDiscount",t.isTrue())]}),e.number("minimumQuantity","Minimum Quantity for Discount",{placeholder:"2",defaultValue:1,dependencies:[i.showWhen("hasDiscount",t.isTrue())]})]),l.card("Shipping Configuration",[e.checkbox("requiresShipping","Requires Physical Shipping",{defaultValue:!0,gridCols:2,dependencies:[i.setValueWhen("productType",t.equals("digital"),!1),i.disableWhen("productType",t.equals("digital"))]}),e.number("weight","Weight (lbs)",{placeholder:"1.5",dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.object("dimensions","Dimensions (inches)",[e.number("length","Length",{required:!0,placeholder:"10"}),e.number("width","Width",{required:!0,placeholder:"8"}),e.number("height","Height",{required:!0,placeholder:"2"})],{dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.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:!0,defaultValue:"standard",placeholder:"Select shipping class",dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.checkbox("freeShipping","Offer Free Shipping",{defaultValue:!1,dependencies:[i.showWhen("requiresShipping",t.isTrue())]}),e.number("freeShippingThreshold","Free Shipping Threshold ($)",{placeholder:"50",dependencies:[i.showWhen("requiresShipping",t.isTrue()),i.showWhen("freeShipping",t.isTrue())]})]),l.card("Inventory Management",[e.checkbox("trackInventory","Track Inventory",{defaultValue:!0,gridCols:2,dependencies:[i.setValueWhen("productType",t.equals("digital"),!1)]}),e.number("stockQuantity","Stock Quantity",{required:!0,placeholder:"100",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.number("lowStockThreshold","Low Stock Alert Threshold",{placeholder:"10",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.checkbox("allowBackorders","Allow Backorders",{defaultValue:!1,dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.text("sku","SKU (Stock Keeping Unit)",{placeholder:"PROD-001",dependencies:[i.showWhen("trackInventory",t.isTrue())]}),e.text("barcode","Barcode",{placeholder:"123456789012",dependencies:[i.showWhen("trackInventory",t.isTrue())]})]),l.card("Marketing & SEO",[e.text("metaTitle","Meta Title",{placeholder:"SEO-friendly title",gridCols:2}),e.textarea("metaDescription","Meta Description",{placeholder:"SEO-friendly description (150-160 characters)",gridCols:2}),e.array("tags","Product Tags",[e.text("tag","Tag",{required:!0,placeholder:"e.g., electronics, gadgets"})],{gridCols:2,defaultValue:[{tag:""}]}),e.checkbox("featured","Featured Product",{defaultValue:!1}),e.checkbox("newProduct","Mark as New",{defaultValue:!1}),e.select("visibility","Product Visibility",[{label:"Public",value:"public"},{label:"Private",value:"private"},{label:"Password Protected",value:"password"},{label:"Coming Soon",value:"coming_soon"}],{required:!0,defaultValue:"public",placeholder:"Select visibility"}),e.text("password","Access Password",{placeholder:"Enter password",dependencies:[i.showWhen("visibility",t.equals("password"))]}),e.date("launchDate","Launch Date",{dependencies:[i.showWhen("visibility",t.equals("coming_soon"))]})])];return a.jsxs("div",{className:"max-w-6xl mx-auto p-6",children:[a.jsxs("div",{className:"mb-8",children:[a.jsx("h1",{className:"text-3xl font-bold text-gray-900",children:"Dynamic Product Configuration"}),a.jsx("p",{className:"text-gray-600 mt-2",children:"This form demonstrates advanced field dependencies and real-time interactions. Watch how fields appear, disappear, and change based on your selections."}),a.jsxs("div",{className:"mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg",children:[a.jsx("h3",{className:"font-semibold text-blue-900",children:"Try these interactions:"}),a.jsxs("ul",{className:"mt-2 text-sm text-blue-800 space-y-1",children:[a.jsx("li",{children:"• Change Product Type to see different field sets"}),a.jsx("li",{children:'• Enable "Apply Discount" to reveal discount configuration'}),a.jsx("li",{children:'• Toggle "Requires Physical Shipping" for shipping options'}),a.jsx("li",{children:'• Select "Digital Download" to auto-disable shipping'}),a.jsx("li",{children:'• Choose "Password Protected" visibility for password field'})]})]})]}),a.jsx(p,{sections:u,onSubmit:c,onFieldChange:o,submitLabel:"Save Product Configuration",resetLabel:"Reset All",className:"space-y-8"})]})}};var h,m,b;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  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>;
+  }
+}`,...(b=(m=d.parameters)==null?void 0:m.docs)==null?void 0:b.source}}};var g,y,f;s.parameters={...s.parameters,docs:{...(g=s.parameters)==null?void 0:g.docs,source:{originalSource:`{
+  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>;
+  }
+}`,...(f=(y=s.parameters)==null?void 0:y.docs)==null?void 0:f.source}}};const Te=["DynamicTabsExample","DynamicExample"];export{s as DynamicExample,d as DynamicTabsExample,Te as __namedExportsOrder,Se as default};

package/storybook-static/assets/Form.Simple.stories-BhJcyhbE.js

@@ -0,0 +1,53 @@
+import{j as t}from"./jsx-runtime-D_zvdyIk.js";import{F as i}from"./FormBuilder-BQBBxo_k.js";import{c,a as e,b as n}from"./section-factories-DCCY9R35.js";import"./iframe-v7iAhKit.js";import"./preload-helper-Dp1pzeXC.js";import"./schemas-CGNYCiJ6.js";import"./utils-D-KgF5mV.js";import"./button-0oMkiryo.js";import"./index-DbaA6-o1.js";import"./index-CGrAONsN.js";import"./label-Do8ODIVk.js";import"./index-Tp9IdbR8.js";import"./index-DrN5n71E.js";import"./index-CwBdPBFz.js";import"./Autocomplete-Cpg4CaJe.js";import"./popover-CcciSWAw.js";import"./index-DW48STyt.js";import"./index-CDY5kTx5.js";import"./index-BVDb4dFc.js";import"./index-0-qMRXou.js";import"./Combination-BdQWAuko.js";import"./index-BfiCOk42.js";import"./index-D8RXF03I.js";import"./index-nqc17SX4.js";import"./index-Bw1A27Kp.js";import"./index-jrimW4QO.js";import"./index-AvwFFKJc.js";import"./index-ByqivBWx.js";import"./command-Csa9p8_a.js";import"./index-Z6wF44KX.js";import"./dialog-CsnqITTn.js";import"./x-B1a4fyWM.js";import"./createLucideIcon-BrHXro7t.js";import"./badge-BnQWua6u.js";import"./check-B9hBGj6o.js";import"./input-11YRd9gD.js";import"./textarea-Dw2vruMl.js";import"./select-DDrkxaOg.js";import"./index-BdQq_4o_.js";import"./index-Bv9yk470.js";import"./index-B_qx7A5T.js";import"./index-_RPqOjlQ.js";import"./index-C9Ta0ZTH.js";import"./chevron-down-D_37S6il.js";import"./checkbox-CyIeaWHX.js";import"./switch-CKGRuk3u.js";import"./radio-group-DiJ0Y_KQ.js";import"./index-CWjrGFAQ.js";import"./circle-C5Lzx6Nx.js";import"./card-BJpPOzP8.js";import"./table-CP3vMqFn.js";import"./trash-2-xdbApPby.js";import"./grip-vertical-BxXG8KNA.js";import"./SectionBuilder-BQW705x0.js";import"./separator-o5SAUnaJ.js";import"./tabs-CopK2m3j.js";const be={title:"Kit/Builder/Form",component:i,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},r={name:"Simple example",render:()=>{const s=p=>{console.log("Form submitted:",p)},m=[c.card("Contact Information",[e.text("name","Full Name",{required:!0,placeholder:"Enter your full name"}),e.email("email","Email Address",{required:!0,placeholder:"Enter your email address"}),e.text("phone","Phone Number",{validation:n.phone,placeholder:"+1 (555) 123-4567"}),e.select("subject","Subject",[{label:"General Inquiry",value:"general"},{label:"Technical Support",value:"support"},{label:"Sales Question",value:"sales"},{label:"Partnership",value:"partnership"}],{required:!0,placeholder:"Select a subject"}),e.textarea("message","Message",{required:!0,placeholder:"Enter your message here...",gridCols:2}),e.checkbox("subscribe","Subscribe to newsletter",{defaultValue:!1,gridCols:2}),e.switch("contactPermission","Allow contact by phone",{defaultValue:!1,gridCols:2})])];return t.jsxs("div",{className:"max-w-2xl mx-auto p-6",children:[t.jsxs("div",{className:"mb-6",children:[t.jsx("h1",{className:"text-2xl font-bold text-gray-900",children:"Contact Us"}),t.jsx("p",{className:"text-gray-600 mt-2",children:"Fill out the form below and we'll get back to you as soon as possible."})]}),t.jsx(i,{sections:m,onSubmit:s,className:"space-y-6"})]})}};var o,a,l;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  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
+    }), createField.switch('contactPermission', 'Allow contact by phone', {
+      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>;
+  }
+}`,...(l=(a=r.parameters)==null?void 0:a.docs)==null?void 0:l.source}}};const he=["SimpleExample"];export{r as SimpleExample,he as __namedExportsOrder,be as default};

package/storybook-static/assets/{Form.stories-27doU7JS.js → Form.stories-PFNsMYxO.js}

@@ -1,3 +1,3 @@
-import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as m}from"./iframe-BWjPIle6.js";import{S as _}from"./index-BcAKBHrX.js";import{F as v,C,k as w,m as D,o as $,s as h,d as P,e as E}from"./schemas-CaLvKjsI.js";import{c as d}from"./utils-D-KgF5mV.js";import{L as M}from"./label-CwntpYJ0.js";import{I as F}from"./input-11YRd9gD.js";import{B as V}from"./button-BObfgcV1.js";import{t as L}from"./index-A7UzX-Xw.js";import"./preload-helper-Dp1pzeXC.js";import"./index-04C4iZwC.js";import"./index-C5eJ31Z3.js";import"./index-npvyVsxD.js";import"./index-CGrAONsN.js";const y=v,b=m.createContext({}),l=({...o})=>e.jsx(b.Provider,{value:{name:o.name},children:e.jsx(C,{...o})}),c=()=>{const o=m.useContext(b),r=m.useContext(S),{getFieldState:t}=w(),s=D({name:o.name}),a=t(o.name,s);if(!o)throw new Error("useFormField should be used within <FormField>");const{id:n}=r;return{id:n,name:o.name,formItemId:`${n}-form-item`,formDescriptionId:`${n}-form-item-description`,formMessageId:`${n}-form-item-message`,...a}},S=m.createContext({});function u({className:o,...r}){const t=m.useId();return e.jsx(S.Provider,{value:{id:t},children:e.jsx("div",{"data-slot":"form-item",className:d("grid gap-2",o),...r})})}function p({className:o,...r}){const{error:t,formItemId:s}=c();return e.jsx(M,{"data-slot":"form-label","data-error":!!t,className:d("data-[error=true]:text-destructive",o),htmlFor:s,...r})}function f({...o}){const{error:r,formItemId:t,formDescriptionId:s,formMessageId:a}=c();return e.jsx(_,{"data-slot":"form-control",id:t,"aria-describedby":r?`${s} ${a}`:`${s}`,"aria-invalid":!!r,...o})}function N({className:o,...r}){const{formDescriptionId:t}=c();return e.jsx("p",{"data-slot":"form-description",id:t,className:d("text-muted-foreground text-sm",o),...r})}function x({className:o,...r}){const{error:t,formMessageId:s}=c(),a=t?String((t==null?void 0:t.message)??""):r.children;return a?e.jsx("p",{"data-slot":"form-message",id:s,className:d("text-destructive text-sm",o),...r,children:a}):null}u.__docgenInfo={description:"",methods:[],displayName:"FormItem"};p.__docgenInfo={description:"",methods:[],displayName:"FormLabel"};f.__docgenInfo={description:"",methods:[],displayName:"FormControl"};N.__docgenInfo={description:"",methods:[],displayName:"FormDescription"};x.__docgenInfo={description:"",methods:[],displayName:"FormMessage"};l.__docgenInfo={description:"",methods:[],displayName:"FormField"};const X={title:"Shadcn/UI/Form",component:y};function W(){const o=$({email:h().email("Please enter a valid email"),password:h().min(6,"Password must be at least 6 characters")}),r=P({resolver:E(o),defaultValues:{email:"",password:""},mode:"onTouched"});function t(s){L.success(`Submitted: ${JSON.stringify(s,null,2)}`)}return e.jsx("div",{className:"max-w-md space-y-6",children:e.jsx(y,{...r,children:e.jsxs("form",{onSubmit:r.handleSubmit(t),className:"space-y-4",children:[e.jsx(l,{control:r.control,name:"email",render:({field:s})=>e.jsxs(u,{children:[e.jsx(p,{children:"Email"}),e.jsx(f,{children:e.jsx(F,{type:"email",placeholder:"you@example.com",...s})}),e.jsx(N,{children:"We’ll never share your email."}),e.jsx(x,{})]})}),e.jsx(l,{control:r.control,name:"password",render:({field:s})=>e.jsxs(u,{children:[e.jsx(p,{children:"Password"}),e.jsx(f,{children:e.jsx(F,{type:"password",placeholder:"••••••••",...s})}),e.jsx(x,{})]})}),e.jsx(V,{type:"submit",className:"w-full",children:"Sign in"})]})})})}const i={render:()=>e.jsx(W,{})};var j,I,g;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as n}from"./iframe-v7iAhKit.js";import{S as _}from"./index-DbaA6-o1.js";import{F as v,C,p as w,q as D,o as $,s as h,d as P,e as E}from"./schemas-CGNYCiJ6.js";import{c as d}from"./utils-D-KgF5mV.js";import{L as M}from"./label-Do8ODIVk.js";import{I as F}from"./input-11YRd9gD.js";import{B as V}from"./button-0oMkiryo.js";import{t as L}from"./index-XSmPROEP.js";import"./preload-helper-Dp1pzeXC.js";import"./index-Tp9IdbR8.js";import"./index-DrN5n71E.js";import"./index-CwBdPBFz.js";import"./index-CGrAONsN.js";const y=v,b=n.createContext({}),l=({...o})=>e.jsx(b.Provider,{value:{name:o.name},children:e.jsx(C,{...o})}),c=()=>{const o=n.useContext(b),r=n.useContext(S),{getFieldState:t}=w(),s=D({name:o.name}),a=t(o.name,s);if(!o)throw new Error("useFormField should be used within <FormField>");const{id:m}=r;return{id:m,name:o.name,formItemId:`${m}-form-item`,formDescriptionId:`${m}-form-item-description`,formMessageId:`${m}-form-item-message`,...a}},S=n.createContext({});function p({className:o,...r}){const t=n.useId();return e.jsx(S.Provider,{value:{id:t},children:e.jsx("div",{"data-slot":"form-item",className:d("grid gap-2",o),...r})})}function u({className:o,...r}){const{error:t,formItemId:s}=c();return e.jsx(M,{"data-slot":"form-label","data-error":!!t,className:d("data-[error=true]:text-destructive",o),htmlFor:s,...r})}function f({...o}){const{error:r,formItemId:t,formDescriptionId:s,formMessageId:a}=c();return e.jsx(_,{"data-slot":"form-control",id:t,"aria-describedby":r?`${s} ${a}`:`${s}`,"aria-invalid":!!r,...o})}function N({className:o,...r}){const{formDescriptionId:t}=c();return e.jsx("p",{"data-slot":"form-description",id:t,className:d("text-muted-foreground text-sm",o),...r})}function x({className:o,...r}){const{error:t,formMessageId:s}=c(),a=t?String((t==null?void 0:t.message)??""):r.children;return a?e.jsx("p",{"data-slot":"form-message",id:s,className:d("text-destructive text-sm",o),...r,children:a}):null}p.__docgenInfo={description:"",methods:[],displayName:"FormItem"};u.__docgenInfo={description:"",methods:[],displayName:"FormLabel"};f.__docgenInfo={description:"",methods:[],displayName:"FormControl"};N.__docgenInfo={description:"",methods:[],displayName:"FormDescription"};x.__docgenInfo={description:"",methods:[],displayName:"FormMessage"};l.__docgenInfo={description:"",methods:[],displayName:"FormField"};const X={title:"Shadcn/UI/Form",component:y};function W(){const o=$({email:h().email("Please enter a valid email"),password:h().min(6,"Password must be at least 6 characters")}),r=P({resolver:E(o),defaultValues:{email:"",password:""},mode:"onTouched"});function t(s){L.success(`Submitted: ${JSON.stringify(s,null,2)}`)}return e.jsx("div",{className:"max-w-md space-y-6",children:e.jsx(y,{...r,children:e.jsxs("form",{onSubmit:r.handleSubmit(t),className:"space-y-4",children:[e.jsx(l,{control:r.control,name:"email",render:({field:s})=>e.jsxs(p,{children:[e.jsx(u,{children:"Email"}),e.jsx(f,{children:e.jsx(F,{type:"email",placeholder:"you@example.com",...s})}),e.jsx(N,{children:"We’ll never share your email."}),e.jsx(x,{})]})}),e.jsx(l,{control:r.control,name:"password",render:({field:s})=>e.jsxs(p,{children:[e.jsx(u,{children:"Password"}),e.jsx(f,{children:e.jsx(F,{type:"password",placeholder:"••••••••",...s})}),e.jsx(x,{})]})}),e.jsx(V,{type:"submit",className:"w-full",children:"Sign in"})]})})})}const i={render:()=>e.jsx(W,{})};var j,I,g;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{
   render: () => <ValidatedFormDemo />
 }`,...(g=(I=i.parameters)==null?void 0:I.docs)==null?void 0:g.source}}};const Y=["WithValidation"];export{i as WithValidation,Y as __namedExportsOrder,X as default};