@k3-universe/react-kit 0.0.8 → 0.0.10

package/storybook-static/assets/Form.ArrayLayouts.stories-C5d_062d.js

@@ -0,0 +1,130 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{F as i}from"./FormBuilder-BQBBxo_k.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 he={title:"Kit/Builder/Form (Array Layouts)",component:i,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},a={name:"Array - Card layout",args:{sections:[{title:"Card Layout",description:"Array items are displayed as stacked cards",layout:"grid",grid:{cols:1,gap:"gap-4"},fields:[{name:"itemsCard",type:"array",label:"Items (card)",fields:[{name:"name",label:"Name",type:"text",required:!0},{name:"qty",label:"Qty",type:"number",required:!0}]}]}],showActions:!0,onSubmit:r=>console.log("Submit (array-card):",r)},render:r=>e.jsx("div",{className:"max-w-3xl mx-auto p-6",children:e.jsx(i,{...r})})},s={name:"Array - Table layout",args:{sections:[{title:"Table Layout",description:"Array items are displayed in a table with configurable colors",layout:"grid",grid:{cols:1,gap:"gap-4"},fields:[{name:"itemsTable",type:"array",label:"Items (table)",arrayLayout:"table",arrayColors:{headerBgClass:"bg-teal-700",headerTextClass:"text-white",rowAltBgClass:"bg-teal-50"},fields:[{name:"product",label:"Product",type:"text",required:!0},{name:"price",label:"Price",type:"number",required:!0}]}]}],showActions:!0,onSubmit:r=>console.log("Submit (array-table):",r)},render:r=>e.jsx("div",{className:"max-w-4xl mx-auto p-6",children:e.jsx(i,{...r})})},o={name:"Array - Custom renderer",args:{defaultValues:{itemsCustom:[]},sections:[{title:"Custom Layout",description:"Array items with a fully custom renderer",layout:"grid",grid:{cols:1,gap:"gap-4"},fields:[{name:"itemsCustom",type:"array",label:"Items (custom)",defaultValue:[],arrayLayout:"custom",arrayRender:({value:r=[],rows:t=[],addItem:x,removeItem:f,disabled:A})=>e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx("span",{className:"font-medium",children:"Custom Items"}),e.jsx("button",{type:"button",className:"btn btn-primary",onClick:()=>!A&&x(),children:"Add Item"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"text-xs text-muted-foreground",children:["Rows: ",t.length]}),Array.isArray(t)&&t.length>0?t.map((v,m)=>e.jsxs("div",{className:"flex items-center gap-3 border rounded-md p-3",children:[e.jsxs("span",{className:"text-sm text-muted-foreground",children:["Row ",m+1]}),e.jsx("button",{type:"button",className:"ml-auto btn btn-destructive",onClick:()=>f(m),children:"Remove"})]},v.id??m)):e.jsx("p",{className:"text-sm text-muted-foreground",children:"No items. Click Add Item."})]})]})}]}],showActions:!0,onSubmit:r=>console.log("Submit (array-custom):",r)},render:r=>e.jsx("div",{className:"max-w-3xl mx-auto p-6",children:e.jsx(i,{...r})})};var l,d,u;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:`{
+  name: 'Array - Card layout',
+  args: {
+    sections: [{
+      title: 'Card Layout',
+      description: 'Array items are displayed as stacked cards',
+      layout: 'grid',
+      grid: {
+        cols: 1,
+        gap: 'gap-4'
+      },
+      fields: [{
+        name: 'itemsCard',
+        type: 'array',
+        label: 'Items (card)',
+        fields: [{
+          name: 'name',
+          label: 'Name',
+          type: 'text',
+          required: true
+        }, {
+          name: 'qty',
+          label: 'Qty',
+          type: 'number',
+          required: true
+        }]
+      }]
+    }],
+    showActions: true,
+    onSubmit: (data: unknown) => console.log('Submit (array-card):', data)
+  } satisfies Partial<FormBuilderProps>,
+  render: args => <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...args as FormBuilderProps} />
+    </div>
+}`,...(u=(d=a.parameters)==null?void 0:d.docs)==null?void 0:u.source}}};var n,p,c;s.parameters={...s.parameters,docs:{...(n=s.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  name: 'Array - Table layout',
+  args: {
+    sections: [{
+      title: 'Table Layout',
+      description: 'Array items are displayed in a table with configurable colors',
+      layout: 'grid',
+      grid: {
+        cols: 1,
+        gap: 'gap-4'
+      },
+      fields: [{
+        name: 'itemsTable',
+        type: 'array',
+        label: 'Items (table)',
+        arrayLayout: 'table',
+        arrayColors: {
+          headerBgClass: 'bg-teal-700',
+          headerTextClass: 'text-white',
+          rowAltBgClass: 'bg-teal-50'
+        },
+        fields: [{
+          name: 'product',
+          label: 'Product',
+          type: 'text',
+          required: true
+        }, {
+          name: 'price',
+          label: 'Price',
+          type: 'number',
+          required: true
+        }]
+      }]
+    }],
+    showActions: true,
+    onSubmit: (data: unknown) => console.log('Submit (array-table):', data)
+  } satisfies Partial<FormBuilderProps>,
+  render: args => <div className="max-w-4xl mx-auto p-6">
+      <FormBuilder {...args as FormBuilderProps} />
+    </div>
+}`,...(c=(p=s.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var y,b,g;o.parameters={...o.parameters,docs:{...(y=o.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  name: 'Array - Custom renderer',
+  args: {
+    defaultValues: {
+      itemsCustom: []
+    },
+    sections: [{
+      title: 'Custom Layout',
+      description: 'Array items with a fully custom renderer',
+      layout: 'grid',
+      grid: {
+        cols: 1,
+        gap: 'gap-4'
+      },
+      fields: [{
+        name: 'itemsCustom',
+        type: 'array',
+        label: 'Items (custom)',
+        defaultValue: [],
+        arrayLayout: 'custom',
+        arrayRender: ({
+          value: _value = [],
+          rows = [],
+          addItem,
+          removeItem,
+          disabled
+        }) => {
+          return <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">Custom Items</span>
+                    <button type="button" className="btn btn-primary" onClick={() => !disabled && addItem()}>
+                      Add Item
+                    </button>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-xs text-muted-foreground">Rows: {rows.length}</div>
+                    {Array.isArray(rows) && rows.length > 0 ? rows.map((row: {
+                id: string;
+              }, i: number) => <div key={row.id ?? i} className="flex items-center gap-3 border rounded-md p-3">
+                          <span className="text-sm text-muted-foreground">Row {i + 1}</span>
+                          <button type="button" className="ml-auto btn btn-destructive" onClick={() => removeItem(i)}>
+                            Remove
+                          </button>
+                        </div>) : <p className="text-sm text-muted-foreground">No items. Click Add Item.</p>}
+                  </div>
+                </div>;
+        }
+      }]
+    }],
+    showActions: true,
+    onSubmit: (data: unknown) => console.log('Submit (array-custom):', data)
+  } satisfies Partial<FormBuilderProps>,
+  render: args => <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...args as FormBuilderProps} />
+    </div>
+}`,...(g=(b=o.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};const we=["ArrayCardLayout","ArrayTableLayout","ArrayCustomLayout"];export{a as ArrayCardLayout,o as ArrayCustomLayout,s as ArrayTableLayout,we as __namedExportsOrder,he as default};

package/storybook-static/assets/Form.Autocomplete.stories-CPZPkk4o.js

@@ -0,0 +1,142 @@
+import{j as a}from"./jsx-runtime-D_zvdyIk.js";import{F as r}from"./FormBuilder-BQBBxo_k.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 Ve={title:"Kit/Builder/Form Autocomplete",component:r,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},B=[{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"}],i={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:B,clearable:!0,allowCustomValue:!0}]}],onSubmit:e=>{console.log("Submit (single):",e)},showActions:!0},render:e=>a.jsx("div",{className:"max-w-3xl mx-auto p-6",children:a.jsx(r,{...e})})},u=Array.from({length:100}).map((e,o)=>({label:`Server Option ${o+1}`,value:o+1}));function E(e=u,o=250){return async({search:t,page:F=1,pageSize:m=10})=>{const d=(t||"").toLowerCase(),g=d?e.filter(p=>p.label.toLowerCase().includes(d)):e,n=(F-1)*m,N=g.slice(n,n+m),I=n+m<g.length;return await new Promise(p=>setTimeout(p,o)),{items:N,hasMore:I,nextCursor:null}}}async function M(e){await new Promise(t=>setTimeout(t,150));const o=e.map(t=>typeof t=="string"?Number(t):t);return u.filter(t=>o.includes(t.value))}const l={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:E(),options:[],pageSize:10,multiple:!0,clearable:!0,chipVariant:"secondary",loadSelected:M,initialSelectedOptions:u.filter(e=>[2,5,17].includes(e.value))}]}],defaultValues:{cities:[2,5,17]},onSubmit:e=>{console.log("Submit (server edit):",e)},showActions:!0},render:e=>a.jsx("div",{className:"max-w-3xl mx-auto p-6",children:a.jsx(r,{...e})})},s={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:B,multiple:!0,clearable:!0,chipVariant:"secondary"}]}],onSubmit:e=>{console.log("Submit (multi):",e)},showActions:!0},render:e=>a.jsx("div",{className:"max-w-3xl mx-auto p-6",children:a.jsx(r,{...e})})},c={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:!0,allowCustomValue:!0,clearable:!0,chipVariant:"outline"}]}],onSubmit:e=>{console.log("Submit (tagging):",e)},showActions:!0},render:e=>a.jsx("div",{className:"max-w-3xl mx-auto p-6",children:a.jsx(r,{...e})})};var h,b,S;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  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>
+}`,...(S=(b=i.parameters)==null?void 0:b.docs)==null?void 0:S.source}}};var v,y,x;l.parameters={...l.parameters,docs:{...(v=l.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  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>
+}`,...(x=(y=l.parameters)==null?void 0:y.docs)==null?void 0:x.source}}};var w,f,P;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  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>
+}`,...(P=(f=s.parameters)==null?void 0:f.docs)==null?void 0:P.source}}};var C,T,A;c.parameters={...c.parameters,docs:{...(C=c.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  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>
+}`,...(A=(T=c.parameters)==null?void 0:T.docs)==null?void 0:A.source}}};const je=["SingleAutocomplete","ServerEditPrefilledByIds","MultiAutocompleteChips","TaggingAutocomplete"];export{s as MultiAutocompleteChips,l as ServerEditPrefilledByIds,i as SingleAutocomplete,c as TaggingAutocomplete,je as __namedExportsOrder,Ve as default};

package/storybook-static/assets/Form.Basic.stories-Bhcu3-3n.js

@@ -0,0 +1,58 @@
+import{j as r}from"./jsx-runtime-D_zvdyIk.js";import{F as m}from"./FormBuilder-BQBBxo_k.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:m,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},e={name:"Basic usage",args:{sections:[{title:"User Info",description:"A minimal configuration using grid layout",variant:"card",layout:"grid",grid:{cols:1,mdCols:2,gap:"gap-4"},fields:[{name:"firstName",label:"First name",type:"text",required:!0},{name:"lastName",label:"Last name",type:"text",required:!0},{name:"email",label:"Email",type:"email",required:!0},{name:"newsletter",label:"Subscribe to newsletter",type:"checkbox",defaultValue:!1,gridCols:2},{name:"darkMode",label:"Enable dark mode",type:"switch",defaultValue:!1,gridCols:2},{name:"darkModeStacked",label:"Enable dark mode (stacked)",type:"switch",defaultValue:!0,labelPlacement:"stacked",gridCols:2}]}],onSubmit:t=>{console.log("Submit (basic):",t)},showActions:!0},render:t=>r.jsx("div",{className:"max-w-3xl mx-auto p-6",children:r.jsx(m,{...t})})};var a,i,o;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`{
+  name: 'Basic usage',
+  args: {
+    sections: [{
+      title: 'User Info',
+      description: 'A minimal configuration using grid layout',
+      variant: 'card',
+      layout: 'grid',
+      grid: {
+        cols: 1,
+        mdCols: 2,
+        gap: 'gap-4'
+      },
+      fields: [{
+        name: 'firstName',
+        label: 'First name',
+        type: 'text',
+        required: true
+      }, {
+        name: 'lastName',
+        label: 'Last name',
+        type: 'text',
+        required: true
+      }, {
+        name: 'email',
+        label: 'Email',
+        type: 'email',
+        required: true
+      }, {
+        name: 'newsletter',
+        label: 'Subscribe to newsletter',
+        type: 'checkbox',
+        defaultValue: false,
+        gridCols: 2
+      }, {
+        name: 'darkMode',
+        label: 'Enable dark mode',
+        type: 'switch',
+        defaultValue: false,
+        gridCols: 2
+      }, {
+        name: 'darkModeStacked',
+        label: 'Enable dark mode (stacked)',
+        type: 'switch',
+        defaultValue: true,
+        labelPlacement: 'stacked',
+        gridCols: 2
+      }]
+    }],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (basic):', data);
+    },
+    showActions: true
+  } satisfies Partial<FormBuilderProps>,
+  render: args => <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...args as FormBuilderProps} />
+    </div>
+}`,...(o=(i=e.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};const pe=["BasicUsage"];export{e as BasicUsage,pe as __namedExportsOrder,se as default};