@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/AdvancedColorSystemSection-CcXCp_R4.js

@@ -0,0 +1,181 @@
+import { jsxs as e, Fragment as i, jsx as a } from "react/jsx-runtime";
+import { H as d, T as r, C as o, a as c, c as s } from "../index-19KsCnyX.js";
+import { Layers as n } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const m = [
+  {
+    layer: "Primary",
+    description: "Primary brand identity color",
+    variable: "--color-semantic-bg-primary",
+    default: "#0052ff (DEFAULT_PRIMARY)"
+  },
+  {
+    layer: "Dark Primary",
+    description: "Primary color for dark mode",
+    variable: "--color-semantic-dark-bg-primary",
+    default: "#578bfa (DEFAULT_DARK_PRIMARY)"
+  },
+  {
+    layer: "Secondary",
+    description: "Supporting color for accents",
+    variable: "--color-semantic-bg-secondary",
+    default: "#f3f4f6 (DEFAULT_SECONDARY)"
+  },
+  {
+    layer: "Dark Secondary",
+    description: "Secondary color for dark mode",
+    variable: "--color-semantic-dark-bg-secondary",
+    default: "#172131 (DEFAULT_DARK_SECONDARY)"
+  },
+  {
+    layer: "Accent",
+    description: "Highlight color for actions",
+    variable: "--color-semantic-accent-bold-yellow",
+    default: "#f7d21a (DEFAULT_ACCENT)"
+  },
+  {
+    layer: "Dark Accent",
+    description: "Accent color for dark mode",
+    variable: "--color-semantic-dark-accent-bold-yellow",
+    default: "#936000 (DEFAULT_DARK_ACCENT)"
+  },
+  {
+    layer: "Muted",
+    description: "Muted text color",
+    variable: "--color-semantic-fg-muted",
+    default: "#4a5565 (DEFAULT_MUTED)"
+  },
+  {
+    layer: "Dark Muted",
+    description: "Muted text color for dark mode",
+    variable: "--color-semantic-dark-fg-muted",
+    default: "#828a99 (DEFAULT_DARK_MUTED)"
+  },
+  {
+    layer: "Dark Background",
+    description: "Dark theme base color",
+    variable: "--color-semantic-dark-bg",
+    default: "#030712 (DEFAULT_DARK_BG)"
+  },
+  {
+    layer: "Light Background",
+    description: "Light theme base color",
+    variable: "--color-semantic-bg",
+    default: "#ffffff (DEFAULT_LIGHT_BG)"
+  },
+  {
+    layer: "Light Dark",
+    description: "Light theme secondary background",
+    variable: "--color-semantic-bg-secondary-wash",
+    default: "#f9fafb (DEFAULT_LIGHT_DARK)"
+  },
+  {
+    layer: "Dark Light Dark",
+    description: "Dark theme secondary background",
+    variable: "--color-semantic-dark-bg-secondary-wash",
+    default: "#0a101d (DEFAULT_DARK_LIGHT_DARK)"
+  }
+], h = () => /* @__PURE__ */ e(i, { children: [
+  /* @__PURE__ */ a(
+    d,
+    {
+      title: "Advanced Color System",
+      description: "Multi-layered color architecture with 12 semantic variables controlling every surface and foreground in your application.",
+      icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ e("div", { className: "text-center", children: [
+      /* @__PURE__ */ a(r, { tag: "h2", className: "mb-2", children: "Color Layers" }),
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "12 semantic color variables organized in light/dark pairs"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { children: /* @__PURE__ */ a(c, { title: "All Color Variables", children: /* @__PURE__ */ a("div", { className: "space-y-3", children: m.map((t, l) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ a(r, { tag: "h5", className: "font-semibold text-sm", children: t.layer }),
+            /* @__PURE__ */ a(
+              r,
+              {
+                tag: "code",
+                className: "text-xs text-gray-500 dark:text-gray-400",
+                children: t.variable
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(
+            r,
+            {
+              tag: "p",
+              className: "text-sm text-gray-600 dark:text-gray-400 mb-1",
+              children: t.description
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "p",
+              className: "text-xs text-gray-500 dark:text-gray-500",
+              children: [
+                "Default: ",
+                t.default
+              ]
+            }
+          )
+        ]
+      },
+      l
+    )) }) }) })
+  ] }),
+  /* @__PURE__ */ e("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ e("div", { className: "text-center", children: [
+      /* @__PURE__ */ a(r, { tag: "h2", className: "mb-2", children: "CSS Variable Mapping" }),
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "How design tokens map to Tailwind utilities"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { children: /* @__PURE__ */ a(c, { title: "Variable → Utility Mapping", children: /* @__PURE__ */ a(
+      s,
+      {
+        language: "css",
+        expanded: !1,
+        code: `/* Theme colors are available via CSS variables */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-accent-bold-yellow: var(--color-tucu-ui-yellow-30);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+
+/* Tailwind utilities */
+.bg-brand        /* Uses --color-semantic-bg-primary */
+.text-brand      /* Uses --color-semantic-bg-primary */
+.bg-secondary    /* Uses --color-semantic-bg-secondary */
+.text-muted      /* Uses --color-semantic-fg-muted */
+
+/* Opacity support */
+.bg-brand/50     /* 50% opacity */
+.text-brand/80   /* 80% opacity */
+.border-brand/30 /* 30% opacity */`
+      }
+    ) }) })
+  ] })
+] });
+export {
+  h as default
+};

