@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/StandaloneAppSection-DktAXH3T.js

@@ -0,0 +1,181 @@
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as d, T as a, C as o, a as n, c as s, aj as l, ax as m } from "../index-DoxeCFUJ.js";
+import { Package as c, Info as u, Wand2 as p, Layers3 as h, Minimize2 as g, AppWindow as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ t(i, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Standalone App",
+      description: "The default architectural pattern for traditional SPAs. Routes are automatically generated from menuItems configuration with sidebar navigation.",
+      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-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "StandaloneAppRoutesMenuItem" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Type-safe interface for defining standalone routes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "Interface Definition", children: /* @__PURE__ */ e(s, { language: "TS", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+  component: React.JSX.Element;    // Component to render
+  isPublic?: boolean;              // If true, accessible without authentication
+  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
+  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested sub-routes
+}` }) }) }),
+    /* @__PURE__ */ e(l, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      /* @__PURE__ */ e(u, { className: "w-4 h-4 inline mr-2" }),
+      "The Standalone pattern is the default. You don't need to specify",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "architecturalPatterns" }),
+      ". Simply provide",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "menuItems" }),
+      " ",
+      "and routes will be generated."
+    ] }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Simple standalone app with nested routes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "ThemeProvider with menuItems", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <HomePage />,
+    isPublic: true,
+  },
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <DashboardPage />,
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <SettingsPage />,
+    enableNestedRoutes: true,
+    dropdownItems: [
+      {
+        name: 'Profile',
+        path: '/settings/profile',
+        component: <ProfilePage />,
+      },
+      {
+        name: 'Preferences',
+        path: '/settings/preferences',
+        component: <PreferencesPage />,
+      },
+    ],
+  },
+];
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      // architecturalPatterns="standalone" is the default (optional)
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Custom Routes Override" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Override default routing with customRoutes prop"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "Custom Routing", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+import { ReactRouter } from '@e-burgos/tucu-ui';
+
+const { Routes, Route } = ReactRouter;
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Features" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Benefits of the Standalone pattern"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Auto Route Generation",
+        description: "Routes created automatically from menuItems. No manual setup required.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Nested Routes",
+        description: "Unlimited nesting with dropdownItems converted to dropdown menus.",
+        iconBgClassName: "from-purple-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Simple Configuration",
+        description: "Minimal setup — define menu items and the system handles the rest.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Perfect for SPAs",
+        description: "Ideal for traditional single-page applications without MFE complexity.",
+        iconBgClassName: "from-orange-500 to-amber-500"
+      }
+    ].map((r) => /* @__PURE__ */ e(m, { layout: "vertical", ...r }, r.title)) })
+  ] })
+] });
+export {
+  C as default
+};

package/documentation/StandaloneAppSection-zGt98xAO.js

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const o=`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+  component: React.JSX.Element;    // Component to render
+  isPublic?: boolean;              // If true, accessible without authentication
+  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
+  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested sub-routes
+}`,n=`import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <HomePage />,
+    isPublic: true,
+  },
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <DashboardPage />,
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <SettingsPage />,
+    enableNestedRoutes: true,
+    dropdownItems: [
+      {
+        name: 'Profile',
+        path: '/settings/profile',
+        component: <ProfilePage />,
+      },
+      {
+        name: 'Preferences',
+        path: '/settings/preferences',
+        component: <PreferencesPage />,
+      },
+    ],
+  },
+];
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      // architecturalPatterns="standalone" is the default (optional)
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`,r=`import { ThemeProvider } from '@e-burgos/tucu-ui';
+import { ReactRouter } from '@e-burgos/tucu-ui';
+
+const { Routes, Route } = ReactRouter;
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}`,i=[{icon:e.jsx(a.Wand2,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Auto Route Generation",description:"Routes created automatically from menuItems. No manual setup required.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Nested Routes",description:"Unlimited nesting with dropdownItems converted to dropdown menus.",iconBgClassName:"from-purple-500 to-indigo-500"},{icon:e.jsx(a.Minimize2,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Simple Configuration",description:"Minimal setup — define menu items and the system handles the rest.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(a.AppWindow,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Perfect for SPAs",description:"Ideal for traditional single-page applications without MFE complexity.",iconBgClassName:"from-orange-500 to-amber-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Standalone App",description:"The default architectural pattern for traditional SPAs. Routes are automatically generated from menuItems configuration with sidebar navigation.",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-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Package,{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(t.Typography,{tag:"h2",className:"mb-2",children:"StandaloneAppRoutesMenuItem"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Type-safe interface for defining standalone routes"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Interface Definition",children:e.jsx(t.CodeBlock,{language:"TS",code:o})})}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.Info,{className:"w-4 h-4 inline mr-2"}),"The Standalone pattern is the default. You don't need to specify"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"architecturalPatterns"}),". Simply provide"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"menuItems"})," ","and routes will be generated."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Basic Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Simple standalone app with nested routes"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider with menuItems",children:e.jsx(t.CodeBlock,{language:"tsx",code:n})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Custom Routes Override"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Override default routing with customRoutes prop"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Custom Routing",children:e.jsx(t.CodeBlock,{language:"tsx",code:r})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Key Features"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Benefits of the Standalone pattern"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:i.map(s=>e.jsx(t.FeatureCard,{layout:"vertical",...s},s.title))})]})]})};exports.default=d;

package/documentation/StepperSection-BdPopNnz.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),t=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[l,n]=p.useState(1),[i,c]=p.useState(0),r=[{id:"details",label:"Details"},{id:"payment",label:"Payment"},{id:"shipping",label:"Shipping"},{id:"confirm",label:"Confirm"}],d=[{id:"account",label:"Account",icon:e.jsx(a.User,{className:"h-3 w-3"})},{id:"billing",label:"Billing",icon:e.jsx(a.CreditCard,{className:"h-3 w-3"})},{id:"delivery",label:"Delivery",icon:e.jsx(a.Package,{className:"h-3 w-3"})},{id:"done",label:"Done",icon:e.jsx(a.Check,{className:"h-3 w-3"})}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Stepper",description:`A step indicator for multi-step flows like checkouts, wizards, and
+          onboarding sequences.`,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-teal-500 to-green-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ListOrdered,{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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-8",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-4",children:"Interactive Stepper"}),e.jsx(t.Stepper,{steps:r,currentStep:l,onStepChange:n}),e.jsxs("div",{className:"mt-4 flex gap-2",children:[e.jsx("button",{onClick:()=>n(s=>Math.max(0,s-1)),disabled:l===0,className:"px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",children:"Previous"}),e.jsx("button",{onClick:()=>n(s=>Math.min(r.length-1,s+1)),disabled:l===r.length-1,className:"px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",children:"Next"})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-4",children:"With Icons"}),e.jsx(t.Stepper,{steps:d,currentStep:i,onStepChange:c}),e.jsxs("div",{className:"mt-4 flex gap-2",children:[e.jsx("button",{onClick:()=>c(s=>Math.max(0,s-1)),disabled:i===0,className:"px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",children:"Previous"}),e.jsx("button",{onClick:()=>c(s=>Math.min(d.length-1,s+1)),disabled:i===d.length-1,className:"px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",children:"Next"})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-4",children:"Read-only (no onStepChange)"}),e.jsx(t.Stepper,{steps:r,currentStep:2})]})]})})}),e.jsx(t.PropPlayground,{componentName:"Stepper",title:"Stepper Playground",defaultValues:{currentStep:1},excludeProps:["steps","onStepChange","className"],children:s=>e.jsx(t.Stepper,{...s,steps:[{label:"Step 1"},{label:"Step 2"},{label:"Step 3"}]})}),e.jsx(t.AutoPropsTable,{componentName:"Stepper"}),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 { Stepper } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+const steps = [
+  { id: 'details', label: 'Details' },
+  { id: 'payment', label: 'Payment' },
+  { id: 'shipping', label: 'Shipping' },
+  { id: 'confirm', label: 'Confirm' },
+];
+
+const [currentStep, setCurrentStep] = useState(0);
+
+// Interactive
+<Stepper
+  steps={steps}
+  currentStep={currentStep}
+  onStepChange={setCurrentStep}
+/>
+
+// Read-only (no click)
+<Stepper steps={steps} currentStep={2} />
+
+// With custom icons
+const iconSteps = [
+  { id: 'account', label: 'Account', icon: <User className="h-3 w-3" /> },
+  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-3 w-3" /> },
+];
+<Stepper steps={iconSteps} currentStep={0} onStepChange={setStep} />`})})})})]})};exports.default=o;

