@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/SettingsPanelSection-BL1MGm6Q.js

@@ -1,126 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { au as x, C as y, a as f, T as t, J as s, y as c } from "../index-D3gBsvbO.js";
-import { Settings as b, Check as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const A = () => {
-  const {
-    mode: l,
-    layout: r,
-    primaryPreset: o,
-    secondaryPreset: g,
-    accentPreset: h,
-    direction: p,
-    setMode: u,
-    setIsSettingsOpen: N,
-    isSettingsOpen: d
-  } = x();
-  return /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(f, { title: "Settings Panel", className: "mt-2 mb-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold", children: "Built-in Settings UI" })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-6", children: [
-      /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ e(
-          t,
-          {
-            tag: "p",
-            className: "text-gray-600 dark:text-gray-400",
-            children: "The theme system includes a built-in settings panel that allows users to:"
-          }
-        ),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-2", children: "Core Settings" }),
-            /* @__PURE__ */ e("ul", { className: "space-y-1", children: [
-              "Toggle between light and dark modes",
-              "Switch between LTR and RTL text direction",
-              "Choose between Clean, Admin, and Horizontal layouts"
-            ].map((i, n) => /* @__PURE__ */ a("li", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(m, { className: "w-3 h-3 text-green-500" }),
-              /* @__PURE__ */ e("span", { className: "text-xs", children: i })
-            ] }, n)) })
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-2", children: "Color Management" }),
-            /* @__PURE__ */ e("ul", { className: "space-y-1", children: [
-              "Select from 34 predefined color presets",
-              "Configure primary, secondary, and accent colors",
-              "Customize dark and light theme colors",
-              "Manage muted colors and background variants"
-            ].map((i, n) => /* @__PURE__ */ a("li", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(m, { className: "w-3 h-3 text-green-500" }),
-              /* @__PURE__ */ e("span", { className: "text-xs", children: i })
-            ] }, n)) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium", children: "Current Settings" }),
-        /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-3", children: [
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Mode" }),
-              /* @__PURE__ */ e(s, { variant: "outline", className: "text-xs", children: l })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Layout" }),
-              /* @__PURE__ */ a(s, { variant: "outline", className: "text-xs", children: [
-                r === "horizontal" ? "Horizontal" : r === "clean" ? "Clean" : "Admin",
-                " "
-              ] })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Primary" }),
-              /* @__PURE__ */ e(s, { variant: "outline", className: "text-xs", children: o?.label || "DEFAULT_PRIMARY" })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Secondary" }),
-              /* @__PURE__ */ e(s, { variant: "outline", className: "text-xs", children: g?.label || "DEFAULT_SECONDARY" })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Accent" }),
-              /* @__PURE__ */ e(s, { variant: "outline", className: "text-xs", children: h?.label || "DEFAULT_ACCENT" })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Direction" }),
-              /* @__PURE__ */ e(s, { variant: "outline", className: "text-xs", children: p || "LTR" })
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "flex gap-2 w-full mt-4", children: [
-            /* @__PURE__ */ a(
-              c,
-              {
-                size: "small",
-                onClick: () => u(l === "dark" ? "light" : "dark"),
-                className: "flex-1",
-                children: [
-                  "Toggle ",
-                  l === "dark" ? "Light" : "Dark"
-                ]
-              }
-            ),
-            /* @__PURE__ */ a(
-              c,
-              {
-                size: "small",
-                variant: "ghost",
-                onClick: () => N(!d),
-                className: "flex-1",
-                children: [
-                  d ? "Close" : "Open",
-                  " Settings"
-                ]
-              }
-            )
-          ] })
-        ] })
-      ] })
-    ] })
-  ] }) }) });
-};
-export {
-  A as default
-};

