@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/documentation/ThemeArchitectureSection-DFcj4Sf9.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-QnI4b7wS.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Architecture"}),e.jsx(t.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on modern technologies for flexibility and performance"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[{icon:e.jsx(a.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Zustand State Management",description:"Centralized theme state with minimal boilerplate and excellent TypeScript support",color:"from-yellow-500 via-amber-500 to-orange-500",features:["Lightweight","TypeScript First","DevTools Support"]},{icon:e.jsx(a.Palette,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"CSS Custom Properties",description:"Dynamic brand colors using CSS variables for real-time theme updates",color:"from-blue-500 via-cyan-500 to-teal-500",features:["Dynamic Colors","Alpha Support","No Rebuilds"]},{icon:e.jsx(a.Moon,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Dark Mode Support",description:"Automatic dark/light mode switching with smooth transitions",color:"from-purple-500 via-violet-500 to-indigo-500",features:["Auto Detection","Smooth Transitions","System Sync"]}].map((r,i)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-gradient-to-br ${r.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:r.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description}),e.jsx("div",{className:"flex flex-wrap gap-2",children:r.features.map((s,o)=>e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:s},o))})]})},i))})]});exports.default=l;

package/documentation/ThemeConfigurationSection-CmD-wjGZ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-QnI4b7wS.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsx(l.CardContainer,{children:e.jsx(l.CardTitle,{title:"Theme Configuration",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-8",children:e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg shadow-lg",children:e.jsx(o.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Available Options"})]}),e.jsx("div",{className:"space-y-3",children:[{label:"Mode",value:"'light' | 'dark'"},{label:"Direction",value:"'ltr' | 'rtl'"},{label:"Layout",value:"'clean' | 'admin' | 'horizontal'"},{label:"Primary Color",value:"34+ predefined colors"},{label:"Dark Primary Color",value:"34+ predefined colors"},{label:"Secondary Color",value:"34+ predefined colors"},{label:"Dark Secondary Color",value:"34+ predefined colors"},{label:"Accent Color",value:"34+ predefined colors"},{label:"Dark Accent Color",value:"34+ predefined colors"},{label:"Muted Color",value:"34+ predefined colors"},{label:"Dark Muted Color",value:"34+ predefined colors"},{label:"Dark Background",value:"Theme base colors"},{label:"Light Background",value:"Theme base colors"},{label:"Light Dark",value:"Theme base colors"},{label:"Dark Light Dark",value:"Theme base colors"},{label:"Language",value:"'en' | 'es' | 'fr'"}].map((a,r)=>e.jsxs("div",{className:"flex justify-between items-center py-2 px-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"font-medium",children:a.label}),e.jsx("code",{className:"text-sm text-gray-600 dark:text-gray-400",children:a.value})]},r))})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg shadow-lg",children:e.jsx(o.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Color Presets"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 overflow-y-auto",children:[{name:"DEFAULT_PRIMARY",color:"#0052ff"},{name:"DEFAULT_DARK_PRIMARY",color:"#578bfa"},{name:"DEFAULT_SECONDARY",color:"#eef0f3"},{name:"DEFAULT_DARK_SECONDARY",color:"#282b31"},{name:"DEFAULT_ACCENT",color:"#f7d21a"},{name:"DEFAULT_DARK_ACCENT",color:"#936000"},{name:"DEFAULT_MUTED",color:"#5b616e"},{name:"DEFAULT_DARK_MUTED",color:"#8a919e"},{name:"DEFAULT_LIGHT_BG",color:"#ffffff"},{name:"DEFAULT_DARK_BG",color:"#0a0b0d"},{name:"DEFAULT_LIGHT_DARK",color:"#f7f8f9"},{name:"DEFAULT_DARK_LIGHT_DARK",color:"#141519"},{name:"BLUE",color:"#105eff"},{name:"DARK_BLUE",color:"#2162ee"},{name:"GREEN",color:"#129961"},{name:"DARK_GREEN",color:"#159962"},{name:"ORANGE",color:"#e1591b"},{name:"DARK_ORANGE",color:"#e66020"},{name:"GRAY",color:"#717886"},{name:"DARK_GRAY",color:"#727886"},{name:"INDIGO",color:"#596ff2"},{name:"DARK_INDIGO",color:"#5c71ee"},{name:"PINK",color:"#cb51bb"},{name:"DARK_PINK",color:"#d058c1"},{name:"PURPLE",color:"#9d6bf2"},{name:"DARK_PURPLE",color:"#bc7bfb"},{name:"RED",color:"#e13947"},{name:"DARK_RED",color:"#e6404e"},{name:"TEAL",color:"#0093cb"},{name:"DARK_TEAL",color:"#0095cd"},{name:"YELLOW",color:"#cf9700"},{name:"DARK_YELLOW",color:"#c79e00"},{name:"CHARTREUSE",color:"#56b340"},{name:"DARK_CHARTREUSE",color:"#7bc869"}].map((a,r)=>e.jsxs("div",{className:"flex items-center gap-2 p-2 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",children:[e.jsx("div",{className:"w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 shadow-sm",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-xs font-medium truncate",children:a.name})]},r))}),e.jsx(l.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400 mt-2",children:"34 total color presets available (12 default + 22 spectrum colors)"})]})]})})})});exports.default=s;

