@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/ThemeProviderSection-nIdNlZjq.js

@@ -0,0 +1,143 @@
+import { jsxs as r, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as p, T as o, C as d, a as l, y as c } from "../index-lfg6LZ1p.js";
+import { Component as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => {
+  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: "themeStyle",
+      type: "'default' | 'macos' | 'macos-tahoe'",
+      default: "'default'",
+      description: "Visual theme variant — constrains available layouts"
+    },
+    {
+      prop: "layout",
+      type: "LAYOUT_OPTIONS",
+      default: "HORIZONTAL",
+      description: "Layout type (constrained by themeStyle)"
+    },
+    {
+      prop: "mode",
+      type: "'light' | 'dark'",
+      default: "'dark'",
+      description: "Color mode"
+    },
+    {
+      prop: "showSettings",
+      type: "boolean",
+      default: "false",
+      description: "Show theme settings drawer button"
+    },
+    {
+      prop: "customPaletteColor",
+      type: "object",
+      default: "-",
+      description: "Custom color palette with 12 color slots (primary, darkPrimary, secondary, etc.)"
+    },
+    {
+      prop: "logo",
+      type: "LogoType",
+      default: "{ path: '/', name: '' }",
+      description: "Logo configuration object with path and name"
+    },
+    {
+      prop: "brandColor",
+      type: "PresetColorType",
+      default: "-",
+      description: "Brand color preset name"
+    },
+    {
+      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"
+    },
+    {
+      prop: "setCurrentPathname",
+      type: "(pathname: string) => void",
+      default: "-",
+      description: "Callback invoked on route change with current pathname"
+    }
+  ];
+  return /* @__PURE__ */ r(n, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "ThemeProvider Component",
+        description: "The root component that wraps your application, manages all theme state, handles routing, and applies color configurations.",
+        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(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ r("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ r("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Props Reference" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Complete list of ThemeProvider configuration props"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(l, { title: "ThemeProvider Props", children: /* @__PURE__ */ r("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ r(o, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+          "Located in",
+          " ",
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "ui/tucu-ui/src/themes/components/theme-provider/" })
+        ] }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            columns: s.map((t) => ({
+              ...t,
+              render: (a) => t.key === "prop" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a ?? "") }) : t.key === "type" || t.key === "default" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(a ?? "") }) : t.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(a ?? "") }) : String(a ?? "")
+            })),
+            data: i,
+            containerClassName: "mb-4"
+          }
+        )
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  C as default
+};

package/documentation/{ToastSection-CY2Mbvzy.js → ToastSection-C3RQpSox.js}