package/documentation/SettingsPanelSection-CTuxkv-A.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const h=()=>{const{mode:a,layout:n,primaryPreset:d,secondaryPreset:c,accentPreset:m,direction:o,setMode:g,setIsSettingsOpen:x,isSettingsOpen:r}=s.useTheme();return e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Settings Panel",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg shadow-lg",children:e.jsx(i.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Built-in Settings UI"})]}),e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"The theme system includes a built-in settings panel that allows users to:"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-2",children:"Core Settings"}),e.jsx("ul",{className:"space-y-1",children:["Toggle between light and dark modes","Switch between LTR and RTL text direction","Choose between Clean, Admin, and Horizontal layouts"].map((t,l)=>e.jsxs("li",{className:"flex items-center gap-2",children:[e.jsx(i.Check,{className:"w-3 h-3 text-green-500"}),e.jsx("span",{className:"text-xs",children:t})]},l))})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-2",children:"Color Management"}),e.jsx("ul",{className:"space-y-1",children:["Select from 34 predefined color presets","Configure primary, secondary, and accent colors","Customize dark and light theme colors","Manage muted colors and background variants"].map((t,l)=>e.jsxs("li",{className:"flex items-center gap-2",children:[e.jsx(i.Check,{className:"w-3 h-3 text-green-500"}),e.jsx("span",{className:"text-xs",children:t})]},l))})]})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium",children:"Current Settings"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Mode"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:a})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Layout"}),e.jsxs(s.Badge,{variant:"outline",className:"text-xs",children:[n==="horizontal"?"Horizontal":n==="clean"?"Clean":"Admin"," "]})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Primary"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:d?.label||"DEFAULT_PRIMARY"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Secondary"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:c?.label||"DEFAULT_SECONDARY"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Accent"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:m?.label||"DEFAULT_ACCENT"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Direction"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:o||"LTR"})]})]}),e.jsxs("div",{className:"flex gap-2 w-full mt-4",children:[e.jsxs(s.Button,{size:"small",onClick:()=>g(a==="dark"?"light":"dark"),className:"flex-1",children:["Toggle ",a==="dark"?"Light":"Dark"]}),e.jsxs(s.Button,{size:"small",variant:"ghost",onClick:()=>x(!r),className:"flex-1",children:[r?"Close":"Open"," Settings"]})]})]})]})]})]})})})};exports.default=h;

package/documentation/ShadowsSection-BxIUSqgJ.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=a=>{if(typeof window>"u")return"";const r=document.documentElement;return getComputedStyle(r).getPropertyValue(a).trim()||""},n=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Shadows"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Shadow tokens from Tucu UI Design System for depth and elevation"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Shadow Tokens",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[{name:"Main",varName:"--shadow-main",description:"Primary shadow for cards and elevated elements"},{name:"Light",varName:"--shadow-light",description:"Subtle shadow for minimal elevation"},{name:"Large",varName:"--shadow-large",description:"Prominent shadow for modals and overlays"},{name:"Card",varName:"--shadow-card",description:"Standard shadow for card components"},{name:"Transaction",varName:"--shadow-transaction",description:"Shadow for transaction lists and tables"},{name:"Expand",varName:"--shadow-expand",description:"Strong shadow for expanded elements"},{name:"Button",varName:"--shadow-button",description:"Shadow for button components"},{name:"Drop Shadow Main",varName:"--drop-shadow-main",description:"Drop shadow for images and graphics"}].map(a=>{const r=s(a.varName);return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold",children:a.name}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-muted",children:a.description})]}),e.jsx("div",{className:"h-32 bg-white dark:bg-gray-800 rounded-lg p-4 flex items-center justify-center",style:{boxShadow:r||`var(${a.varName})`},children:e.jsx(t.Typography,{tag:"h4",className:"text-center",children:a.name})}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(t.Typography,{tag:"h4",className:"text-muted text-xs break-all font-mono",children:a.varName}),r&&e.jsx(t.Typography,{tag:"h4",className:"text-muted text-[10px] break-all",children:r})]})]},a.name)})})})})})]});exports.default=n;

package/documentation/ShadowsSection-DEDnh4VA.js

