@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/BestPracticesSection-DvxanX6e.js

@@ -1,151 +0,0 @@
-import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as a, C as n } from "../index-DYDFy1df.js";
-import { CheckCircle as c, Check as h, XCircle as p, X as u, Package as g, HardDrive as x, Zap as y, TreeDeciduous as f } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const C = () => {
-  const r = [
-    "Use LucideIcons namespace for general UI icons (1500+ available)",
-    "Use custom icons for domain-specific needs (crypto, layouts, brands)",
-    "Size icons with Tailwind classes: w-4 h-4, w-5 h-5, w-6 h-6",
-    "Use currentColor via text-* classes for theme-aware coloring",
-    'Add aria-hidden="true" on decorative icons next to text',
-    "Add aria-label on buttons containing only an icon",
-    "Use consistent sizes within the same context (buttons, nav, etc.)",
-    "Prefer className over inline style for sizing and color"
-  ], l = [
-    "Don't import Lucide icons individually — use LucideIcons.* namespace",
-    "Don't mix sizing approaches (className vs size prop) in same project",
-    "Don't use icon-only buttons without aria-label",
-    "Don't use color alone to convey meaning (pair with text or shape)",
-    "Don't hardcode colors with fill/stroke — use Tailwind text-* classes",
-    "Don't import the entire icon set manually — rely on tree-shaking",
-    "Don't use custom Tucu icons when Lucide has an equivalent",
-    "Don't forget hover/focus states on interactive icons"
-  ], o = [
-    {
-      title: "Lucide is External",
-      description: "lucide-react is not bundled inside tucu-ui — your bundler tree-shakes it. Only icons you reference are included.",
-      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-green-500" })
-    },
-    {
-      title: "Custom Icons Are Bundled",
-      description: "All 96 custom icons are always included in the tucu-ui bundle. They are small SVGs (~200B each).",
-      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-blue-500" })
-    },
-    {
-      title: "Avoid Dynamic Imports",
-      description: "Don't lazy-load individual icons. SVGs are tiny and the network overhead outweighs the savings.",
-      icon: /* @__PURE__ */ e(y, { className: "w-5 h-5 text-amber-500" })
-    },
-    {
-      title: "Use Namespace Pattern",
-      description: "LucideIcons.Home is a single import. Your bundler only includes Home, not the entire library.",
-      icon: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-purple-500" })
-    }
-  ];
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Best Practices",
-        description: "Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",
-        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Quick reference for icon best practices"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(c, { className: "w-5 h-5 text-green-500" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "font-semibold text-green-700 dark:text-green-400",
-                children: "Do"
-              }
-            )
-          ] }),
-          r.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: t
-              }
-            )
-          ] }, i))
-        ] }) }),
-        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(p, { className: "w-5 h-5 text-red-500" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "font-semibold text-red-700 dark:text-red-400",
-                children: "Don't"
-              }
-            )
-          ] }),
-          l.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(u, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: t
-              }
-            )
-          ] }, i))
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Performance Tips" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "How the icon system affects bundle size"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((t, i) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          t.icon,
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: t.title })
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: t.description
-          }
-        )
-      ] }) }, i)) })
-    ] })
-  ] });
-};
-export {
-  C as default
-};

package/documentation/BestPracticesSection-fJ-_uwQu.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COp_AWCS.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use semantic HTML elements (button, nav, main, aside, header)","Always provide label prop on Input, Select, and Checkbox","Use helperText to give additional context to form fields","Test with keyboard-only navigation before shipping","Use aria-label when visual label is not possible","Set dismissible={true} on non-critical alerts","Use the correct variant on Alert (info/warning/error/success)","Trust built-in ARIA — components auto-wire roles and attributes"],l=["Don't use div or span for interactive elements — use Button","Don't rely on color alone to convey information","Don't suppress focus outlines (outline-none without replacement)","Don't use aria-label when a visible label exists (duplicates)","Don't auto-play animations without prefers-reduced-motion check","Don't trap focus in elements that shouldn't trap (non-modal)","Don't use placeholder as a substitute for label","Don't disable zoom on mobile viewports"],n=[{title:"Color Contrast",description:"Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",icon:e.jsx(t.Palette,{className:"w-5 h-5 text-purple-500"})},{title:"Focus Order",description:"Ensure Tab order follows visual reading order. Never use positive tabIndex values.",icon:e.jsx(t.ArrowDownUp,{className:"w-5 h-5 text-blue-500"})},{title:"Error Messages",description:"Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",icon:e.jsx(t.AlertCircle,{className:"w-5 h-5 text-red-500"})},{title:"Live Regions",description:'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',icon:e.jsx(t.Bell,{className:"w-5 h-5 text-amber-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ShieldCheck,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for accessible patterns"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Quick Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common accessibility patterns to keep in mind"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((a,r)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[a.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:a.description})]})},r))})]})]})};exports.default=o;

