@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/SwitchSection-BUQdc358.js

@@ -0,0 +1,223 @@
+import { jsxs as c, Fragment as w, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { H as C, C as a, a as i, T as r, u as l, P as u, A as f, c as N } from "../index-19KsCnyX.js";
+import { ToggleLeft as S } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const v = [
+  { label: "Primary", color: "primary" },
+  { label: "Secondary", color: "secondary" },
+  { label: "Danger", color: "danger" },
+  { label: "Info", color: "info" },
+  { label: "Success", color: "success" },
+  { label: "Warning", color: "warning" }
+], D = () => {
+  const [s, n] = d(!1), [t, m] = d(!0), [g, b] = d({
+    primary: !0,
+    secondary: !0,
+    danger: !0,
+    info: !0,
+    success: !0,
+    warning: !0
+  }), p = (h) => (o) => {
+    b((k) => ({
+      ...k,
+      [h]: o
+    }));
+  };
+  return /* @__PURE__ */ c(w, { children: [
+    /* @__PURE__ */ e(
+      C,
+      {
+        title: "Switch",
+        description: "A toggle switch component for binary on/off states.",
+        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-emerald-500 via-green-500 to-lime-500 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50", children: /* @__PURE__ */ e(S, { 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(a, { 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__ */ c("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Switch" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Enable notifications",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Custom Labels" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Dark mode",
+            onLabel: "ON",
+            offLabel: "OFF",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Auto-save",
+            helperText: "Automatically save your work",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Required switch",
+            errorMessage: "This field is required",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Disabled switch",
+            disabled: !0,
+            checked: s,
+            onChange: n
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ c("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Ghost Variant",
+            variant: "ghost",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Solid Variant",
+            variant: "solid",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            label: "Transparent Variant",
+            variant: "transparent",
+            checked: s,
+            onChange: n
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { 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 sm:grid-cols-2 xl:grid-cols-3", children: v.map(({ label: h, color: o }) => /* @__PURE__ */ c(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: h }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: `${h} Switch`,
+          color: o,
+          checked: g[o],
+          onChange: p(o)
+        }
+      )
+    ] }, o)) }) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "Switch",
+        defaultValues: {
+          label: "Preview Switch",
+          onLabel: "ON",
+          offLabel: "OFF",
+          variant: "ghost",
+          color: "primary",
+          helperText: "",
+          errorMessage: "",
+          disabled: !1
+        },
+        includeProps: [
+          "label",
+          "onLabel",
+          "offLabel",
+          "variant",
+          "color",
+          "helperText",
+          "errorMessage",
+          "disabled"
+        ],
+        excludeProps: ["checked", "onChange"],
+        children: (h) => /* @__PURE__ */ e(
+          l,
+          {
+            ...h,
+            checked: t,
+            onChange: m
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(f, { componentName: "Switch" }),
+    /* @__PURE__ */ e(a, { 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(
+      N,
+      {
+        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} />
+
+// Colors
+<Switch label="Primary" color="primary" checked={checked} onChange={setChecked} />
+<Switch label="Secondary" color="secondary" checked={checked} onChange={setChecked} />
+<Switch label="Danger" color="danger" checked={checked} onChange={setChecked} />
+<Switch label="Info" color="info" checked={checked} onChange={setChecked} />
+<Switch label="Success" color="success" checked={checked} onChange={setChecked} />
+<Switch label="Warning" color="warning" checked={checked} onChange={setChecked} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  D as default
+};

package/documentation/SwitchSection-C85IWY-t.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),a=require("../index-DMs_SmPq.js"),g=require("lucide-react");require("react-router-dom");require("react-dom");const C=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],p=()=>{const[c,s]=n.useState(!1),[i,t]=n.useState(!0),[h,o]=n.useState({primary:!0,secondary:!0,danger:!0,info:!0,success:!0,warning:!0}),d=r=>l=>{o(m=>({...m,[r]:l}))};return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Switch",description:"A toggle switch component for binary on/off states.",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-emerald-500 via-green-500 to-lime-500 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50",children:e.jsx(g.ToggleLeft,{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 Switch"}),e.jsx(a.Switch,{label:"Enable notifications",checked:c,onChange:s})]}),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:c,onChange:s})]}),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:c,onChange:s})]}),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:c,onChange:s})]}),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:c,onChange:s})]})]})})})}),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:c,onChange:s})]}),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:c,onChange:s})]}),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:c,onChange:s})]})]})})})}),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 sm:grid-cols-2 xl:grid-cols-3",children:C.map(({label:r,color:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.Switch,{label:`${r} Switch`,color:l,checked:h[l],onChange:d(l)})]},l))})})})}),e.jsx(a.PropPlayground,{componentName:"Switch",defaultValues:{label:"Preview Switch",onLabel:"ON",offLabel:"OFF",variant:"ghost",color:"primary",helperText:"",errorMessage:"",disabled:!1},includeProps:["label","onLabel","offLabel","variant","color","helperText","errorMessage","disabled"],excludeProps:["checked","onChange"],children:r=>e.jsx(a.Switch,{...r,checked:i,onChange:t})}),e.jsx(a.AutoPropsTable,{componentName:"Switch"}),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} />
+
+// Colors
+<Switch label="Primary" color="primary" checked={checked} onChange={setChecked} />
+<Switch label="Secondary" color="secondary" checked={checked} onChange={setChecked} />
+<Switch label="Danger" color="danger" checked={checked} onChange={setChecked} />
+<Switch label="Info" color="info" checked={checked} onChange={setChecked} />
+<Switch label="Success" color="success" checked={checked} onChange={setChecked} />
+<Switch label="Warning" color="warning" checked={checked} onChange={setChecked} />`})})})})]})};exports.default=p;

package/documentation/SystemOverviewSection-C1qBmPHN.js

@@ -0,0 +1,58 @@
+import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { H as o, T as i, ax as s } from "../index-19KsCnyX.js";
+import { Map as n, Router as l, Menu as m, Layers3 as c, Box as d } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "System Overview",
+      description: "Built on React Router v6 with automatic menu generation and nested route support. Supports both Standalone and Micro Frontend (MFE) architectural patterns via TypeScript-enforced discriminated unions.",
+      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(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(i, { tag: "h2", className: "mb-2", children: "Core Capabilities" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Key features of the routing system"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(l, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "React Router v6",
+        description: "Built on React Router with full compatibility, browser history, and modern routing features.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Automatic Navigation",
+        description: "Generate navigation menus automatically from menuItems configuration with active states.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Nested Routes",
+        description: "Unlimited nesting levels via dropdownItems with automatic sidebar dropdown generation.",
+        iconBgClassName: "from-purple-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Dual Architecture",
+        description: "Supports Standalone (menu-driven) and MFE (explicit config) via the architecturalPatterns prop.",
+        iconBgClassName: "from-orange-500 to-amber-500"
+      }
+    ].map((a) => /* @__PURE__ */ e(s, { layout: "vertical", ...a }, a.title)) })
+  ] })
+] });
+export {
+  x as default
+};

package/documentation/SystemOverviewSection-rljSEGcG.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const r=[{icon:e.jsx(t.Router,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"React Router v6",description:"Built on React Router with full compatibility, browser history, and modern routing features.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(t.Menu,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Automatic Navigation",description:"Generate navigation menus automatically from menuItems configuration with active states.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Nested Routes",description:"Unlimited nesting levels via dropdownItems with automatic sidebar dropdown generation.",iconBgClassName:"from-purple-500 to-indigo-500"},{icon:e.jsx(t.Box,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Dual Architecture",description:"Supports Standalone (menu-driven) and MFE (explicit config) via the architecturalPatterns prop.",iconBgClassName:"from-orange-500 to-amber-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"System Overview",description:"Built on React Router v6 with automatic menu generation and nested route support. Supports both Standalone and Micro Frontend (MFE) architectural patterns via TypeScript-enforced discriminated unions.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Map,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(i.Typography,{tag:"h2",className:"mb-2",children:"Core Capabilities"}),e.jsx(i.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Key features of the routing system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:r.map(a=>e.jsx(i.FeatureCard,{layout:"vertical",...a},a.title))})]})]})};exports.default=s;

package/documentation/TabModalSection-Dv5x_sEQ.js

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),t=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const h=()=>{const[l,s]=o.useState(!1),[r,n]=o.useState(!1),[c,i]=o.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"TabModal",description:`A modal dialog with built-in tab navigation, header with icon/badge,
+          expandable footer, and mobile-first responsive design.`,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-orange-500 to-amber-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.SquareStack,{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.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Tabs"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open TabModal (Tabs)"}),r&&e.jsx(t.TabModal,{icon:a.Activity,title:"Dashboard",subtitle:"View your activity and stats",badgeHeader:"LIVE",badgeHeaderClassName:"text-green-600 bg-green-100 border-green-300",tabs:[{icon:a.BarChart3,name:"Overview",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Overview Tab"}),e.jsx(t.Typography,{tag:"p",children:"This is the overview content with charts and metrics."})]})},{icon:a.Settings,name:"Settings",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Settings Tab"}),e.jsx(t.Typography,{tag:"p",children:"Configure your preferences here."})]})}],footerLabel:"Last updated: 2 minutes ago",successButton:{label:"Save",onClick:()=>n(!1)},onClose:()=>n(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Direct Content"}),e.jsx(t.Button,{onClick:()=>i(!0),children:"Open TabModal (Content)"}),c&&e.jsx(t.TabModal,{icon:a.Settings,title:"Preferences",subtitle:"Manage your account settings",content:e.jsx("div",{className:"space-y-4",children:e.jsxs(t.Typography,{tag:"p",children:["When you pass the ",e.jsx("code",{children:"content"})," prop directly, the tab bar is hidden and this content fills the body."]})}),onClose:()=>i(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Minimal (No Tabs, No Content)"}),e.jsx(t.Button,{onClick:()=>s(!0),children:"Open Minimal TabModal"}),l&&e.jsx(t.TabModal,{title:"Confirmation",successButton:{label:"Confirm",onClick:()=>s(!1)},closeButton:{label:"Cancel",onClick:()=>s(!1)},onClose:()=>s(!1)})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"TabModal",title:"TabModal Playground",defaultValues:{title:"Modal Title",subtitle:"Modal subtitle",footerLabel:"Footer text",closeLabel:"Cancel"},excludeProps:["onClose","tabs","content","icon","className","closeButton","successButton","badgeHeader","badgeHeaderClassName"],children:d=>e.jsx(t.TabModal,{...d,onClose:()=>{},tabs:[{title:"Tab 1",content:e.jsx(t.Typography,{tag:"p",children:"Content 1"})},{title:"Tab 2",content:e.jsx(t.Typography,{tag:"p",children:"Content 2"})}]})}),e.jsx(t.AutoPropsTable,{componentName:"TabModal"}),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 { TabModal } from '@e-burgos/tucu-ui';
+import { Activity, BarChart3, Settings } from 'lucide-react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Open</button>
+      {isOpen && (
+        <TabModal
+          icon={Activity}
+          title="Dashboard"
+          subtitle="Activity overview"
+          badgeHeader="LIVE"
+          tabs={[
+            {
+              icon: BarChart3,
+              name: 'Overview',
+              content: <div>Overview content</div>,
+            },
+            {
+              icon: Settings,
+              name: 'Settings',
+              content: <div>Settings content</div>,
+            },
+          ]}
+          footerLabel="Last updated: 2 min ago"
+          successButton={{ label: 'Save', onClick: () => setIsOpen(false) }}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+// Direct content (no tabs)
+<TabModal
+  title="Preferences"
+  content={<div>Direct body content</div>}
+  onClose={() => setIsOpen(false)}
+/>
+
+// With expandable footer label
+<TabModal
+  title="Details"
+  content={<div>Body</div>}
+  footerLabel="Long description that expands on click..."
+  onClose={() => setIsOpen(false)}
+/>`})})})})]})};exports.default=h;

