@e-burgos/tucu-ui 2.0.1 → 2.0.3

package/documentation/ThemeProviderSection-CTuv8EQA.js

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

package/{ToastSection-BkgwANB7.mjs → documentation/ToastSection-DEW_viBi.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-DAzR4tRy.mjs";
+import { a6 as d, T as s, C as a, a as i, r as n, a7 as m, l as p, c as h } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/ToastSection-DxGzUQ0D.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.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/documentation/ToggleBarSection-CYRd5M5m.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, q as i, A as r, c as h } from "../index-DsiBIFwo.js";
+import { Save as g } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const C = () => {
+  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 {
+  C as default
+};

package/documentation/ToggleBarSection-CtsOxytE.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-D874Kozv.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/TooltipSection-Cp-pLWvr.js

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"text-center space-y-4",children:[t.jsx(o.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Tooltip"}),t.jsx(o.Typography,{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."})]}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Placement",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-4",children:[t.jsx(o.Tooltip,{content:"Top tooltip",placement:"top",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Top"})}),t.jsx(o.Tooltip,{content:"Bottom tooltip",placement:"bottom",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Bottom"})}),t.jsx(o.Tooltip,{content:"Left tooltip",placement:"left",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Left"})}),t.jsx(o.Tooltip,{content:"Right tooltip",placement:"right",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Right"})})]})})})}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Color Themes",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-4",children:[t.jsx(o.Tooltip,{content:"Auto (uses theme mode)",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Auto"})}),t.jsx(o.Tooltip,{content:"Dark theme",color:"dark",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Dark"})}),t.jsx(o.Tooltip,{content:"Light theme",color:"light",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",children:"Light"})}),t.jsx(o.Tooltip,{content:"Primary color",color:"primary",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"primary",children:"Primary"})}),t.jsx(o.Tooltip,{content:"Success message",color:"success",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"success",children:"Success"})}),t.jsx(o.Tooltip,{content:"Info message",color:"info",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"info",children:"Info"})}),t.jsx(o.Tooltip,{content:"Warning message",color:"warning",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"warning",children:"Warning"})}),t.jsx(o.Tooltip,{content:"Danger message",color:"danger",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"danger",children:"Danger"})})]})})})}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Arrow Options",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-4",children:[t.jsx(o.Tooltip,{content:"With arrow",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"info",children:"With Arrow"})}),t.jsx(o.Tooltip,{content:"Without arrow",arrow:!1,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"info",children:"No Arrow"})})]})})})}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Rich Content",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-4",children:[t.jsx(o.Tooltip,{content:t.jsxs("div",{className:"space-y-1",children:[t.jsx(o.Typography,{tag:"strong",className:"text-xs",children:"Rich Tooltip"}),t.jsx(o.Typography,{tag:"p",className:"text-xs opacity-80",children:"Supports any React node as content."})]}),placement:"bottom",color:"light",arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"success",children:"Rich Content"})}),t.jsx(o.Tooltip,{content:"Delayed tooltip",enterDelay:500,arrow:!0,children:t.jsx(o.Button,{variant:"ghost",size:"small",color:"warning",children:"500ms Delay"})})]})})})}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Component Integration",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"space-y-4",children:[t.jsxs(o.CardContainer,{className:"p-4",children:[t.jsx(o.Typography,{tag:"h5",className:"mb-3",children:"Button with tooltip prop"}),t.jsxs("div",{className:"flex flex-wrap gap-4",children:[t.jsx(o.Button,{tooltip:"Save changes",tooltipPlacement:"top",children:"Save"}),t.jsx(o.Button,{tooltip:"Delete item",tooltipPlacement:"bottom",tooltipColor:"light",color:"danger",children:"Delete"})]})]}),t.jsxs(o.CardContainer,{className:"p-4",children:[t.jsx(o.Typography,{tag:"h5",className:"mb-3",children:"Typography with tooltip prop"}),t.jsxs("div",{className:"flex flex-wrap gap-4 items-center",children:[t.jsx(o.Typography,{tag:"span",tooltip:"This is an abbreviation",tooltipPlacement:"top",className:"underline decoration-dotted cursor-help",children:"Hover this text"}),t.jsx(o.Typography,{tag:"strong",tooltip:"Important information",tooltipPlacement:"right",tooltipColor:"light",children:"Bold with tooltip"})]})]})]})})})}),t.jsx(o.PropPlayground,{componentName:"Tooltip",defaultValues:{placement:"top",color:"primary",arrow:!0,disabled:!1,enterDelay:0,leaveDelay:100},excludeProps:["children","content"],children:e=>t.jsx(o.Tooltip,{...e,content:"Tooltip preview text",children:t.jsx(o.Button,{children:"Hover me"})})}),t.jsx(o.AutoPropsTable,{componentName:"Tooltip"}),t.jsx(o.CardContainer,{className:"overflow-hidden",children:t.jsx(o.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsx(o.CodeBlock,{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>`})})})})]});exports.default=r;

package/documentation/TooltipSection-TVehrFpU.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, O as e, r as o, s, A as p, c as m } from "../index-DsiBIFwo.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
+};

package/documentation/TopupButtonSection-Be5-YogI.js

@@ -0,0 +1,100 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as l, C as o, a as t, t as c, s as i, A as p, c as r } from "../index-DsiBIFwo.js";
+import { Plus as d, CreditCard as m, Wallet as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const B = () => /* @__PURE__ */ a(n, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "TopupButton" }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A specialized button component for top-up or recharge actions, with support for icons and links."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Topup Button" }),
+      /* @__PURE__ */ e(c, { label: "Add Funds" })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Icon" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Top Up Account",
+          icon: /* @__PURE__ */ e(d, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Link" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Recharge Now",
+          href: "/topup",
+          icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With onClick Handler" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Add Balance",
+          icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+          onClick: () => console.log("Topup clicked")
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    i,
+    {
+      componentName: "TopupButton",
+      defaultValues: { label: "Top Up" },
+      excludeProps: ["onClick", "icon"],
+      children: (s) => /* @__PURE__ */ e(c, { ...s })
+    }
+  ),
+  /* @__PURE__ */ e(p, { componentName: "TopupButton" }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    r,
+    {
+      language: "tsx",
+      code: `import { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<TopupButton label="Add Funds" />
+
+// With icon
+<TopupButton
+  label="Top Up Account"
+  icon={<LucideIcons.Plus className="w-4 h-4" />}
+/>
+
+// With link
+<TopupButton
+  label="Recharge Now"
+  href="/topup"
+  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
+/>
+
+// With onClick handler
+<TopupButton
+  label="Add Balance"
+  icon={<LucideIcons.Wallet className="w-4 h-4" />}
+  onClick={() => handleTopup()}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  B as default
+};

package/documentation/TopupButtonSection-ByokZIdo.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js"),s=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 space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"TopupButton"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A specialized button component for top-up or recharge actions, with support for icons and links."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Topup Button"}),e.jsx(a.TopupButton,{label:"Add Funds"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(a.TopupButton,{label:"Top Up Account",icon:e.jsx(s.Plus,{className:"w-4 h-4"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Link"}),e.jsx(a.TopupButton,{label:"Recharge Now",href:"/topup",icon:e.jsx(s.CreditCard,{className:"w-4 h-4"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With onClick Handler"}),e.jsx(a.TopupButton,{label:"Add Balance",icon:e.jsx(s.Wallet,{className:"w-4 h-4"}),onClick:()=>console.log("Topup clicked")})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"TopupButton",defaultValues:{label:"Top Up"},excludeProps:["onClick","icon"],children:o=>e.jsx(a.TopupButton,{...o})}),e.jsx(a.AutoPropsTable,{componentName:"TopupButton"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<TopupButton label="Add Funds" />
+
+// With icon
+<TopupButton
+  label="Top Up Account"
+  icon={<LucideIcons.Plus className="w-4 h-4" />}
+/>
+
+// With link
+<TopupButton
+  label="Recharge Now"
+  href="/topup"
+  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
+/>
+
+// With onClick handler
+<TopupButton
+  label="Add Balance"
+  icon={<LucideIcons.Wallet className="w-4 h-4" />}
+  onClick={() => handleTopup()}
+/>`})})})})]});exports.default=l;