package/documentation/AdvancedColorSystemSection-ClZP9L76.js

@@ -0,0 +1,17 @@
+"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 c=[{layer:"Primary",description:"Primary brand identity color",variable:"--color-semantic-bg-primary",default:"#0052ff (DEFAULT_PRIMARY)"},{layer:"Dark Primary",description:"Primary color for dark mode",variable:"--color-semantic-dark-bg-primary",default:"#578bfa (DEFAULT_DARK_PRIMARY)"},{layer:"Secondary",description:"Supporting color for accents",variable:"--color-semantic-bg-secondary",default:"#f3f4f6 (DEFAULT_SECONDARY)"},{layer:"Dark Secondary",description:"Secondary color for dark mode",variable:"--color-semantic-dark-bg-secondary",default:"#172131 (DEFAULT_DARK_SECONDARY)"},{layer:"Accent",description:"Highlight color for actions",variable:"--color-semantic-accent-bold-yellow",default:"#f7d21a (DEFAULT_ACCENT)"},{layer:"Dark Accent",description:"Accent color for dark mode",variable:"--color-semantic-dark-accent-bold-yellow",default:"#936000 (DEFAULT_DARK_ACCENT)"},{layer:"Muted",description:"Muted text color",variable:"--color-semantic-fg-muted",default:"#4a5565 (DEFAULT_MUTED)"},{layer:"Dark Muted",description:"Muted text color for dark mode",variable:"--color-semantic-dark-fg-muted",default:"#828a99 (DEFAULT_DARK_MUTED)"},{layer:"Dark Background",description:"Dark theme base color",variable:"--color-semantic-dark-bg",default:"#030712 (DEFAULT_DARK_BG)"},{layer:"Light Background",description:"Light theme base color",variable:"--color-semantic-bg",default:"#ffffff (DEFAULT_LIGHT_BG)"},{layer:"Light Dark",description:"Light theme secondary background",variable:"--color-semantic-bg-secondary-wash",default:"#f9fafb (DEFAULT_LIGHT_DARK)"},{layer:"Dark Light Dark",description:"Dark theme secondary background",variable:"--color-semantic-dark-bg-secondary-wash",default:"#0a101d (DEFAULT_DARK_LIGHT_DARK)"}],i=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Color System",description:"Multi-layered color architecture with 12 semantic variables controlling every surface and foreground in your application.",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-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.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:"Color Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"12 semantic color variables organized in light/dark pairs"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"All Color Variables",children:e.jsx("div",{className:"space-y-3",children:c.map((r,t)=>e.jsxs("div",{className:"p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm",children:r.layer}),e.jsx(a.Typography,{tag:"code",className:"text-xs text-gray-500 dark:text-gray-400",children:r.variable})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-1",children:r.description}),e.jsxs(a.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-500",children:["Default: ",r.default]})]},t))})})})]}),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:"CSS Variable Mapping"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How design tokens map to Tailwind utilities"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Variable → Utility Mapping",children:e.jsx(a.CodeBlock,{language:"css",expanded:!1,code:`/* Theme colors are available via CSS variables */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-accent-bold-yellow: var(--color-tucu-ui-yellow-30);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+
+/* Tailwind utilities */
+.bg-brand        /* Uses --color-semantic-bg-primary */
+.text-brand      /* Uses --color-semantic-bg-primary */
+.bg-secondary    /* Uses --color-semantic-bg-secondary */
+.text-muted      /* Uses --color-semantic-fg-muted */
+
+/* Opacity support */
+.bg-brand/50     /* 50% opacity */
+.text-brand/80   /* 80% opacity */
+.border-brand/30 /* 30% opacity */`})})})]})]});exports.default=i;

package/documentation/AdvancedFeaturesSection-DTklgMJa.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 a=()=>{const o=[{icon:e.jsx(t.Globe,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"RTL/LTR Support",description:"Full right-to-left language support with automatic layout mirroring via the useDirection hook.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(t.Save,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Persistent Settings",description:"Automatic localStorage integration using Zustand persist middleware (key: theme-storage).",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Route,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Custom Routes",description:"Advanced routing via customRoutes prop or setCurrentPathname for dynamic navigation.",iconBgClassName:"from-orange-500 to-red-500"},{icon:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Theme Styles",description:"Switch between default, macOS Sonoma, and macOS Tahoe visual styles at runtime.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(t.LayoutGrid,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Layout Constraints",description:"THEME_STYLE_LAYOUTS enforces valid layout combinations per theme style automatically.",iconBgClassName:"from-cyan-500 to-teal-500"},{icon:e.jsx(t.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Scheme Presets",description:"The colorScheme state exposes the active palette for conditional styling logic.",iconBgClassName:"from-pink-500 to-rose-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Advanced Features",description:"Powerful capabilities for complex theming scenarios — from RTL support to constrained layout systems.",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(t.Sparkles,{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:"Feature Overview"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Additional theme system capabilities beyond basic configuration"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map(i=>e.jsx(s.FeatureCard,{layout:"vertical",...i},i.title))})]})]})};exports.default=a;

package/documentation/AdvancedFeaturesSection-DZsIzQM1.js

@@ -0,0 +1,70 @@
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as s, T as a, ax as r } from "../index-19KsCnyX.js";
+import { Sparkles as l, Globe as m, Save as n, Route as c, Monitor as d, LayoutGrid as h, Palette as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ t(i, { children: [
+  /* @__PURE__ */ e(
+    s,
+    {
+      title: "Advanced Features",
+      description: "Powerful capabilities for complex theming scenarios — from RTL support to constrained layout systems.",
+      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(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__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Feature Overview" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Additional theme system capabilities beyond basic configuration"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "RTL/LTR Support",
+        description: "Full right-to-left language support with automatic layout mirroring via the useDirection hook.",
+        iconBgClassName: "from-blue-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(n, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Persistent Settings",
+        description: "Automatic localStorage integration using Zustand persist middleware (key: theme-storage).",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Custom Routes",
+        description: "Advanced routing via customRoutes prop or setCurrentPathname for dynamic navigation.",
+        iconBgClassName: "from-orange-500 to-red-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Theme Styles",
+        description: "Switch between default, macOS Sonoma, and macOS Tahoe visual styles at runtime.",
+        iconBgClassName: "from-purple-500 to-violet-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Layout Constraints",
+        description: "THEME_STYLE_LAYOUTS enforces valid layout combinations per theme style automatically.",
+        iconBgClassName: "from-cyan-500 to-teal-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Color Scheme Presets",
+        description: "The colorScheme state exposes the active palette for conditional styling logic.",
+        iconBgClassName: "from-pink-500 to-rose-500"
+      }
+    ].map((o) => /* @__PURE__ */ e(r, { layout: "vertical", ...o }, o.title)) })
+  ] })
+] });
+export {
+  v as default
+};

package/documentation/AdvancedFeaturesSection-DeodzomR.js

@@ -0,0 +1,32 @@
+"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 t=()=>{const i=[{title:"Conditional Fields",description:"Show/hide fields based on other values using watch(). Validation adapts dynamically when fields appear or disappear.",icon:e.jsx(o.GitBranch,{className:"w-6 h-6"})},{title:"Custom Validation",description:"Use the validate option for async server-side checks, cross-field validation, or complex business rules.",icon:e.jsx(o.Zap,{className:"w-6 h-6"})},{title:"Form State Access",description:"Real-time access to isDirty, isValid, errors, touchedFields via useFormContext from any child component.",icon:e.jsx(o.Eye,{className:"w-6 h-6"})},{title:"Programmatic Control",description:"Set values, trigger validation, reset forms, and clear errors programmatically from anywhere in the tree.",icon:e.jsx(o.Settings,{className:"w-6 h-6"})},{title:"Validation Modes",description:"Choose when validation triggers: onChange (real-time), onBlur (on field exit), onSubmit (only on submit), or all.",icon:e.jsx(o.Clock,{className:"w-6 h-6"})},{title:"Error Customization",description:"FormField auto-displays errors, but you can hide them with hideError and render custom error UI using formState.errors.",icon:e.jsx(o.AlertTriangle,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Features",description:"Patterns for complex form scenarios: conditional fields, async validation, programmatic control, and custom error handling — all powered by react-hook-form via tucu-ui.",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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Sparkles,{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:"Capabilities"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Advanced patterns available through the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map((s,r)=>e.jsx(a.FeatureCard,{title:s.title,description:s.description,icon:s.icon},r))})]}),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:"Conditional Fields Example"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Show/hide fields based on form values using watch + useFormContext"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Select, useFormContext } from '@e-burgos/tucu-ui';
+
+function ConditionalForm() {
+  return (
+    <Form<FormValues> onSubmit={handleSubmit} useFormProps={{ defaultValues }}>
+      <FormField name="hasCompany" label="Do you have a company?">
+        <Select options={[
+          { name: 'Yes', value: 'yes' },
+          { name: 'No', value: 'no' },
+        ]} />
+      </FormField>
+      
+      {/* Conditional field rendered via watch */}
+      <CompanyField />
+      
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+
+function CompanyField() {
+  const { watch } = useFormContext<FormValues>();
+  const hasCompany = watch('hasCompany');
+
+  if (hasCompany !== 'yes') return null;
+
+  return (
+    <FormField name="companyName" label="Company Name" rules={{ required: 'Required' }}>
+      <Input placeholder="Enter company name" />
+    </FormField>
+  );
+}`})})})]})]})};exports.default=t;

