@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/ListContainerSection-5rcF8Fpk.js

@@ -1,168 +0,0 @@
-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-DYDFy1df.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-DRJITbJp.js

@@ -1,39 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-COp_AWCS.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-D0Bbbebh.js

@@ -1,37 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COp_AWCS.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-DnAV85N9.js

@@ -1,132 +0,0 @@
-import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-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-DYDFy1df.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 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(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(p, { className: "w-4 h-4" })
-          }
-        ),
-        /* @__PURE__ */ e(
-          s,
-          {
-            id: "2",
-            label: "Settings",
-            icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
-          }
-        ),
-        /* @__PURE__ */ e(
-          s,
-          {
-            id: "3",
-            label: "Profile",
-            icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__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(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(N, { className: "w-4 h-4" }),
-            /* @__PURE__ */ e("span", { children: "Custom Content" })
-          ] })
-        }
-      ) })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    n,
-    {
-      componentName: "ListItem",
-      defaultValues: { label: "List Item", active: !1, disabled: !1 },
-      excludeProps: ["onClick", "content", "icon", "id"],
-      children: (c) => /* @__PURE__ */ e(s, { ...c })
-    }
-  ),
-  /* @__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';
-
-// 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()}
-/>`
-    }
-  ) }) }) })
-] });
-export {
-  v as default
-};

package/documentation/LiveDemoSection-BsPDLjy5.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-COp_AWCS.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-CcWjO6e8.js

@@ -1,56 +0,0 @@
-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-DYDFy1df.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
-};

package/documentation/LiveDemonstrationsSection-CFmKZyVT.js

@@ -1,28 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("../index-COp_AWCS.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const O=()=>{const[o,N]=r.useState("Hello, World!"),[d,i]=r.useState(!1),[m,x]=r.useState(!1),[f,g]=r.useState(""),[w,p]=r.useState("Checking..."),k=s.useBreakpoint(),{isMobile:v}=s.useIsMobile(),[u,T]=s.useCopyToClipboard(),{addToast:n}=s.useToastStore(),{isGridCompact:c,setIsGridCompact:C}=s.useGridSwitcher(),{x:S,y:M}=s.useWindowScroll(),y=s.useIsMounted(),b=r.useRef(null),[B,{width:E,height:R}]=s.useElementSize(),[I,j]=s.useMeasure(),{sliderEl:L,sliderPrevBtn:z,sliderNextBtn:G,scrollToTheRight:D,scrollToTheLeft:W}=s.useScrollableSlider("/");s.useLockBodyScroll(d),s.useClickAway(b,()=>{x(!1)}),s.useEventListener("keydown",a=>{g(a.key),setTimeout(()=>g(""),1e3)}),r.useEffect(()=>{p(y?"Component is mounted":"Component is not mounted")},[y]);const $=()=>{T(o),n({id:`copy-${Date.now()}`,title:"Copied!",message:`Copied "${o}" to clipboard`,variant:"success"})},q=()=>{const a=!c;C(a),n({id:`layout-${Date.now()}`,title:"Layout Changed",message:`Switched to ${a?"Compact":"Normal"} layout`,variant:"info"})},l=(a="success")=>{n({id:`toast-${Date.now()}`,title:"Test Toast",message:`This is a ${a} toast notification`,variant:a,timeout:3e3})},A=Array.from({length:10},(a,h)=>({id:h+1,title:`Item ${h+1}`,content:`Content for item ${h+1}`}));return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Live Hook Demonstrations",description:"Interactive examples showing every hook in action. Resize the window, click buttons, and interact with the demos to see real-time hook behavior.",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-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.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(s.Typography,{tag:"h2",className:"mb-2",children:"Responsive Detection"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Real-time breakpoint detection and mobile state tracking"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useBreakpoint & useIsMobile"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useBreakpoint"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:k})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"Resize your window to see changes"})]})]}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMobile"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Is Mobile:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:v?"Yes":"No"})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"True for xs, sm, md breakpoints (≤768px)"})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const breakpoint = useBreakpoint();
-// Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
-
-const { isMobile } = useIsMobile();
-// Returns: { isMobile: boolean } — true for xs/sm/md`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Element Measurement"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Track element dimensions and bounds in real-time"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(t.Ruler,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useElementSize & useMeasure"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useElementSize"}),e.jsxs("div",{ref:B,className:"bg-blue-100 dark:bg-blue-800 p-4 rounded-lg border-2 border-dashed border-blue-300 dark:border-blue-600 resize overflow-auto min-h-25",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Resize this element (drag corner)"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Size: ",Math.round(E)," ×"," ",Math.round(R),"px"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure"}),e.jsxs("div",{ref:I,className:"bg-cyan-100 dark:bg-cyan-800 p-4 rounded-lg border-2 border-dashed border-cyan-300 dark:border-cyan-600 min-h-25",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Measured element"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Bounds: ",Math.round(j.width)," ×"," ",Math.round(j.height),"px"]})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useElementSize — returns [callbackRef, { width, height }]
-const [ref, { width, height }] = useElementSize<HTMLDivElement>();
-
-// useMeasure — returns [callbackRef, bounds]
-const [ref, bounds] = useMeasure<HTMLDivElement>();
-// bounds: { x, y, width, height, top, right, bottom, left }`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"User Interaction"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Click detection, clipboard, and event handling demos"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-violet-500 shadow-lg",children:e.jsx(t.MousePointer,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useClickAway & useCopyToClipboard"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useClickAway"}),e.jsxs("div",{className:"relative",ref:b,children:[e.jsxs(s.Button,{onClick:()=>x(!m),variant:"ghost",className:"w-full",children:[e.jsx(t.ChevronDown,{className:"w-4 h-4 mr-2"}),"Click to open dropdown"]}),m&&e.jsx("div",{className:"absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border rounded-lg shadow-lg p-4 z-10",children:e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Click outside to close this dropdown"})})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useCopyToClipboard"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{type:"text",value:o,onChange:a=>N(a.target.value),className:"w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-border",placeholder:"Enter text to copy"}),e.jsxs(s.Button,{onClick:$,className:"w-full",children:[e.jsx(t.Copy,{className:"w-4 h-4 mr-2"}),"Copy to Clipboard"]}),u.value&&e.jsxs(s.Typography,{tag:"p",className:"text-sm text-green-600 dark:text-green-400",children:["✓ Copied: ",u.value]})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useCopyToClipboard — returns [state, copyFn]
-const [state, copyToClipboard] = useCopyToClipboard();
-// state: { value?: string; error?: Error; noUserInteraction: boolean }
-copyToClipboard('text');
-
-// useClickAway — detects clicks outside ref
-const ref = useRef(null);
-useClickAway(ref, () => setIsOpen(false));`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"UI State Management"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Global state hooks for layout and notifications"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(t.Settings,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useGridSwitcher & useToastStore"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useGridSwitcher"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current layout:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:c?"Compact":"Normal"})]}),e.jsxs(s.Button,{onClick:q,variant:"ghost",className:"w-full",children:[e.jsx(t.LayoutGrid,{className:"w-4 h-4 mr-2"}),"Switch to ",c?"Normal":"Compact"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useToastStore"}),e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsx(s.Button,{color:"success",fullWidth:!0,onClick:()=>l("success"),children:"Success"}),e.jsx(s.Button,{color:"danger",fullWidth:!0,onClick:()=>l("destructive"),children:"Error"}),e.jsx(s.Button,{color:"warning",fullWidth:!0,onClick:()=>l("warning"),children:"Warning"}),e.jsx(s.Button,{color:"info",fullWidth:!0,onClick:()=>l("info"),children:"Info"})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useToastStore — Zustand store for notifications
-const { addToast, dismissToast, toasts } = useToastStore();
-addToast({
-  id: 'unique-id',
-  title: 'Title',
-  message: 'Message text',
-  variant: 'success', // 'default' | 'destructive' | 'success' | 'warning' | 'info'
-  timeout: 3000,
-});
-
-// useGridSwitcher — Zustand store for grid layout
-const { isGridCompact, setIsGridCompact } = useGridSwitcher();`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Advanced Utilities"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Scroll control, event listeners, and lifecycle hooks"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg",children:e.jsx(t.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useScrollableSlider, useEventListener & more"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useScrollableSlider"}),e.jsxs("div",{className:"relative",children:[e.jsx("button",{ref:z,onClick:W,className:"absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md opacity-0 invisible transition-opacity",children:e.jsx(t.ChevronLeft,{className:"w-4 h-4"})}),e.jsx("div",{ref:L,className:"flex gap-4 overflow-x-auto scrollbar-hide py-4",children:A.map(a=>e.jsxs("div",{className:"shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h6",className:"font-medium mb-2",children:a.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:a.content})]},a.id))}),e.jsx("button",{ref:G,onClick:D,className:"absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md transition-opacity",children:e.jsx(t.ChevronRight,{className:"w-4 h-4"})})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useEventListener"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Press any key:"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Last key:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:f||"None"})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useWindowScroll"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Scroll position:"}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:["X: ",Math.round(S),"px"]}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:["Y: ",Math.round(M),"px"]})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMounted"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Mount status:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:w})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useLockBodyScroll"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs(s.Button,{onClick:()=>i(!0),variant:"ghost",children:[e.jsx(t.Lock,{className:"w-4 h-4 mr-2"}),"Open Modal (Locks Scroll)"]}),e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Body scroll is ",d?"locked":"unlocked"]})]})]})]})})]}),d&&e.jsx("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-50",children:e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Modal with Locked Scroll"}),e.jsx("button",{onClick:()=>i(!1),className:"text-gray-500 hover:text-gray-700",children:e.jsx(t.X,{className:"w-5 h-5"})})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"While this modal is open, body scrolling is locked using useLockBodyScroll. The scrollbar width is preserved to prevent layout shift."}),e.jsx(s.Button,{onClick:()=>i(!1),className:"w-full",children:"Close Modal"})]})})]})};exports.default=O;