@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/AnchorLinkSection-DMdLIqCp.js

@@ -0,0 +1,65 @@
+import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as i, C as a, a as t, T as r, a9 as o, aa as c, P as m, A as d, c as h } from "../index-19KsCnyX.js";
+import { ExternalLink as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ n(s, { children: [
+  /* @__PURE__ */ e(
+    i,
+    {
+      title: "AnchorLink",
+      description: `A smart link component that automatically handles both internal routes
+          and external URLs.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ n("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ n(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Internal Link" }),
+      /* @__PURE__ */ e(o, { to: "/components", children: "Go to Components" })
+    ] }),
+    /* @__PURE__ */ n(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "External Link" }),
+      /* @__PURE__ */ e(o, { to: c, target: "_blank", children: "External Link" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "AnchorLink",
+      defaultValues: {},
+      excludeProps: ["state", "to"],
+      children: (l) => /* @__PURE__ */ e(o, { ...l, to: "#", children: "Anchor Link Example" })
+    }
+  ),
+  /* @__PURE__ */ e(d, { componentName: "AnchorLink" }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    h,
+    {
+      language: "tsx",
+      code: `import { AnchorLink } from '@e-burgos/tucu-ui';
+
+// Internal link (uses React Router Link)
+<AnchorLink to="/components">
+  Go to Components
+</AnchorLink>
+
+// External link (uses native <a> tag)
+<AnchorLink to="https://example.com" target="_blank">
+  External Link
+</AnchorLink>
+
+// With all Link props
+<AnchorLink
+  to="/about"
+  className="text-blue-500 hover:underline"
+>
+  About Us
+</AnchorLink>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/documentation/ArchitecturalPatternsComparisonSection-Bgp9PUt7.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const s=[{key:"feature",label:"Feature",render:i=>e.jsx(t.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone"},{key:"mfe",label:"MFE"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic)",mfe:"appRoutesConfig (explicit)"},{feature:"Base Path",standalone:"Not required (root /)",mfe:"Required (e.g., /my-app)"},{feature:"Authentication",standalone:"Basic via isPublic",mfe:"isAuthenticated + loginUrl (required)"},{feature:"Nested Routes",standalone:"dropdownItems + enableNestedRoutes",mfe:"Via nested route config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Route Disabling",standalone:"Not supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent per app"},{feature:"Use Case",standalone:"Traditional SPAs",mfe:"Distributed architectures"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Architectural Patterns",description:"Compare Standalone and MFE patterns to choose the right architecture. Both use the same ThemeProvider with TypeScript-enforced discriminated unions.",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-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.GitCompare,{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(t.Typography,{tag:"h2",className:"mb-2",children:"Feature Comparison"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Side-by-side comparison of routing capabilities"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"p-4",children:e.jsx(t.BasicTable,{columns:s,data:r})})}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.Lightbulb,{className:"w-4 h-4 inline mr-2"}),"Both patterns use TypeScript discriminated unions. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Pattern Selection"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Choose the right architecture for your project"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Standalone App",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+// Use Standalone when:
+// ✅ Building a traditional SPA
+// ✅ All routes in one codebase
+// ✅ Want automatic route generation
+// ✅ Simple deployment model
+
+function MyApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}`})})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Micro Frontends (MFE)",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+// Use MFE when:
+// ✅ Multiple teams working independently
+// ✅ Need independent deployments
+// ✅ Require route isolation
+// ✅ Need explicit route control
+
+function MyMfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/my-app"
+      appRoutesConfig={routes}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/login"
+    />
+  );
+}`})})})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Decision Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick guidance for choosing your architecture"})]}),e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-blue-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Start with Standalone"})," if you're unsure — it's simpler and can be migrated to MFE later."]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-purple-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Use MFE from the start"})," if you know you'll need independent deployments or route isolation."]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-green-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Both patterns share"})," the same ThemeProvider, theming, and layout system — only routing differs."]})]})]})})]})]})};exports.default=n;

package/documentation/ArchitecturalPatternsComparisonSection-vYbHlGY-.js