@@ -1,90 +0,0 @@
-import { jsxs as n, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as t, C as s, a as d } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const i = (a) => {
-  if (typeof window > "u") return "";
-  const r = document.documentElement;
-  return getComputedStyle(r).getPropertyValue(a).trim() || "";
-}, N = () => /* @__PURE__ */ n(o, { children: [
-  /* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Shadows" }),
-    /* @__PURE__ */ e(
-      t,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Shadow tokens from Tucu UI Design System for depth and elevation"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Shadow Tokens", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    {
-      name: "Main",
-      varName: "--shadow-main",
-      description: "Primary shadow for cards and elevated elements"
-    },
-    {
-      name: "Light",
-      varName: "--shadow-light",
-      description: "Subtle shadow for minimal elevation"
-    },
-    {
-      name: "Large",
-      varName: "--shadow-large",
-      description: "Prominent shadow for modals and overlays"
-    },
-    {
-      name: "Card",
-      varName: "--shadow-card",
-      description: "Standard shadow for card components"
-    },
-    {
-      name: "Transaction",
-      varName: "--shadow-transaction",
-      description: "Shadow for transaction lists and tables"
-    },
-    {
-      name: "Expand",
-      varName: "--shadow-expand",
-      description: "Strong shadow for expanded elements"
-    },
-    {
-      name: "Button",
-      varName: "--shadow-button",
-      description: "Shadow for button components"
-    },
-    {
-      name: "Drop Shadow Main",
-      varName: "--drop-shadow-main",
-      description: "Drop shadow for images and graphics"
-    }
-  ].map((a) => {
-    const r = i(a.varName);
-    return /* @__PURE__ */ n("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ n("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold", children: a.name }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-sm text-muted", children: a.description })
-      ] }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: "h-32 bg-white dark:bg-gray-800 rounded-lg p-4 flex items-center justify-center",
-          style: {
-            boxShadow: r || `var(${a.varName})`
-          },
-          children: /* @__PURE__ */ e(t, { tag: "h4", className: "text-center", children: a.name })
-        }
-      ),
-      /* @__PURE__ */ n("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ e(t, { tag: "h4", className: "text-muted text-xs break-all font-mono", children: a.varName }),
-        r && /* @__PURE__ */ e(t, { tag: "h4", className: "text-muted text-[10px] break-all", children: r })
-      ] })
-    ] }, a.name);
-  }) }) }) }) })
-] });
-export {
-  N as default
-};

package/documentation/SidebarMenuSection-B566bFj0.js

@@ -1,80 +0,0 @@
-import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as a, C as s, a as n, A as o, c as m } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const h = () => /* @__PURE__ */ t(i, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "SidebarMenu" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A sidebar component with built-in menu navigation, supporting icons, paths, and dropdown items."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ t(s, { className: "p-4", children: [
-    /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Sidebar Menu" }),
-    /* @__PURE__ */ e(a, { tag: "p", className: "mb-4 text-sm text-gray-600", children: "Note: SidebarMenu is typically used within a Drawer component. This example shows the structure." }),
-    /* @__PURE__ */ e(a, { tag: "p", className: "text-sm", children: "The SidebarMenu component provides a navigation menu with icons and links, perfect for mobile navigation drawers." })
-  ] }) }) }) }) }),
-  /* @__PURE__ */ e(o, { componentName: "SidebarMenu" }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    m,
-    {
-      language: "tsx",
-      code: `import { SidebarMenu, LucideIcons } from '@e-burgos/tucu-ui';
-
-const menuItems = [
-  {
-    name: 'Home',
-    icon: <LucideIcons.Home className="w-5 h-5" />,
-    path: '/home',
-  },
-  {
-    name: 'Settings',
-    icon: <LucideIcons.Settings className="w-5 h-5" />,
-    path: '/settings',
-  },
-];
-
-// Basic usage (typically within Drawer)
-<SidebarMenu
-  menuItems={menuItems}
-  onClose={() => setIsOpen(false)}
-/>
-
-// With title
-<SidebarMenu
-  menuItems={menuItems}
-  title="Navigation"
-  onClose={() => setIsOpen(false)}
-/>
-
-// With logo
-<SidebarMenu
-  menuItems={menuItems}
-  logo={{ name: 'MyApp' }}
-  onClose={() => setIsOpen(false)}
-/>
-
-// With dropdown items
-const menuItemsWithDropdown = [
-  {
-    name: 'Products',
-    path: '/products',
-    dropdownItems: [
-      { name: 'All Products', path: '/products/all' },
-      { name: 'Featured', path: '/products/featured' },
-    ],
-  },
-];`
-    }
-  ) }) }) })
-] });
-export {
-  h as default
-};