package/documentation/BestPracticesSection-klWNOwRv.js

@@ -1,153 +0,0 @@
-import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { H as h, T as a, C as t, c as l } from "../index-DYDFy1df.js";
-import { ShieldCheck as p, Check as i, X as n, Puzzle as u, Monitor as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => {
-  const c = [
-    "Use useIsMounted to guard async state updates and prevent memory leaks",
-    "Prefer useElementSize over useMeasure for simple width/height tracking",
-    "Leverage generic types: useElementSize<HTMLCanvasElement>()",
-    "Debounce rapid state changes when using useToastStore",
-    "Import only needed hooks for optimal tree-shaking",
-    "Combine useLockBodyScroll with focus management for accessible modals",
-    "Use useEventListener for keyboard navigation instead of inline handlers",
-    "Pass proper event types to useEventListener for type safety",
-    "Use useClickAway with a RefObject for dropdown/popover close behavior",
-    "Call useAnchorScroll once at root level for smooth scroll navigation"
-  ], d = [
-    "Destructure useCopyToClipboard as [value, fn] — it returns [stateObj, fn]",
-    "Forget that useScrollableSlider requires react-router-dom context",
-    "Use useMeasure when you only need width/height — it has more overhead",
-    "Lock body scroll without preserving scrollbar width (useLockBodyScroll handles this)",
-    "Create multiple useToastStore instances — it is a singleton Zustand store",
-    "Ignore the noUserInteraction field in useCopyToClipboard state",
-    "Use useIsMounted as a function — it returns a boolean directly",
-    "Mix up useElementSize ref (callback ref) with useRef (RefObject)",
-    "Hardcode breakpoint pixel values — use useBreakpoint named values instead",
-    "Forget cleanup when using useEventListener with custom elements"
-  ];
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ e(
-      h,
-      {
-        title: "Best Practices",
-        description: "Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",
-        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Recommendations" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Follow these guidelines for robust hook implementations"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(i, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
-          ] }, r)) })
-        ] }) }),
-        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: d.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
-          ] }, r)) })
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Common Patterns" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Recommended hook composition patterns"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Accessible Modal Pattern" })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          l,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `function Modal({ isOpen, onClose, children }) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  
-  // Lock scroll when modal opens
-  useLockBodyScroll(isOpen);
-  
-  // Close on click outside
-  useClickAway(modalRef, onClose);
-  
-  // Close on Escape key
-  useEventListener('keydown', (e) => {
-    if (e.key === 'Escape') onClose();
-  });
-
-  if (!isOpen) return null;
-  return <div ref={modalRef} role="dialog">{children}</div>;
-}`
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Responsive Layout Pattern" })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          l,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `function ResponsiveGrid({ children }) {
-  const { isMobile } = useIsMobile();
-  const { isGridCompact, setIsGridCompact } = useGridSwitcher();
-  const breakpoint = useBreakpoint();
-
-  // Auto-switch to compact on mobile
-  useEffect(() => {
-    if (isMobile && !isGridCompact) {
-      setIsGridCompact(true);
-    }
-  }, [isMobile]);
-
-  const cols = breakpoint === '4xl' ? 6 
-    : breakpoint === '2xl' ? 4 
-    : isGridCompact ? 3 : 2;
-
-  return <div className={\`grid grid-cols-\${cols}\`}>{children}</div>;
-}`
-          }
-        ) })
-      ] }) })
-    ] })
-  ] });
-};
-export {
-  N as default
-};

package/documentation/BestPracticesSection-nvtTMLIJ.js

