dhanasekar-ui 1.1.3 → 1.2.0

package/dist/chunk-3RAQQWLW.js

@@ -0,0 +1,351 @@
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var D=`
+  :root {
+    --fl-primary: #3b82f6;
+    --fl-primary-dark: #2563eb;
+    --fl-primary-light: #eff6ff;
+    --fl-text-main: #1e293b;
+    --fl-text-secondary: #64748b;
+    --fl-bg-main: #ffffff;
+    --fl-bg-secondary: #f8fafc;
+    --fl-border: #e2e8f0;
+    --fl-error: #ef4444;
+    --fl-success: #10b981;
+    --fl-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --fl-radius: 12px;
+  }
+
+  .fl-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 80vh;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    color: var(--fl-text-main);
+    width: 100%;
+    margin: 0 auto;
+    background: var(--fl-bg-main);
+    position: relative;
+  }
+
+  /* Header */
+  .fl-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px;
+    border-bottom: 1px solid var(--fl-border);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8px);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .fl-header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .fl-back-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    border: none;
+    background: var(--fl-primary-light);
+    color: var(--fl-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+
+  .fl-back-btn:hover {
+    background: var(--fl-primary);
+    color: white;
+    transform: translateX(-2px);
+  }
+
+  .fl-title-group h1 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--fl-text-main);
+  }
+
+  .fl-title-group p {
+    margin: 4px 0 0 0;
+    font-size: 14px;
+    color: var(--fl-text-secondary);
+  }
+
+  .fl-header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* Layout Toggle */
+  .fl-layout-toggle {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    border: 1px solid var(--fl-border);
+    background: white;
+    color: var(--fl-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+
+  .fl-layout-toggle:hover {
+    border-color: var(--fl-primary);
+    background: var(--fl-primary-light);
+  }
+
+  /* Stepper */
+  .fl-stepper-container {
+    padding: 32px 24px;
+  }
+
+  .fl-stepper {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin-bottom: 32px;
+  }
+
+  .fl-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 3;
+    flex: 1;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .fl-step:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 20px;
+    left: calc(50% + 24px);
+    right: calc(-50% + 24px);
+    height: 3px;
+    background: var(--fl-border);
+    z-index: -1;
+    transition: background 0.3s ease;
+  }
+
+  .fl-step.completed:not(:last-child)::after {
+    background: var(--fl-primary);
+  }
+
+
+  .fl-step-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: white;
+    border: 3px solid var(--fl-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--fl-text-secondary);
+    transition: all 0.3s ease;
+    margin-bottom: 8px;
+    box-shadow: 0 0 0 4px white;
+  }
+
+  .fl-step.active .fl-step-icon {
+    border-color: var(--fl-primary);
+    color: var(--fl-primary);
+    transform: scale(1.1);
+    box-shadow: 0 0 0 4px white, 0 4px 12px rgba(59, 130, 246, 0.3);
+  }
+
+  .fl-step.completed .fl-step-icon {
+    background: var(--fl-primary);
+    border-color: var(--fl-primary);
+    color: white;
+  }
+
+  .fl-step.error .fl-step-icon {
+    border-color: var(--fl-error);
+    color: var(--fl-error);
+  }
+
+  .fl-step-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--fl-text-secondary);
+    transition: all 0.2s ease;
+  }
+
+  .fl-step.active .fl-step-label {
+    color: var(--fl-primary);
+    font-weight: 600;
+  }
+
+  /* Accordion */
+  .fl-accordion-container {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .fl-accordion-item {
+    border: 1px solid var(--fl-border);
+    border-radius: var(--fl-radius);
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .fl-accordion-item.active {
+    border-color: var(--fl-primary);
+    box-shadow: var(--fl-shadow);
+  }
+
+  .fl-accordion-item.error {
+    border-color: var(--fl-error);
+  }
+
+  .fl-accordion-header {
+    padding: 16px 20px;
+    background: var(--fl-bg-secondary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .fl-accordion-header:hover {
+    background: #f1f5f9;
+  }
+
+  .fl-accordion-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 600;
+  }
+
+  .fl-accordion-icon {
+    color: var(--fl-primary);
+    font-size: 18px;
+  }
+
+  .fl-accordion-content {
+    padding: 20px;
+    background: white;
+    border-top: 1px solid var(--fl-border);
+    display: none;
+    animation: slideDown 0.3s ease-out;
+  }
+
+  .fl-accordion-item.active .fl-accordion-content {
+    display: block;
+  }
+
+  @keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Content Area */
+  .fl-content {
+    flex: 1;
+    padding: 0 24px 100px 24px;
+  }
+
+  /* Footer */
+  .fl-footer {
+    padding: 20px 24px;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(8px);
+    border-top: 1px solid var(--fl-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+  }
+
+  .fl-btn-group {
+    display: flex;
+    gap: 12px;
+  }
+
+  .fl-btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid transparent;
+  }
+
+  .fl-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .fl-btn-primary {
+    background: var(--fl-primary);
+    color: white;
+  }
+
+  .fl-btn-primary:hover:not(:disabled) {
+    background: var(--fl-primary-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  }
+
+  .fl-btn-outlined {
+    background: transparent;
+    border-color: var(--fl-border);
+    color: var(--fl-text-secondary);
+  }
+
+  .fl-btn-outlined:hover:not(:disabled) {
+    background: var(--fl-bg-secondary);
+    border-color: var(--fl-text-secondary);
+  }
+
+  .fl-loader {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .fl-header { padding: 16px; }
+    .fl-title-group h1 { font-size: 18px; }
+    .fl-stepper-container { padding: 24px 12px; }
+    .fl-step-label { display: none; }
+    .fl-footer { padding: 16px; }
+  }
+`,M=({title:f,mode:i,onCancel:k,onSubmit:$,children:d,steps:o=[],validateStep:x,loading:l=false,layoutType:F="stepper",onSaveDraft:E,onApprove:z,hideSubmitButton:w=false,hideCancelButton:L=false,showbutton:V=true,errors:N,extraHeaderActions:I,onBack:S})=>{let[n,p]=react.useState(0),[b,g]=react.useState(false),[m,u]=react.useState(null),[s,U]=react.useState(F);react.useEffect(()=>{let r="tabler-icons-cdn";if(!document.getElementById(r)){let t=document.createElement("link");t.id=r,t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css",document.head.appendChild(t);}},[]),react.useEffect(()=>{m!==null&&N&&o.length>0&&((o[m]?.fields??[]).some(c=>N[c])||u(null));},[N,m,o]);let Y=()=>{S?S():k();},j=o.length>0&&n===o.length-1,v=async()=>{if(s==="accordion"&&x){g(true);let r=false;for(let t=0;t<o.length;t++)if(!await x(t)){u(t),p(t),r=true;break}if(g(false),r)return;$(),u(null);}else {if(x){g(true);let r=await x(n);if(g(false),!r){u(n);return}}u(null),j||o.length===0?$():p(r=>r+1);}},R=()=>p(r=>r-1),T=()=>{U(s==="stepper"?"accordion":"stepper");},B=()=>typeof d=="function"?d(n):d;return jsxRuntime.jsxs("div",{className:"fl-container",children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:D}}),jsxRuntime.jsxs("header",{className:"fl-header",children:[jsxRuntime.jsxs("div",{className:"fl-header-left",children:[jsxRuntime.jsx("button",{className:"fl-back-btn",onClick:Y,title:"Go Back",children:jsxRuntime.jsx("i",{className:"ti ti-arrow-left"})}),jsxRuntime.jsxs("div",{className:"fl-title-group",children:[jsxRuntime.jsx("h1",{children:i==="add"?`Add ${f}`:i==="view"?`View ${f}`:`Edit ${f}`}),jsxRuntime.jsx("p",{children:i==="add"?`Fill out the details below to add a new ${f.toLowerCase()}.`:`Update the details below to edit the existing ${f.toLowerCase()}.`})]})]}),jsxRuntime.jsxs("div",{className:"fl-header-right",children:[E&&jsxRuntime.jsxs("button",{className:"fl-btn fl-btn-primary",onClick:E,disabled:l,children:["Draft ",l&&jsxRuntime.jsx("div",{className:"fl-loader"})]}),z&&jsxRuntime.jsxs("button",{className:"fl-btn fl-btn-primary",onClick:z,disabled:l,children:["Approve ",l&&jsxRuntime.jsx("div",{className:"fl-loader"})]}),I,o.length>0&&jsxRuntime.jsx("button",{className:"fl-layout-toggle",onClick:T,title:`Switch to ${s==="stepper"?"Accordion":"Stepper"} view`,children:jsxRuntime.jsx("i",{className:s==="stepper"?"ti ti-list-details":"ti ti-list-numbers"})})]})]}),o.length>0&&jsxRuntime.jsx("div",{className:"fl-stepper-container",children:s==="stepper"?jsxRuntime.jsx("div",{className:"fl-stepper",children:o.map((r,t)=>{let c=n===t,C=n>t;return jsxRuntime.jsxs("div",{className:`fl-step ${c?"active":""} ${C?"completed":""} ${m===t?"error":""}`,onClick:()=>!b&&p(t),children:[jsxRuntime.jsx("div",{className:"fl-step-icon",children:C?jsxRuntime.jsx("i",{className:"ti ti-check"}):r.icon?jsxRuntime.jsx("i",{className:`ti ${r.icon}`}):t+1}),jsxRuntime.jsx("span",{className:"fl-step-label",children:r.label})]},t)})}):jsxRuntime.jsx("div",{className:"fl-accordion-container",children:o.map((r,t)=>{let c=n===t;return jsxRuntime.jsxs("div",{className:`fl-accordion-item ${c?"active":""} ${m===t?"error":""}`,children:[jsxRuntime.jsxs("div",{className:"fl-accordion-header",onClick:()=>p(t),children:[jsxRuntime.jsxs("div",{className:"fl-accordion-title",children:[jsxRuntime.jsx("i",{className:`ti ${r.icon||"ti-circle-number-"+(t+1)} fl-accordion-icon`}),r.label]}),jsxRuntime.jsx("i",{className:`ti ti-chevron-${c?"up":"down"}`})]}),jsxRuntime.jsx("div",{className:"fl-accordion-content",children:typeof d=="function"?d(t):d})]},t)})})}),(o.length===0||s==="stepper")&&jsxRuntime.jsx("main",{className:"fl-content",children:B()}),jsxRuntime.jsxs("footer",{className:"fl-footer",children:[jsxRuntime.jsx("div",{children:s==="stepper"&&o.length>0&&jsxRuntime.jsx("button",{className:"fl-btn fl-btn-outlined",onClick:R,disabled:l||n===0,children:"Back"})}),jsxRuntime.jsx("div",{className:"fl-btn-group",children:s==="accordion"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!L&&jsxRuntime.jsx("button",{className:"fl-btn fl-btn-outlined",onClick:k,disabled:l,children:"Cancel"}),i!=="view"&&!w&&jsxRuntime.jsxs("button",{className:"fl-btn fl-btn-primary",onClick:v,disabled:l||b,children:[i==="add"?"Submit":"Update",l&&jsxRuntime.jsx("div",{className:"fl-loader"})]})]}):o.length>0?jsxRuntime.jsx(jsxRuntime.Fragment,{children:j?jsxRuntime.jsx(jsxRuntime.Fragment,{children:i!=="view"&&!w&&jsxRuntime.jsxs("button",{className:"fl-btn fl-btn-primary",onClick:v,disabled:l||b,children:[i==="add"?"Submit":"Update",l&&jsxRuntime.jsx("div",{className:"fl-loader"})]})}):jsxRuntime.jsx("button",{className:"fl-btn fl-btn-primary",onClick:v,disabled:b,children:b?"Validating...":"Next"})}):V?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!L&&jsxRuntime.jsx("button",{className:"fl-btn fl-btn-outlined",onClick:k,disabled:l,children:i==="view"?"Back":"Cancel"}),i!=="view"&&!w&&jsxRuntime.jsxs("button",{className:"fl-btn fl-btn-primary",onClick:v,disabled:l,children:[i==="add"?"Submit":"Update",l&&jsxRuntime.jsx("div",{className:"fl-loader"})]})]}):null})]})]})};
+exports.a=M;//# sourceMappingURL=chunk-3RAQQWLW.js.map
+//# sourceMappingURL=chunk-3RAQQWLW.js.map

package/dist/chunk-3RAQQWLW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FormLayout/FormLayout.tsx"],"names":["STYLES","FormLayout","title","mode","onCancel","onSubmit","children","steps","validateStep","loading","layoutType","onSaveDraft","onApprove","hideSubmitButton","hideCancelButton","showbutton","errors","extraHeaderActions","onBack","activeStep","setActiveStep","useState","validating","setValidating","errorStep","setErrorStep","layout","setLayout","useEffect","cdnId","link","field","handleBackNavigation","isLastStep","handleNext","hasErrors","i","isValid","prev","handleBack","toggleLayout","renderContent","jsxs","jsx","step","index","isActive","isCompleted","Fragment"],"mappings":"oFAKMA,CAAAA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAA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","file":"chunk-3RAQQWLW.js","sourcesContent":["'use client';\n\nimport React, { useState, useEffect, ReactNode } from 'react';\nimport { FormLayoutProps } from './FormLayout.types';\n\nconst STYLES = `\n  :root {\n    --fl-primary: #3b82f6;\n    --fl-primary-dark: #2563eb;\n    --fl-primary-light: #eff6ff;\n    --fl-text-main: #1e293b;\n    --fl-text-secondary: #64748b;\n    --fl-bg-main: #ffffff;\n    --fl-bg-secondary: #f8fafc;\n    --fl-border: #e2e8f0;\n    --fl-error: #ef4444;\n    --fl-success: #10b981;\n    --fl-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n    --fl-radius: 12px;\n  }\n\n  .fl-container {\n    display: flex;\n    flex-direction: column;\n    min-height: 80vh;\n    font-family: 'Inter', system-ui, -apple-system, sans-serif;\n    color: var(--fl-text-main);\n    width: 100%;\n    margin: 0 auto;\n    background: var(--fl-bg-main);\n    position: relative;\n  }\n\n  /* Header */\n  .fl-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: 1px solid var(--fl-border);\n    background: rgba(255, 255, 255, 0.8);\n    backdrop-filter: blur(8px);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n  }\n\n  .fl-header-left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .fl-back-btn {\n    width: 40px;\n    height: 40px;\n    border-radius: 10px;\n    border: none;\n    background: var(--fl-primary-light);\n    color: var(--fl-primary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n  }\n\n  .fl-back-btn:hover {\n    background: var(--fl-primary);\n    color: white;\n    transform: translateX(-2px);\n  }\n\n  .fl-title-group h1 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--fl-text-main);\n  }\n\n  .fl-title-group p {\n    margin: 4px 0 0 0;\n    font-size: 14px;\n    color: var(--fl-text-secondary);\n  }\n\n  .fl-header-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  /* Layout Toggle */\n  .fl-layout-toggle {\n    width: 40px;\n    height: 40px;\n    border-radius: 10px;\n    border: 1px solid var(--fl-border);\n    background: white;\n    color: var(--fl-primary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n  }\n\n  .fl-layout-toggle:hover {\n    border-color: var(--fl-primary);\n    background: var(--fl-primary-light);\n  }\n\n  /* Stepper */\n  .fl-stepper-container {\n    padding: 32px 24px;\n  }\n\n  .fl-stepper {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    margin-bottom: 32px;\n  }\n\n  .fl-step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    z-index: 3;\n    flex: 1;\n    cursor: pointer;\n    position: relative;\n  }\n\n  .fl-step:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 20px;\n    left: calc(50% + 24px);\n    right: calc(-50% + 24px);\n    height: 3px;\n    background: var(--fl-border);\n    z-index: -1;\n    transition: background 0.3s ease;\n  }\n\n  .fl-step.completed:not(:last-child)::after {\n    background: var(--fl-primary);\n  }\n\n\n  .fl-step-icon {\n    width: 42px;\n    height: 42px;\n    border-radius: 50%;\n    background: white;\n    border: 3px solid var(--fl-border);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--fl-text-secondary);\n    transition: all 0.3s ease;\n    margin-bottom: 8px;\n    box-shadow: 0 0 0 4px white;\n  }\n\n  .fl-step.active .fl-step-icon {\n    border-color: var(--fl-primary);\n    color: var(--fl-primary);\n    transform: scale(1.1);\n    box-shadow: 0 0 0 4px white, 0 4px 12px rgba(59, 130, 246, 0.3);\n  }\n\n  .fl-step.completed .fl-step-icon {\n    background: var(--fl-primary);\n    border-color: var(--fl-primary);\n    color: white;\n  }\n\n  .fl-step.error .fl-step-icon {\n    border-color: var(--fl-error);\n    color: var(--fl-error);\n  }\n\n  .fl-step-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--fl-text-secondary);\n    transition: all 0.2s ease;\n  }\n\n  .fl-step.active .fl-step-label {\n    color: var(--fl-primary);\n    font-weight: 600;\n  }\n\n  /* Accordion */\n  .fl-accordion-container {\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .fl-accordion-item {\n    border: 1px solid var(--fl-border);\n    border-radius: var(--fl-radius);\n    overflow: hidden;\n    transition: all 0.3s ease;\n  }\n\n  .fl-accordion-item.active {\n    border-color: var(--fl-primary);\n    box-shadow: var(--fl-shadow);\n  }\n\n  .fl-accordion-item.error {\n    border-color: var(--fl-error);\n  }\n\n  .fl-accordion-header {\n    padding: 16px 20px;\n    background: var(--fl-bg-secondary);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    transition: background 0.2s ease;\n  }\n\n  .fl-accordion-header:hover {\n    background: #f1f5f9;\n  }\n\n  .fl-accordion-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n  }\n\n  .fl-accordion-icon {\n    color: var(--fl-primary);\n    font-size: 18px;\n  }\n\n  .fl-accordion-content {\n    padding: 20px;\n    background: white;\n    border-top: 1px solid var(--fl-border);\n    display: none;\n    animation: slideDown 0.3s ease-out;\n  }\n\n  .fl-accordion-item.active .fl-accordion-content {\n    display: block;\n  }\n\n  @keyframes slideDown {\n    from { opacity: 0; transform: translateY(-10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  /* Content Area */\n  .fl-content {\n    flex: 1;\n    padding: 0 24px 100px 24px;\n  }\n\n  /* Footer */\n  .fl-footer {\n    padding: 20px 24px;\n    background: rgba(255, 255, 255, 0.9);\n    backdrop-filter: blur(8px);\n    border-top: 1px solid var(--fl-border);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: sticky;\n    bottom: 0;\n    width: 100%;\n    box-sizing: border-box;\n    z-index: 10;\n  }\n\n  .fl-btn-group {\n    display: flex;\n    gap: 12px;\n  }\n\n  .fl-btn {\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    border: 1px solid transparent;\n  }\n\n  .fl-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .fl-btn-primary {\n    background: var(--fl-primary);\n    color: white;\n  }\n\n  .fl-btn-primary:hover:not(:disabled) {\n    background: var(--fl-primary-dark);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n  }\n\n  .fl-btn-outlined {\n    background: transparent;\n    border-color: var(--fl-border);\n    color: var(--fl-text-secondary);\n  }\n\n  .fl-btn-outlined:hover:not(:disabled) {\n    background: var(--fl-bg-secondary);\n    border-color: var(--fl-text-secondary);\n  }\n\n  .fl-loader {\n    width: 16px;\n    height: 16px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-top-color: white;\n    border-radius: 50%;\n    animation: spin 0.8s linear infinite;\n  }\n\n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* Responsive */\n  @media (max-width: 640px) {\n    .fl-header { padding: 16px; }\n    .fl-title-group h1 { font-size: 18px; }\n    .fl-stepper-container { padding: 24px 12px; }\n    .fl-step-label { display: none; }\n    .fl-footer { padding: 16px; }\n  }\n`;\n\nexport const FormLayout = ({\n  title,\n  mode,\n  onCancel,\n  onSubmit,\n  children,\n  steps = [],\n  validateStep,\n  loading = false,\n  layoutType = 'stepper',\n  onSaveDraft,\n  onApprove,\n  hideSubmitButton = false,\n  hideCancelButton = false,\n  showbutton = true,\n  errors,\n  extraHeaderActions,\n  onBack\n}: FormLayoutProps) => {\n  const [activeStep, setActiveStep] = useState<number>(0);\n  const [validating, setValidating] = useState<boolean>(false);\n  const [errorStep, setErrorStep] = useState<number | null>(null);\n  const [layout, setLayout] = useState(layoutType);\n\n  // Inject Tabler Icons CDN\n  useEffect(() => {\n    const cdnId = 'tabler-icons-cdn';\n    if (!document.getElementById(cdnId)) {\n      const link = document.createElement('link');\n      link.id = cdnId;\n      link.rel = 'stylesheet';\n      link.href = 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css';\n      document.head.appendChild(link);\n    }\n  }, []);\n\n  // Update error step based on external errors prop\n  useEffect(() => {\n    if (errorStep !== null && errors && steps.length > 0) {\n      const stepFields = steps[errorStep]?.fields ?? [];\n      const hasError = stepFields.some((field: string) => errors[field]);\n      if (!hasError) {\n        setErrorStep(null);\n      }\n    }\n  }, [errors, errorStep, steps]);\n\n  const handleBackNavigation = () => {\n    if (onBack) onBack();\n    else onCancel();\n  };\n\n  const isLastStep = steps.length > 0 && activeStep === steps.length - 1;\n\n  const handleNext = async () => {\n    if (layout === 'accordion' && validateStep) {\n      setValidating(true);\n      let hasErrors = false;\n      for (let i = 0; i < steps.length; i++) {\n        const isValid = await validateStep(i);\n        if (!isValid) {\n          setErrorStep(i);\n          setActiveStep(i);\n          hasErrors = true;\n          break;\n        }\n      }\n      setValidating(false);\n      if (hasErrors) return;\n      onSubmit();\n      setErrorStep(null);\n    } else {\n      if (validateStep) {\n        setValidating(true);\n        const isValid = await validateStep(activeStep);\n        setValidating(false);\n        if (!isValid) {\n          setErrorStep(activeStep);\n          return;\n        }\n      }\n      setErrorStep(null);\n      if (isLastStep || steps.length === 0) {\n        onSubmit();\n      } else {\n        setActiveStep((prev) => prev + 1);\n      }\n    }\n  };\n\n  const handleBack = () => setActiveStep((prev) => prev - 1);\n\n  const toggleLayout = () => {\n    setLayout(layout === 'stepper' ? 'accordion' : 'stepper');\n  };\n\n  const renderContent = () => {\n    if (typeof children === 'function') {\n      return children(activeStep);\n    }\n    return children;\n  };\n\n  return (\n    <div className=\"fl-container\">\n      <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n      \n      {/* Header */}\n      <header className=\"fl-header\">\n        <div className=\"fl-header-left\">\n          <button className=\"fl-back-btn\" onClick={handleBackNavigation} title=\"Go Back\">\n            <i className=\"ti ti-arrow-left\"></i>\n          </button>\n          <div className=\"fl-title-group\">\n            <h1>{mode === 'add' ? `Add ${title}` : mode === 'view' ? `View ${title}` : `Edit ${title}`}</h1>\n            <p>\n              {mode === 'add'\n                ? `Fill out the details below to add a new ${title.toLowerCase()}.`\n                : `Update the details below to edit the existing ${title.toLowerCase()}.`}\n            </p>\n          </div>\n        </div>\n        \n        <div className=\"fl-header-right\">\n          {onSaveDraft && (\n            <button className=\"fl-btn fl-btn-primary\" onClick={onSaveDraft} disabled={loading}>\n              Draft {loading && <div className=\"fl-loader\" />}\n            </button>\n          )}\n          \n          {onApprove && (\n            <button className=\"fl-btn fl-btn-primary\" onClick={onApprove} disabled={loading}>\n              Approve {loading && <div className=\"fl-loader\" />}\n            </button>\n          )}\n\n          {extraHeaderActions}\n\n          {steps.length > 0 && (\n            <button className=\"fl-layout-toggle\" onClick={toggleLayout} title={`Switch to ${layout === 'stepper' ? 'Accordion' : 'Stepper'} view`}>\n              <i className={layout === 'stepper' ? 'ti ti-list-details' : 'ti ti-list-numbers'}></i>\n            </button>\n          )}\n        </div>\n      </header>\n\n      {/* Steps Visualization */}\n      {steps.length > 0 && (\n        <div className=\"fl-stepper-container\">\n          {layout === 'stepper' ? (\n            <div className=\"fl-stepper\">\n              {steps.map((step, index) => {\n                const isActive = activeStep === index;\n                const isCompleted = activeStep > index;\n                const hasError = errorStep === index;\n                \n                return (\n                  <div \n                    key={index} \n                    className={`fl-step ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''} ${hasError ? 'error' : ''}`}\n                    onClick={() => !validating && setActiveStep(index)}\n                  >\n                    <div className=\"fl-step-icon\">\n                      {isCompleted ? <i className=\"ti ti-check\"></i> : (step.icon ? <i className={`ti ${step.icon}`}></i> : index + 1)}\n                    </div>\n                    <span className=\"fl-step-label\">{step.label}</span>\n                  </div>\n                );\n              })}\n            </div>\n          ) : (\n            <div className=\"fl-accordion-container\">\n              {steps.map((step, index) => {\n                const isActive = activeStep === index;\n                const hasError = errorStep === index;\n                \n                return (\n                  <div key={index} className={`fl-accordion-item ${isActive ? 'active' : ''} ${hasError ? 'error' : ''}`}>\n                    <div className=\"fl-accordion-header\" onClick={() => setActiveStep(index)}>\n                      <div className=\"fl-accordion-title\">\n                        <i className={`ti ${step.icon || 'ti-circle-number-' + (index + 1)} fl-accordion-icon`}></i>\n                        {step.label}\n                      </div>\n                      <i className={`ti ti-chevron-${isActive ? 'up' : 'down'}`}></i>\n                    </div>\n                    <div className=\"fl-accordion-content\">\n                      {typeof children === 'function' ? children(index) : children}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Main Content Area (for Stepper or No-steps layout) */}\n      {(steps.length === 0 || layout === 'stepper') && (\n        <main className=\"fl-content\">\n          {renderContent()}\n        </main>\n      )}\n\n      {/* Footer Buttons */}\n      <footer className=\"fl-footer\">\n        <div>\n          {layout === 'stepper' && steps.length > 0 && (\n            <button className=\"fl-btn fl-btn-outlined\" onClick={handleBack} disabled={loading || activeStep === 0}>\n              Back\n            </button>\n          )}\n        </div>\n        \n        <div className=\"fl-btn-group\">\n          {layout === 'accordion' ? (\n            <>\n              {!hideCancelButton && (\n                <button className=\"fl-btn fl-btn-outlined\" onClick={onCancel} disabled={loading}>\n                  Cancel\n                </button>\n              )}\n              {mode !== 'view' && !hideSubmitButton && (\n                <button className=\"fl-btn fl-btn-primary\" onClick={handleNext} disabled={loading || validating}>\n                  {mode === 'add' ? 'Submit' : 'Update'}\n                  {loading && <div className=\"fl-loader\" />}\n                </button>\n              )}\n            </>\n          ) : steps.length > 0 ? (\n            <>\n              {isLastStep ? (\n                <>\n                  {mode !== 'view' && !hideSubmitButton && (\n                    <button className=\"fl-btn fl-btn-primary\" onClick={handleNext} disabled={loading || validating}>\n                      {mode === 'add' ? 'Submit' : 'Update'}\n                      {loading && <div className=\"fl-loader\" />}\n                    </button>\n                  )}\n                </>\n              ) : (\n                <button className=\"fl-btn fl-btn-primary\" onClick={handleNext} disabled={validating}>\n                  {validating ? 'Validating...' : 'Next'}\n                </button>\n              )}\n            </>\n          ) : showbutton ? (\n            <>\n              {!hideCancelButton && (\n                <button className=\"fl-btn fl-btn-outlined\" onClick={onCancel} disabled={loading}>\n                  {mode === 'view' ? 'Back' : 'Cancel'}\n                </button>\n              )}\n              {mode !== 'view' && !hideSubmitButton && (\n                <button className=\"fl-btn fl-btn-primary\" onClick={handleNext} disabled={loading}>\n                  {mode === 'add' ? 'Submit' : 'Update'}\n                  {loading && <div className=\"fl-loader\" />}\n                </button>\n              )}\n            </>\n          ) : null}\n        </div>\n      </footer>\n    </div>\n  );\n};\n"]}