package/documentation/SidebarMenuSection-C_FRWnLf.js

@@ -1,46 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"SidebarMenu"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A sidebar component with built-in menu navigation, supporting icons, paths, and dropdown items."})]}),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.jsx("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 Sidebar Menu"}),e.jsx(s.Typography,{tag:"p",className:"mb-4 text-sm text-gray-600",children:"Note: SidebarMenu is typically used within a Drawer component. This example shows the structure."}),e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"The SidebarMenu component provides a navigation menu with icons and links, perfect for mobile navigation drawers."})]})})})})}),e.jsx(s.AutoPropsTable,{componentName:"SidebarMenu"}),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 { SidebarMenu, LucideIcons } from '@e-burgos/tucu-ui';
-
-const menuItems = [
-  {
-    name: 'Home',
-    icon: <LucideIcons.Home className="w-5 h-5" />,
-    path: '/home',
-  },
-  {
-    name: 'Settings',
-    icon: <LucideIcons.Settings className="w-5 h-5" />,
-    path: '/settings',
-  },
-];
-
-// Basic usage (typically within Drawer)
-<SidebarMenu
-  menuItems={menuItems}
-  onClose={() => setIsOpen(false)}
-/>
-
-// With title
-<SidebarMenu
-  menuItems={menuItems}
-  title="Navigation"
-  onClose={() => setIsOpen(false)}
-/>
-
-// With logo
-<SidebarMenu
-  menuItems={menuItems}
-  logo={{ name: 'MyApp' }}
-  onClose={() => setIsOpen(false)}
-/>
-
-// With dropdown items
-const menuItemsWithDropdown = [
-  {
-    name: 'Products',
-    path: '/products',
-    dropdownItems: [
-      { name: 'All Products', path: '/products/all' },
-      { name: 'Featured', path: '/products/featured' },
-    ],
-  },
-];`})})})})]});exports.default=a;

package/documentation/SidebarSection-BxcsWxss.js

@@ -1,62 +0,0 @@
-import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { T as t, C as i, a as o, A as r, c as n } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const u = () => {
-  const [d, c] = l(!1);
-  return /* @__PURE__ */ a(s, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Sidebar" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A sidebar component with scrollable content, optional logo, title, and action buttons."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ a(i, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Sidebar" }),
-      /* @__PURE__ */ e(t, { tag: "p", className: "mb-4 text-sm text-gray-600", children: "Note: Sidebar is typically used within a Drawer component. This example shows the structure." }),
-      /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "The Sidebar component provides a scrollable container with optional header (logo or title) and action buttons at the bottom." })
-    ] }) }) }) }) }),
-    /* @__PURE__ */ e(r, { componentName: "Sidebar" }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      n,
-      {
-        language: "tsx",
-        code: `import { Sidebar } from '@e-burgos/tucu-ui';
-
-// Basic usage (typically within Drawer)
-<Sidebar title="Sidebar Title" onClose={() => setIsOpen(false)}>
-  <div>
-    <Typography tag="p">Sidebar content</Typography>
-  </div>
-</Sidebar>
-
-// With logo
-<Sidebar
-  logo={{ name: 'MyApp' }}
-  onClose={() => setIsOpen(false)}
->
-  <div>Content</div>
-</Sidebar>
-
-// With action buttons
-<Sidebar
-  title="Sidebar"
-  actionContent={<Button>Action</Button>}
-  onClose={() => setIsOpen(false)}
->
-  <div>Content</div>
-</Sidebar>`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  u as default
-};

package/documentation/SidebarSection-x6UljOok.js

@@ -1,25 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react-dom");const s=()=>{const[i,r]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Sidebar"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A sidebar component with scrollable content, optional logo, title, and action buttons."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Sidebar"}),e.jsx(t.Typography,{tag:"p",className:"mb-4 text-sm text-gray-600",children:"Note: Sidebar is typically used within a Drawer component. This example shows the structure."}),e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"The Sidebar component provides a scrollable container with optional header (logo or title) and action buttons at the bottom."})]})})})})}),e.jsx(t.AutoPropsTable,{componentName:"Sidebar"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Sidebar } from '@e-burgos/tucu-ui';
-
-// Basic usage (typically within Drawer)
-<Sidebar title="Sidebar Title" onClose={() => setIsOpen(false)}>
-  <div>
-    <Typography tag="p">Sidebar content</Typography>
-  </div>
-</Sidebar>
-
-// With logo
-<Sidebar
-  logo={{ name: 'MyApp' }}
-  onClose={() => setIsOpen(false)}
->
-  <div>Content</div>
-</Sidebar>
-
-// With action buttons
-<Sidebar
-  title="Sidebar"
-  actionContent={<Button>Action</Button>}
-  onClose={() => setIsOpen(false)}
->
-  <div>Content</div>
-</Sidebar>`})})})})]})};exports.default=s;

