@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/StandaloneAppSection-4D17ptHx.js

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

@@ -1,181 +0,0 @@
-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-BOVWnu1L.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/StepperSection-DfbitP_R.js

@@ -1,166 +0,0 @@
-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-BOVWnu1L.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/StepperSection-NPyRSwF7.js

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