@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/StandaloneAppSection-BF1C6FEF.mjs

@@ -0,0 +1,244 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { C as r, a as n, T as a, a4 as i, c as o } from "./index-Hq6IUBmn.mjs";
+import { Package as d, Info as l, Code as c, Play as m, Settings as u, CheckCircle as s } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { title: "Standalone App", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Standalone App Pattern (Default)" })
+  ] }),
+  /* @__PURE__ */ t(a, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+    "The ",
+    /* @__PURE__ */ e("strong", { children: "Standalone App Pattern" }),
+    " is the default mode for traditional single-page applications. Routes are automatically generated from",
+    " ",
+    /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "menuItems" }),
+    " ",
+    "configuration, making it perfect for monolithic applications that don't require micro frontend architecture."
+  ] }),
+  /* @__PURE__ */ e(i, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
+      /* @__PURE__ */ e(a, { tag: "span", className: "font-semibold", children: "Default Pattern" })
+    ] }),
+    /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      "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 automatically generated."
+    ] })
+  ] }) }),
+  /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "StandaloneAppRoutesMenuItem Interface" })
+      ] }),
+      /* @__PURE__ */ t(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "Define your routes using the",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "StandaloneAppRoutesMenuItem" }),
+            " ",
+            "interface. Each menu item automatically becomes a route."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(o, { language: "typescript", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+  component: JSX.Element;  // Component to render
+  isPublic?: boolean;      // If true, accessible without authentication
+  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested routes
+  hide?: boolean;          // Hide from navigation menu
+}` })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Basic Usage" })
+      ] }),
+      /* @__PURE__ */ t(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "Create a simple standalone application with automatic route generation from menu items. Supports nested routes through",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "dropdownItems" }),
+            "."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <HomePage />,
+    isPublic: true, // Public route
+  },
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <DashboardPage />,
+    isPublic: false, // Private route - requires authentication
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <SettingsPage />,
+    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}  // Required for Standalone
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Custom Routes Override" })
+      ] }),
+      /* @__PURE__ */ t(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "You can completely override the default routing by providing your own",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "customRoutes" }),
+            " ",
+            "prop. This is useful for special routing requirements."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(o, { language: "tsx", code: `import { Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}` })
+    ] })
+  ] }),
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold text-lg", children: "Key Features" }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ t(r, { className: "p-4", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(s, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Automatic Route Generation" })
+        ] }),
+        /* @__PURE__ */ t(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "Routes are automatically created from your",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "menuItems" }),
+              " ",
+              "configuration. No manual route setup required."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(r, { className: "p-4", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(s, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Nested Routes Support" })
+        ] }),
+        /* @__PURE__ */ t(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "Support for unlimited nesting levels with",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "dropdownItems" }),
+              ". Automatically converted to dropdown menus in navigation."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(r, { className: "p-4", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(s, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Simple Configuration" })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Minimal setup required. Just define your menu items and the routing system handles the rest."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(r, { className: "p-4", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(s, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Perfect for SPAs" })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Ideal for traditional single-page applications that don't require micro frontend architecture or route isolation."
+          }
+        )
+      ] })
+    ] })
+  ] })
+] }) }) }) });
+export {
+  w as default
+};

package/StandaloneAppSection-fhZ8XHQq.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Standalone App",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 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(t.Package,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Standalone App Pattern (Default)"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The ",e.jsx("strong",{children:"Standalone App Pattern"})," is the default mode for traditional single-page applications. Routes are automatically generated from"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"menuItems"})," ","configuration, making it perfect for monolithic applications that don't require micro frontend architecture."]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Info,{className:"w-4 h-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"Default Pattern"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["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 automatically generated."]})]})}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg",children:e.jsx(t.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Interface"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define your routes using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"StandaloneAppRoutesMenuItem"})," ","interface. Each menu item automatically becomes a route."]}),e.jsx(a.CodeBlock,{language:"typescript",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+  component: JSX.Element;  // Component to render
+  isPublic?: boolean;      // If true, accessible without authentication
+  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested routes
+  hide?: boolean;          // Hide from navigation menu
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(t.Play,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Basic Usage"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Create a simple standalone application with automatic route generation from menu items. Supports nested routes through"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"dropdownItems"}),"."]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <HomePage />,
+    isPublic: true, // Public route
+  },
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <DashboardPage />,
+    isPublic: false, // Private route - requires authentication
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <SettingsPage />,
+    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}  // Required for Standalone
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg",children:e.jsx(t.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Custom Routes Override"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["You can completely override the default routing by providing your own"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"customRoutes"})," ","prop. This is useful for special routing requirements."]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+function StandaloneApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}`})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-lg",children:"Key Features"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(a.Typography,{tag:"h5",className:"font-semibold",children:"Automatic Route Generation"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Routes are automatically created from your"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"menuItems"})," ","configuration. No manual route setup required."]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(a.Typography,{tag:"h5",className:"font-semibold",children:"Nested Routes Support"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Support for unlimited nesting levels with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"dropdownItems"}),". Automatically converted to dropdown menus in navigation."]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(a.Typography,{tag:"h5",className:"font-semibold",children:"Simple Configuration"})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Minimal setup required. Just define your menu items and the routing system handles the rest."})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(a.Typography,{tag:"h5",className:"font-semibold",children:"Perfect for SPAs"})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Ideal for traditional single-page applications that don't require micro frontend architecture or route isolation."})]})]})]})]})})})});exports.default=s;

