@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/LiveDemonstrationsSection-BB_ccb5S.js

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("../index-VrMogvDN.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const P=()=>{const[d,f]=r.useState("Hello, World!"),[m,w]=s.useCopyToClipboard(),[i,o]=r.useState(!1),[x,g]=r.useState(!1),[k,p]=r.useState(""),[T,y]=r.useState("Checking..."),u=s.useBreakpoint(),{isMobile:j}=s.useIsMobile(),{addToast:n}=s.useToastStore(),{isGridCompact:c,setIsGridCompact:C}=s.useGridSwitcher(),{x:S,y:M}=s.useWindowScroll(),N=s.useIsMounted(),b=r.useRef(null),[B,{width:I,height:L}]=s.useElementSize(),[R,v]=s.useMeasure(),{sliderEl:z,sliderPrevBtn:E,sliderNextBtn:W,scrollToTheRight:$,scrollToTheLeft:D}=s.useScrollableSlider("/");s.useLockBodyScroll(i),s.useClickAway(b,()=>{g(!1)}),s.useEventListener("keydown",a=>{p(a.key),setTimeout(()=>p(""),1e3)}),r.useEffect(()=>{y(N?"Component is mounted":"Component is not mounted")},[N]);const G=()=>{w(d),n({id:`copy-${Date.now()}`,title:"Copied!",message:`Copied "${d}" to clipboard`,variant:"success"})},q=()=>{const a=!c;C(a),n({id:`layout-${Date.now()}`,title:"Layout Changed",message:`Switched to ${a?"Compact":"Normal"} layout`,variant:"info"})},l=(a="success")=>{n({id:`toast-${Date.now()}`,title:"Test Toast",message:`This is a ${a} toast notification`,variant:a,timeout:3e3})},O=Array.from({length:10},(a,h)=>({id:h+1,title:`Item ${h+1}`,content:`Content for item ${h+1}`}));return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Live Hook Demonstrations"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Interactive examples showing hooks in action"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 shadow-lg",children:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Responsive Detection"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Real-time breakpoint detection and mobile state tracking."}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useBreakpoint"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:u})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"Resize your window to see changes"})]})]}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMobile"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Is Mobile:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:j?"Yes":"No"})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"True for xs, sm, md breakpoints"})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`
-const breakpoint = useBreakpoint();
-const { isMobile } = useIsMobile();
-// Current: ${u}, Mobile: ${j}`})})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg",children:e.jsx(t.Ruler,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Element Measurement"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track element dimensions and bounds in real-time."}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useElementSize"}),e.jsxs("div",{ref:B,className:"bg-blue-100 dark:bg-blue-800 p-4 rounded-lg border-2 border-dashed border-blue-300 dark:border-blue-600 resize overflow-auto min-h-[100px]",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Resize this element (drag corner)"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Size: ",Math.round(I)," ×"," ",Math.round(L),"px"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure"}),e.jsxs("div",{ref:R,className:"bg-cyan-100 dark:bg-cyan-800 p-4 rounded-lg border-2 border-dashed border-cyan-300 dark:border-cyan-600 min-h-[100px]",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Measured element"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Bounds: ",Math.round(v.width)," ×"," ",Math.round(v.height),"px"]})]})]})]})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-lg",children:e.jsx(t.MousePointer,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"User Interaction"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Interactive demonstrations of click detection and clipboard operations."}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useClickAway"}),e.jsxs("div",{className:"relative",ref:b,children:[e.jsxs(s.Button,{onClick:()=>g(!x),variant:"ghost",className:"w-full",children:[e.jsx(t.ChevronDown,{className:"w-4 h-4 mr-2"}),"Click to open dropdown"]}),x&&e.jsx("div",{className:"absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border rounded-lg shadow-lg p-4 z-10",children:e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Click outside to close this dropdown"})})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useCopyToClipboard"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{type:"text",value:d,onChange:a=>f(a.target.value),className:"w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-600",placeholder:"Enter text to copy"}),e.jsxs(s.Button,{onClick:G,className:"w-full",children:[e.jsx(t.Copy,{className:"w-4 h-4 mr-2"}),"Copy to Clipboard"]}),m&&e.jsxs(s.Typography,{tag:"p",className:"text-sm text-green-600 dark:text-green-400",children:["✓ Copied: ",String(m)]})]})]})]})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg",children:e.jsx(t.Settings,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"UI State Management"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Global state management for UI behaviors and notifications."}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useGridSwitcher"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current layout:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:c?"Compact":"Normal"})]}),e.jsxs(s.Button,{onClick:q,variant:"ghost",className:"w-full",children:[e.jsx(t.LayoutGrid,{className:"w-4 h-4 mr-2"}),"Switch to ",c?"Normal":"Compact"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useToastStore"}),e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsx(s.Button,{color:"success",fullWidth:!0,onClick:()=>l("success"),children:"Success"}),e.jsx(s.Button,{color:"danger",fullWidth:!0,onClick:()=>l("destructive"),children:"Error"}),e.jsx(s.Button,{color:"warning",fullWidth:!0,onClick:()=>l("warning"),children:"Warning"}),e.jsx(s.Button,{color:"info",fullWidth:!0,onClick:()=>l("info"),children:"Info"})]})]})]})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg",children:e.jsx(t.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Advanced Utilities"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Advanced hooks for complex UI behaviors and interactions."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useScrollableSlider"}),e.jsxs("div",{className:"relative",children:[e.jsx("button",{ref:E,onClick:D,className:"absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md opacity-0 invisible transition-opacity",children:e.jsx(t.ChevronLeft,{className:"w-4 h-4"})}),e.jsx("div",{ref:z,className:"flex gap-4 overflow-x-auto scrollbar-hide py-4",children:O.map(a=>e.jsxs("div",{className:"shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h6",className:"font-medium mb-2",children:a.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:a.content})]},a.id))}),e.jsx("button",{ref:W,onClick:$,className:"absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md transition-opacity",children:e.jsx(t.ChevronRight,{className:"w-4 h-4"})})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useEventListener"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Press any key to see event detection:"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Last key:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:k||"None"})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useWindowScroll"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Current scroll position:"}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:"X:"}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:[Math.round(S),"px"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:"Y:"}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:[Math.round(M),"px"]})]})]})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useLockBodyScroll"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs(s.Button,{onClick:()=>o(!0),variant:"ghost",children:[e.jsx(t.Lock,{className:"w-4 h-4 mr-2"}),"Open Modal (Locks Scroll)"]}),e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Body scroll is ",i?"locked":"unlocked"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMounted"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Component mount status:"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Status:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:T})]})]})]})]})]})})]}),i&&e.jsx("div",{className:"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",children:e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Modal with Locked Scroll"}),e.jsx("button",{onClick:()=>o(!1),className:"text-gray-500 hover:text-gray-700",children:e.jsx(t.X,{className:"w-5 h-5"})})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"While this modal is open, body scrolling is locked using the useLockBodyScroll hook. The scrollbar width is preserved to prevent layout shift."}),e.jsx(s.Button,{onClick:()=>o(!1),className:"w-full",children:"Close Modal"})]})})]})};exports.default=P;

package/documentation/LiveDemonstrationsSection-DRB4N92_.js

@@ -1,445 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as i, useRef as X, useEffect as Y } from "react";
-import { aw as F, ax as J, ay as K, ai as V, az as Z, aA as _, aB as q, aC as Q, aD as ee, aE as ae, aF as te, aG as se, aH as re, T as t, C as d, J as l, c as le, y as r } from "../index-D3gBsvbO.js";
-import { Monitor as ie, Ruler as de, MousePointer as oe, ChevronDown as ne, Copy as ce, Settings as me, LayoutGrid as he, Zap as ge, ChevronLeft as pe, ChevronRight as ue, Lock as xe, X as Ne } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const Ce = () => {
-  const [n, S] = i("Hello, World!"), [u, M] = F(), [c, m] = i(!1), [x, N] = i(!1), [T, b] = i(""), [I, y] = i("Checking..."), v = J(), { isMobile: f } = K(), { addToast: h } = V(), { isGridCompact: g, setIsGridCompact: L } = Z(), { x: B, y: z } = _(), w = q(), k = X(null), [E, { width: R, height: D }] = Q(), [W, C] = ee(), {
-    sliderEl: $,
-    sliderPrevBtn: G,
-    sliderNextBtn: A,
-    scrollToTheRight: O,
-    scrollToTheLeft: P
-  } = ae("/");
-  te(c), se(k, () => {
-    N(!1);
-  }), re("keydown", (s) => {
-    b(s.key), setTimeout(() => b(""), 1e3);
-  }), Y(() => {
-    y(w ? "Component is mounted" : "Component is not mounted");
-  }, [w]);
-  const U = () => {
-    M(n), h({
-      id: `copy-${Date.now()}`,
-      title: "Copied!",
-      message: `Copied "${n}" to clipboard`,
-      variant: "success"
-    });
-  }, j = () => {
-    const s = !g;
-    L(s), h({
-      id: `layout-${Date.now()}`,
-      title: "Layout Changed",
-      message: `Switched to ${s ? "Compact" : "Normal"} layout`,
-      variant: "info"
-    });
-  }, o = (s = "success") => {
-    h({
-      id: `toast-${Date.now()}`,
-      title: "Test Toast",
-      message: `This is a ${s} toast notification`,
-      variant: s,
-      timeout: 3e3
-    });
-  }, H = Array.from({ length: 10 }, (s, p) => ({
-    id: p + 1,
-    title: `Item ${p + 1}`,
-    content: `Content for item ${p + 1}`
-  }));
-  return /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Live Hook Demonstrations" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Interactive examples showing hooks in action"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(ie, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Responsive Detection" })
-        ] }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Real-time breakpoint detection and mobile state tracking." }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useBreakpoint" }),
-            /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Current:" }),
-                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: v })
-              ] }),
-              /* @__PURE__ */ e(t, { tag: "p", className: "text-xs text-gray-500", children: "Resize your window to see changes" })
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useIsMobile" }),
-            /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Is Mobile:" }),
-                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: f ? "Yes" : "No" })
-              ] }),
-              /* @__PURE__ */ e(t, { tag: "p", className: "text-xs text-gray-500", children: "True for xs, sm, md breakpoints" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
-          le,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `
-const breakpoint = useBreakpoint();
-const { isMobile } = useIsMobile();
-// Current: ${v}, Mobile: ${f}`
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(de, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Element Measurement" })
-        ] }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Track element dimensions and bounds in real-time." }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useElementSize" }),
-            /* @__PURE__ */ a(
-              "div",
-              {
-                ref: E,
-                className: "bg-blue-100 dark:bg-blue-800 p-4 rounded-lg border-2 border-dashed border-blue-300 dark:border-blue-600 resize overflow-auto min-h-[100px]",
-                children: [
-                  /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Resize this element (drag corner)" }),
-                  /* @__PURE__ */ a(
-                    t,
-                    {
-                      tag: "p",
-                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
-                      children: [
-                        "Size: ",
-                        Math.round(R),
-                        " ×",
-                        " ",
-                        Math.round(D),
-                        "px"
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useMeasure" }),
-            /* @__PURE__ */ a(
-              "div",
-              {
-                ref: W,
-                className: "bg-cyan-100 dark:bg-cyan-800 p-4 rounded-lg border-2 border-dashed border-cyan-300 dark:border-cyan-600 min-h-[100px]",
-                children: [
-                  /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Measured element" }),
-                  /* @__PURE__ */ a(
-                    t,
-                    {
-                      tag: "p",
-                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
-                      children: [
-                        "Bounds: ",
-                        Math.round(C.width),
-                        " ×",
-                        " ",
-                        Math.round(C.height),
-                        "px"
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(oe, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "User Interaction" })
-        ] }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Interactive demonstrations of click detection and clipboard operations." }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useClickAway" }),
-            /* @__PURE__ */ a("div", { className: "relative", ref: k, children: [
-              /* @__PURE__ */ a(
-                r,
-                {
-                  onClick: () => N(!x),
-                  variant: "ghost",
-                  className: "w-full",
-                  children: [
-                    /* @__PURE__ */ e(ne, { className: "w-4 h-4 mr-2" }),
-                    "Click to open dropdown"
-                  ]
-                }
-              ),
-              x && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border rounded-lg shadow-lg p-4 z-10", children: /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Click outside to close this dropdown" }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useCopyToClipboard" }),
-            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ e(
-                "input",
-                {
-                  type: "text",
-                  value: n,
-                  onChange: (s) => S(s.target.value),
-                  className: "w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-600",
-                  placeholder: "Enter text to copy"
-                }
-              ),
-              /* @__PURE__ */ a(r, { onClick: U, className: "w-full", children: [
-                /* @__PURE__ */ e(ce, { className: "w-4 h-4 mr-2" }),
-                "Copy to Clipboard"
-              ] }),
-              u && /* @__PURE__ */ a(
-                t,
-                {
-                  tag: "p",
-                  className: "text-sm text-green-600 dark:text-green-400",
-                  children: [
-                    "✓ Copied: ",
-                    String(u)
-                  ]
-                }
-              )
-            ] })
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(me, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "UI State Management" })
-        ] }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Global state management for UI behaviors and notifications." }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useGridSwitcher" }),
-            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Current layout:" }),
-                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: g ? "Compact" : "Normal" })
-              ] }),
-              /* @__PURE__ */ a(
-                r,
-                {
-                  onClick: j,
-                  variant: "ghost",
-                  className: "w-full",
-                  children: [
-                    /* @__PURE__ */ e(he, { className: "w-4 h-4 mr-2" }),
-                    "Switch to ",
-                    g ? "Normal" : "Compact"
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useToastStore" }),
-            /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ e(
-                r,
-                {
-                  color: "success",
-                  fullWidth: !0,
-                  onClick: () => o("success"),
-                  children: "Success"
-                }
-              ),
-              /* @__PURE__ */ e(
-                r,
-                {
-                  color: "danger",
-                  fullWidth: !0,
-                  onClick: () => o("destructive"),
-                  children: "Error"
-                }
-              ),
-              /* @__PURE__ */ e(
-                r,
-                {
-                  color: "warning",
-                  fullWidth: !0,
-                  onClick: () => o("warning"),
-                  children: "Warning"
-                }
-              ),
-              /* @__PURE__ */ e(
-                r,
-                {
-                  color: "info",
-                  fullWidth: !0,
-                  onClick: () => o("info"),
-                  children: "Info"
-                }
-              )
-            ] })
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg", children: /* @__PURE__ */ e(ge, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Advanced Utilities" })
-        ] }),
-        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Advanced hooks for complex UI behaviors and interactions." }),
-        /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider" }),
-            /* @__PURE__ */ a("div", { className: "relative", children: [
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  ref: G,
-                  onClick: P,
-                  className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md opacity-0 invisible transition-opacity",
-                  children: /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  ref: $,
-                  className: "flex gap-4 overflow-x-auto scrollbar-hide py-4",
-                  children: H.map((s) => /* @__PURE__ */ a(
-                    "div",
-                    {
-                      className: "shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",
-                      children: [
-                        /* @__PURE__ */ e(t, { tag: "h6", className: "font-medium mb-2", children: s.title }),
-                        /* @__PURE__ */ e(
-                          t,
-                          {
-                            tag: "p",
-                            className: "text-sm text-gray-600 dark:text-gray-400",
-                            children: s.content
-                          }
-                        )
-                      ]
-                    },
-                    s.id
-                  ))
-                }
-              ),
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  ref: A,
-                  onClick: O,
-                  className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md transition-opacity",
-                  children: /* @__PURE__ */ e(ue, { className: "w-4 h-4" })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-            /* @__PURE__ */ a("div", { children: [
-              /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useEventListener" }),
-              /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
-                /* @__PURE__ */ e(t, { tag: "p", className: "text-sm mb-2", children: "Press any key to see event detection:" }),
-                /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Last key:" }),
-                  /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: T || "None" })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ a("div", { children: [
-              /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useWindowScroll" }),
-              /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
-                /* @__PURE__ */ e(t, { tag: "p", className: "text-sm mb-2", children: "Current scroll position:" }),
-                /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: "X:" }),
-                    /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
-                      Math.round(B),
-                      "px"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Y:" }),
-                    /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
-                      Math.round(z),
-                      "px"
-                    ] })
-                  ] })
-                ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useLockBodyScroll" }),
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ a(r, { onClick: () => m(!0), variant: "ghost", children: [
-                /* @__PURE__ */ e(xe, { className: "w-4 h-4 mr-2" }),
-                "Open Modal (Locks Scroll)"
-              ] }),
-              /* @__PURE__ */ a(
-                t,
-                {
-                  tag: "p",
-                  className: "text-sm text-gray-600 dark:text-gray-400",
-                  children: [
-                    "Body scroll is ",
-                    c ? "locked" : "unlocked"
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useIsMounted" }),
-            /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
-              /* @__PURE__ */ e(t, { tag: "p", className: "text-sm mb-2", children: "Component mount status:" }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Status:" }),
-                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: I })
-              ] })
-            ] })
-          ] })
-        ] })
-      ] }) })
-    ] }),
-    c && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold", children: "Modal with Locked Scroll" }),
-        /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: () => m(!1),
-            className: "text-gray-500 hover:text-gray-700",
-            children: /* @__PURE__ */ e(Ne, { className: "w-5 h-5" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-gray-600 dark:text-gray-400 mb-4",
-          children: "While this modal is open, body scrolling is locked using the useLockBodyScroll hook. The scrollbar width is preserved to prevent layout shift."
-        }
-      ),
-      /* @__PURE__ */ e(r, { onClick: () => m(!1), className: "w-full", children: "Close Modal" })
-    ] }) })
-  ] });
-};
-export {
-  Ce as default
-};

