@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/UsageExamplesSection-D-ai2y1j.js

@@ -0,0 +1,150 @@
+import { jsxs as s, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as n, T as o, C as t, c as r } from "../index-lfg6LZ1p.js";
+import { Code as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ s(i, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Usage Examples",
+      description: "Practical code examples for using both icon systems. Covers imports, sizing, dynamic rendering, and accessibility 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-orange-500 via-amber-500 to-yellow-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__ */ s("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ s("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Code Patterns" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Common icon usage patterns with full code examples"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        title: "Lucide Icons (Namespace)",
+        description: "Access 1500+ icons via LucideIcons.* dot notation. Supports className, size, color, and strokeWidth props.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div className="flex gap-4">
+      {/* Sizing via className (Tailwind) */}
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+
+      {/* Sizing via size prop (Lucide-specific) */}
+      <LucideIcons.User size={24} color="currentColor" />
+
+      {/* Custom stroke width */}
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+
+      {/* Color via Tailwind class */}
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`
+      },
+      {
+        title: "Custom Tucu Icons (Named Exports)",
+        description: "Import 96 custom icons as named exports. Use className with Tailwind utilities for sizing and color.",
+        code: `import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div className="flex gap-4">
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+
+      {/* UI icons — sized via className */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+
+      {/* Theme toggle icons */}
+      <Sun className="w-6 h-6" />
+      <Moon className="w-6 h-6" />
+
+      {/* Blockchain icons */}
+      <Bitcoin className="w-6 h-6" />
+      <Ethereum className="w-6 h-6" />
+
+      {/* Social icons */}
+      <Github className="w-5 h-5" />
+      <Twitter className="w-5 h-5" />
+    </div>
+  );
+}`
+      },
+      {
+        title: "Dynamic Icon Rendering",
+        description: "Render icons dynamically from string names using the LucideIcons namespace as a lookup object.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Dynamic icon rendering from string name
+function DynamicIcon({ name, className }: { name: string; className?: string }) {
+  const IconComponent = LucideIcons[name as keyof typeof LucideIcons];
+  
+  if (!IconComponent || typeof IconComponent !== 'function') {
+    return null;
+  }
+
+  return <IconComponent className={className || "w-5 h-5"} />;
+}
+
+// Usage
+<DynamicIcon name="Home" className="w-6 h-6 text-brand" />
+<DynamicIcon name="Settings" className="w-5 h-5" />`
+      },
+      {
+        title: "Accessibility Patterns",
+        description: "Always use aria-hidden for decorative icons and aria-label for interactive standalone icons.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons (hidden from screen readers)
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Standalone interactive icons (need aria-label)
+<button aria-label="Open settings">
+  <LucideIcons.Settings className="w-5 h-5" />
+</button>
+
+// Icons with visible text (icon is decorative)
+<button>
+  <LucideIcons.Download className="w-4 h-4 mr-2" aria-hidden="true" />
+  Download
+</button>`
+      }
+    ].map((c, a) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ e(o, { tag: "h3", className: "font-semibold text-lg mb-1", children: c.title }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400",
+            children: c.description
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(r, { language: "tsx", code: c.code })
+    ] }) }, a)) })
+  ] })
+] });
+export {
+  x as default
+};

package/documentation/UsingThemeSystemSection-D7Wbw8sv.js

@@ -0,0 +1,164 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as l, T as o, C as a, a as r, c as n } from "../index-lfg6LZ1p.js";
+import { Code as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "Using the Theme System",
+      description: "Setup examples for ThemeProvider and the useTheme hook — everything you need to integrate theming in your application.",
+      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__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "ThemeProvider Setup" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Wrap your application with ThemeProvider to enable theming"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Basic Configuration", children: /* @__PURE__ */ e(
+      n,
+      {
+        language: "tsx",
+        code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { label: 'Home', path: '/', icon: HomeIcon },
+    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
+  ];
+
+  return (
+    <ThemeProvider
+      // Theme Style (constrains available layouts)
+      themeStyle="default" // 'default' | 'macos' | 'macos-tahoe'
+
+      // Layout Configuration
+      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
+      menuItems={menuItems}
+      logo={{ path: '/', name: 'MyApp' }}
+
+      // Color Configuration
+      brandColor="Blue"
+      customPaletteColor={{
+        primary: '#0052ff',
+        darkPrimary: '#578bfa',
+        secondary: '#f3f4f6',
+        darkSecondary: '#172131',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#4a5565',
+        darkMuted: '#828a99',
+        darkBg: '#030712',
+        lightBg: '#ffffff',
+        lightDark: '#f9fafb',
+        darkLightDark: '#0a101d',
+      }}
+
+      // Theme Settings
+      mode="dark"                    // 'light' | 'dark' (default: 'dark')
+      showSettings={true}
+
+      // Additional Features
+      headerClassName="custom-header"
+      contentClassName="custom-content"
+      fullWidth={false}
+      rightButton={<UserMenu />}
+    >
+      {/* Routes handled automatically by ThemeProvider */}
+    </ThemeProvider>
+  );
+}`
+      }
+    ) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "useTheme Hook Usage" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Access and control theme state from any component"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Theme Controls Example", children: /* @__PURE__ */ e(
+      n,
+      {
+        language: "tsx",
+        code: `import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function ThemeControls() {
+  const {
+    // State
+    mode, layout, direction, colorScheme,
+    primaryPreset, secondaryPreset, accentPreset,
+    isSettingsOpen,
+
+    // Setters
+    setMode, setLayout, setDirection,
+    setPrimaryPreset, setSecondaryPreset,
+    setIsSettingsOpen,
+
+    // Actions
+    restoreDefaultColors,
+    applyMacOSTheme,
+    applyMacOSTahoeTheme,
+    applyThemeStyle,
+  } = useTheme();
+
+  return (
+    <div>
+      {/* Mode Toggle */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+
+      {/* Layout (only valid options for current theme style) */}
+      <select
+        value={layout}
+        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+
+      {/* Theme Style Actions */}
+      <button onClick={applyMacOSTheme}>Apply macOS Sonoma</button>
+      <button onClick={applyMacOSTahoeTheme}>Apply macOS Tahoe</button>
+      <button onClick={() => applyThemeStyle('default')}>Reset to Default</button>
+
+      {/* Color Controls */}
+      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
+        Set Primary: Blue
+      </button>
+
+      {/* Settings Panel */}
+      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
+        {isSettingsOpen ? 'Close' : 'Open'} Settings
+      </button>
+
+      {/* Restore Defaults */}
+      <button onClick={restoreDefaultColors}>Restore Default Colors</button>
+    </div>
+  );
+}`
+      }
+    ) }) })
+  ] })
+] });
+export {
+  g as default
+};