package/documentation/SizingSection-Bkk50xTx.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=a=>{if(typeof window>"u")return"";const t=document.documentElement;return getComputedStyle(t).getPropertyValue(a).trim()||""},c=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Sizing"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Icon and avatar size tokens from Tucu UI Design Tokens"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Icon Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:["xs","s","m","l"].map(a=>{const t=`w-icon-${a}`,d=`h-icon-${a}`,l=`--size-icon-${a}`,r=i(l);return e.jsxs("div",{className:"text-center space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-3",children:[e.jsx("div",{className:`bg-primary rounded mx-auto ${t} ${d}`,style:{width:r||`var(${l})`,height:r||`var(${l})`}}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:a}),r&&e.jsx(s.Typography,{tag:"h4",className:"text-muted text-[10px]",children:r}),e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-[9px] mt-1 break-all px-1",children:[t,", ",d]})]},a)})})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Avatar Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:["s","m","l","xl","xxl","xxxl"].map(a=>{const t=`w-avatar-${a}`,d=`h-avatar-${a}`,l=`--size-avatar-${a}`,r=i(l);return e.jsxs("div",{className:"text-center space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-3",children:[e.jsx("div",{className:`bg-primary rounded-full mx-auto ${t} ${d}`,style:{width:r||`var(${l})`,height:r||`var(${l})`}}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:a}),r&&e.jsx(s.Typography,{tag:"h4",className:"text-muted text-[10px]",children:r}),e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-[9px] mt-1 break-all px-1",children:[t,", ",d]})]},a)})})})})})]})]});exports.default=c;

package/documentation/SizingSection-DmDvMmpv.js

