@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/ListContainerSection-Ca8Y_cJJ.js

@@ -0,0 +1,153 @@
+import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { H as h, C as o, a, T as n, ab as s, P as p, A as g, c as C } from "../index-19KsCnyX.js";
+import { List as N, Activity as u, Edit as f, Trash as b, Share as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const E = () => {
+  const [l, r] = d(!1), t = [
+    {
+      id: "1",
+      label: "Edit",
+      icon: /* @__PURE__ */ e(f, { className: "w-4 h-4" }),
+      onClick: () => console.log("Edit clicked")
+    },
+    {
+      id: "2",
+      label: "Delete",
+      icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" }),
+      onClick: () => console.log("Delete clicked")
+    },
+    {
+      id: "3",
+      label: "Share",
+      icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
+      onClick: () => console.log("Share clicked")
+    }
+  ];
+  return /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "ListContainer",
+        description: `A dropdown container component for displaying lists of items with
+          customizable trigger and positioning.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ i(o, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Hover Trigger" }),
+        /* @__PURE__ */ e(s, { items: t, trigger: "hover" })
+      ] }),
+      /* @__PURE__ */ i(o, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Click Trigger" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            items: t,
+            trigger: "click",
+            isOpen: l,
+            onOpenChange: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(o, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Custom Icon" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            items: t,
+            triggerIcon: /* @__PURE__ */ e(u, { className: "w-4! h-4!" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(o, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Different Positions" }),
+        /* @__PURE__ */ i("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ e(s, { items: t, position: "top" }),
+          /* @__PURE__ */ e(s, { items: t, position: "right" }),
+          /* @__PURE__ */ e(s, { items: t, position: "left" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        componentName: "ListContainer",
+        title: "ListContainer Playground",
+        defaultValues: {
+          label: "Select an option",
+          position: "bottom",
+          align: "start",
+          trigger: "click",
+          isOpen: !0,
+          keepOpen: !1
+        },
+        excludeProps: ["items", "onOpenChange", "triggerIcon", "className", "dropdownClassName"],
+        children: (c) => /* @__PURE__ */ e(
+          s,
+          {
+            ...c,
+            items: [
+              { label: "Option 1", onClick: () => {
+              } },
+              { label: "Option 2", onClick: () => {
+              } },
+              { label: "Option 3", onClick: () => {
+              } }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(g, { componentName: "ListContainer" }),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      C,
+      {
+        language: "tsx",
+        code: `import { ListContainer, ListItem, LucideIcons } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: '1',
+    label: 'Edit',
+    icon: <LucideIcons.Edit className="w-4 h-4" />,
+    onClick: () => handleEdit(),
+  },
+  {
+    id: '2',
+    label: 'Delete',
+    icon: <LucideIcons.Trash className="w-4 h-4" />,
+    onClick: () => handleDelete(),
+  },
+];
+
+// Hover trigger
+<ListContainer items={items} trigger="hover" />
+
+// Click trigger
+<ListContainer
+  items={items}
+  trigger="click"
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+/>
+
+// With custom icon
+<ListContainer
+  items={items}
+  triggerIcon={<LucideIcons.MoreVertical className="w-5 h-5" />}
+/>
+
+// Different positions
+<ListContainer items={items} position="top" />
+<ListContainer items={items} position="right" />
+<ListContainer items={items} position="bottom" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  E as default
+};