package/documentation/UsingThemeSystemSection-Db0Hs67Q.js

@@ -0,0 +1,106 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Using the Theme System",description:"Setup examples for ThemeProvider and the useTheme hook — everything you need to integrate theming 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-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.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(t.Typography,{tag:"h2",className:"mb-2",children:"ThemeProvider Setup"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Wrap your application with ThemeProvider to enable theming"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Basic Configuration",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { label: 'Home', path: '/', icon: HomeIcon },
+    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
+  ];
+
+  return (
+    <ThemeProvider
+      // Theme Style (constrains available layouts)
+      themeStyle="default" // 'default' | 'macos' | 'macos-tahoe'
+
+      // Layout Configuration
+      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
+      menuItems={menuItems}
+      logo={{ path: '/', name: 'MyApp' }}
+
+      // Color Configuration
+      brandColor="Blue"
+      customPaletteColor={{
+        primary: '#0052ff',
+        darkPrimary: '#578bfa',
+        secondary: '#f3f4f6',
+        darkSecondary: '#172131',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#4a5565',
+        darkMuted: '#828a99',
+        darkBg: '#030712',
+        lightBg: '#ffffff',
+        lightDark: '#f9fafb',
+        darkLightDark: '#0a101d',
+      }}
+
+      // Theme Settings
+      mode="dark"                    // 'light' | 'dark' (default: 'dark')
+      showSettings={true}
+
+      // Additional Features
+      headerClassName="custom-header"
+      contentClassName="custom-content"
+      fullWidth={false}
+      rightButton={<UserMenu />}
+    >
+      {/* Routes handled automatically by ThemeProvider */}
+    </ThemeProvider>
+  );
+}`})})})]}),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:"useTheme Hook Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Access and control theme state from any component"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Theme Controls Example",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function ThemeControls() {
+  const {
+    // State
+    mode, layout, direction, colorScheme,
+    primaryPreset, secondaryPreset, accentPreset,
+    isSettingsOpen,
+
+    // Setters
+    setMode, setLayout, setDirection,
+    setPrimaryPreset, setSecondaryPreset,
+    setIsSettingsOpen,
+
+    // Actions
+    restoreDefaultColors,
+    applyMacOSTheme,
+    applyMacOSTahoeTheme,
+    applyThemeStyle,
+  } = useTheme();
+
+  return (
+    <div>
+      {/* Mode Toggle */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+
+      {/* Layout (only valid options for current theme style) */}
+      <select
+        value={layout}
+        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+
+      {/* Theme Style Actions */}
+      <button onClick={applyMacOSTheme}>Apply macOS Sonoma</button>
+      <button onClick={applyMacOSTahoeTheme}>Apply macOS Tahoe</button>
+      <button onClick={() => applyThemeStyle('default')}>Reset to Default</button>
+
+      {/* Color Controls */}
+      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
+        Set Primary: Blue
+      </button>
+
+      {/* Settings Panel */}
+      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
+        {isSettingsOpen ? 'Close' : 'Open'} Settings
+      </button>
+
+      {/* Restore Defaults */}
+      <button onClick={restoreDefaultColors}>Restore Default Colors</button>
+    </div>
+  );
+}`})})})]})]});exports.default=a;

