@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/BasicUsageSection-C04Vk4Xo.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.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-gray-300 dark:border-gray-600 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-gray-300 dark:border-gray-600 rounded text-xs",children:"<Form>"})," ","as the container and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 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/BasicUsageSection-D_OADsjB.js

@@ -0,0 +1,147 @@
+import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as d, T as r, C as t, a as s, c as o } from "../index-lfg6LZ1p.js";
+import { Code as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const F = () => /* @__PURE__ */ a(l, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      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: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Step by Step" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+        s,
+        {
+          title: "1. Define Form Values Interface",
+          className: "mt-2 mb-2",
+          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+            /* @__PURE__ */ e(
+              r,
+              {
+                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."
+              }
+            ),
+            /* @__PURE__ */ e(o, { language: "tsx", code: `export interface FormValues {
+  name: string;
+  email: string;
+  password: string;
+  message: string;
+  acceptTerms: boolean;
+  age: number;
+  gender: string;
+  country: string;
+}` })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+        s,
+        {
+          title: "2. Create Default Values",
+          className: "mt-2 mb-2",
+          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+            /* @__PURE__ */ a(
+              r,
+              {
+                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",
+                  " ",
+                  /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "reset()" }),
+                  "."
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(o, { language: "ts", code: `export const defaultValues: FormValues = {
+  name: '',
+  email: '',
+  password: '',
+  message: '',
+  acceptTerms: false,
+  age: 0,
+  gender: '',
+  country: 'ar',
+};` })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+        s,
+        {
+          title: "3. Compose the Form",
+          className: "mt-2 mb-2",
+          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+            /* @__PURE__ */ a(
+              r,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: [
+                  "Use",
+                  " ",
+                  /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "<Form>" }),
+                  " ",
+                  "as the container and",
+                  " ",
+                  /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "<FormField>" }),
+                  " ",
+                  "to wrap each input. FormField handles registration, error display, and labeling."
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(o, { 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>
+  );
+}` })
+          ] })
+        }
+      ) })
+    ] })
+  ] })
+] });
+export {
+  F as default
+};

package/documentation/{BestPracticesSection-CScYzan3.js → BestPracticesSection-41CW61J-.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-B919yoKU.js";
-import { CheckCircle as m, ArrowRight as c } from "lucide-react";
+import { H as l, T as a, C as m } from "../index-lfg6LZ1p.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-4oonl6Xs.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-lfg6LZ1p.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-BJUyOw5K.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-lfg6LZ1p.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-BiznpoaJ.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-lfg6LZ1p.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-BklrYpDV.js

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