@@ -1,86 +0,0 @@
-import { jsxs as d, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as r, C as i, a as n } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const o = (a) => {
-  if (typeof window > "u") return "";
-  const s = document.documentElement;
-  return getComputedStyle(s).getPropertyValue(a).trim() || "";
-}, N = () => /* @__PURE__ */ d(m, { children: [
-  /* @__PURE__ */ d("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Sizing" }),
-    /* @__PURE__ */ e(
-      r,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Icon and avatar size tokens from Tucu UI Design Tokens"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ d("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Icon Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: ["xs", "s", "m", "l"].map((a) => {
-      const s = `w-icon-${a}`, c = `h-icon-${a}`, l = `--size-icon-${a}`, t = o(l);
-      return /* @__PURE__ */ d(
-        "div",
-        {
-          className: "text-center space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-3",
-          children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: `bg-primary rounded mx-auto ${s} ${c}`,
-                style: {
-                  width: t || `var(${l})`,
-                  height: t || `var(${l})`
-                }
-              }
-            ),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: a }),
-            t && /* @__PURE__ */ e(r, { tag: "h4", className: "text-muted text-[10px]", children: t }),
-            /* @__PURE__ */ d(r, { tag: "h4", className: "text-muted text-[9px] mt-1 break-all px-1", children: [
-              s,
-              ", ",
-              c
-            ] })
-          ]
-        },
-        a
-      );
-    }) }) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Avatar Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: ["s", "m", "l", "xl", "xxl", "xxxl"].map((a) => {
-      const s = `w-avatar-${a}`, c = `h-avatar-${a}`, l = `--size-avatar-${a}`, t = o(l);
-      return /* @__PURE__ */ d(
-        "div",
-        {
-          className: "text-center space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-3",
-          children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: `bg-primary rounded-full mx-auto ${s} ${c}`,
-                style: {
-                  width: t || `var(${l})`,
-                  height: t || `var(${l})`
-                }
-              }
-            ),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: a }),
-            t && /* @__PURE__ */ e(r, { tag: "h4", className: "text-muted text-[10px]", children: t }),
-            /* @__PURE__ */ d(r, { tag: "h4", className: "text-muted text-[9px] mt-1 break-all px-1", children: [
-              s,
-              ", ",
-              c
-            ] })
-          ]
-        },
-        a
-      );
-    }) }) }) }) })
-  ] })
-] });
-export {
-  N as default
-};

package/documentation/SkeletonSection-CtCnpdjN.js