package/documentation/ValidationSystemSection-Bqszchd7.js

@@ -0,0 +1,222 @@
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as o, T as r, C as l, a as t, c as i, aj as n, y as m } from "../index-lfg6LZ1p.js";
+import { Shield as c, FileText as u, Code as p, Info as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "Validation System",
+      description: "Centralized or per-field validation powered by react-hook-form rules. Supports required, pattern, min/max, and custom async validators.",
+      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-orange-500 via-red-500 to-pink-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__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Validation Approaches" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Two ways to define validation — centralized schema or per-field rules"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6", children: [
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Centralized Schema", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white" }) }),
+          /* @__PURE__ */ a(
+            r,
+            {
+              tag: "p",
+              className: "text-sm text-gray-600 dark:text-gray-400",
+              children: [
+                "Define all rules in one",
+                " ",
+                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "FormValidations" }),
+                " ",
+                "object, pass to Form via",
+                " ",
+                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "validationSchema" }),
+                "."
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(i, { language: "tsx", code: `import { FormValidations } from '@e-burgos/tucu-ui';
+
+export const formValidations: FormValidations<FormValues> = {
+  name: {
+    required: 'This is a required field.',
+    minLength: {
+      value: 2,
+      message: 'The name must be at least 2 characters long.',
+    },
+  },
+  email: {
+    required: 'This is a required field.',
+    pattern: {
+      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,
+      message: 'Invalid email address.',
+    },
+  },
+};
+
+// Pass to Form — rules auto-applied to all FormFields
+<Form<FormValues>
+  onSubmit={handleSubmit}
+  validationSchema={formValidations}
+  useFormProps={{ defaultValues }}
+>
+  <FormField<FormValues> name="name" label="Name">
+    <Input />
+  </FormField>
+</Form>` })
+      ] }) }) }),
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Per-Field Rules", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-white" }) }),
+          /* @__PURE__ */ a(
+            r,
+            {
+              tag: "p",
+              className: "text-sm text-gray-600 dark:text-gray-400",
+              children: [
+                "Define rules directly on",
+                " ",
+                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "FormField" }),
+                " ",
+                "via the",
+                " ",
+                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
+                " ",
+                "prop. Overrides schema for that field."
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(i, { language: "tsx", code: `<FormField<FormValues>
+  name="password"
+  label="Password"
+  rules={{
+    required: 'Password is required',
+    minLength: {
+      value: 8,
+      message: 'Password must be at least 8 characters',
+    },
+    validate: {
+      strength: (value) => {
+        const hasUpper = /[A-Z]/.test(value);
+        const hasLower = /[a-z]/.test(value);
+        const hasNumber = /\\d/.test(value);
+        
+        if (!hasUpper || !hasLower || !hasNumber) {
+          return 'Must contain uppercase, lowercase, and number';
+        }
+        return true;
+      }
+    }
+  }}
+>
+  <Input type="password" />
+</FormField>` })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ e(n, { variant: "info", dismissible: !1, children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e(r, { tag: "span", className: "font-semibold", children: "Priority" })
+      ] }),
+      /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
+        "Both approaches can be used together. The",
+        " ",
+        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
+        " ",
+        "prop on FormField takes precedence over",
+        " ",
+        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "validationSchema" }),
+        " ",
+        "for that specific field."
+      ] })
+    ] }) })
+  ] }),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Available Rules" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "All validation rules supported by the form system"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      m,
+      {
+        columns: [
+          {
+            key: "rule",
+            label: "Rule",
+            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
+          },
+          {
+            key: "example",
+            label: "Example",
+            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s) })
+          },
+          {
+            key: "description",
+            label: "Description",
+            render: (s) => /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s) })
+          }
+        ],
+        data: [
+          {
+            rule: "required",
+            example: "required: 'Field is required'",
+            description: "Makes field required"
+          },
+          {
+            rule: "minLength",
+            example: "minLength: { value: 2, message: '...' }",
+            description: "Minimum string length"
+          },
+          {
+            rule: "maxLength",
+            example: "maxLength: { value: 100, message: '...' }",
+            description: "Maximum string length"
+          },
+          {
+            rule: "pattern",
+            example: "pattern: { value: /regex/, message: '...' }",
+            description: "Regex pattern validation"
+          },
+          {
+            rule: "min",
+            example: "min: { value: 18, message: '...' }",
+            description: "Minimum numeric value"
+          },
+          {
+            rule: "max",
+            example: "max: { value: 100, message: '...' }",
+            description: "Maximum numeric value"
+          },
+          {
+            rule: "validate",
+            example: "validate: { custom: (v) => v > 0 || '...' }",
+            description: "Custom validation function(s)"
+          }
+        ]
+      }
+    ) }) })
+  ] })
+] });
+export {
+  C as default
+};