@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/BestPracticesSection-BhHp4zsd.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 t, C as i } from "../index-DoxeCFUJ.js";
-import { CheckCircle as l, Check as h, XCircle as p, X as f, Zap as u, Timer as g, Eye as x, Layers as y } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const D = () => {
-  const o = [
-    "Always define a TypeScript interface for your form values",
-    "Use generic types: Form<FormValues>, FormField<FormValues>",
-    "Prefer centralized validationSchema for consistency",
-    "Provide clear, user-friendly error messages",
-    'Use mode: "onBlur" for large forms (fewer re-renders)',
-    'Use mode: "onChange" when real-time feedback is needed',
-    "Always add labels for accessibility (FormField label prop)",
-    "Use reset() to clear forms after successful submission"
-  ], n = [
-    "Don't use uncontrolled inputs outside FormField — they won't register",
-    "Don't call setValue without shouldValidate: true if you need instant feedback",
-    "Don't put useFormContext in a component outside Form — it will crash",
-    "Don't mix controlled and uncontrolled patterns in the same field",
-    "Don't use watch() for values you only read on submit — use getValues() instead",
-    "Don't forget defaultValues — required for reset() and initial state",
-    "Don't validate on every keystroke for complex async checks — use debounce",
-    "Don't skip FormField for inputs that need error display"
-  ], c = [
-    {
-      title: "Isolated Re-renders",
-      description: "react-hook-form only re-renders the field that changed, not the whole form. This is automatic.",
-      icon: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-amber-500" })
-    },
-    {
-      title: "Use onBlur Mode",
-      description: 'For forms with 10+ fields, mode: "onBlur" validates only when the user leaves a field, reducing re-renders.',
-      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-blue-500" })
-    },
-    {
-      title: "Avoid watch() Overuse",
-      description: "Each watch() call subscribes to re-renders. Use getValues() for one-time reads in handlers.",
-      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-purple-500" })
-    },
-    {
-      title: "Split Large Forms",
-      description: "For wizard/multi-step flows, split into multiple Form instances or conditional sections.",
-      icon: /* @__PURE__ */ e(y, { className: "w-5 h-5 text-green-500" })
-    }
-  ];
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Best Practices",
-        description: "Guidelines for building performant, accessible, and maintainable forms with the tucu-ui form system.",
-        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(l, { 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(t, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Quick reference for form development"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-        /* @__PURE__ */ e(i, { 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(l, { className: "w-5 h-5 text-green-500" }),
-            /* @__PURE__ */ e(
-              t,
-              {
-                tag: "h3",
-                className: "font-semibold text-green-700 dark:text-green-400",
-                children: "Do"
-              }
-            )
-          ] }),
-          o.map((a, r) => /* @__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(
-              t,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: a
-              }
-            )
-          ] }, r))
-        ] }) }),
-        /* @__PURE__ */ e(i, { 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(
-              t,
-              {
-                tag: "h3",
-                className: "font-semibold text-red-700 dark:text-red-400",
-                children: "Don't"
-              }
-            )
-          ] }),
-          n.map((a, r) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(f, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              t,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: a
-              }
-            )
-          ] }, r))
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Performance Tips" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "How to keep forms fast as they grow in complexity"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: c.map((a, r) => /* @__PURE__ */ e(i, { 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: [
-          a.icon,
-          /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold", children: a.title })
-        ] }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: a.description
-          }
-        )
-      ] }) }, r)) })
-    ] })
-  ] });
-};
-export {
-  D as default
-};

package/documentation/BestPracticesSection-BjJJEr21.js

@@ -1,91 +0,0 @@
-import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as l, T as a, C as m } from "../index-DoxeCFUJ.js";
-import { Star as c, CheckCircle as d, ArrowRight as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => /* @__PURE__ */ t(n, { children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      title: "Best Practices",
-      description: "Guidelines for optimal layout system implementation and common 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__ */ t("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Best Practices" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        tag: "p",
-        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Guidelines for optimal layout system implementation"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-    {
-      category: "Layout Selection",
-      items: [
-        "Admin: Use for complex applications with many navigation items and sidebar menus",
-        "Horizontal: Use for content-focused sites and simple applications with top navigation",
-        "Clean: Use for authentication flows, landing pages, and standalone content"
-      ]
-    },
-    {
-      category: "ThemeProvider Setup",
-      items: [
-        "Always wrap your application with ThemeProvider before using layouts",
-        "Provide menuItems prop for Admin and Horizontal layouts",
-        "Use layout prop to control which layout is rendered",
-        "Theme settings are automatically persisted to localStorage"
-      ]
-    },
-    {
-      category: "Responsive Design",
-      items: [
-        "Always test layouts on mobile devices",
-        "Use provided breakpoint system for responsive behavior",
-        "Consider touch interactions for mobile navigation",
-        "Admin layout automatically shows drawer on mobile"
-      ]
-    },
-    {
-      category: "Accessibility",
-      items: [
-        "Provide meaningful menu item names",
-        "Use semantic HTML structure",
-        "Test keyboard navigation",
-        "Ensure proper color contrast in all themes",
-        "Support RTL/LTR for international users"
-      ]
-    }
-  ].map((s, i) => /* @__PURE__ */ e(
-    m,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ t("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-md", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: s.category })
-        ] }),
-        /* @__PURE__ */ e("ul", { className: "space-y-2", children: s.items.map((r, o) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
-          /* @__PURE__ */ e(
-            a,
-            {
-              tag: "span",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: r
-            }
-          )
-        ] }, o)) })
-      ] })
-    },
-    i
-  )) })
-] });
-export {
-  x as default
-};