@@ -0,0 +1,182 @@
+import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as d, T as a, C as r, y as c, aj as m, a as n, c as s } from "../index-19KsCnyX.js";
+import { GitCompare as p, Lightbulb as u, ArrowRight as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const S = () => /* @__PURE__ */ t(l, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Architectural Patterns",
+      description: "Compare Standalone and MFE patterns to choose the right architecture. Both use the same ThemeProvider with TypeScript-enforced discriminated unions.",
+      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-indigo-500 via-purple-500 to-pink-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__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Feature Comparison" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Side-by-side comparison of routing capabilities"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
+      c,
+      {
+        columns: [
+          {
+            key: "feature",
+            label: "Feature",
+            render: (o) => /* @__PURE__ */ e(a, { tag: "span", className: "font-medium", children: String(o) })
+          },
+          { key: "standalone", label: "Standalone" },
+          { key: "mfe", label: "MFE" }
+        ],
+        data: [
+          {
+            feature: "Route Configuration",
+            standalone: "menuItems (automatic)",
+            mfe: "appRoutesConfig (explicit)"
+          },
+          {
+            feature: "Base Path",
+            standalone: "Not required (root /)",
+            mfe: "Required (e.g., /my-app)"
+          },
+          {
+            feature: "Authentication",
+            standalone: "Basic via isPublic",
+            mfe: "isAuthenticated + loginUrl (required)"
+          },
+          {
+            feature: "Nested Routes",
+            standalone: "dropdownItems + enableNestedRoutes",
+            mfe: "Via nested route config"
+          },
+          {
+            feature: "Custom Routes",
+            standalone: "Optional customRoutes prop",
+            mfe: "Not available"
+          },
+          {
+            feature: "Route Disabling",
+            standalone: "Not supported",
+            mfe: "Supported via disabled prop"
+          },
+          {
+            feature: "Deployment",
+            standalone: "Single deployment",
+            mfe: "Independent per app"
+          },
+          {
+            feature: "Use Case",
+            standalone: "Traditional SPAs",
+            mfe: "Distributed architectures"
+          }
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ e(m, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      /* @__PURE__ */ e(u, { className: "w-4 h-4 inline mr-2" }),
+      "Both patterns use TypeScript discriminated unions. The",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "architecturalPatterns" }),
+      " ",
+      "prop determines which props are available, preventing configuration errors at compile time."
+    ] }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Pattern Selection" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Choose the right architecture for your project"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { title: "Standalone App", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+// Use Standalone when:
+// ✅ Building a traditional SPA
+// ✅ All routes in one codebase
+// ✅ Want automatic route generation
+// ✅ Simple deployment model
+
+function MyApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}` }) }) }),
+      /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { title: "Micro Frontends (MFE)", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+// Use MFE when:
+// ✅ Multiple teams working independently
+// ✅ Need independent deployments
+// ✅ Require route isolation
+// ✅ Need explicit route control
+
+function MyMfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/my-app"
+      appRoutesConfig={routes}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/login"
+    />
+  );
+}` }) }) })
+    ] })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Decision Guide" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Quick guidance for choosing your architecture"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "p-6 space-y-4", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          /* @__PURE__ */ e("strong", { children: "Start with Standalone" }),
+          " if you're unsure — it's simpler and can be migrated to MFE later."
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-purple-500 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          /* @__PURE__ */ e("strong", { children: "Use MFE from the start" }),
+          " if you know you'll need independent deployments or route isolation."
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          /* @__PURE__ */ e("strong", { children: "Both patterns share" }),
+          " the same ThemeProvider, theming, and layout system — only routing differs."
+        ] })
+      ] })
+    ] }) })
+  ] })
+] });
+export {
+  S as default
+};