package/documentation/ListContainerSection-CkEy8kTD.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[n,o]=r.useState(!1),s=[{id:"1",label:"Edit",icon:e.jsx(t.Edit,{className:"w-4 h-4"}),onClick:()=>console.log("Edit clicked")},{id:"2",label:"Delete",icon:e.jsx(t.Trash,{className:"w-4 h-4"}),onClick:()=>console.log("Delete clicked")},{id:"3",label:"Share",icon:e.jsx(t.Share,{className:"w-4 h-4"}),onClick:()=>console.log("Share clicked")}];return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"ListContainer",description:`A dropdown container component for displaying lists of items with
+          customizable trigger and positioning.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.List,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Hover Trigger"}),e.jsx(i.ListContainer,{items:s,trigger:"hover"})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Click Trigger"}),e.jsx(i.ListContainer,{items:s,trigger:"click",isOpen:n,onOpenChange:o})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"With Custom Icon"}),e.jsx(i.ListContainer,{items:s,triggerIcon:e.jsx(t.Activity,{className:"w-4! h-4!"})})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Different Positions"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(i.ListContainer,{items:s,position:"top"}),e.jsx(i.ListContainer,{items:s,position:"right"}),e.jsx(i.ListContainer,{items:s,position:"left"})]})]})]})})})}),e.jsx(i.PropPlayground,{componentName:"ListContainer",title:"ListContainer Playground",defaultValues:{label:"Select an option",position:"bottom",align:"start",trigger:"click",isOpen:!0,keepOpen:!1},excludeProps:["items","onOpenChange","triggerIcon","className","dropdownClassName"],children:a=>e.jsx(i.ListContainer,{...a,items:[{label:"Option 1",onClick:()=>{}},{label:"Option 2",onClick:()=>{}},{label:"Option 3",onClick:()=>{}}]})}),e.jsx(i.AutoPropsTable,{componentName:"ListContainer"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { ListContainer, ListItem, LucideIcons } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: '1',
+    label: 'Edit',
+    icon: <LucideIcons.Edit className="w-4 h-4" />,
+    onClick: () => handleEdit(),
+  },
+  {
+    id: '2',
+    label: 'Delete',
+    icon: <LucideIcons.Trash className="w-4 h-4" />,
+    onClick: () => handleDelete(),
+  },
+];
+
+// Hover trigger
+<ListContainer items={items} trigger="hover" />
+
+// Click trigger
+<ListContainer
+  items={items}
+  trigger="click"
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+/>
+
+// With custom icon
+<ListContainer
+  items={items}
+  triggerIcon={<LucideIcons.MoreVertical className="w-5 h-5" />}
+/>
+
+// Different positions
+<ListContainer items={items} position="top" />
+<ListContainer items={items} position="right" />
+<ListContainer items={items} position="bottom" />`})})})})]})};exports.default=l;

package/documentation/ListItemSection-C57wh8xh.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"ListItem",description:`A list item component for displaying items in dropdowns and menus with
+          support for icons, labels, and custom content.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ListMinus,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic List Items"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Item 1"}),e.jsx(s.ListItem,{id:"2",label:"Item 2"}),e.jsx(s.ListItem,{id:"3",label:"Item 3"})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Home",icon:e.jsx(t.Home,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"2",label:"Settings",icon:e.jsx(t.Settings,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"3",label:"Profile",icon:e.jsx(t.User,{className:"w-4 h-4"})})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"States"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Active Item",active:!0}),e.jsx(s.ListItem,{id:"2",label:"Normal Item"}),e.jsx(s.ListItem,{id:"3",label:"Disabled Item",disabled:!0})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),e.jsx("ul",{className:"space-y-1",children:e.jsx(s.ListItem,{id:"1",content:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Star,{className:"w-4 h-4"}),e.jsx("span",{children:"Custom Content"})]})})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"ListItem",defaultValues:{label:"List Item",active:!1,disabled:!1},excludeProps:["onClick","content","icon","id"],children:i=>e.jsx(s.ListItem,{...i})}),e.jsx(s.AutoPropsTable,{componentName:"ListItem"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { ListItem, LucideIcons } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<ul>
+  <ListItem id="1" label="Item 1" />
+  <ListItem id="2" label="Item 2" />
+</ul>
+
+// With icons
+<ListItem
+  id="1"
+  label="Home"
+  icon={<LucideIcons.Home className="w-4 h-4" />}
+/>
+
+// With states
+<ListItem id="1" label="Active" active />
+<ListItem id="2" label="Disabled" disabled />
+
+// With custom content
+<ListItem
+  id="1"
+  content={
+    <div className="flex items-center gap-2">
+      <LucideIcons.Star className="w-4 h-4" />
+      <span>Custom</span>
+    </div>
+  }
+/>
+
+// With onClick
+<ListItem
+  id="1"
+  label="Clickable"
+  onClick={() => handleClick()}
+/>`})})})})]});exports.default=a;

package/documentation/{ListItemSection-Ba24GQNN.js → ListItemSection-CrUwVDa7.js}