@@ -1,137 +0,0 @@
-import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { H as d, T as a, C as r } from "../index-DYDFy1df.js";
-import { ShieldCheck as m, CheckCircle as h, Check as p, XCircle as u, X as g, Palette as x, ArrowDownUp as b, AlertCircle as f, Bell as w } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const T = () => {
-  const l = [
-    "Use semantic HTML elements (button, nav, main, aside, header)",
-    "Always provide label prop on Input, Select, and Checkbox",
-    "Use helperText to give additional context to form fields",
-    "Test with keyboard-only navigation before shipping",
-    "Use aria-label when visual label is not possible",
-    "Set dismissible={true} on non-critical alerts",
-    "Use the correct variant on Alert (info/warning/error/success)",
-    "Trust built-in ARIA — components auto-wire roles and attributes"
-  ], n = [
-    "Don't use div or span for interactive elements — use Button",
-    "Don't rely on color alone to convey information",
-    "Don't suppress focus outlines (outline-none without replacement)",
-    "Don't use aria-label when a visible label exists (duplicates)",
-    "Don't auto-play animations without prefers-reduced-motion check",
-    "Don't trap focus in elements that shouldn't trap (non-modal)",
-    "Don't use placeholder as a substitute for label",
-    "Don't disable zoom on mobile viewports"
-  ], o = [
-    {
-      title: "Color Contrast",
-      description: "Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",
-      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-purple-500" })
-    },
-    {
-      title: "Focus Order",
-      description: "Ensure Tab order follows visual reading order. Never use positive tabIndex values.",
-      icon: /* @__PURE__ */ e(b, { className: "w-5 h-5 text-blue-500" })
-    },
-    {
-      title: "Error Messages",
-      description: "Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",
-      icon: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-red-500" })
-    },
-    {
-      title: "Live Regions",
-      description: 'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',
-      icon: /* @__PURE__ */ e(w, { className: "w-5 h-5 text-amber-500" })
-    }
-  ];
-  return /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ e(
-      d,
-      {
-        title: "Best Practices",
-        description: "Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",
-        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ t("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Quick reference for accessible patterns"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(h, { className: "w-5 h-5 text-green-500" }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-green-700 dark:text-green-400", children: "Do" })
-          ] }),
-          l.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(p, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: s
-              }
-            )
-          ] }, i))
-        ] }) }),
-        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(u, { className: "w-5 h-5 text-red-500" }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-red-700 dark:text-red-400", children: "Don't" })
-          ] }),
-          n.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(g, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: s
-              }
-            )
-          ] }, i))
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ t("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Quick Tips" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Common accessibility patterns to keep in mind"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((s, i) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-          s.icon,
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: s.title })
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: s.description
-          }
-        )
-      ] }) }, i)) })
-    ] })
-  ] });
-};
-export {
-  T as default
-};

package/documentation/BorderRadiusSection-BCNMPn6e.js

@@ -1,58 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { H as l, C as i, a as o, T as a } from "../index-DYDFy1df.js";
-import { Circle as n } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = () => /* @__PURE__ */ d("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      title: "Border Radius",
-      description: "Border radius scale using Tailwind arbitrary values for consistent rounded corners.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Border Radius Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries({
-    0: "rounded-[0px]",
-    100: "rounded-[4px]",
-    200: "rounded-[8px]",
-    300: "rounded-[12px]",
-    400: "rounded-[16px]",
-    500: "rounded-[24px]",
-    600: "rounded-[32px]",
-    700: "rounded-[40px]",
-    800: "rounded-[48px]",
-    900: "rounded-[56px]",
-    1e3: "rounded-[100000px]"
-  }).map(
-    ([s, r]) => {
-      const t = r.replace("rounded-[", "").replace("]", "");
-      return /* @__PURE__ */ d(
-        "div",
-        {
-          className: "border border-border rounded-lg p-4 space-y-3",
-          children: [
-            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: s }),
-              /* @__PURE__ */ e(a, { tag: "h4", className: "text-muted text-[10px]", children: t })
-            ] }),
-            /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: `w-20 h-20 bg-primary ${r}` }) }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h4",
-                className: "text-muted text-[9px] break-all px-1 text-center",
-                children: r
-              }
-            )
-          ]
-        },
-        s
-      );
-    }
-  ) }) }) }) })
-] });
-export {
-  f as default
-};

