@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/ThemeProviderSection-BFOZTXGP.mjs

@@ -0,0 +1,128 @@
+import { jsxs as o, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as a, C as p, a as l, B as d } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => {
+  const s = [
+    { key: "prop", label: "Prop" },
+    { key: "type", label: "Type" },
+    { key: "default", label: "Default" },
+    { key: "description", label: "Description" }
+  ], i = [
+    {
+      prop: "menuItems",
+      type: "IMenuItem[]",
+      default: "Required",
+      description: "Navigation menu items"
+    },
+    {
+      prop: "layout",
+      type: "LAYOUT_OPTIONS",
+      default: "HORIZONTAL",
+      description: "Layout type: CLEAN, ADMIN, or HORIZONTAL"
+    },
+    {
+      prop: "mode",
+      type: "'light' | 'dark'",
+      default: "'light'",
+      description: "Color mode"
+    },
+    {
+      prop: "showSettings",
+      type: "boolean",
+      default: "false",
+      description: "Show theme settings drawer button"
+    },
+    {
+      prop: "customPaletteColor",
+      type: "object",
+      default: "-",
+      description: "Custom color palette (see Color Configuration)"
+    },
+    {
+      prop: "logo",
+      type: "LogoType",
+      default: "{ path: '/', name: '' }",
+      description: "Logo configuration object with path and name"
+    },
+    {
+      prop: "brandColor",
+      type: "PresetColorType",
+      default: "-",
+      description: "Brand color preset"
+    },
+    {
+      prop: "headerClassName",
+      type: "string",
+      default: "-",
+      description: "Custom CSS classes for header"
+    },
+    {
+      prop: "contentClassName",
+      type: "string",
+      default: "-",
+      description: "Custom CSS classes for content area"
+    },
+    {
+      prop: "fullWidth",
+      type: "boolean",
+      default: "false",
+      description: "Enable full width layout"
+    },
+    {
+      prop: "rightButton",
+      type: "ReactNode",
+      default: "-",
+      description: "Custom button component for header right area"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Custom CSS classes for root layout"
+    }
+  ];
+  return /* @__PURE__ */ o(n, { children: [
+    /* @__PURE__ */ o("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "h2",
+          className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+          children: "ThemeProvider Component"
+        }
+      ),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+          children: "Complete reference for ThemeProvider props and configuration"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(l, { title: "ThemeProvider Props", className: "mt-2 mb-6", children: /* @__PURE__ */ o("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ o(a, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+        "The ThemeProvider is the root component that wraps your application and manages all theme state. Located in",
+        /* @__PURE__ */ e("code", { className: "px-2 py-1 font-mono rounded text-sm", children: "ui/tucu-ui/src/themes" }),
+        "directory."
+      ] }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          columns: s.map((t) => ({
+            ...t,
+            render: (r) => t.key === "prop" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(r ?? "") }) : t.key === "type" || t.key === "default" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(r ?? "") }) : t.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(r ?? "") }) : String(r ?? "")
+          })),
+          data: i,
+          containerClassName: "mb-4"
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  g as default
+};

