@k3-universe/react-kit 0.0.21 → 0.0.23

package/storybook-static/assets/Form.Complex.stories-QnXh5a7Q.js

@@ -0,0 +1,361 @@
+import{j as o}from"./jsx-runtime-D_zvdyIk.js";import{F as h}from"./FormBuilder-BQBBxo_k.js";import{c as s,a as e,b as q}from"./section-factories-DCCY9R35.js";import{c as t,a as l}from"./dependencies-ctrV69dx.js";import{a as y,b as p}from"./schemas-CGNYCiJ6.js";import"./iframe-v7iAhKit.js";import"./preload-helper-Dp1pzeXC.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 b={when:(a,r)=>p().refine(a,{message:"Condition not met"}).pipe(r),matchField:(a,r)=>d=>d[a]===d[r],minItems:(a,r)=>y(p()).min(a,r||`Must have at least ${a} items`),maxItems:(a,r)=>y(p()).max(a,r||`Must have at most ${a} items`)},Ue={title:"Kit/Builder/Form",component:h,parameters:{controls:{expanded:!0},backgrounds:{disable:!0}}},n={name:"Complex example",render:()=>{const a=i=>{console.log("Complex form submitted:",i)},r=(i,u,m)=>{console.log(`Field ${i} changed to:`,u),console.log("All form values:",m)},d=[s.card("Personal Information",[e.text("firstName","First Name",{required:!0,placeholder:"Enter first name"}),e.text("lastName","Last Name",{required:!0,placeholder:"Enter last name"}),e.email("email","Email Address",{required:!0,placeholder:"Enter email address"}),e.date("dateOfBirth","Date of Birth",{required:!0}),e.select("gender","Gender",[{label:"Male",value:"male"},{label:"Female",value:"female"},{label:"Other",value:"other"},{label:"Prefer not to say",value:"not_specified"}],{placeholder:"Select gender"})]),s.card("Address Information",[e.object("address","Primary Address",[e.text("street","Street Address",{required:!0,placeholder:"123 Main St",gridCols:2}),e.text("city","City",{required:!0,placeholder:"New York"}),e.text("state","State/Province",{required:!0,placeholder:"NY"}),e.text("postalCode","Postal Code",{required:!0,placeholder:"10001"}),e.select("country","Country",[{label:"United States",value:"US"},{label:"Canada",value:"CA"},{label:"United Kingdom",value:"UK"},{label:"Australia",value:"AU"}],{required:!0,defaultValue:"US"})],{gridCols:2}),e.checkbox("sameAsShipping","Billing address same as shipping",{defaultValue:!0,gridCols:2}),e.object("billingAddress","Billing Address",[e.text("street","Street Address",{required:!0,placeholder:"123 Main St",gridCols:2}),e.text("city","City",{required:!0,placeholder:"New York"}),e.text("state","State/Province",{required:!0,placeholder:"NY"}),e.text("postalCode","Postal Code",{required:!0,placeholder:"10001"}),e.select("country","Country",[{label:"United States",value:"US"},{label:"Canada",value:"CA"},{label:"United Kingdom",value:"UK"},{label:"Australia",value:"AU"}],{required:!0,defaultValue:"US"})],{gridCols:2,dependencies:[t.showWhen("sameAsShipping",l.isFalse())]})]),s.card("Employment Information",[e.select("employmentStatus","Employment Status",[{label:"Employed",value:"employed"},{label:"Self-employed",value:"self_employed"},{label:"Unemployed",value:"unemployed"},{label:"Student",value:"student"},{label:"Retired",value:"retired"}],{required:!0,placeholder:"Select employment status"}),e.text("company","Company Name",{required:!0,placeholder:"Enter company name",dependencies:[t.showWhen("employmentStatus",l.equals("employed"))]}),e.text("jobTitle","Job Title",{required:!0,placeholder:"Enter job title",dependencies:[t.showWhen("employmentStatus",l.equals("employed"))]}),e.text("businessName","Business Name",{required:!0,placeholder:"Enter business name",dependencies:[t.showWhen("employmentStatus",l.equals("self_employed"))]}),e.text("businessType","Type of Business",{placeholder:"e.g., Consulting, Retail, etc.",dependencies:[t.showWhen("employmentStatus",l.equals("self_employed"))]}),e.text("school","School/University",{required:!0,placeholder:"Enter school name",dependencies:[t.showWhen("employmentStatus",l.equals("student"))]}),e.text("major","Major/Field of Study",{placeholder:"Enter your major",dependencies:[t.showWhen("employmentStatus",l.equals("student"))]}),e.number("annualIncome","Annual Income",{placeholder:"50000",validation:b.minItems(0,"Income must be positive"),dependencies:[t.showWhen("employmentStatus",i=>["employed","self_employed"].includes(i))]})]),s.card("Skills & Experience",[e.array("skills","Skills",[e.text("name","Skill Name",{required:!0,placeholder:"e.g., JavaScript, Project Management"}),e.select("level","Proficiency Level",[{label:"Beginner",value:"beginner"},{label:"Intermediate",value:"intermediate"},{label:"Advanced",value:"advanced"},{label:"Expert",value:"expert"}],{required:!0,placeholder:"Select level"}),e.number("yearsOfExperience","Years of Experience",{placeholder:"2",validation:b.minItems(0,"Years must be positive")})],{gridCols:2,defaultValue:[{name:"",level:"",yearsOfExperience:0}]})]),s.card("Professional References",[e.checkbox("hasReferences","I have professional references",{defaultValue:!1,gridCols:2}),e.array("references","References",[e.text("name","Full Name",{required:!0,placeholder:"John Doe"}),e.text("title","Job Title",{required:!0,placeholder:"Senior Manager"}),e.text("company","Company",{required:!0,placeholder:"ABC Corporation"}),e.email("email","Email",{required:!0,placeholder:"john.doe@company.com"}),e.text("phone","Phone",{validation:q.phone,placeholder:"+1 (555) 123-4567"}),e.select("relationship","Relationship",[{label:"Direct Supervisor",value:"supervisor"},{label:"Colleague",value:"colleague"},{label:"Client",value:"client"},{label:"Other",value:"other"}],{required:!0,placeholder:"Select relationship"})],{gridCols:2,defaultValue:[],dependencies:[t.showWhen("hasReferences",l.isTrue())]})]),s.card("Additional Information",[e.textarea("additionalInfo","Additional Comments",{placeholder:"Any additional information you'd like to share...",gridCols:2}),e.checkbox("agreeToTerms","I agree to the terms and conditions",{required:!0,gridCols:2}),e.checkbox("allowMarketing","I agree to receive marketing communications",{defaultValue:!1,gridCols:2})])];return o.jsxs("div",{className:"max-w-4xl mx-auto p-6",children:[o.jsxs("div",{className:"mb-8",children:[o.jsx("h1",{className:"text-3xl font-bold text-gray-900",children:"Professional Profile"}),o.jsx("p",{className:"text-gray-600 mt-2",children:"Complete your professional profile with detailed information. This form demonstrates complex nested structures and field dependencies."})]}),o.jsx(h,{sections:d,onSubmit:a,onFieldChange:r,className:"space-y-8"})]})}},c={name:"Complex example (Tabs)",render:()=>{const a=i=>{console.log("Complex tabs form submitted:",i)},r=(i,u,m)=>{console.log(`[Tabs] Field ${i} changed to:`,u),console.log("[Tabs] All form values:",m)},d=[{title:"Profile Builder",layout:"tabs",variant:"card",defaultTabId:"basic",tabsListClassName:"w-full",tabsContentClassName:"mt-2",tabs:[{id:"basic",label:"Basic Info",sections:[s.card("Basic Information",[e.text("firstName","First Name",{required:!0}),e.text("lastName","Last Name",{required:!0}),e.email("email","Email Address",{required:!0}),e.date("dateOfBirth","Date of Birth",{required:!0})],{grid:{cols:1,mdCols:2,gap:"gap-4"}})]},{id:"address",label:"Addresses",sections:[s.card("Address Information",[e.object("address","Primary Address",[e.text("street","Street Address",{required:!0,gridCols:2}),e.text("city","City",{required:!0}),e.text("state","State/Province",{required:!0}),e.text("postalCode","Postal Code",{required:!0}),e.select("country","Country",[{label:"United States",value:"US"},{label:"Canada",value:"CA"},{label:"United Kingdom",value:"UK"},{label:"Australia",value:"AU"}],{required:!0,defaultValue:"US"})],{gridCols:2}),e.checkbox("sameAsShipping","Billing same as shipping",{defaultValue:!0,gridCols:2}),e.object("billingAddress","Billing Address",[e.text("street","Street Address",{required:!0,gridCols:2}),e.text("city","City",{required:!0}),e.text("state","State/Province",{required:!0}),e.text("postalCode","Postal Code",{required:!0}),e.select("country","Country",[{label:"United States",value:"US"},{label:"Canada",value:"CA"},{label:"United Kingdom",value:"UK"},{label:"Australia",value:"AU"}],{required:!0,defaultValue:"US"})],{gridCols:2,dependencies:[t.showWhen("sameAsShipping",l.isFalse())]})])]},{id:"employment",label:"Employment",sections:[s.card("Employment Information",[e.select("employmentStatus","Employment Status",[{label:"Employed",value:"employed"},{label:"Self-employed",value:"self_employed"},{label:"Unemployed",value:"unemployed"},{label:"Student",value:"student"}],{required:!0}),e.text("company","Company Name",{dependencies:[t.showWhen("employmentStatus",l.equals("employed"))]}),e.text("jobTitle","Job Title",{dependencies:[t.showWhen("employmentStatus",l.equals("employed"))]}),e.text("businessName","Business Name",{dependencies:[t.showWhen("employmentStatus",l.equals("self_employed"))]}),e.text("school","School/University",{dependencies:[t.showWhen("employmentStatus",l.equals("student"))]})])]}]}];return o.jsxs("div",{className:"max-w-4xl mx-auto p-6",children:[o.jsxs("div",{className:"mb-8",children:[o.jsx("h1",{className:"text-3xl font-bold text-gray-900",children:"Professional Profile (Tabs)"}),o.jsx("p",{className:"text-gray-600 mt-2",children:"This story shows how to organize complex forms into tabs."})]}),o.jsx(h,{sections:d,onSubmit:a,onFieldChange:r,className:"space-y-8"})]})}};var x,f,g;n.parameters={...n.parameters,docs:{...(x=n.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  name: 'Complex example',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Complex form submitted:', data);
+    };
+    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+      console.log(\`Field \${name} changed to:\`, value);
+      console.log('All form values:', allValues);
+    };
+    const sections = [createSection.card('Personal Information', [createField.text('firstName', 'First Name', {
+      required: true,
+      placeholder: 'Enter first name'
+    }), createField.text('lastName', 'Last Name', {
+      required: true,
+      placeholder: 'Enter last name'
+    }), createField.email('email', 'Email Address', {
+      required: true,
+      placeholder: 'Enter email address'
+    }), createField.date('dateOfBirth', 'Date of Birth', {
+      required: true
+    }), createField.select('gender', 'Gender', [{
+      label: 'Male',
+      value: 'male'
+    }, {
+      label: 'Female',
+      value: 'female'
+    }, {
+      label: 'Other',
+      value: 'other'
+    }, {
+      label: 'Prefer not to say',
+      value: 'not_specified'
+    }], {
+      placeholder: 'Select gender'
+    })]), createSection.card('Address Information', [createField.object('address', 'Primary Address', [createField.text('street', 'Street Address', {
+      required: true,
+      placeholder: '123 Main St',
+      gridCols: 2
+    }), createField.text('city', 'City', {
+      required: true,
+      placeholder: 'New York'
+    }), createField.text('state', 'State/Province', {
+      required: true,
+      placeholder: 'NY'
+    }), createField.text('postalCode', 'Postal Code', {
+      required: true,
+      placeholder: '10001'
+    }), createField.select('country', 'Country', [{
+      label: 'United States',
+      value: 'US'
+    }, {
+      label: 'Canada',
+      value: 'CA'
+    }, {
+      label: 'United Kingdom',
+      value: 'UK'
+    }, {
+      label: 'Australia',
+      value: 'AU'
+    }], {
+      required: true,
+      defaultValue: 'US'
+    })], {
+      gridCols: 2
+    }), createField.checkbox('sameAsShipping', 'Billing address same as shipping', {
+      defaultValue: true,
+      gridCols: 2
+    }), createField.object('billingAddress', 'Billing Address', [createField.text('street', 'Street Address', {
+      required: true,
+      placeholder: '123 Main St',
+      gridCols: 2
+    }), createField.text('city', 'City', {
+      required: true,
+      placeholder: 'New York'
+    }), createField.text('state', 'State/Province', {
+      required: true,
+      placeholder: 'NY'
+    }), createField.text('postalCode', 'Postal Code', {
+      required: true,
+      placeholder: '10001'
+    }), createField.select('country', 'Country', [{
+      label: 'United States',
+      value: 'US'
+    }, {
+      label: 'Canada',
+      value: 'CA'
+    }, {
+      label: 'United Kingdom',
+      value: 'UK'
+    }, {
+      label: 'Australia',
+      value: 'AU'
+    }], {
+      required: true,
+      defaultValue: 'US'
+    })], {
+      gridCols: 2,
+      dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())]
+    })]), createSection.card('Employment Information', [createField.select('employmentStatus', 'Employment Status', [{
+      label: 'Employed',
+      value: 'employed'
+    }, {
+      label: 'Self-employed',
+      value: 'self_employed'
+    }, {
+      label: 'Unemployed',
+      value: 'unemployed'
+    }, {
+      label: 'Student',
+      value: 'student'
+    }, {
+      label: 'Retired',
+      value: 'retired'
+    }], {
+      required: true,
+      placeholder: 'Select employment status'
+    }), createField.text('company', 'Company Name', {
+      required: true,
+      placeholder: 'Enter company name',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))]
+    }), createField.text('jobTitle', 'Job Title', {
+      required: true,
+      placeholder: 'Enter job title',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))]
+    }), createField.text('businessName', 'Business Name', {
+      required: true,
+      placeholder: 'Enter business name',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))]
+    }), createField.text('businessType', 'Type of Business', {
+      placeholder: 'e.g., Consulting, Retail, etc.',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))]
+    }), createField.text('school', 'School/University', {
+      required: true,
+      placeholder: 'Enter school name',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))]
+    }), createField.text('major', 'Major/Field of Study', {
+      placeholder: 'Enter your major',
+      dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))]
+    }), createField.number('annualIncome', 'Annual Income', {
+      placeholder: '50000',
+      validation: validators.minItems(0, 'Income must be positive'),
+      dependencies: [createDependency.showWhen('employmentStatus', value => ['employed', 'self_employed'].includes(value))]
+    })]), createSection.card('Skills & Experience', [createField.array('skills', 'Skills', [createField.text('name', 'Skill Name', {
+      required: true,
+      placeholder: 'e.g., JavaScript, Project Management'
+    }), createField.select('level', 'Proficiency Level', [{
+      label: 'Beginner',
+      value: 'beginner'
+    }, {
+      label: 'Intermediate',
+      value: 'intermediate'
+    }, {
+      label: 'Advanced',
+      value: 'advanced'
+    }, {
+      label: 'Expert',
+      value: 'expert'
+    }], {
+      required: true,
+      placeholder: 'Select level'
+    }), createField.number('yearsOfExperience', 'Years of Experience', {
+      placeholder: '2',
+      validation: validators.minItems(0, 'Years must be positive')
+    })], {
+      gridCols: 2,
+      defaultValue: [{
+        name: '',
+        level: '',
+        yearsOfExperience: 0
+      }]
+    })]), createSection.card('Professional References', [createField.checkbox('hasReferences', 'I have professional references', {
+      defaultValue: false,
+      gridCols: 2
+    }), createField.array('references', 'References', [createField.text('name', 'Full Name', {
+      required: true,
+      placeholder: 'John Doe'
+    }), createField.text('title', 'Job Title', {
+      required: true,
+      placeholder: 'Senior Manager'
+    }), createField.text('company', 'Company', {
+      required: true,
+      placeholder: 'ABC Corporation'
+    }), createField.email('email', 'Email', {
+      required: true,
+      placeholder: 'john.doe@company.com'
+    }), createField.text('phone', 'Phone', {
+      validation: commonValidations.phone,
+      placeholder: '+1 (555) 123-4567'
+    }), createField.select('relationship', 'Relationship', [{
+      label: 'Direct Supervisor',
+      value: 'supervisor'
+    }, {
+      label: 'Colleague',
+      value: 'colleague'
+    }, {
+      label: 'Client',
+      value: 'client'
+    }, {
+      label: 'Other',
+      value: 'other'
+    }], {
+      required: true,
+      placeholder: 'Select relationship'
+    })], {
+      gridCols: 2,
+      defaultValue: [],
+      dependencies: [createDependency.showWhen('hasReferences', conditions.isTrue())]
+    })]), createSection.card('Additional Information', [createField.textarea('additionalInfo', 'Additional Comments', {
+      placeholder: "Any additional information you'd like to share...",
+      gridCols: 2
+    }), createField.checkbox('agreeToTerms', 'I agree to the terms and conditions', {
+      required: true,
+      gridCols: 2
+    }), createField.checkbox('allowMarketing', 'I agree to receive marketing communications', {
+      defaultValue: false,
+      gridCols: 2
+    })])];
+    return <div className="max-w-4xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Professional Profile</h1>
+          <p className="text-gray-600 mt-2">
+            Complete your professional profile with detailed information. This form demonstrates complex nested structures and field dependencies.
+          </p>
+        </div>
+
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+      </div>;
+  }
+}`,...(g=(f=n.parameters)==null?void 0:f.docs)==null?void 0:g.source}}};var v,S,C;c.parameters={...c.parameters,docs:{...(v=c.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  name: 'Complex example (Tabs)',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Complex tabs form submitted:', data);
+    };
+    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+      console.log(\`[Tabs] Field \${name} changed to:\`, value);
+      console.log('[Tabs] All form values:', allValues);
+    };
+    const sections: FormBuilderSectionConfig[] = [{
+      title: 'Profile Builder',
+      layout: 'tabs',
+      variant: 'card',
+      defaultTabId: 'basic',
+      tabsListClassName: 'w-full',
+      tabsContentClassName: 'mt-2',
+      tabs: [{
+        id: 'basic',
+        label: 'Basic Info',
+        sections: [createSection.card('Basic Information', [createField.text('firstName', 'First Name', {
+          required: true
+        }), createField.text('lastName', 'Last Name', {
+          required: true
+        }), createField.email('email', 'Email Address', {
+          required: true
+        }), createField.date('dateOfBirth', 'Date of Birth', {
+          required: true
+        })], {
+          grid: {
+            cols: 1,
+            mdCols: 2,
+            gap: 'gap-4'
+          }
+        })]
+      }, {
+        id: 'address',
+        label: 'Addresses',
+        sections: [createSection.card('Address Information', [createField.object('address', 'Primary Address', [createField.text('street', 'Street Address', {
+          required: true,
+          gridCols: 2
+        }), createField.text('city', 'City', {
+          required: true
+        }), createField.text('state', 'State/Province', {
+          required: true
+        }), createField.text('postalCode', 'Postal Code', {
+          required: true
+        }), createField.select('country', 'Country', [{
+          label: 'United States',
+          value: 'US'
+        }, {
+          label: 'Canada',
+          value: 'CA'
+        }, {
+          label: 'United Kingdom',
+          value: 'UK'
+        }, {
+          label: 'Australia',
+          value: 'AU'
+        }], {
+          required: true,
+          defaultValue: 'US'
+        })], {
+          gridCols: 2
+        }), createField.checkbox('sameAsShipping', 'Billing same as shipping', {
+          defaultValue: true,
+          gridCols: 2
+        }), createField.object('billingAddress', 'Billing Address', [createField.text('street', 'Street Address', {
+          required: true,
+          gridCols: 2
+        }), createField.text('city', 'City', {
+          required: true
+        }), createField.text('state', 'State/Province', {
+          required: true
+        }), createField.text('postalCode', 'Postal Code', {
+          required: true
+        }), createField.select('country', 'Country', [{
+          label: 'United States',
+          value: 'US'
+        }, {
+          label: 'Canada',
+          value: 'CA'
+        }, {
+          label: 'United Kingdom',
+          value: 'UK'
+        }, {
+          label: 'Australia',
+          value: 'AU'
+        }], {
+          required: true,
+          defaultValue: 'US'
+        })], {
+          gridCols: 2,
+          dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())]
+        })])]
+      }, {
+        id: 'employment',
+        label: 'Employment',
+        sections: [createSection.card('Employment Information', [createField.select('employmentStatus', 'Employment Status', [{
+          label: 'Employed',
+          value: 'employed'
+        }, {
+          label: 'Self-employed',
+          value: 'self_employed'
+        }, {
+          label: 'Unemployed',
+          value: 'unemployed'
+        }, {
+          label: 'Student',
+          value: 'student'
+        }], {
+          required: true
+        }), createField.text('company', 'Company Name', {
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))]
+        }), createField.text('jobTitle', 'Job Title', {
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))]
+        }), createField.text('businessName', 'Business Name', {
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))]
+        }), createField.text('school', 'School/University', {
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))]
+        })])]
+      }]
+    }];
+    return <div className="max-w-4xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Professional Profile (Tabs)</h1>
+          <p className="text-gray-600 mt-2">This story shows how to organize complex forms into tabs.</p>
+        </div>
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+      </div>;
+  }
+}`,...(C=(S=c.parameters)==null?void 0:S.docs)==null?void 0:C.source}}};const we=["ComplexExample","ComplexTabsExample"];export{n as ComplexExample,c as ComplexTabsExample,we as __namedExportsOrder,Ue as default};