@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/StandaloneAppSection-BVoGM1bD.js

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.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:"typescript",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-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"}),". Simply provide ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 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-uFMN1K6i.js

@@ -0,0 +1,178 @@
+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-lfg6LZ1p.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: "typescript", 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-gray-300 dark:border-gray-600 rounded text-xs", children: "architecturalPatterns" }),
+      ". Simply provide ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 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-BWUQ_trS.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-BaGqriuz.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-BDCZY0X7.js → StepperSection-BgQQn9Q3.js}

@@ -1,57 +1,55 @@
-import { jsxs as t, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { T as s, C as l, a as h, a1 as o, A as b, c as u } from "../index-B919yoKU.js";
-import { User as x, CreditCard as S, Package as y, Check as N } from "lucide-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-lfg6LZ1p.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 A = () => {
-  const [n, r] = m(1), [c, d] = m(0), i = [
+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" }
-  ], p = [
-    { id: "account", label: "Account", icon: /* @__PURE__ */ e(x, { className: "h-3 w-3" }) },
+  ], d = [
+    { id: "account", label: "Account", icon: /* @__PURE__ */ e(y, { className: "h-3 w-3" }) },
     {
       id: "billing",
       label: "Billing",
-      icon: /* @__PURE__ */ e(S, { className: "h-3 w-3" })
+      icon: /* @__PURE__ */ e(C, { className: "h-3 w-3" })
     },
     {
       id: "delivery",
       label: "Delivery",
-      icon: /* @__PURE__ */ e(y, { className: "h-3 w-3" })
+      icon: /* @__PURE__ */ e(f, { className: "h-3 w-3" })
     },
-    { id: "done", label: "Done", icon: /* @__PURE__ */ e(N, { className: "h-3 w-3" }) }
+    { id: "done", label: "Done", icon: /* @__PURE__ */ e(w, { className: "h-3 w-3" }) }
   ];
-  return /* @__PURE__ */ t(g, { children: [
-    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Stepper" }),
-      /* @__PURE__ */ e(
-        s,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A step indicator for multi-step flows like checkouts, wizards, and onboarding sequences."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-8", children: [
-      /* @__PURE__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-4", children: "Interactive Stepper" }),
+  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(
-          o,
+          i,
           {
-            steps: i,
+            steps: l,
             currentStep: n,
             onStepChange: r
           }
         ),
-        /* @__PURE__ */ t("div", { className: "mt-4 flex gap-2", children: [
+        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => r((a) => Math.max(0, a - 1)),
+              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"
@@ -60,29 +58,29 @@ const A = () => {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => r((a) => Math.min(i.length - 1, a + 1)),
-              disabled: n === i.length - 1,
+              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__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-4", children: "With Icons" }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "With Icons" }),
         /* @__PURE__ */ e(
-          o,
+          i,
           {
-            steps: p,
+            steps: d,
             currentStep: c,
-            onStepChange: d
+            onStepChange: p
           }
         ),
-        /* @__PURE__ */ t("div", { className: "mt-4 flex gap-2", children: [
+        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => d((a) => Math.max(0, a - 1)),
+              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"
@@ -91,22 +89,44 @@ const A = () => {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => d((a) => Math.min(p.length - 1, a + 1)),
-              disabled: c === p.length - 1,
+              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__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-4", children: "Read-only (no onStepChange)" }),
-        /* @__PURE__ */ e(o, { steps: i, currentStep: 2 })
+      /* @__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(b, { componentName: "Stepper" }),
-    /* @__PURE__ */ e(l, { 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(
+    /* @__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';
@@ -142,5 +162,5 @@ const iconSteps = [
   ] });
 };
 export {
-  A as default
+  T as default
 };