package/{ThemeConfigurationSection-eifonrlB.mjs → documentation/ThemeConfigurationSection-D299ICxo.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { C as c, a as d, T as r } from "./index-HwvOEWI7.mjs";
+import { C as c, a as d, T as r } from "../index-B6CStnMG.js";
 import { Settings as s, Palette as n } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/ThemeHooksSection-DOm5a7FR.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Powerful hooks for theme management and customization"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useTheme Hook",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:["The"," ",e.jsx("code",{className:"px-2 py-1 bg-light-dark rounded text-sm",children:"useTheme"})," ","hook provides access to all theme state and setters. It uses Zustand for state management with localStorage persistence."]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available State:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"mode, layout, direction, logo, lang"}),e.jsx("li",{children:"primaryPreset, darkPrimaryPreset"}),e.jsx("li",{children:"secondaryPreset, darkSecondaryPreset"}),e.jsx("li",{children:"accentPreset, darkAccentPreset"}),e.jsx("li",{children:"mutedPreset, darkMutedPreset"}),e.jsx("li",{children:"darkBgPreset, lightBgPreset"}),e.jsx("li",{children:"lightDarkPreset, darkLightDarkPreset"}),e.jsx("li",{children:"isSettingsOpen, showSettings"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available Setters:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"setMode, setLayout, setDirection"}),e.jsx("li",{children:"setPrimaryPreset, setDarkPrimaryPreset"}),e.jsx("li",{children:"setSecondaryPreset, setDarkSecondaryPreset"}),e.jsx("li",{children:"setAccentPreset, setDarkAccentPreset"}),e.jsx("li",{children:"setMutedPreset, setDarkMutedPreset"}),e.jsx("li",{children:"setDarkBgPreset, setLightBgPreset"}),e.jsx("li",{children:"setLightDarkPreset, setDarkLightDarkPreset"}),e.jsx("li",{children:"setLogo, setLang, setIsSettingsOpen"}),e.jsx("li",{children:"setShowSettings, restoreDefaultColors"})]})]})]})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useThemeColor & useDirection",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useThemeColor"}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mb-2",children:"Automatically used by ThemeWrapper to inject CSS variables into the document root:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"--color-semantic-bg-primary"}),e.jsx("li",{children:"--color-semantic-dark-bg-primary"}),e.jsx("li",{children:"--color-semantic-bg-secondary"}),e.jsx("li",{children:"--color-semantic-accent-bold-yellow"}),e.jsx("li",{children:"--color-semantic-fg-muted"}),e.jsx("li",{children:"--color-semantic-bg"}),e.jsx("li",{children:"--color-semantic-bg-secondary-wash"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useDirection"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:["Sets the document direction for RTL/LTR support. Sets"," ",e.jsx("code",{className:"px-1 py-0.5 bg-light-dark rounded text-xs",children:"document.documentElement.dir"}),"."]})]})]})})})})]})]});exports.default=t;

package/{ThemeHooksSection-BYmhg3xO.mjs → documentation/ThemeHooksSection-DsAsY2qd.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { T as r, C as s, a } from "./index-HwvOEWI7.mjs";
+import { T as r, C as s, a } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{ThemeProviderIntegrationSection-DCnGD4F4.mjs → documentation/ThemeProviderIntegrationSection-1aykNRXQ.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { C as r, a as s, T as o, c as a } from "./index-HwvOEWI7.mjs";
+import { C as r, a as s, T as o, c as a } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{ThemeProviderIntegrationSection-YpM0GKJx.js → documentation/ThemeProviderIntegrationSection-D9xmfEve.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BOfUOCHe.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider Integration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The routing system is fully integrated with the ThemeProvider, providing seamless navigation, layout management, and theming support. The ThemeProvider supports two architectural patterns:",e.jsx("strong",{children:" Standalone"})," (default) for traditional SPAs and",e.jsx("strong",{children:" Micro Frontends (MFE)"})," for distributed architectures."]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppThemeProvider Props"}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppProviderProps
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider Integration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The routing system is fully integrated with the ThemeProvider, providing seamless navigation, layout management, and theming support. The ThemeProvider supports two architectural patterns:",e.jsx("strong",{children:" Standalone"})," (default) for traditional SPAs and",e.jsx("strong",{children:" Micro Frontends (MFE)"})," for distributed architectures."]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppThemeProvider Props"}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppProviderProps
   extends Omit<ThemeWrapperProps, 'menuItems' | 'children'> {
   menuItems: StandaloneAppRoutesMenuItem[];  // Required: Array of route items
   customRoutes?: React.ReactElement<typeof Routes>; // Override default routing

package/documentation/ThemeProviderRequiredSection-DfNXhp3f.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-QnI4b7wS.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.Alert,{variant:"warning",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(o.AlertTriangle,{className:"h-4 w-4"}),"ThemeProvider Required"]}),e.jsxs("div",{children:["Before using any layout components or theme hooks, you MUST wrap your application with ThemeProvider. All layout components and theme hooks depend on the theme context provided by ThemeProvider. Located in"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"ui/tucu-ui/src/themes/components/theme-provider"}),"."]})]})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Routing System",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"ThemeProvider"})," includes"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"BrowserRouter"})," ","from React Router and handles routing automatically. You have two options:"]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"1. Automatic Routing (Default)"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"menuItems"})," with ",e.jsx("code",{children:"component"})," ","prop. ThemeProvider will automatically generate routes from your menu items."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You want routing based on menu items. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]})]}),e.jsxs("div",{className:"p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"2. Custom Routing"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"customRoutes"})," prop with your own"," ",e.jsx("code",{children:"<Routes>"})," component. This gives you full control over routing."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You need custom routing logic, landing pages without navigation, or complex routing scenarios."]})]})]})]})})})]});exports.default=t;