package/documentation/ArchitectureOverviewSection-Cw1LKmfg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const t=[{title:"Form Container",description:"Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",icon:e.jsx(s.Box,{className:"w-6 h-6"})},{title:"FormField Wrapper",description:"Connects any input to the form state. Handles registration, error display, and label rendering automatically.",icon:e.jsx(s.Layers,{className:"w-6 h-6"})},{title:"Validation System",description:"Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",icon:e.jsx(s.Shield,{className:"w-6 h-6"})},{title:"Performance",description:"Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",icon:e.jsx(s.Zap,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Architecture Overview",description:"The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",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-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Layers,{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:"Core Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Four architectural layers that compose the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:t.map((r,i)=>e.jsx(a.FeatureCard,{title:r.title,description:r.description,icon:r.icon},i))})]}),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:"Component Tree"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How Form, FormField, and useFormContext relate to each other"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0",children:e.jsx(s.Box,{className:"w-5 h-5 text-blue-600 dark:text-blue-400"})}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-blue-700 dark:text-blue-300",children:"<Form>"}),e.jsxs("div",{className:"flex flex-wrap gap-2 mt-1",children:[e.jsx(a.Badge,{variant:"soft",color:"info",children:"useFormProps"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"validationSchema"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"onSubmit"})]})]})]})}),e.jsx("div",{className:"w-px h-6 bg-gray-300 dark:bg-gray-600"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Layers,{className:"w-4 h-4 text-purple-600 dark:text-purple-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-purple-700 dark:text-purple-300",children:"<FormField>"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.GitBranch,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Controller (react-hook-form)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.AlertCircle,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Error display (automatic)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.TextCursorInput,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsxs(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:["<Input />"," (any input)"]})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2",children:["Input","Select","Checkbox","Switch","Radio"].map(r=>e.jsx(a.Badge,{variant:"outline",color:"primary",children:r},r))})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Link,{className:"w-4 h-4 text-emerald-600 dark:text-emerald-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-emerald-700 dark:text-emerald-300",children:"useFormContext()"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Eye,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"watch, setValue, getValues"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Activity,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"formState: errors, isDirty"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.RotateCcw,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"reset, trigger, clearErrors"})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsxs(a.Badge,{variant:"soft",color:"success",children:[e.jsx(s.Info,{className:"w-3.5 h-3.5"}),"Available in any child component"]})]})]})]})]})]})};exports.default=l;

package/documentation/ArchitectureOverviewSection-D_RmIFCA.js

@@ -0,0 +1,210 @@
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as m, T as r, ax as o, C as l, K as s } from "../index-19KsCnyX.js";
+import { Layers as i, Box as c, GitBranch as h, AlertCircle as p, TextCursorInput as g, Link as x, Eye as u, Activity as f, RotateCcw as y, Info as N, Shield as v, Zap as w } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const I = () => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      title: "Architecture Overview",
+      description: "The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",
+      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-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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: "Core Layers" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Four architectural layers that compose the form system"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+      {
+        title: "Form Container",
+        description: "Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",
+        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6" })
+      },
+      {
+        title: "FormField Wrapper",
+        description: "Connects any input to the form state. Handles registration, error display, and label rendering automatically.",
+        icon: /* @__PURE__ */ e(i, { className: "w-6 h-6" })
+      },
+      {
+        title: "Validation System",
+        description: "Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",
+        icon: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
+      },
+      {
+        title: "Performance",
+        description: "Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",
+        icon: /* @__PURE__ */ e(w, { className: "w-6 h-6" })
+      }
+    ].map((t, n) => /* @__PURE__ */ e(
+      o,
+      {
+        title: t.title,
+        description: t.description,
+        icon: t.icon
+      },
+      n
+    )) })
+  ] }),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Component Tree" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "How Form, FormField, and useFormContext relate to each other"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "h3",
+              className: "font-semibold text-blue-700 dark:text-blue-300",
+              children: "<Form>"
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2 mt-1", children: [
+            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "useFormProps" }),
+            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "validationSchema" }),
+            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "onSubmit" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600" }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl", children: [
+        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(i, { className: "w-4 h-4 text-purple-600 dark:text-purple-400" }) }),
+              /* @__PURE__ */ e(
+                r,
+                {
+                  tag: "h3",
+                  className: "font-semibold text-purple-700 dark:text-purple-300",
+                  children: "<FormField>"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(h, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: "Controller (react-hook-form)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: "Error display (automatic)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(g, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ a(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: [
+                      "<Input />",
+                      " (any input)"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
+          /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-center gap-2", children: ["Input", "Select", "Checkbox", "Switch", "Radio"].map(
+            (t) => /* @__PURE__ */ e(s, { variant: "outline", color: "primary", children: t }, t)
+          ) })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(x, { className: "w-4 h-4 text-emerald-600 dark:text-emerald-400" }) }),
+              /* @__PURE__ */ e(
+                r,
+                {
+                  tag: "h3",
+                  className: "font-semibold text-emerald-700 dark:text-emerald-300",
+                  children: "useFormContext()"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: "watch, setValue, getValues"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: "formState: errors, isDirty"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(y, { className: "w-3.5 h-3.5 text-gray-400" }),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    tag: "span",
+                    className: "text-sm text-gray-600 dark:text-gray-400",
+                    children: "reset, trigger, clearErrors"
+                  }
+                )
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
+          /* @__PURE__ */ a(s, { variant: "soft", color: "success", children: [
+            /* @__PURE__ */ e(N, { className: "w-3.5 h-3.5" }),
+            "Available in any child component"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] })
+] });
+export {
+  I as default
+};