package/documentation/StepperSection-CsJZAGkY.js

@@ -0,0 +1,166 @@
+import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { H as g, C as s, a as h, T as o, a2 as i, P as u, A as S, c as x } from "../index-DoxeCFUJ.js";
+import { ListOrdered as N, User as y, CreditCard as C, Package as f, Check as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const T = () => {
+  const [n, r] = m(1), [c, p] = m(0), l = [
+    { id: "details", label: "Details" },
+    { id: "payment", label: "Payment" },
+    { id: "shipping", label: "Shipping" },
+    { id: "confirm", label: "Confirm" }
+  ], d = [
+    { id: "account", label: "Account", icon: /* @__PURE__ */ e(y, { className: "h-3 w-3" }) },
+    {
+      id: "billing",
+      label: "Billing",
+      icon: /* @__PURE__ */ e(C, { className: "h-3 w-3" })
+    },
+    {
+      id: "delivery",
+      label: "Delivery",
+      icon: /* @__PURE__ */ e(f, { className: "h-3 w-3" })
+    },
+    { id: "done", label: "Done", icon: /* @__PURE__ */ e(w, { className: "h-3 w-3" }) }
+  ];
+  return /* @__PURE__ */ a(b, { children: [
+    /* @__PURE__ */ e(
+      g,
+      {
+        title: "Stepper",
+        description: `A step indicator for multi-step flows like checkouts, wizards, and
+          onboarding sequences.`,
+        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-teal-500 to-green-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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-8", children: [
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "Interactive Stepper" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            steps: l,
+            currentStep: n,
+            onStepChange: r
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => r((t) => Math.max(0, t - 1)),
+              disabled: n === 0,
+              className: "px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => r((t) => Math.min(l.length - 1, t + 1)),
+              disabled: n === l.length - 1,
+              className: "px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",
+              children: "Next"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "With Icons" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            steps: d,
+            currentStep: c,
+            onStepChange: p
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => p((t) => Math.max(0, t - 1)),
+              disabled: c === 0,
+              className: "px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => p((t) => Math.min(d.length - 1, t + 1)),
+              disabled: c === d.length - 1,
+              className: "px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",
+              children: "Next"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "Read-only (no onStepChange)" }),
+        /* @__PURE__ */ e(i, { steps: l, currentStep: 2 })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "Stepper",
+        title: "Stepper Playground",
+        defaultValues: {
+          currentStep: 1
+        },
+        excludeProps: ["steps", "onStepChange", "className"],
+        children: (t) => /* @__PURE__ */ e(
+          i,
+          {
+            ...t,
+            steps: [
+              { label: "Step 1" },
+              { label: "Step 2" },
+              { label: "Step 3" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(S, { componentName: "Stepper" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      x,
+      {
+        language: "tsx",
+        code: `import { Stepper } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+const steps = [
+  { id: 'details', label: 'Details' },
+  { id: 'payment', label: 'Payment' },
+  { id: 'shipping', label: 'Shipping' },
+  { id: 'confirm', label: 'Confirm' },
+];
+
+const [currentStep, setCurrentStep] = useState(0);
+
+// Interactive
+<Stepper
+  steps={steps}
+  currentStep={currentStep}
+  onStepChange={setCurrentStep}
+/>
+
+// Read-only (no click)
+<Stepper steps={steps} currentStep={2} />
+
+// With custom icons
+const iconSteps = [
+  { id: 'account', label: 'Account', icon: <User className="h-3 w-3" /> },
+  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-3 w-3" /> },
+];
+<Stepper steps={iconSteps} currentStep={0} onStepChange={setStep} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as default
+};

package/documentation/SwitchSection-BAgMBu2Q.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),a=require("../index-DWDUS-PU.js"),g=require("lucide-react");require("react-router-dom");require("react-dom");const C=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],p=()=>{const[c,s]=n.useState(!1),[i,t]=n.useState(!0),[h,o]=n.useState({primary:!0,secondary:!0,danger:!0,info:!0,success:!0,warning:!0}),d=r=>l=>{o(m=>({...m,[r]:l}))};return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Switch",description:"A toggle switch component for binary on/off states.",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-emerald-500 via-green-500 to-lime-500 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50",children:e.jsx(g.ToggleLeft,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Switch"}),e.jsx(a.Switch,{label:"Enable notifications",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom Labels"}),e.jsx(a.Switch,{label:"Dark mode",onLabel:"ON",offLabel:"OFF",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Switch,{label:"Auto-save",helperText:"Automatically save your work",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Switch,{label:"Required switch",errorMessage:"This field is required",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Switch,{label:"Disabled switch",disabled:!0,checked:c,onChange:s})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",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-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Switch,{label:"Ghost Variant",variant:"ghost",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Switch,{label:"Solid Variant",variant:"solid",checked:c,onChange:s})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Switch,{label:"Transparent Variant",variant:"transparent",checked:c,onChange:s})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:C.map(({label:r,color:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.Switch,{label:`${r} Switch`,color:l,checked:h[l],onChange:d(l)})]},l))})})})}),e.jsx(a.PropPlayground,{componentName:"Switch",defaultValues:{label:"Preview Switch",onLabel:"ON",offLabel:"OFF",variant:"ghost",color:"primary",helperText:"",errorMessage:"",disabled:!1},includeProps:["label","onLabel","offLabel","variant","color","helperText","errorMessage","disabled"],excludeProps:["checked","onChange"],children:r=>e.jsx(a.Switch,{...r,checked:i,onChange:t})}),e.jsx(a.AutoPropsTable,{componentName:"Switch"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Switch } from '@e-burgos/tucu-ui';
+
+<Switch
+  label="Enable notifications"
+  checked={checked}
+  onChange={setChecked}
+/>
+
+<Switch
+  label="Dark mode"
+  onLabel="ON"
+  offLabel="OFF"
+  checked={checked}
+  onChange={setChecked}
+/>
+
+// Variants
+<Switch label="Ghost" variant="ghost" checked={checked} onChange={setChecked} />
+<Switch label="Solid" variant="solid" checked={checked} onChange={setChecked} />
+<Switch label="Transparent" variant="transparent" checked={checked} onChange={setChecked} />
+
+// Colors
+<Switch label="Primary" color="primary" checked={checked} onChange={setChecked} />
+<Switch label="Secondary" color="secondary" checked={checked} onChange={setChecked} />
+<Switch label="Danger" color="danger" checked={checked} onChange={setChecked} />
+<Switch label="Info" color="info" checked={checked} onChange={setChecked} />
+<Switch label="Success" color="success" checked={checked} onChange={setChecked} />
+<Switch label="Warning" color="warning" checked={checked} onChange={setChecked} />`})})})})]})};exports.default=p;