@@ -1,31 +1,29 @@
-import { jsxs as e, Fragment as c, jsx as t } from "react/jsx-runtime";
-import { ai as d, T as s, C as a, a as n, y as i, aj as m, q as p, c as h } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { al as d, H as m, C as s, a as n, T as r, x as i, am as h, y as p, c as u } from "../index-lfg6LZ1p.js";
+import { BellRing as g } from "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(n, { 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(
+const x = () => {
+  const { addToast: o } = d();
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Toast",
+        description: `A toast notification system for displaying temporary messages with
+          multiple variants and auto-dismiss functionality.`,
+        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-red-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ t(s, { className: "p-4", children: [
+          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Success Toast" }),
+          /* @__PURE__ */ e(
             i,
             {
-              onClick: () => r({
+              onClick: () => o({
                 id: Date.now().toString(),
                 title: "Success!",
                 message: "Operation completed successfully.",
@@ -35,12 +33,12 @@ const N = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ e(a, { className: "p-4", children: [
-          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Error Toast" }),
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ t(s, { className: "p-4", children: [
+          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Error Toast" }),
+          /* @__PURE__ */ e(
             i,
             {
-              onClick: () => r({
+              onClick: () => o({
                 id: Date.now().toString(),
                 title: "Error!",
                 message: "Something went wrong.",
@@ -50,12 +48,12 @@ const N = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ e(a, { className: "p-4", children: [
-          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ t(s, { className: "p-4", children: [
+          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
+          /* @__PURE__ */ e(
             i,
             {
-              onClick: () => r({
+              onClick: () => o({
                 id: Date.now().toString(),
                 title: "Warning!",
                 message: "Please review this information.",
@@ -65,12 +63,12 @@ const N = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ e(a, { className: "p-4", children: [
-          /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Info Toast" }),
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ t(s, { className: "p-4", children: [
+          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Info Toast" }),
+          /* @__PURE__ */ e(
             i,
             {
-              onClick: () => r({
+              onClick: () => o({
                 id: Date.now().toString(),
                 title: "Info",
                 message: "Here is some information.",
@@ -81,25 +79,25 @@ const N = () => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ t(m, {})
+      /* @__PURE__ */ e(h, {})
     ] }) }) }),
-    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(p, { columns: [
+    /* @__PURE__ */ e(s, { 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: (o) => /* @__PURE__ */ t("code", { className: "text-xs text-brand", children: String(o) })
+        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
       },
       {
         key: "type",
         label: "Type",
-        render: (o) => /* @__PURE__ */ t("code", { className: "text-xs", children: String(o) })
+        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
       },
       {
         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 });
+        render: (a) => {
+          const l = String(a);
+          return l === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l });
         }
       },
       {
@@ -120,8 +118,8 @@ const N = () => {
         description: "Hook to manage toast notifications"
       }
     ] }) }) }) }),
-    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
-      h,
+    /* @__PURE__ */ e(s, { 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(
+      u,
       {
         language: "tsx",
         code: `import { Toast, useToastStore } from '@e-burgos/tucu-ui';
@@ -166,5 +164,5 @@ addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '
   ] });
 };
 export {
-  N as default
+  x as default
 };

package/documentation/{ToastSection-BeNEBfZU.js → ToastSection-DF3L8jxW.js}

@@ -1,4 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.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';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{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.jsx(t.HeroCard,{title:"Toast",description:`A toast notification system for displaying temporary messages with
+          multiple variants and auto-dismiss functionality.`,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-red-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.BellRing,{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:"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();
@@ -34,4 +35,4 @@ function MyComponent() {
 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;
+addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`})})})})]})};exports.default=l;

package/documentation/ToggleBarSection-CJmXFlZa.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const u=()=>{const[l,t]=o.useState(!1),[n,d]=o.useState(!0),i=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],[h,g]=o.useState({primary:!0,secondary:!0,danger:!0,info:!0,success:!0,warning:!0}),m=s=>()=>{g(c=>({...c,[s]:!c[s]}))};return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"ToggleBar",description:"A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(r.ToggleRight,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic ToggleBar"}),e.jsx(a.ToggleBar,{title:"Enable Notifications",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Subtitle"}),e.jsx(a.ToggleBar,{title:"Dark Mode",subTitle:"Switch between light and dark themes",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(a.ToggleBar,{title:"Auto Save",subTitle:"Automatically save your work",icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Children"}),e.jsx(a.ToggleBar,{title:"Advanced Settings",subTitle:"Show advanced configuration options",checked:l,onChange:()=>t(!l),children:e.jsx("div",{className:"mt-4 space-y-2",children:e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Additional content appears here when toggle is enabled."})})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",children:i.map(({label:s,color:c})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.ToggleBar,{title:`${s} Toggle`,subTitle:"Toggle with inherited Switch color",color:c,checked:h[c],onChange:m(c)})]},c))})})})}),e.jsx(a.PropPlayground,{componentName:"ToggleBar",defaultValues:{title:"Preview ToggleBar",subTitle:"Use the controls to adjust the component",color:"primary"},includeProps:["title","subTitle","color"],excludeProps:["checked","onChange","icon","children"],children:s=>e.jsx("div",{className:"w-full max-w-2xl",children:e.jsx(a.ToggleBar,{...s,icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:n,onChange:()=>d(c=>!c)})})}),e.jsx(a.AutoPropsTable,{componentName:"ToggleBar"}),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 { 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)}
+/>
+
+// Colors
+<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Warning" color="warning" 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=u;

package/documentation/ToggleBarSection-D26Mzrf4.js

@@ -0,0 +1,186 @@
+import { jsxs as t, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { H as b, C as l, a as i, T as r, w as s, P as w, A as N, c as f } from "../index-lfg6LZ1p.js";
+import { ToggleRight as B, Save as h } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const W = () => {
+  const [a, n] = d(!1), [g, m] = d(!0), k = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], [u, p] = d({
+    primary: !0,
+    secondary: !0,
+    danger: !0,
+    info: !0,
+    success: !0,
+    warning: !0
+  }), C = (o) => () => {
+    p((c) => ({
+      ...c,
+      [o]: !c[o]
+    }));
+  };
+  return /* @__PURE__ */ t(T, { children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        title: "ToggleBar",
+        description: "A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",
+        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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50", children: /* @__PURE__ */ e(B, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic ToggleBar" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            title: "Enable Notifications",
+            checked: a,
+            onChange: () => n(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Subtitle" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            title: "Dark Mode",
+            subTitle: "Switch between light and dark themes",
+            checked: a,
+            onChange: () => n(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Icon" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            title: "Auto Save",
+            subTitle: "Automatically save your work",
+            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
+            checked: a,
+            onChange: () => n(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Children" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            title: "Advanced Settings",
+            subTitle: "Show advanced configuration options",
+            checked: a,
+            onChange: () => n(!a),
+            children: /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ e(
+              r,
+              {
+                tag: "p",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: "Additional content appears here when toggle is enabled."
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Colors", 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 gap-4 md:grid-cols-2 xl:grid-cols-3", children: k.map(({ label: o, color: c }) => /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: o }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          title: `${o} Toggle`,
+          subTitle: "Toggle with inherited Switch color",
+          color: c,
+          checked: u[c],
+          onChange: C(c)
+        }
+      )
+    ] }, c)) }) }) }) }),
+    /* @__PURE__ */ e(
+      w,
+      {
+        componentName: "ToggleBar",
+        defaultValues: {
+          title: "Preview ToggleBar",
+          subTitle: "Use the controls to adjust the component",
+          color: "primary"
+        },
+        includeProps: ["title", "subTitle", "color"],
+        excludeProps: ["checked", "onChange", "icon", "children"],
+        children: (o) => /* @__PURE__ */ e("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ e(
+          s,
+          {
+            ...o,
+            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
+            checked: g,
+            onChange: () => m((c) => !c)
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(N, { componentName: "ToggleBar" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      f,
+      {
+        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)}
+/>
+
+// Colors
+<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
+<ToggleBar title="Warning" color="warning" 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 {
+  W as default
+};