package/documentation/AdvancedFeaturesSection-dp4NWt73.js

@@ -0,0 +1,117 @@
+import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { H as s, T as o, ax as n, C as l, c as d } from "../index-19KsCnyX.js";
+import { Sparkles as m, GitBranch as c, Zap as h, Eye as u, Settings as p, Clock as g, AlertTriangle as y } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const S = () => /* @__PURE__ */ a(r, { children: [
+  /* @__PURE__ */ e(
+    s,
+    {
+      title: "Advanced Features",
+      description: "Patterns for complex form scenarios: conditional fields, async validation, programmatic control, and custom error handling — all powered by react-hook-form via tucu-ui.",
+      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-pink-500 via-rose-500 to-red-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(o, { tag: "h2", className: "mb-2", children: "Capabilities" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Advanced patterns available through the form system"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        title: "Conditional Fields",
+        description: "Show/hide fields based on other values using watch(). Validation adapts dynamically when fields appear or disappear.",
+        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6" })
+      },
+      {
+        title: "Custom Validation",
+        description: "Use the validate option for async server-side checks, cross-field validation, or complex business rules.",
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6" })
+      },
+      {
+        title: "Form State Access",
+        description: "Real-time access to isDirty, isValid, errors, touchedFields via useFormContext from any child component.",
+        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6" })
+      },
+      {
+        title: "Programmatic Control",
+        description: "Set values, trigger validation, reset forms, and clear errors programmatically from anywhere in the tree.",
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6" })
+      },
+      {
+        title: "Validation Modes",
+        description: "Choose when validation triggers: onChange (real-time), onBlur (on field exit), onSubmit (only on submit), or all.",
+        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6" })
+      },
+      {
+        title: "Error Customization",
+        description: "FormField auto-displays errors, but you can hide them with hideError and render custom error UI using formState.errors.",
+        icon: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
+      }
+    ].map((t, i) => /* @__PURE__ */ e(
+      n,
+      {
+        title: t.title,
+        description: t.description,
+        icon: t.icon
+      },
+      i
+    )) })
+  ] }),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Conditional Fields Example" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Show/hide fields based on form values using watch + useFormContext"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { language: "tsx", code: `import { Form, FormField, Input, Select, useFormContext } from '@e-burgos/tucu-ui';
+
+function ConditionalForm() {
+  return (
+    <Form<FormValues> onSubmit={handleSubmit} useFormProps={{ defaultValues }}>
+      <FormField name="hasCompany" label="Do you have a company?">
+        <Select options={[
+          { name: 'Yes', value: 'yes' },
+          { name: 'No', value: 'no' },
+        ]} />
+      </FormField>
+      
+      {/* Conditional field rendered via watch */}
+      <CompanyField />
+      
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+
+function CompanyField() {
+  const { watch } = useFormContext<FormValues>();
+  const hasCompany = watch('hasCompany');
+
+  if (hasCompany !== 'yes') return null;
+
+  return (
+    <FormField name="companyName" label="Company Name" rules={{ required: 'Required' }}>
+      <Input placeholder="Enter company name" />
+    </FormField>
+  );
+}` }) }) })
+  ] })
+] });
+export {
+  S as default
+};