@@ -1,39 +1,37 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as l, C as t, a as i, a9 as s, P as n, A as d, c as o } from "../index-D3gBsvbO.js";
-import { Home as r, Settings as h, User as p, Star as u } from "lucide-react";
+import { H as d, C as l, a as t, T as i, ac as s, P as n, A as o, c as r } from "../index-19KsCnyX.js";
+import { ListMinus as h, Home as p, Settings as u, User as b, Star as N } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const L = () => /* @__PURE__ */ a(m, { children: [
-  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ListItem" }),
-    /* @__PURE__ */ e(
-      l,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A list item component for displaying items in dropdowns and menus with support for icons, labels, and custom content."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic List Items" }),
+const v = () => /* @__PURE__ */ a(m, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "ListItem",
+      description: `A list item component for displaying items in dropdowns and menus with
+          support for icons, labels, and custom content.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic List Items" }),
       /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
         /* @__PURE__ */ e(s, { id: "1", label: "Item 1" }),
         /* @__PURE__ */ e(s, { id: "2", label: "Item 2" }),
         /* @__PURE__ */ e(s, { id: "3", label: "Item 3" })
       ] })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Icons" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Icons" }),
       /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
         /* @__PURE__ */ e(
           s,
           {
             id: "1",
             label: "Home",
-            icon: /* @__PURE__ */ e(r, { className: "w-4 h-4" })
+            icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -41,7 +39,7 @@ const L = () => /* @__PURE__ */ a(m, { children: [
           {
             id: "2",
             label: "Settings",
-            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+            icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -49,27 +47,27 @@ const L = () => /* @__PURE__ */ a(m, { children: [
           {
             id: "3",
             label: "Profile",
-            icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
+            icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "States" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "States" }),
       /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
         /* @__PURE__ */ e(s, { id: "1", label: "Active Item", active: !0 }),
         /* @__PURE__ */ e(s, { id: "2", label: "Normal Item" }),
         /* @__PURE__ */ e(s, { id: "3", label: "Disabled Item", disabled: !0 })
       ] })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
       /* @__PURE__ */ e("ul", { className: "space-y-1", children: /* @__PURE__ */ e(
         s,
         {
           id: "1",
           content: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+            /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
             /* @__PURE__ */ e("span", { children: "Custom Content" })
           ] })
         }
@@ -85,9 +83,9 @@ const L = () => /* @__PURE__ */ a(m, { children: [
       children: (c) => /* @__PURE__ */ e(s, { ...c })
     }
   ),
-  /* @__PURE__ */ e(d, { componentName: "ListItem" }),
-  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    o,
+  /* @__PURE__ */ e(o, { componentName: "ListItem" }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    r,
     {
       language: "tsx",
       code: `import { ListItem, LucideIcons } from '@e-burgos/tucu-ui';
@@ -130,5 +128,5 @@ const L = () => /* @__PURE__ */ a(m, { children: [
   ) }) }) })
 ] });
 export {
-  L as default
+  v as default
 };

package/documentation/LiveDemoSection-C6YvjWGX.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Live Demo Form",description:"See the form system in action with a fully functional interactive example featuring validation, error states, and submission handling.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Play,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Interactive Example"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Navigate to the full form example to interact with all input types, validation modes, and form methods"})]}),e.jsx(a.CardContainer,{children:e.jsx("div",{className:"w-full p-6 sm:p-8 space-y-6",children:e.jsxs("div",{className:"flex flex-col items-center text-center space-y-4",children:[e.jsx("div",{className:"p-4 rounded-full bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800",children:e.jsx(s.ExternalLink,{className:"w-8 h-8 text-white"})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg",children:"Form Example Page"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 max-w-md",children:"A complete form with all available input types, centralized validation, real-time error feedback, and submission handling."})]}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx(a.Button,{size:"medium",children:e.jsx(a.AnchorLink,{to:"/form-system/example",children:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Play,{className:"w-4 h-4"}),"Open Form Example"]})})}),e.jsx(a.Button,{size:"medium",variant:"ghost",children:e.jsx(a.AnchorLink,{to:"/form-system/code-example",children:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Code,{className:"w-4 h-4"}),"View Source Code"]})})})]})]})})})]})]});exports.default=r;

package/documentation/LiveDemoSection-Di6_Ljzt.js

@@ -0,0 +1,56 @@
+import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as m, T as t, C as n, x as r, a9 as i } from "../index-19KsCnyX.js";
+import { Play as l, ExternalLink as d, Code as c } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = () => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      title: "Live Demo Form",
+      description: "See the form system in action with a fully functional interactive example featuring validation, error states, and submission handling.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Interactive Example" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Navigate to the full form example to interact with all input types, validation modes, and form methods"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { className: "w-full p-6 sm:p-8 space-y-6", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-4", children: [
+      /* @__PURE__ */ e("div", { className: "p-4 rounded-full bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800", children: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white" }) }),
+      /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold text-lg", children: "Form Example Page" }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400 max-w-md",
+            children: "A complete form with all available input types, centralized validation, real-time error feedback, and submission handling."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ e(r, { size: "medium", children: /* @__PURE__ */ e(i, { to: "/form-system/example", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
+          "Open Form Example"
+        ] }) }) }),
+        /* @__PURE__ */ e(r, { size: "medium", variant: "ghost", children: /* @__PURE__ */ e(i, { to: "/form-system/code-example", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(c, { className: "w-4 h-4" }),
+          "View Source Code"
+        ] }) }) })
+      ] })
+    ] }) }) })
+  ] })
+] });
+export {
+  u as default
+};