package/documentation/BorderRadiusSection-Cf18TiCF.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-COp_AWCS.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const a={0:"rounded-[0px]",100:"rounded-[4px]",200:"rounded-[8px]",300:"rounded-[12px]",400:"rounded-[16px]",500:"rounded-[24px]",600:"rounded-[32px]",700:"rounded-[40px]",800:"rounded-[48px]",900:"rounded-[56px]",1e3:"rounded-[100000px]"};return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(r.HeroCard,{title:"Border Radius",description:"Border radius scale using Tailwind arbitrary values for consistent rounded corners.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Circle,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Border Radius Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:Object.entries(a).map(([s,d])=>{const i=d.replace("rounded-[","").replace("]","");return e.jsxs("div",{className:"border border-border rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:s}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[10px]",children:i})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:`w-20 h-20 bg-primary ${d}`})}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1 text-center",children:d})]},s)})})})})})]})};exports.default=t;

package/documentation/ButtonDripSection-BEhYR8Ne.js

@@ -1,110 +0,0 @@
-import { jsxs as o, Fragment as n, jsx as t } from "react/jsx-runtime";
-import { H as c, C as l, a as i, T as a, x as e, P as s, A as m, c as d } from "../index-DYDFy1df.js";
-import { MousePointerClick as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => /* @__PURE__ */ o(n, { children: [
-  /* @__PURE__ */ t(
-    c,
-    {
-      title: "ButtonDrip",
-      description: "A button effect component that creates a ripple animation on click.",
-      icon: /* @__PURE__ */ t("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ t(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ o(l, { className: "p-4", children: [
-      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Drip Effect" }),
-      /* @__PURE__ */ t(e, { children: "Click me" })
-    ] }),
-    /* @__PURE__ */ o(l, { className: "p-4", children: [
-      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Tooltip" }),
-      /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ t(e, { tooltip: "Save changes", tooltipPlacement: "top", children: "Top" }),
-        /* @__PURE__ */ t(
-          e,
-          {
-            tooltip: "Delete item",
-            tooltipPlacement: "bottom",
-            tooltipColor: "light",
-            color: "danger",
-            children: "Bottom (light)"
-          }
-        ),
-        /* @__PURE__ */ t(
-          e,
-          {
-            tooltip: "Go back",
-            tooltipPlacement: "left",
-            variant: "ghost",
-            children: "Left"
-          }
-        ),
-        /* @__PURE__ */ t(
-          e,
-          {
-            tooltip: "More info",
-            tooltipPlacement: "right",
-            variant: "ghost",
-            color: "info",
-            children: "Right"
-          }
-        )
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ t(
-    s,
-    {
-      componentName: "Button",
-      defaultValues: {
-        variant: "solid",
-        color: "primary",
-        size: "medium",
-        shape: "rounded",
-        tooltip: "",
-        tooltipPlacement: "top"
-      },
-      excludeProps: [
-        "onClick",
-        "loaderSize",
-        "loaderVariant",
-        "aria-label",
-        "aria-describedby"
-      ],
-      children: (r) => /* @__PURE__ */ t(e, { ...r, children: "Click me" })
-    }
-  ),
-  /* @__PURE__ */ t(m, { componentName: "Button" }),
-  /* @__PURE__ */ t(l, { 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(
-    d,
-    {
-      language: "tsx",
-      code: `import { ButtonDrip } from '@e-burgos/tucu-ui';
-
-// ButtonDrip is typically used internally by Button component
-// It creates a ripple effect when a button is clicked
-
-<ButtonDrip
-  x={50}
-  y={50}
-  color="#3b82f6"
-  fullWidth={false}
-  onCompleted={() => console.log('Animation completed')}
-/>
-
-// Button with tooltip (portal-based, renders above all DOM)
-<Button tooltip="Save changes" tooltipPlacement="top">
-  Save
-</Button>
-
-<Button tooltip="Delete" tooltipPlacement="bottom" tooltipColor="light" color="danger">
-  Delete
-</Button>`
-    }
-  ) }) }) })
-] });
-export {
-  w as default
-};