@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/BasicUsageSection-wciC808E.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Basic Usage",description:"Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",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.Code,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Step by Step"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three steps to create a fully typed, validated form"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
+  name: string;
+  email: string;
+  password: string;
+  message: string;
+  acceptTerms: boolean;
+  age: number;
+  gender: string;
+  country: string;
+}`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"2. Create Default Values",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Define default values matching your interface. These initialize the form and are used by"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"reset()"}),"."]}),e.jsx(a.CodeBlock,{language:"ts",code:`export const defaultValues: FormValues = {
+  name: '',
+  email: '',
+  password: '',
+  message: '',
+  acceptTerms: false,
+  age: 0,
+  gender: '',
+  country: 'ar',
+};`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"3. Compose the Form",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<Form>"})," ","as the container and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<FormField>"})," ","to wrap each input. FormField handles registration, error display, and labeling."]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Button } from '@e-burgos/tucu-ui';
+
+function ContactForm() {
+  const handleSubmit = (data: FormValues) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form<FormValues>
+      onSubmit={handleSubmit}
+      useFormProps={{
+        defaultValues: defaultValues,
+        mode: 'onChange',
+      }}
+    >
+      <FormField<FormValues> name="name" label="Name">
+        <Input placeholder="Enter your name" />
+      </FormField>
+
+      <FormField<FormValues> name="email" label="Email">
+        <Input type="email" placeholder="Enter your email" />
+      </FormField>
+
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}`})]})})})]})]})]});exports.default=s;

package/documentation/BestPracticesSection-B9oMqKhX.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-19KsCnyX.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-BFNYdJVh.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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;

package/documentation/{BestPracticesSection-D_p0GeS5.js → BestPracticesSection-BIbDXxnD.js}

@@ -1,17 +1,25 @@
 import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { T as a, C as l } from "../index-D3gBsvbO.js";
-import { CheckCircle as m, ArrowRight as c } from "lucide-react";
+import { H as l, T as a, C as m } from "../index-19KsCnyX.js";
+import { Star as c, CheckCircle as d, ArrowRight as p } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const f = () => /* @__PURE__ */ t(n, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Best Practices" }),
+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-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Guidelines for optimal layout system implementation"
       }
     )
@@ -54,16 +62,16 @@ const f = () => /* @__PURE__ */ t(n, { children: [
       ]
     }
   ].map((s, i) => /* @__PURE__ */ e(
-    l,
+    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-gradient-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md", children: /* @__PURE__ */ e(m, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+          /* @__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(c, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
+          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
           /* @__PURE__ */ e(
             a,
             {
@@ -79,5 +87,5 @@ const f = () => /* @__PURE__ */ t(n, { children: [
   )) })
 ] });
 export {
-  f as default
+  x as default
 };

package/documentation/BestPracticesSection-BYBZdfg8.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["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"],n=["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 e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building maintainable, accessible, and type-safe routing configurations.",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 routing"})]}),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:i.map((t,r)=>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:t})]},r))})]})}),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:n.map((t,r)=>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:t})]},r))})]})})]})]})]})};exports.default=o;

package/documentation/BestPracticesSection-BihjJ2QU.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-BrTenNsc.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-19KsCnyX.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-Bsi45c48.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-BwTc9PvE.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=["Use the useTheme hook to access theme state","Utilize built-in color presets for consistency","Test your application in both light and dark modes","Use the settings panel for user customization","Leverage persistent storage for user preferences","Use semantic Tailwind classes (bg-brand, text-secondary)","Respect THEME_STYLE_LAYOUTS constraints when changing layouts"],n=["Directly manipulate CSS custom properties","Hardcode colors that don't adapt to themes","Override theme state without using setters","Ignore RTL support for international apps","Disable all settings without providing alternatives","Use arbitrary hex values instead of design tokens","Assign layouts incompatible with the current theme style"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Recommended patterns and anti-patterns for working with the theme system effectively.",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.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:"Guidelines"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these patterns to keep your theming consistent and maintainable"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Do's",children:e.jsx("ul",{className:"space-y-2",children:i.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Don'ts",children:e.jsx("ul",{className:"space-y-2",children:n.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})})]})]})]})};exports.default=l;

package/documentation/BestPracticesSection-CdqrTgh6.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=[{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"]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Best Practices",description:"Guidelines for optimal layout system implementation and common 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(s.Star,{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("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Best Practices"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Guidelines for optimal layout system implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:i.map((a,r)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md",children:e.jsx(s.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category})]}),e.jsx("ul",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-primary mt-0.5 shrink-0"}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},n))})]})},r))})]})};exports.default=l;

package/documentation/BestPracticesSection-D3PLwaiL.js

@@ -0,0 +1,61 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as m, T as r, C as i, a as n } from "../index-19KsCnyX.js";
+import { ShieldCheck as d, Check as h, X as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => {
+  const l = [
+    "Use the useTheme hook to access theme state",
+    "Utilize built-in color presets for consistency",
+    "Test your application in both light and dark modes",
+    "Use the settings panel for user customization",
+    "Leverage persistent storage for user preferences",
+    "Use semantic Tailwind classes (bg-brand, text-secondary)",
+    "Respect THEME_STYLE_LAYOUTS constraints when changing layouts"
+  ], o = [
+    "Directly manipulate CSS custom properties",
+    "Hardcode colors that don't adapt to themes",
+    "Override theme state without using setters",
+    "Ignore RTL support for international apps",
+    "Disable all settings without providing alternatives",
+    "Use arbitrary hex values instead of design tokens",
+    "Assign layouts incompatible with the current theme style"
+  ];
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Best Practices",
+        description: "Recommended patterns and anti-patterns for working with the theme system effectively.",
+        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(d, { 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(r, { tag: "h2", className: "mb-2", children: "Guidelines" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Follow these patterns to keep your theming consistent and maintainable"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Do's", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
+        ] }, a)) }) }) }),
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Don'ts", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: o.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
+        ] }, a)) }) }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  N as default
+};

package/documentation/BestPracticesSection-D9x1gLFW.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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;