@@ -1,52 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Skeleton"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A skeleton loader component for displaying placeholder content while data is loading."})]}),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-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Default Skeleton"}),e.jsx(s.Skeleton,{})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Text Lines"}),e.jsx(s.Skeleton,{shape:"text",count:3})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Circle Shape"}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx(s.Skeleton,{shape:"circle",size:"small",width:"2rem"}),e.jsx(s.Skeleton,{shape:"circle",size:"medium",width:"4rem"}),e.jsx(s.Skeleton,{shape:"circle",size:"large",width:"6rem"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Skeleton,{size:"tiny"}),e.jsx(s.Skeleton,{size:"small"}),e.jsx(s.Skeleton,{size:"medium"}),e.jsx(s.Skeleton,{size:"large"})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Animations",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Shimmer Animation (Default)"}),e.jsx(s.Skeleton,{animation:"shimmer"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Wave Animation"}),e.jsx(s.Skeleton,{animation:"wave"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Pulse Animation"}),e.jsx(s.Skeleton,{animation:"pulse"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"No Animation"}),e.jsx(s.Skeleton,{animation:"none"})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Rounded (Default)"}),e.jsx(s.Skeleton,{shape:"rounded"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Rectangle"}),e.jsx(s.Skeleton,{shape:"rectangle"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Circle"}),e.jsx(s.Skeleton,{shape:"circle",width:"8rem",height:"8rem"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Text Lines"}),e.jsx(s.Skeleton,{shape:"text",count:4})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Common Patterns",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Card Skeleton"}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Skeleton,{size:"large",className:"mb-3"}),e.jsx(s.Skeleton,{shape:"text",count:3})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Profile Skeleton"}),e.jsx(s.CardContainer,{className:"p-4",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s.Skeleton,{shape:"circle",width:"4rem",height:"4rem"}),e.jsxs("div",{className:"flex-1 space-y-2",children:[e.jsx(s.Skeleton,{width:"60%",height:"1rem"}),e.jsx(s.Skeleton,{width:"40%",height:"0.875rem"})]})]})})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"List Skeleton"}),e.jsx(s.CardContainer,{className:"p-4 space-y-3",children:[1,2,3].map(a=>e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(s.Skeleton,{shape:"circle",width:"2.5rem",height:"2.5rem"}),e.jsxs("div",{className:"flex-1 space-y-2",children:[e.jsx(s.Skeleton,{width:"70%",height:"0.875rem"}),e.jsx(s.Skeleton,{width:"50%",height:"0.75rem"})]})]},a))})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Article Skeleton"}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Skeleton,{size:"large",className:"mb-4"}),e.jsx(s.Skeleton,{width:"80%",className:"mb-2 h-6"}),e.jsx(s.Skeleton,{width:"60%",className:"mb-4 h-6"}),e.jsx(s.Skeleton,{shape:"text",count:5})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Grid Skeleton"}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[1,2,3].map(a=>e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Skeleton,{height:"10rem",className:"mb-3"}),e.jsx(s.Skeleton,{width:"80%",className:"mb-2 h-5"}),e.jsx(s.Skeleton,{shape:"text",count:2})]},a))})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"Skeleton",defaultValues:{shape:"rounded",animation:"shimmer",size:"medium",count:1},excludeProps:["width","height"],children:a=>e.jsx(s.Skeleton,{...a})}),e.jsx(s.AutoPropsTable,{componentName:"Skeleton"}),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 { Skeleton } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Skeleton />
-
-// Different animations
-<Skeleton animation="shimmer" />
-<Skeleton animation="wave" />
-<Skeleton animation="pulse" />
-<Skeleton animation="none" />
-
-// Different shapes
-<Skeleton shape="rounded" />
-<Skeleton shape="rectangle" />
-<Skeleton shape="circle" width="4rem" height="4rem" />
-<Skeleton shape="text" count={3} />
-
-// Different sizes
-<Skeleton size="tiny" />
-<Skeleton size="small" />
-<Skeleton size="medium" />
-<Skeleton size="large" />
-
-// Custom dimensions
-<Skeleton width="80%" height="2rem" />
-
-// Multiple lines
-<Skeleton count={5} />
-
-// Card skeleton pattern
-<div>
-  <Skeleton size="large" className="mb-3" />
-  <Skeleton shape="text" count={3} />
-</div>
-
-// Profile skeleton pattern
-<div className="flex items-center gap-4">
-  <Skeleton shape="circle" width="4rem" height="4rem" />
-  <div className="flex-1 space-y-2">
-    <Skeleton width="60%" height="1rem" />
-    <Skeleton width="40%" height="0.875rem" />
-  </div>
-</div>
-
-// List item skeleton pattern
-<div className="flex items-center gap-3">
-  <Skeleton shape="circle" width="2.5rem" height="2.5rem" />
-  <div className="flex-1 space-y-2">
-    <Skeleton width="70%" height="0.875rem" />
-    <Skeleton width="50%" height="0.75rem" />
-  </div>
-</div>`})})})})]});exports.default=l;

package/documentation/SpacingSystemSection-kZaFDYxR.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=t=>{if(typeof window>"u")return"";const a=document.documentElement;return getComputedStyle(a).getPropertyValue(t).trim()||""},u=()=>{const t=[{value:0,key:"0"},{value:1,key:"1"},{value:2,key:"2"},{value:3,key:"3"},{value:4,key:"4"},{value:5,key:"5"},{value:6,key:"6"},{value:7,key:"7"},{value:8,key:"8"},{value:9,key:"9"},{value:10,key:"10"},{value:11,key:"11"},{value:12,key:"12"},{value:13,key:"13"},{value:14,key:"14"},{value:15,key:"15"},{value:16,key:"16"},{value:17,key:"17"},{value:18,key:"18"},{value:19,key:"19"},{value:20,key:"20"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(l.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Spacing System"}),e.jsx(l.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Spacing scale mapped to Tucu UI Design Tokens"})]}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Spacing Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:t.map(a=>{const r=`--spacing-${a.key}`,s=d(r),n=`p-${a.value}, m-${a.value}, gap-${a.value}`,i=a.value.toString();return e.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:i}),s&&e.jsx(l.Typography,{tag:"h4",className:"text-muted text-[10px]",children:s})]}),e.jsx("div",{className:"bg-primary h-8 rounded w-full",style:{width:s||`var(${r})`,minWidth:"4px"}}),e.jsx(l.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1",children:n})]},a.key)})})})})})]})};exports.default=u;