package/SwitchSection-BENFMw9r.mjs

@@ -0,0 +1,230 @@
+import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { T as l, C as t, a as n, p as r, B as p, c as m } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const C = () => {
+  const [s, c] = h(!1);
+  return /* @__PURE__ */ a(o, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Switch" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A toggle switch component for binary on/off states."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Switch" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Enable notifications",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Custom Labels" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Dark mode",
+            onLabel: "ON",
+            offLabel: "OFF",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Auto-save",
+            helperText: "Automatically save your work",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Required switch",
+            errorMessage: "This field is required",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Disabled switch",
+            disabled: !0,
+            checked: s,
+            onChange: c
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Ghost Variant",
+            variant: "ghost",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Solid Variant",
+            variant: "solid",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Transparent Variant",
+            variant: "transparent",
+            checked: s,
+            onChange: c
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (i) => {
+          const d = String(i);
+          return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "checked",
+        type: "boolean",
+        default: "required",
+        description: "Whether the switch is checked"
+      },
+      {
+        prop: "onChange",
+        type: "(checked: boolean) => void",
+        default: "required",
+        description: "Callback when switch state changes"
+      },
+      {
+        prop: "label",
+        type: "string | React.ReactNode",
+        default: "-",
+        description: "Switch label text"
+      },
+      {
+        prop: "variant",
+        type: "'ghost' | 'solid' | 'transparent'",
+        default: "'ghost'",
+        description: "Visual variant of the switch"
+      },
+      {
+        prop: "onLabel",
+        type: "string | React.ReactNode",
+        default: "'ON'",
+        description: "Label text when switch is on"
+      },
+      {
+        prop: "offLabel",
+        type: "string | React.ReactNode",
+        default: "'OFF'",
+        description: "Label text when switch is off"
+      },
+      {
+        prop: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "Disables the switch"
+      },
+      {
+        prop: "errorMessage",
+        type: "string",
+        default: "-",
+        description: "Error message to display"
+      },
+      {
+        prop: "helperText",
+        type: "string",
+        default: "-",
+        description: "Helper text displayed below the switch"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(t, { 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 { 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} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  C as default
+};

package/SwitchSection-wuPSVKvN.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[s,t]=n.useState(!1),c=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const l=String(r);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],i=[{prop:"checked",type:"boolean",default:"required",description:"Whether the switch is checked"},{prop:"onChange",type:"(checked: boolean) => void",default:"required",description:"Callback when switch state changes"},{prop:"label",type:"string | React.ReactNode",default:"-",description:"Switch label text"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the switch"},{prop:"onLabel",type:"string | React.ReactNode",default:"'ON'",description:"Label text when switch is on"},{prop:"offLabel",type:"string | React.ReactNode",default:"'OFF'",description:"Label text when switch is off"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the switch"},{prop:"errorMessage",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the switch"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Switch"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A toggle switch component for binary on/off states."})]}),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:s,onChange:t})]}),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:s,onChange:t})]}),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:s,onChange:t})]}),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:s,onChange:t})]}),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:s,onChange:t})]})]})})})}),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:s,onChange:t})]}),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:s,onChange:t})]}),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:s,onChange:t})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:c,data:i})})})}),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} />`})})})})]})};exports.default=d;