package/documentation/{TabModalSection-cPdxSg37.js → TabModalSection-IuUO4qiP.js}

@@ -1,38 +1,36 @@
-import { jsxs as a, Fragment as u, jsx as e } from "react/jsx-runtime";
-import { useState as o } from "react";
-import { T as t, C as n, a as d, y as l, a3 as c, A as f, c as g } from "../index-D3gBsvbO.js";
-import { BarChart3 as v, Settings as m, Activity as C } from "lucide-react";
+import { jsxs as a, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { H as g, C as n, a as d, T as t, x as c, a4 as o, P as C, A as v, c as T } from "../index-19KsCnyX.js";
+import { SquareStack as N, BarChart3 as w, Settings as m, Activity as y } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const M = () => {
-  const [p, s] = o(!1), [h, i] = o(!1), [b, r] = o(!1);
-  return /* @__PURE__ */ a(u, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "TabModal" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A modal dialog with built-in tab navigation, header with icon/badge, expandable footer, and mobile-first responsive design."
-        }
-      )
-    ] }),
+const I = () => {
+  const [b, s] = l(!1), [h, i] = l(!1), [p, r] = l(!1);
+  return /* @__PURE__ */ a(f, { children: [
+    /* @__PURE__ */ e(
+      g,
+      {
+        title: "TabModal",
+        description: `A modal dialog with built-in tab navigation, header with icon/badge,
+          expandable footer, and mobile-first responsive design.`,
+        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-orange-500 to-amber-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
     /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Tabs" }),
-        /* @__PURE__ */ e(l, { onClick: () => i(!0), children: "Open TabModal (Tabs)" }),
+        /* @__PURE__ */ e(c, { onClick: () => i(!0), children: "Open TabModal (Tabs)" }),
         h && /* @__PURE__ */ e(
-          c,
+          o,
           {
-            icon: C,
+            icon: y,
             title: "Dashboard",
             subtitle: "View your activity and stats",
             badgeHeader: "LIVE",
             badgeHeaderClassName: "text-green-600 bg-green-100 border-green-300",
             tabs: [
               {
-                icon: v,
+                icon: w,
                 name: "Overview",
                 content: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
                   /* @__PURE__ */ e(t, { tag: "h5", children: "Overview Tab" }),
@@ -59,9 +57,9 @@ const M = () => {
       ] }),
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Direct Content" }),
-        /* @__PURE__ */ e(l, { onClick: () => r(!0), children: "Open TabModal (Content)" }),
-        b && /* @__PURE__ */ e(
-          c,
+        /* @__PURE__ */ e(c, { onClick: () => r(!0), children: "Open TabModal (Content)" }),
+        p && /* @__PURE__ */ e(
+          o,
           {
             icon: m,
             title: "Preferences",
@@ -77,9 +75,9 @@ const M = () => {
       ] }),
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Minimal (No Tabs, No Content)" }),
-        /* @__PURE__ */ e(l, { onClick: () => s(!0), children: "Open Minimal TabModal" }),
-        p && /* @__PURE__ */ e(
-          c,
+        /* @__PURE__ */ e(c, { onClick: () => s(!0), children: "Open Minimal TabModal" }),
+        b && /* @__PURE__ */ e(
+          o,
           {
             title: "Confirmation",
             successButton: {
@@ -95,9 +93,35 @@ const M = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(f, { componentName: "TabModal" }),
+    /* @__PURE__ */ e(
+      C,
+      {
+        componentName: "TabModal",
+        title: "TabModal Playground",
+        defaultValues: {
+          title: "Modal Title",
+          subtitle: "Modal subtitle",
+          footerLabel: "Footer text",
+          closeLabel: "Cancel"
+        },
+        excludeProps: ["onClose", "tabs", "content", "icon", "className", "closeButton", "successButton", "badgeHeader", "badgeHeaderClassName"],
+        children: (u) => /* @__PURE__ */ e(
+          o,
+          {
+            ...u,
+            onClose: () => {
+            },
+            tabs: [
+              { title: "Tab 1", content: /* @__PURE__ */ e(t, { tag: "p", children: "Content 1" }) },
+              { title: "Tab 2", content: /* @__PURE__ */ e(t, { tag: "p", children: "Content 2" }) }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(v, { componentName: "TabModal" }),
     /* @__PURE__ */ e(n, { 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(
-      g,
+      T,
       {
         language: "tsx",
         code: `import { TabModal } from '@e-burgos/tucu-ui';
@@ -156,5 +180,5 @@ function MyComponent() {
   ] });
 };
 export {
-  M as default
+  I as default
 };