package/{ThemeProviderRequiredSection-zYv4GrBp.mjs → documentation/ThemeProviderRequiredSection-sViX_FO7.js}

@@ -1,5 +1,5 @@
 import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { a4 as a, C as d, a as n, T as o } from "./index-HwvOEWI7.mjs";
+import { ag as a, C as d, a as n, T as o } from "../index-B6CStnMG.js";
 import { AlertTriangle as i } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{ThemeProviderSection-CG6ROKoP.mjs → documentation/ThemeProviderSection-BFtuOM3w.js}

@@ -1,5 +1,5 @@
 import { jsxs as o, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { T as a, C as p, a as l, B as d } from "./index-HwvOEWI7.mjs";
+import { T as a, C as p, a as l, q as d } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/ThemeProviderSection-CT5hlFD2.js

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

package/documentation/ToastSection-DD18GmJl.js

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

package/{ToastSection-C0_N6VoS.mjs → documentation/ToastSection-DoHzysF9.js}

@@ -1,5 +1,5 @@
 import { jsxs as e, Fragment as c, jsx as t } from "react/jsx-runtime";
-import { a6 as d, T as s, C as a, a as i, s as n, a7 as m, B as p, c as h } from "./index-HwvOEWI7.mjs";
+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-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -18,12 +18,12 @@ const N = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ 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(
-            n,
+            i,
             {
               onClick: () => r({
                 id: Date.now().toString(),
@@ -38,7 +38,7 @@ const N = () => {
         /* @__PURE__ */ e(a, { className: "p-4", children: [
           /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Error Toast" }),
           /* @__PURE__ */ t(
-            n,
+            i,
             {
               onClick: () => r({
                 id: Date.now().toString(),
@@ -53,7 +53,7 @@ const N = () => {
         /* @__PURE__ */ e(a, { className: "p-4", children: [
           /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
           /* @__PURE__ */ t(
-            n,
+            i,
             {
               onClick: () => r({
                 id: Date.now().toString(),
@@ -68,7 +68,7 @@ const N = () => {
         /* @__PURE__ */ e(a, { className: "p-4", children: [
           /* @__PURE__ */ t(s, { tag: "h5", className: "mb-3", children: "Info Toast" }),
           /* @__PURE__ */ t(
-            n,
+            i,
             {
               onClick: () => r({
                 id: Date.now().toString(),
@@ -83,7 +83,7 @@ const N = () => {
       ] }),
       /* @__PURE__ */ t(m, {})
     ] }) }) }),
-    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(p, { columns: [
+    /* @__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: [
       {
         key: "prop",
         label: "Prop",
@@ -120,7 +120,7 @@ const N = () => {
         description: "Hook to manage toast notifications"
       }
     ] }) }) }) }),
-    /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
+    /* @__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,
       {
         language: "tsx",

package/documentation/ToggleBarSection-BpxFr9W6.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),a=require("../index-QnI4b7wS.js"),l=require("lucide-react");require("react-router-dom");require("react-dom");const i=()=>{const[t,s]=c.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ToggleBar"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles."})]}),e.jsx(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:t,onChange:()=>s(!t)})]}),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:t,onChange:()=>s(!t)})]}),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(l.Save,{className:"w-5 h-5"}),checked:t,onChange:()=>s(!t)})]}),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:t,onChange:()=>s(!t),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.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)}
+/>
+
+// With children
+<ToggleBar
+  title="Advanced Settings"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+>
+  <div className="mt-4">
+    <p>Additional content here</p>
+  </div>
+</ToggleBar>`})})})})]})};exports.default=i;

package/documentation/ToggleBarSection-D3BYm7ZV.js

@@ -0,0 +1,127 @@
+import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { T as c, C as l, a as n, x as i, A as r, c as h } from "../index-B6CStnMG.js";
+import { Save as g } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const x = () => {
+  const [a, s] = o(!1);
+  return /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(c, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ToggleBar" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Basic ToggleBar" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            title: "Enable Notifications",
+            checked: a,
+            onChange: () => s(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Subtitle" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            title: "Dark Mode",
+            subTitle: "Switch between light and dark themes",
+            checked: a,
+            onChange: () => s(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Icon" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            title: "Auto Save",
+            subTitle: "Automatically save your work",
+            icon: /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
+            checked: a,
+            onChange: () => s(!a)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Children" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            title: "Advanced Settings",
+            subTitle: "Show advanced configuration options",
+            checked: a,
+            onChange: () => s(!a),
+            children: /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ e(
+              c,
+              {
+                tag: "p",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: "Additional content appears here when toggle is enabled."
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { componentName: "ToggleBar" }),
+    /* @__PURE__ */ e(l, { 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(
+      h,
+      {
+        language: "tsx",
+        code: `import { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';
+
+const [checked, setChecked] = useState(false);
+
+// Basic usage
+<ToggleBar
+  title="Enable Notifications"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With subtitle
+<ToggleBar
+  title="Dark Mode"
+  subTitle="Switch between light and dark themes"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With icon
+<ToggleBar
+  title="Auto Save"
+  icon={<LucideIcons.Save className="w-5 h-5" />}
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+/>
+
+// With children
+<ToggleBar
+  title="Advanced Settings"
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+>
+  <div className="mt-4">
+    <p>Additional content here</p>
+  </div>
+</ToggleBar>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  x as default
+};

package/documentation/TooltipSection-5th4KA-K.js

@@ -0,0 +1,186 @@
+import { jsxs as r, Fragment as c, jsx as t } from "react/jsx-runtime";
+import { T as l, C as a, a as n, _ as e, y as o, P as s, A as p, c as m } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ r(c, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ t(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Tooltip" }),
+    /* @__PURE__ */ t(
+      l,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A portal-based tooltip component that renders above all other DOM elements. Supports configurable placement, arrow, color themes, and delays."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Placement", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+    /* @__PURE__ */ t(e, { content: "Top tooltip", placement: "top", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Top" }) }),
+    /* @__PURE__ */ t(e, { content: "Bottom tooltip", placement: "bottom", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Bottom" }) }),
+    /* @__PURE__ */ t(e, { content: "Left tooltip", placement: "left", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Left" }) }),
+    /* @__PURE__ */ t(e, { content: "Right tooltip", placement: "right", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Right" }) })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Color Themes", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+    /* @__PURE__ */ t(e, { content: "Auto (uses theme mode)", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Auto" }) }),
+    /* @__PURE__ */ t(e, { content: "Dark theme", color: "dark", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Dark" }) }),
+    /* @__PURE__ */ t(e, { content: "Light theme", color: "light", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Light" }) }),
+    /* @__PURE__ */ t(e, { content: "Primary color", color: "primary", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "primary", children: "Primary" }) }),
+    /* @__PURE__ */ t(e, { content: "Success message", color: "success", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "success", children: "Success" }) }),
+    /* @__PURE__ */ t(e, { content: "Info message", color: "info", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "Info" }) }),
+    /* @__PURE__ */ t(e, { content: "Warning message", color: "warning", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "warning", children: "Warning" }) }),
+    /* @__PURE__ */ t(e, { content: "Danger message", color: "danger", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "danger", children: "Danger" }) })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Arrow Options", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+    /* @__PURE__ */ t(e, { content: "With arrow", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "With Arrow" }) }),
+    /* @__PURE__ */ t(e, { content: "Without arrow", arrow: !1, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "No Arrow" }) })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Rich Content", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+    /* @__PURE__ */ t(
+      e,
+      {
+        content: /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ t(l, { tag: "strong", className: "text-xs", children: "Rich Tooltip" }),
+          /* @__PURE__ */ t(l, { tag: "p", className: "text-xs opacity-80", children: "Supports any React node as content." })
+        ] }),
+        placement: "bottom",
+        color: "light",
+        arrow: !0,
+        children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "success", children: "Rich Content" })
+      }
+    ),
+    /* @__PURE__ */ t(e, { content: "Delayed tooltip", enterDelay: 500, arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "warning", children: "500ms Delay" }) })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(a, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Component Integration", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ r(a, { className: "p-4", children: [
+      /* @__PURE__ */ t(l, { tag: "h5", className: "mb-3", children: "Button with tooltip prop" }),
+      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ t(o, { tooltip: "Save changes", tooltipPlacement: "top", children: "Save" }),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tooltip: "Delete item",
+            tooltipPlacement: "bottom",
+            tooltipColor: "light",
+            color: "danger",
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r(a, { className: "p-4", children: [
+      /* @__PURE__ */ t(l, { tag: "h5", className: "mb-3", children: "Typography with tooltip prop" }),
+      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-4 items-center", children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            tag: "span",
+            tooltip: "This is an abbreviation",
+            tooltipPlacement: "top",
+            className: "underline decoration-dotted cursor-help",
+            children: "Hover this text"
+          }
+        ),
+        /* @__PURE__ */ t(
+          l,
+          {
+            tag: "strong",
+            tooltip: "Important information",
+            tooltipPlacement: "right",
+            tooltipColor: "light",
+            children: "Bold with tooltip"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(
+    s,
+    {
+      componentName: "Tooltip",
+      defaultValues: {
+        placement: "top",
+        color: "primary",
+        arrow: !0,
+        disabled: !1,
+        enterDelay: 0,
+        leaveDelay: 100
+      },
+      excludeProps: ["children", "content"],
+      children: (i) => /* @__PURE__ */ t(e, { ...i, content: "Tooltip preview text", children: /* @__PURE__ */ t(o, { children: "Hover me" }) })
+    }
+  ),
+  /* @__PURE__ */ t(p, { componentName: "Tooltip" }),
+  /* @__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(
+    m,
+    {
+      language: "tsx",
+      code: `import { Tooltip, Button, Typography } from '@e-burgos/tucu-ui';
+
+// Standalone Tooltip wrapping any element
+<Tooltip content="Hello!" placement="top" arrow>
+  <Button>Hover me</Button>
+</Tooltip>
+
+// Auto color — adapts to current theme (dark in light mode, light in dark mode)
+<Tooltip content="Auto color">
+  <Button>Auto</Button>
+</Tooltip>
+
+// Semantic color variants
+<Tooltip content="Primary" color="primary" arrow>
+  <Button>Primary</Button>
+</Tooltip>
+<Tooltip content="Success!" color="success" arrow>
+  <Button>Success</Button>
+</Tooltip>
+<Tooltip content="Warning" color="warning" arrow>
+  <Button>Warning</Button>
+</Tooltip>
+<Tooltip content="Danger!" color="danger" arrow>
+  <Button>Danger</Button>
+</Tooltip>
+<Tooltip content="Info" color="info" arrow>
+  <Button>Info</Button>
+</Tooltip>
+
+// Without arrow
+<Tooltip content="No arrow" arrow={false}>
+  <Button>No arrow</Button>
+</Tooltip>
+
+// Rich content
+<Tooltip
+  content={
+    <div>
+      <strong>Title</strong>
+      <p>Description</p>
+    </div>
+  }
+  placement="right"
+  color="light"
+  arrow
+>
+  <Button>Rich</Button>
+</Tooltip>
+
+// Enter delay
+<Tooltip content="Delayed" enterDelay={500} arrow>
+  <Button>500ms delay</Button>
+</Tooltip>
+
+// Built-in tooltip props on Button (with arrow control)
+<Button tooltip="Save" tooltipPlacement="top" tooltipArrow={false}>Save</Button>
+<Button tooltip="Delete" tooltipColor="danger">Delete</Button>
+
+// Built-in tooltip props on Typography
+<Typography tag="span" tooltip="Info" tooltipPlacement="right" tooltipArrow>
+  Hover text
+</Typography>`
+    }
+  ) }) }) })
+] });
+export {
+  v as default
+};