package/documentation/LivePriceFeedSection-Dc-WTk58.js

@@ -1,20 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const i=[{name:1,value:45e3},{name:2,value:45200},{name:3,value:44800},{name:4,value:45100},{name:5,value:45300}];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:"LivePriceFeed"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Real-time price display with integrated chart visualization for cryptocurrency price tracking."})]}),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:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Chart"}),e.jsx(a.LivePriceFeed,{id:"bitcoin",name:"Bitcoin",symbol:"BTC",icon:e.jsx(a.Bitcoin,{className:"w-6 h-6"}),balance:"1.25",usdBalance:"45,000",change:"+2.5%",isChangePositive:!0,prices:i})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Negative Change"}),e.jsx(a.LivePriceFeed,{id:"ethereum",name:"Ethereum",symbol:"ETH",icon:e.jsx(a.Ethereum,{className:"w-6 h-6"}),balance:"5.5",usdBalance:"16,500",change:"-1.8%",isChangePositive:!1,prices:[{name:1,value:3e3},{name:2,value:2950},{name:3,value:2980},{name:4,value:2920},{name:5,value:2900}]})]})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"LivePriceFeed"}),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 { LivePriceFeed } from '@e-burgos/tucu-ui';
-
-const priceData = [
-  { name: 1, value: 45000 },
-  { name: 2, value: 45200 },
-  { name: 3, value: 44800 },
-  { name: 4, value: 45100 },
-];
-
-<LivePriceFeed
-  id="bitcoin"
-  name="Bitcoin"
-  symbol="BTC"
-  icon={<Bitcoin />}
-  balance="1.25"
-  usdBalance="45,000"
-  change="+2.5%"
-  isChangePositive={true}
-  prices={priceData}
-/>`})})})})]})};exports.default=s;

package/documentation/LivePriceFeedSection-j_73wZas.js

@@ -1,97 +0,0 @@
-import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { T as i, C as c, a as l, L as t, B as n, E as r, A as m, c as o } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "LivePriceFeed" }),
-    /* @__PURE__ */ e(
-      i,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Real-time price display with integrated chart visualization for cryptocurrency price tracking."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { 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(c, { className: "p-4", children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Chart" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          id: "bitcoin",
-          name: "Bitcoin",
-          symbol: "BTC",
-          icon: /* @__PURE__ */ e(n, { className: "w-6 h-6" }),
-          balance: "1.25",
-          usdBalance: "45,000",
-          change: "+2.5%",
-          isChangePositive: !0,
-          prices: [
-            { name: 1, value: 45e3 },
-            { name: 2, value: 45200 },
-            { name: 3, value: 44800 },
-            { name: 4, value: 45100 },
-            { name: 5, value: 45300 }
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a(c, { className: "p-4", children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Negative Change" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          id: "ethereum",
-          name: "Ethereum",
-          symbol: "ETH",
-          icon: /* @__PURE__ */ e(r, { className: "w-6 h-6" }),
-          balance: "5.5",
-          usdBalance: "16,500",
-          change: "-1.8%",
-          isChangePositive: !1,
-          prices: [
-            { name: 1, value: 3e3 },
-            { name: 2, value: 2950 },
-            { name: 3, value: 2980 },
-            { name: 4, value: 2920 },
-            { name: 5, value: 2900 }
-          ]
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(m, { componentName: "LivePriceFeed" }),
-  /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    o,
-    {
-      language: "tsx",
-      code: `import { LivePriceFeed } from '@e-burgos/tucu-ui';
-
-const priceData = [
-  { name: 1, value: 45000 },
-  { name: 2, value: 45200 },
-  { name: 3, value: 44800 },
-  { name: 4, value: 45100 },
-];
-
-<LivePriceFeed
-  id="bitcoin"
-  name="Bitcoin"
-  symbol="BTC"
-  icon={<Bitcoin />}
-  balance="1.25"
-  usdBalance="45,000"
-  change="+2.5%"
-  isChangePositive={true}
-  prices={priceData}
-/>`
-    }
-  ) }) }) })
-] });
-export {
-  N as default
-};

package/documentation/LoaderSection-BQiBqcx7.js

@@ -1,22 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>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:"Loader"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A versatile loader component with multiple animation variants and sizes for indicating loading states."})]}),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:"Default Loader"}),e.jsx(a.Loader,{})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Small Loader"}),e.jsx(a.Loader,{size:"small"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Large Loader"}),e.jsx(a.Loader,{size:"large"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Three Dots Only"}),e.jsx(a.Loader,{showOnlyThreeDots:!0})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Blink Variant"}),e.jsx(a.Loader,{variant:"blink"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Scale Up Variant"}),e.jsx(a.Loader,{variant:"scaleUp"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Move Up Variant"}),e.jsx(a.Loader,{variant:"moveUp"})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Loader",defaultValues:{variant:"moveUp",size:"medium",color:"primary",showOnlyThreeDots:!1,tag:"div"},excludeProps:[],children:r=>e.jsx(a.Loader,{...r})}),e.jsx(a.AutoPropsTable,{componentName:"Loader"}),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 { Loader } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Loader />
-
-// Different sizes
-<Loader size="small" />
-<Loader size="medium" />
-<Loader size="large" />
-
-// Different variants
-<Loader variant="blink" />
-<Loader variant="scaleUp" />
-<Loader variant="moveUp" />
-
-// Different colors
-<Loader color="primary" />
-<Loader color="success" />
-<Loader color="danger" />
-
-// Three dots only
-<Loader showOnlyThreeDots />`})})})})]});exports.default=s;