package/documentation/BestPracticesSection-C-w5FwtZ.js

@@ -1,79 +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 r } from "../index-DoxeCFUJ.js";
-import { ShieldCheck as h, Check as n, X as o } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => {
-  const l = [
-    "Use descriptive route names and paths",
-    "Keep route hierarchy shallow (max 2-3 levels)",
-    "Use consistent naming conventions across routes",
-    "Leverage TypeScript for type-safe route definitions",
-    "Use useMemo for dynamic route generation",
-    "Include icons for better navigation UX",
-    "Test routes with different user roles and permissions",
-    "Use basePath for MFE applications",
-    "Provide isAuthenticated and loginUrl in MFE mode",
-    "Use enableNestedRoutes when child components need internal routing"
-  ], c = [
-    "Create overly deep nesting (>3 levels)",
-    'Use generic names like "Page" or "Component"',
-    "Hardcode paths in components — use ReactRouter hooks",
-    "Forget to handle 404 pages with customRoutes",
-    "Mix routing logic with business logic",
-    "Skip accessibility considerations in navigation",
-    "Ignore mobile navigation UX patterns",
-    "Mix Standalone and MFE props in the same ThemeProvider",
-    "Import directly from react-router-dom — use ReactRouter namespace",
-    "Use StandaloneAppThemeProvider directly — use ThemeProvider"
-  ];
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Best Practices",
-        description: "Guidelines for building maintainable, accessible, and type-safe routing configurations.",
-        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(h, { 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 routing"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ e(r, { 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(n, { 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: l.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
-          ] }, i)) })
-        ] }) }),
-        /* @__PURE__ */ e(r, { 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(o, { 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: c.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(o, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
-          ] }, i)) })
-        ] }) })
-      ] })
-    ] })
-  ] });
-};
-export {
-  x as default
-};

package/documentation/BestPracticesSection-C0CfdYdW.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-DoxeCFUJ.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-Coso4hou.js

@@ -1,34 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const o=["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"],i=["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 e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",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(a.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:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust hook implementations"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",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 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:o.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})})]})]}),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:"Common Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Recommended hook composition patterns"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-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-indigo-500 to-purple-500 shadow-lg",children:e.jsx(a.Puzzle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Accessible Modal Pattern"})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{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>;
-}`})})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-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 to-cyan-500 shadow-lg",children:e.jsx(a.Monitor,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Responsive Layout Pattern"})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{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>;
-}`})})]})})]})]})};exports.default=l;

package/documentation/BestPracticesSection-CuLnMSUm.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Always define a TypeScript interface for your form values","Use generic types: Form<FormValues>, FormField<FormValues>","Prefer centralized validationSchema for consistency","Provide clear, user-friendly error messages",'Use mode: "onBlur" for large forms (fewer re-renders)','Use mode: "onChange" when real-time feedback is needed',"Always add labels for accessibility (FormField label prop)","Use reset() to clear forms after successful submission"],l=["Don't use uncontrolled inputs outside FormField — they won't register","Don't call setValue without shouldValidate: true if you need instant feedback","Don't put useFormContext in a component outside Form — it will crash","Don't mix controlled and uncontrolled patterns in the same field","Don't use watch() for values you only read on submit — use getValues() instead","Don't forget defaultValues — required for reset() and initial state","Don't validate on every keystroke for complex async checks — use debounce","Don't skip FormField for inputs that need error display"],n=[{title:"Isolated Re-renders",description:"react-hook-form only re-renders the field that changed, not the whole form. This is automatic.",icon:e.jsx(r.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use onBlur Mode",description:'For forms with 10+ fields, mode: "onBlur" validates only when the user leaves a field, reducing re-renders.',icon:e.jsx(r.Timer,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid watch() Overuse",description:"Each watch() call subscribes to re-renders. Use getValues() for one-time reads in handlers.",icon:e.jsx(r.Eye,{className:"w-5 h-5 text-purple-500"})},{title:"Split Large Forms",description:"For wizard/multi-step flows, split into multiple Form instances or conditional sections.",icon:e.jsx(r.Layers,{className:"w-5 h-5 text-green-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building performant, accessible, and maintainable forms with the tucu-ui form system.",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(r.CheckCircle,{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 form development"})]}),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(r.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((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.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:t})]},a))]})}),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(r.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((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.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:t})]},a))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How to keep forms fast as they grow in complexity"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((t,a)=>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:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},a))})]})]})};exports.default=o;

package/documentation/BestPracticesSection-D1TzGwt4.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{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"],n=["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"],c=[{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:e.jsx(a.Package,{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:e.jsx(a.HardDrive,{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:e.jsx(a.Zap,{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:e.jsx(a.TreeDeciduous,{className:"w-5 h-5 text-purple-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",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(a.CheckCircle,{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 icon best practices"})]}),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(a.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"})]}),r.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.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:t})]},i))]})}),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(a.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"})]}),n.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.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:t})]},i))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How the icon system affects bundle size"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:c.map((t,i)=>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:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},i))})]})]})};exports.default=l;