package/documentation/AlertSection-C8JxRieS.js

@@ -0,0 +1,96 @@
+import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { H as c, C as r, a as l, T as s, aj as i, P as m, A as o, c as d } from "../index-19KsCnyX.js";
+import { AlertCircle as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ a(t, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Alert",
+      description: `An alert component for displaying important messages and notifications
+          with different variants and dismissible functionality.`,
+      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-red-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Info Alert" }),
+      /* @__PURE__ */ e(i, { variant: "info", children: /* @__PURE__ */ e(s, { tag: "p", children: "This is an informational message." }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Success Alert" }),
+      /* @__PURE__ */ e(i, { variant: "success", children: /* @__PURE__ */ e(s, { tag: "p", children: "Operation completed successfully!" }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Warning Alert" }),
+      /* @__PURE__ */ e(i, { variant: "warning", children: /* @__PURE__ */ e(s, { tag: "p", children: "Please review this information carefully." }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Error Alert" }),
+      /* @__PURE__ */ e(i, { variant: "error", children: /* @__PURE__ */ e(s, { tag: "p", children: "An error occurred. Please try again." }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Dismissible Alert" }),
+      /* @__PURE__ */ e(i, { variant: "info", dismissible: !0, children: /* @__PURE__ */ e(s, { tag: "p", children: "This alert can be dismissed." }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom onDismiss" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          variant: "success",
+          onDismiss: () => console.log("Alert dismissed"),
+          children: /* @__PURE__ */ e(s, { tag: "p", children: "This alert has a custom dismiss handler." })
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "Alert",
+      defaultValues: { variant: "info", dismissible: !0 },
+      excludeProps: ["onDismiss", "aria-label"],
+      children: (n) => /* @__PURE__ */ e(i, { ...n, children: "This is an alert message for the playground preview." })
+    }
+  ),
+  /* @__PURE__ */ e(o, { componentName: "Alert" }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      language: "tsx",
+      code: `import { Alert, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Alert variant="info">
+  <Typography tag="p">This is an informational message.</Typography>
+</Alert>
+
+// Different variants
+<Alert variant="info">Info message</Alert>
+<Alert variant="success">Success message</Alert>
+<Alert variant="warning">Warning message</Alert>
+<Alert variant="error">Error message</Alert>
+
+// Non-dismissible
+<Alert variant="info" dismissible={false}>
+  <Typography tag="p">Cannot be dismissed</Typography>
+</Alert>
+
+// With custom dismiss handler
+<Alert
+  variant="success"
+  onDismiss={() => handleDismiss()}
+>
+  <Typography tag="p">Custom dismiss handler</Typography>
+</Alert>`
+    }
+  ) }) }) })
+] });
+export {
+  v as default
+};

package/documentation/AlertSection-CqhX5i16.js

@@ -0,0 +1,26 @@
+"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 i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Alert",description:`An alert component for displaying important messages and notifications
+          with different variants and dismissible functionality.`,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-red-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.AlertCircle,{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(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Info Alert"}),e.jsx(s.Alert,{variant:"info",children:e.jsx(s.Typography,{tag:"p",children:"This is an informational message."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Success Alert"}),e.jsx(s.Alert,{variant:"success",children:e.jsx(s.Typography,{tag:"p",children:"Operation completed successfully!"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Warning Alert"}),e.jsx(s.Alert,{variant:"warning",children:e.jsx(s.Typography,{tag:"p",children:"Please review this information carefully."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Error Alert"}),e.jsx(s.Alert,{variant:"error",children:e.jsx(s.Typography,{tag:"p",children:"An error occurred. Please try again."})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Dismissible Alert"}),e.jsx(s.Alert,{variant:"info",dismissible:!0,children:e.jsx(s.Typography,{tag:"p",children:"This alert can be dismissed."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom onDismiss"}),e.jsx(s.Alert,{variant:"success",onDismiss:()=>console.log("Alert dismissed"),children:e.jsx(s.Typography,{tag:"p",children:"This alert has a custom dismiss handler."})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"Alert",defaultValues:{variant:"info",dismissible:!0},excludeProps:["onDismiss","aria-label"],children:r=>e.jsx(s.Alert,{...r,children:"This is an alert message for the playground preview."})}),e.jsx(s.AutoPropsTable,{componentName:"Alert"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Alert, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Alert variant="info">
+  <Typography tag="p">This is an informational message.</Typography>
+</Alert>
+
+// Different variants
+<Alert variant="info">Info message</Alert>
+<Alert variant="success">Success message</Alert>
+<Alert variant="warning">Warning message</Alert>
+<Alert variant="error">Error message</Alert>
+
+// Non-dismissible
+<Alert variant="info" dismissible={false}>
+  <Typography tag="p">Cannot be dismissed</Typography>
+</Alert>
+
+// With custom dismiss handler
+<Alert
+  variant="success"
+  onDismiss={() => handleDismiss()}
+>
+  <Typography tag="p">Custom dismiss handler</Typography>
+</Alert>`})})})})]});exports.default=i;

package/documentation/AnchorLinkSection-Cnh7qsTW.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(n.HeroCard,{title:"AnchorLink",description:`A smart link component that automatically handles both internal routes
+          and external URLs.`,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-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ExternalLink,{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(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.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(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"Internal Link"}),e.jsx(n.AnchorLink,{to:"/components",children:"Go to Components"})]}),e.jsxs(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"External Link"}),e.jsx(n.AnchorLink,{to:n.GITHUB_URL,target:"_blank",children:"External Link"})]})]})})})}),e.jsx(n.PropPlayground,{componentName:"AnchorLink",defaultValues:{},excludeProps:["state","to"],children:r=>e.jsx(n.AnchorLink,{...r,to:"#",children:"Anchor Link Example"})}),e.jsx(n.AutoPropsTable,{componentName:"AnchorLink"}),e.jsx(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(n.CodeBlock,{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>`})})})})]});exports.default=s;