npm - @k3-universe/react-kit - Versions diffs - 0.0.28 → 0.0.30 - Mend

@k3-universe/react-kit 0.0.28 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (927) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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};