@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/BestPracticesSection-BhHp4zsd.js

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1 @@
+"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;