package/documentation/AreaChartSection-CPJSq736.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=[{name:"Jan",users:400,sessions:2400,pageViews:4400},{name:"Feb",users:300,sessions:1398,pageViews:3210},{name:"Mar",users:500,sessions:3800,pageViews:5400},{name:"Apr",users:780,sessions:3908,pageViews:6200},{name:"May",users:890,sessions:4800,pageViews:7100},{name:"Jun",users:1200,sessions:5800,pageViews:9400},{name:"Jul",users:1500,sessions:6300,pageViews:11e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"AreaChart"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Area Chart with Gradient",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],height:300,gradient:!0})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Stacked Area Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users",stackId:"a"},{dataKey:"sessions",name:"Sessions",stackId:"a"},{dataKey:"pageViews",name:"Page Views",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Without Gradient (Flat)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],gradient:!1,curved:!1,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{code:`import { AreaChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', users: 400, sessions: 2400 },
+  { name: 'Feb', users: 300, sessions: 1398 },
+  { name: 'Mar', users: 500, sessions: 3800 },
+];
+
+<AreaChart
+  data={data}
+  series={[
+    { dataKey: 'users', name: 'Users' },
+    { dataKey: 'sessions', name: 'Sessions' },
+  ]}
+  height={300}
+  curved
+  gradient
+  stacked={false}
+  showGrid
+  showTooltip
+  showLegend
+/>`,language:"tsx"})})})}),e.jsx(s.PropPlayground,{componentName:"AreaChart",defaultValues:{height:300,curved:!0,gradient:!0,stacked:!1,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],...r})}),e.jsx(s.AutoPropsTable,{componentName:"AreaChart"})]});exports.default=t;

package/documentation/{AreaChartSection-Dbr8pnJS.js → AreaChartSection-SQjiTBmB.js}

@@ -1,5 +1,5 @@
 import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a, m as t, c as l, P as m, A as c } from "../index-D3gBsvbO.js";
+import { T as n, C as s, a, m as t, c as m, P as l, A as c } from "../index-19KsCnyX.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -14,12 +14,12 @@ const r = [
   { name: "Jul", users: 1500, sessions: 6300, pageViews: 11e3 }
 ], y = () => /* @__PURE__ */ i(o, { children: [
   /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AreaChart" }),
+    /* @__PURE__ */ e(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "AreaChart" }),
     /* @__PURE__ */ e(
       n,
       {
         tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."
       }
     )
@@ -63,7 +63,7 @@ const r = [
     }
   ) }) }) }),
   /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    l,
+    m,
     {
       code: `import { AreaChart } from '@e-burgos/tucu-ui';
 
@@ -91,7 +91,7 @@ const data = [
     }
   ) }) }) }),
   /* @__PURE__ */ e(
-    m,
+    l,
     {
       componentName: "AreaChart",
       defaultValues: {

package/documentation/AuthorCardSection-DPF5SE5r.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
+          and role.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.UserCircle,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>e.jsx(a.AuthorCard,{...t})}),e.jsx(a.AutoPropsTable,{componentName:"AuthorCard"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { AuthorCard } from '@e-burgos/tucu-ui';
+
+// With name and role
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="John Doe"
+  authorRole="Senior Developer"
+/>
+
+// With name only
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="Jane Smith"
+/>
+
+// Avatar only
+<AuthorCard image="/path/to/avatar.jpg" />`})})})})]});exports.default=s;