package/ThemeProviderSection-BsMcUESl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const a=[{key:"prop",label:"Prop"},{key:"type",label:"Type"},{key:"default",label:"Default"},{key:"description",label:"Description"}],s=[{prop:"menuItems",type:"IMenuItem[]",default:"Required",description:"Navigation menu items"},{prop:"layout",type:"LAYOUT_OPTIONS",default:"HORIZONTAL",description:"Layout type: CLEAN, ADMIN, or HORIZONTAL"},{prop:"mode",type:"'light' | 'dark'",default:"'light'",description:"Color mode"},{prop:"showSettings",type:"boolean",default:"false",description:"Show theme settings drawer button"},{prop:"customPaletteColor",type:"object",default:"-",description:"Custom color palette (see Color Configuration)"},{prop:"logo",type:"LogoType",default:"{ path: '/', name: '' }",description:"Logo configuration object with path and name"},{prop:"brandColor",type:"PresetColorType",default:"-",description:"Brand color preset"},{prop:"headerClassName",type:"string",default:"-",description:"Custom CSS classes for header"},{prop:"contentClassName",type:"string",default:"-",description:"Custom CSS classes for content area"},{prop:"fullWidth",type:"boolean",default:"false",description:"Enable full width layout"},{prop:"rightButton",type:"ReactNode",default:"-",description:"Custom button component for header right area"},{prop:"className",type:"string",default:"-",description:"Custom CSS classes for root layout"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"ThemeProvider Component"}),e.jsx(t.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Complete reference for ThemeProvider props and configuration"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider Props",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The ThemeProvider is the root component that wraps your application and manages all theme state. Located in",e.jsx("code",{className:"px-2 py-1 font-mono rounded text-sm",children:"ui/tucu-ui/src/themes"}),"directory."]}),e.jsx(t.BasicTable,{columns:a.map(r=>({...r,render:o=>r.key==="prop"?e.jsx("code",{className:"text-xs text-brand",children:String(o??"")}):r.key==="type"||r.key==="default"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(o??"")}):r.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(o??"")}):String(o??"")})),data:s,containerClassName:"mb-4"})]})})})]})};exports.default=i;

package/ToastSection-5qocQ7cH.mjs

@@ -0,0 +1,170 @@
+import { jsxs as e, Fragment as c, jsx as t } from "react/jsx-runtime";
+import { a6 as d, T as s, C as a, a as i, s as n, a7 as m, B as p, c as h } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => {
+  const { addToast: r } = d();
+  return /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ t(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Toast" }),
+      /* @__PURE__ */ t(
+        s,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A toast notification system for displaying temporary messages with multiple variants and auto-dismiss functionality."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ e(a, { className: "p-4", children: [
+          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Success Toast" }),
+          /* @__PURE__ */ t(
+            n,
+            {
+              onClick: () => r({
+                id: Date.now().toString(),
+                title: "Success!",
+                message: "Operation completed successfully.",
+                variant: "success"
+              }),
+              children: "Show Success Toast"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(a, { className: "p-4", children: [
+          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Error Toast" }),
+          /* @__PURE__ */ t(
+            n,
+            {
+              onClick: () => r({
+                id: Date.now().toString(),
+                title: "Error!",
+                message: "Something went wrong.",
+                variant: "destructive"
+              }),
+              children: "Show Error Toast"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(a, { className: "p-4", children: [
+          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
+          /* @__PURE__ */ t(
+            n,
+            {
+              onClick: () => r({
+                id: Date.now().toString(),
+                title: "Warning!",
+                message: "Please review this information.",
+                variant: "warning"
+              }),
+              children: "Show Warning Toast"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(a, { className: "p-4", children: [
+          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Info Toast" }),
+          /* @__PURE__ */ t(
+            n,
+            {
+              onClick: () => r({
+                id: Date.now().toString(),
+                title: "Info",
+                message: "Here is some information.",
+                variant: "info"
+              }),
+              children: "Show Info Toast"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t(m, {})
+    ] }) }) }),
+    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(p, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (o) => /* @__PURE__ */ t("code", { className: "text-xs text-brand", children: String(o) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (o) => /* @__PURE__ */ t("code", { className: "text-xs", children: String(o) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (o) => {
+          const l = String(o);
+          return l === "required" ? /* @__PURE__ */ t("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ t("code", { className: "text-xs", children: l });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "Toast Component",
+        type: "React.FC",
+        default: "-",
+        description: "The Toast component renders automatically from the toast store"
+      },
+      {
+        prop: "useToastStore",
+        type: "Hook",
+        default: "-",
+        description: "Hook to manage toast notifications"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
+      h,
+      {
+        language: "tsx",
+        code: `import { Toast, useToastStore } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  const { addToast } = useToastStore();
+
+  const showSuccess = () => {
+    addToast({
+      id: Date.now().toString(),
+      title: 'Success!',
+      message: 'Operation completed successfully.',
+      variant: 'success',
+    });
+  };
+
+  const showError = () => {
+    addToast({
+      id: Date.now().toString(),
+      title: 'Error!',
+      message: 'Something went wrong.',
+      variant: 'destructive',
+    });
+  };
+
+  return (
+    <>
+      <button onClick={showSuccess}>Show Success</button>
+      <button onClick={showError}>Show Error</button>
+      <Toast />
+    </>
+  );
+}
+
+// Toast variants
+addToast({ id: Date.now().toString(), variant: 'success', title: 'Success', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'destructive', title: 'Error', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'warning', title: 'Warning', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  N as default
+};

package/ToastSection-BKsJOkbs.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const{addToast:a}=t.useToastStore(),r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],n=[{prop:"Toast Component",type:"React.FC",default:"-",description:"The Toast component renders automatically from the toast store"},{prop:"useToastStore",type:"Hook",default:"-",description:"Hook to manage toast notifications"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Toast"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A toast notification system for displaying temporary messages with multiple variants and auto-dismiss functionality."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsxs("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(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Success Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Success!",message:"Operation completed successfully.",variant:"success"}),children:"Show Success Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Error Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Error!",message:"Something went wrong.",variant:"destructive"}),children:"Show Error Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Warning Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Warning!",message:"Please review this information.",variant:"warning"}),children:"Show Warning Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Info Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Info",message:"Here is some information.",variant:"info"}),children:"Show Info Toast"})]})]}),e.jsx(t.Toast,{})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:r,data:n})})})}),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 { Toast, useToastStore } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  const { addToast } = useToastStore();
+
+  const showSuccess = () => {
+    addToast({
+      id: Date.now().toString(),
+      title: 'Success!',
+      message: 'Operation completed successfully.',
+      variant: 'success',
+    });
+  };
+
+  const showError = () => {
+    addToast({
+      id: Date.now().toString(),
+      title: 'Error!',
+      message: 'Something went wrong.',
+      variant: 'destructive',
+    });
+  };
+
+  return (
+    <>
+      <button onClick={showSuccess}>Show Success</button>
+      <button onClick={showError}>Show Error</button>
+      <Toast />
+    </>
+  );
+}
+
+// Toast variants
+addToast({ id: Date.now().toString(), variant: 'success', title: 'Success', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'destructive', title: 'Error', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'warning', title: 'Warning', message: '...' });
+addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`})})})})]})};exports.default=i;

package/ToggleBarSection-Cx7gCx2L.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("./index-CjRk4ezu.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[a,l]=n.useState(!1),i=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const c=String(s);return c==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:c})}},{key:"description",label:"Description"}],r=[{prop:"title",type:"string",default:"required",description:"Main title text"},{prop:"subTitle",type:"string",default:"-",description:"Subtitle text displayed below the title"},{prop:"icon",type:"React.ReactNode",default:"-",description:"Icon element to display next to the title"},{prop:"checked",type:"boolean",default:"required",description:"Whether the toggle is checked"},{prop:"onChange",type:"() => void",default:"required",description:"Callback when toggle state changes"},{prop:"children",type:"React.ReactNode",default:"-",description:"Content to display below the toggle bar"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ToggleBar"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.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(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic ToggleBar"}),e.jsx(t.ToggleBar,{title:"Enable Notifications",checked:a,onChange:()=>l(!a)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Subtitle"}),e.jsx(t.ToggleBar,{title:"Dark Mode",subTitle:"Switch between light and dark themes",checked:a,onChange:()=>l(!a)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(t.ToggleBar,{title:"Auto Save",subTitle:"Automatically save your work",icon:e.jsx(d.Save,{className:"w-5 h-5"}),checked:a,onChange:()=>l(!a)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Children"}),e.jsx(t.ToggleBar,{title:"Advanced Settings",subTitle:"Show advanced configuration options",checked:a,onChange:()=>l(!a),children:e.jsx("div",{className:"mt-4 space-y-2",children:e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Additional content appears here when toggle is enabled."})})})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:i,data:r})})})}),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 { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';
+
+const [checked, setChecked] = useState(false);
+
+// Basic usage
+<ToggleBar
+  title="Enable Notifications"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With subtitle
+<ToggleBar
+  title="Dark Mode"
+  subTitle="Switch between light and dark themes"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With icon
+<ToggleBar
+  title="Auto Save"
+  icon={<LucideIcons.Save className="w-5 h-5" />}
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With children
+<ToggleBar
+  title="Advanced Settings"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+>
+  <div className="mt-4">
+    <p>Additional content here</p>
+  </div>
+</ToggleBar>`})})})})]})};exports.default=o;

package/ToggleBarSection-KeVNyc_h.mjs

@@ -0,0 +1,187 @@
+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 c, a as d, r, B as g, c as p } from "./index-Hq6IUBmn.mjs";
+import { Save as m } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const T = () => {
+  const [t, s] = 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: "ToggleBar" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { 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(c, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic ToggleBar" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Enable Notifications",
+            checked: t,
+            onChange: () => s(!t)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(c, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Subtitle" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Dark Mode",
+            subTitle: "Switch between light and dark themes",
+            checked: t,
+            onChange: () => s(!t)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(c, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Icon" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Auto Save",
+            subTitle: "Automatically save your work",
+            icon: /* @__PURE__ */ e(m, { className: "w-5 h-5" }),
+            checked: t,
+            onChange: () => s(!t)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(c, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Children" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Advanced Settings",
+            subTitle: "Show advanced configuration options",
+            checked: t,
+            onChange: () => s(!t),
+            children: /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ e(
+              l,
+              {
+                tag: "p",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: "Additional content appears here when toggle is enabled."
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(g, { 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 n = String(i);
+          return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "title",
+        type: "string",
+        default: "required",
+        description: "Main title text"
+      },
+      {
+        prop: "subTitle",
+        type: "string",
+        default: "-",
+        description: "Subtitle text displayed below the title"
+      },
+      {
+        prop: "icon",
+        type: "React.ReactNode",
+        default: "-",
+        description: "Icon element to display next to the title"
+      },
+      {
+        prop: "checked",
+        type: "boolean",
+        default: "required",
+        description: "Whether the toggle is checked"
+      },
+      {
+        prop: "onChange",
+        type: "() => void",
+        default: "required",
+        description: "Callback when toggle state changes"
+      },
+      {
+        prop: "children",
+        type: "React.ReactNode",
+        default: "-",
+        description: "Content to display below the toggle bar"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      p,
+      {
+        language: "tsx",
+        code: `import { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';
+
+const [checked, setChecked] = useState(false);
+
+// Basic usage
+<ToggleBar
+  title="Enable Notifications"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With subtitle
+<ToggleBar
+  title="Dark Mode"
+  subTitle="Switch between light and dark themes"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With icon
+<ToggleBar
+  title="Auto Save"
+  icon={<LucideIcons.Save className="w-5 h-5" />}
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With children
+<ToggleBar
+  title="Advanced Settings"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+>
+  <div className="mt-4">
+    <p>Additional content here</p>
+  </div>
+</ToggleBar>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as default
+};

package/TopupButtonSection-BkGsoYjc.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const t=String(s);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],n=[{prop:"label",type:"string",default:"required",description:"Button label text"},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before the label"},{prop:"href",type:"string",default:"-",description:"Optional link URL"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"},{prop:"onClick",type:"() => void",default:"-",description:"Click handler function"}];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:"TopupButton"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A specialized button component for top-up or recharge actions, with support for icons and links."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"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 Topup Button"}),e.jsx(a.TopupButton,{label:"Add Funds"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(a.TopupButton,{label:"Top Up Account",icon:e.jsx(l.Plus,{className:"w-4 h-4"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Link"}),e.jsx(a.TopupButton,{label:"Recharge Now",href:"/topup",icon:e.jsx(l.CreditCard,{className:"w-4 h-4"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With onClick Handler"}),e.jsx(a.TopupButton,{label:"Add Balance",icon:e.jsx(l.Wallet,{className:"w-4 h-4"}),onClick:()=>console.log("Topup clicked")})]})]})})})}),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:r,data:n})})})}),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 { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<TopupButton label="Add Funds" />
+
+// With icon
+<TopupButton
+  label="Top Up Account"
+  icon={<LucideIcons.Plus className="w-4 h-4" />}
+/>
+
+// With link
+<TopupButton
+  label="Recharge Now"
+  href="/topup"
+  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
+/>
+
+// With onClick handler
+<TopupButton
+  label="Add Balance"
+  icon={<LucideIcons.Wallet className="w-4 h-4" />}
+  onClick={() => handleTopup()}
+/>`})})})})]})};exports.default=o;