@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/SwitchSection-ByC85Kap.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-DoxeCFUJ.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/SystemOverviewSection-CAWlhqIB.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../index-DWDUS-PU.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/SystemOverviewSection-ydaPDpDw.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-DoxeCFUJ.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/TabModalSection-Bu3a4ryu.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-DWDUS-PU.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-TRVdGNTT.js

@@ -0,0 +1,200 @@
+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-DoxeCFUJ.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 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(c, { onClick: () => i(!0), children: "Open TabModal (Tabs)" }),
+        h && /* @__PURE__ */ e(
+          o,
+          {
+            icon: y,
+            title: "Dashboard",
+            subtitle: "View your activity and stats",
+            badgeHeader: "LIVE",
+            badgeHeaderClassName: "text-green-600 bg-green-100 border-green-300",
+            tabs: [
+              {
+                icon: w,
+                name: "Overview",
+                content: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ e(t, { tag: "h5", children: "Overview Tab" }),
+                  /* @__PURE__ */ e(t, { tag: "p", children: "This is the overview content with charts and metrics." })
+                ] })
+              },
+              {
+                icon: m,
+                name: "Settings",
+                content: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ e(t, { tag: "h5", children: "Settings Tab" }),
+                  /* @__PURE__ */ e(t, { tag: "p", children: "Configure your preferences here." })
+                ] })
+              }
+            ],
+            footerLabel: "Last updated: 2 minutes ago",
+            successButton: {
+              label: "Save",
+              onClick: () => i(!1)
+            },
+            onClose: () => i(!1)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(n, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Direct Content" }),
+        /* @__PURE__ */ e(c, { onClick: () => r(!0), children: "Open TabModal (Content)" }),
+        p && /* @__PURE__ */ e(
+          o,
+          {
+            icon: m,
+            title: "Preferences",
+            subtitle: "Manage your account settings",
+            content: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ a(t, { tag: "p", children: [
+              "When you pass the ",
+              /* @__PURE__ */ e("code", { children: "content" }),
+              " prop directly, the tab bar is hidden and this content fills the body."
+            ] }) }),
+            onClose: () => r(!1)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(n, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Minimal (No Tabs, No Content)" }),
+        /* @__PURE__ */ e(c, { onClick: () => s(!0), children: "Open Minimal TabModal" }),
+        b && /* @__PURE__ */ e(
+          o,
+          {
+            title: "Confirmation",
+            successButton: {
+              label: "Confirm",
+              onClick: () => s(!1)
+            },
+            closeButton: {
+              label: "Cancel",
+              onClick: () => s(!1)
+            },
+            onClose: () => s(!1)
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__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(
+      T,
+      {
+        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)}
+/>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  I as default
+};

package/documentation/TabSection-BdLxBPop.js

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DWDUS-PU.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Tabs",description:`A flexible tab component system with multiple variants, smooth
+          animations, and mobile-responsive design built on Headless UI.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(n.LayoutList,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-8",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",children:"Overview"}),a.jsx(e.TabItem,{variant:"underline",children:"Details"}),a.jsx(e.TabItem,{variant:"underline",children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Overview content with clean underline design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Detailed information with professional styling."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Settings panel with modern appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Dashboard"}),a.jsx(e.TabItem,{variant:"pills",children:"Analytics"}),a.jsx(e.TabItem,{variant:"pills",children:"Reports"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Dashboard with rounded pill tabs for a modern look."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Analytics data with smooth transitions."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Reports section with clean design."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",children:"Account"}),a.jsx(e.TabItem,{variant:"bordered",children:"Security"}),a.jsx(e.TabItem,{variant:"bordered",children:"Billing"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Account settings with bordered tab style."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Security options with clear visual distinction."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Billing information with professional appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant"}),a.jsxs(e.TabGroup,{variant:"solid",children:[a.jsxs(e.TabList,{variant:"solid",children:[a.jsx(e.TabItem,{variant:"solid",children:"Profile"}),a.jsx(e.TabItem,{variant:"solid",children:"Notifications"}),a.jsx(e.TabItem,{variant:"solid",children:"Privacy"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Profile section with solid background tabs."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Notifications center with modern design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Privacy settings with clean interface."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"With Icons",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills with Icons"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Home,{size:16}),children:"Home"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.User,{size:16}),children:"Profile"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Settings,{size:16}),children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Home dashboard content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"User profile information."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Application settings."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered with Icons"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Mail,{size:16}),children:"Messages"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Bell,{size:16}),children:"Alerts"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Calendar,{size:16}),children:"Schedule"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Your messages and conversations."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"System alerts and notifications."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Calendar and scheduled events."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Small Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Small size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Compact design for space-constrained layouts."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Perfect for dense information displays."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Large Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Large size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Prominent design for main navigation."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Great for primary interface elements."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"States",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Disabled Tab"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Active"}),a.jsx(e.TabItem,{variant:"pills",disabled:!0,children:"Disabled"}),a.jsx(e.TabItem,{variant:"pills",children:"Available"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Active tab content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"This tab is disabled."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Available tab content."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Color Variants"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",color:"primary",children:"Primary"}),a.jsx(e.TabItem,{variant:"underline",color:"success",children:"Success"}),a.jsx(e.TabItem,{variant:"underline",color:"danger",children:"Danger"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Primary color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Success color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Danger color theme."})})})]})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"TabGroup",title:"Tab Playground",defaultValues:{variant:"solid",defaultIndex:0},excludeProps:["onChange","selectedIndex","className"],children:i=>a.jsxs(e.TabGroup,{...i,children:[a.jsxs(e.TabList,{children:[a.jsx(e.TabItem,{children:"Tab 1"}),a.jsx(e.TabItem,{children:"Tab 2"}),a.jsx(e.TabItem,{children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:"Content 1"}),a.jsx(e.TabPanel,{children:"Content 2"}),a.jsx(e.TabPanel,{children:"Content 3"})]})]})}),a.jsx(e.AutoPropsTable,{componentName:"Tab"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import {
+  TabGroup,
+  TabList,
+  TabItem,
+  TabPanels,
+  TabPanel,
+} from '@e-burgos/tucu-ui';
+import { Home, User, Settings } from 'lucide-react';
+
+// Basic underline tabs
+<TabGroup variant="underline">
+  <TabList variant="underline">
+    <TabItem variant="underline">Tab 1</TabItem>
+    <TabItem variant="underline">Tab 2</TabItem>
+    <TabItem variant="underline">Tab 3</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Content 3</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Pills variant with icons
+<TabGroup variant="pills">
+  <TabList variant="pills">
+    <TabItem variant="pills" icon={<Home size={16} />}>
+      Home
+    </TabItem>
+    <TabItem variant="pills" icon={<User size={16} />}>
+      Profile
+    </TabItem>
+    <TabItem variant="pills" icon={<Settings size={16} />}>
+      Settings
+    </TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Home content</TabPanel>
+    <TabPanel>Profile content</TabPanel>
+    <TabPanel>Settings content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Bordered variant with sizes
+<TabGroup variant="bordered">
+  <TabList variant="bordered">
+    <TabItem variant="bordered" size="small">Small</TabItem>
+    <TabItem variant="bordered" size="medium">Medium</TabItem>
+    <TabItem variant="bordered" size="large">Large</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Small content</TabPanel>
+    <TabPanel>Medium content</TabPanel>
+    <TabPanel>Large content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Solid variant with disabled tab
+<TabGroup variant="solid">
+  <TabList variant="solid">
+    <TabItem variant="solid">Active</TabItem>
+    <TabItem variant="solid" disabled>Disabled</TabItem>
+    <TabItem variant="solid">Available</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Active content</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+    <TabPanel>Available content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// With color variants
+<TabGroup variant="underline">
+  <TabList variant="underline">
+    <TabItem variant="underline" color="primary">Primary</TabItem>
+    <TabItem variant="underline" color="success">Success</TabItem>
+    <TabItem variant="underline" color="danger">Danger</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Primary content</TabPanel>
+    <TabPanel>Success content</TabPanel>
+    <TabPanel>Danger content</TabPanel>
+  </TabPanels>
+</TabGroup>`})})})})]});exports.default=s;