@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/UsageExamplesSection-Cika-E5i.js

@@ -1,83 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js"),c=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg",children:e.jsx(c.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"How to Use Icons"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Lucide React Integration"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Import the LucideIcons namespace and access any icon with dot notation. All 5000+ Lucide icons are available."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
-
-function MyComponent() {
-  return (
-    <div>
-      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
-      <LucideIcons.User size={24} color="currentColor" />
-      <LucideIcons.Settings className="w-5 h-5" />
-      <LucideIcons.ChevronDown strokeWidth={1.5} />
-      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
-    </div>
-  );
-}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Custom Tucu Icons"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Access 98+ custom-designed icons specific to Tucu UI through direct named imports."}),e.jsx(s.CodeBlock,{code:`import {
-  Tucu,
-  HomeIcon,
-  SearchIcon,
-  Bitcoin,
-  Ethereum,
-  Github,
-  Twitter,
-  ClassicLayoutIcon,
-  Sun,
-  Moon,
-  Check,
-  Star,
-} from '@e-burgos/tucu-ui';
-
-function MyApp() {
-  return (
-    <div>
-      {/* Brand icon */}
-      <Tucu className="w-8 h-8 text-brand" />
-      
-      {/* UI icons */}
-      <HomeIcon className="w-6 h-6" />
-      <SearchIcon className="w-5 h-5 text-gray-500" />
-      
-      {/* Theme 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>
-  );
-}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Creating Icon Components"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create reusable icon components with proper TypeScript support."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
-import { Button } from '@e-burgos/tucu-ui';
-
-function IconButton({ iconName, label, onClick }) {
-  const IconComponent = LucideIcons[iconName];
-
-  return (
-    <button
-      onClick={onClick}
-      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
-      aria-label={label}
-    >
-      <IconComponent className="w-5 h-5" />
-    </button>
-  );
-}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Accessibility Best Practices"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Always provide proper accessibility attributes for icons."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
-
-// Decorative icons
-<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
-
-// Interactive icons
-<LucideIcons.Settings
-  className="w-6 h-6 cursor-pointer"
-  aria-label="Open settings"
-  role="button"
-  tabIndex={0}
-/>
-
-// Icons with text labels
-<button>
-  <LucideIcons.Home className="w-4 h-4 mr-2" aria-hidden="true" />
-  Home
-</button>`,language:"tsx"})]})]})]})})})});exports.default=o;

package/documentation/UsingThemeSystemSection-BXzyzQVv.js

@@ -1,176 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { C as a, a as s, T as o, c as r } from "../index-D3gBsvbO.js";
-import { Code as n, Zap as i } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const h = () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Using the Theme System", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
-  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "ThemeProvider Setup" })
-    ] }),
-    /* @__PURE__ */ e(
-      r,
-      {
-        language: "tsx",
-        code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { label: 'Home', path: '/', icon: HomeIcon },
-    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
-  ];
-
-  return (
-    <ThemeProvider
-      // Layout Configuration
-      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
-      menuItems={menuItems}
-      logo={{ path: '/', name: 'MyApp' }}
-
-      // Color Configuration
-      brandColor="Blue"              // Primary brand color preset
-      customPaletteColor={{
-        primary: '#0052ff',          // Hex color or preset name
-        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="light"                   // 'light' | 'dark'
-      showSettings={true}
-      
-      // Additional Features
-      headerClassName="custom-header"
-      contentClassName="custom-content"
-      fullWidth={false}
-      rightButton={<UserMenu />}
-      className="custom-layout"
-    >
-      {/* Routes are automatically handled by ThemeProvider */}
-      {/* Or provide customRoutes prop for custom routing */}
-    </ThemeProvider>
-  );
-}`
-      }
-    )
-  ] }),
-  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "useTheme Hook" })
-    ] }),
-    /* @__PURE__ */ e(
-      r,
-      {
-        language: "tsx",
-        code: `import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const {
-    // State
-    mode,
-    layout,
-    primaryPreset,
-    darkPrimaryPreset,
-    secondaryPreset,
-    darkSecondaryPreset,
-    accentPreset,
-    darkAccentPreset,
-    mutedPreset,
-    darkMutedPreset,
-    darkBgPreset,
-    lightBgPreset,
-    lightDarkPreset,
-    darkLightDarkPreset,
-    direction,
-    logo,
-    lang,
-    isSettingsOpen,
-    showSettings,
-
-    // Setters
-    setMode,
-    setLayout,
-    setPrimaryPreset,
-    setDarkPrimaryPreset,
-    setSecondaryPreset,
-    setDarkSecondaryPreset,
-    setAccentPreset,
-    setDarkAccentPreset,
-    setMutedPreset,
-    setDarkMutedPreset,
-    setDarkBgPreset,
-    setLightBgPreset,
-    setLightDarkPreset,
-    setDarkLightDarkPreset,
-    setDirection,
-    setLogo,
-    setLang,
-    setIsSettingsOpen,
-    setShowSettings,
-    restoreDefaultColors,
-  } = useTheme();
-
-  return (
-    <div>
-      {/* Basic Controls */}
-      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
-        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
-      </button>
-
-      <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>
-
-      <select
-        value={direction}
-        onChange={(e) => setDirection(e.target.value as 'ltr' | 'rtl')}
-      >
-        <option value="ltr">LTR</option>
-        <option value="rtl">RTL</option>
-      </select>
-
-      {/* Advanced Color Controls */}
-      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
-        Set Primary Color
-      </button>
-
-      <button onClick={() => setSecondaryPreset({ label: 'DEFAULT_SECONDARY', value: '#f3f4f6' })}>
-        Set Secondary Color
-      </button>
-
-      {/* Settings Panel Control */}
-      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
-        {isSettingsOpen ? 'Close' : 'Open'} Settings
-      </button>
-
-      {/* Restore Defaults */}
-      <button onClick={restoreDefaultColors}>
-        Restore Default Colors
-      </button>
-    </div>
-  );
-}`
-      }
-    )
-  ] })
-] }) }) });
-export {
-  h as default
-};

package/documentation/UsingThemeSystemSection-CDie8_J5.js

@@ -1,140 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Using the Theme System",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg",children:e.jsx(r.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"ThemeProvider Setup"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { label: 'Home', path: '/', icon: HomeIcon },
-    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
-  ];
-
-  return (
-    <ThemeProvider
-      // Layout Configuration
-      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
-      menuItems={menuItems}
-      logo={{ path: '/', name: 'MyApp' }}
-
-      // Color Configuration
-      brandColor="Blue"              // Primary brand color preset
-      customPaletteColor={{
-        primary: '#0052ff',          // Hex color or preset name
-        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="light"                   // 'light' | 'dark'
-      showSettings={true}
-      
-      // Additional Features
-      headerClassName="custom-header"
-      contentClassName="custom-content"
-      fullWidth={false}
-      rightButton={<UserMenu />}
-      className="custom-layout"
-    >
-      {/* Routes are automatically handled by ThemeProvider */}
-      {/* Or provide customRoutes prop for custom routing */}
-    </ThemeProvider>
-  );
-}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg",children:e.jsx(r.Zap,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"useTheme Hook"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const {
-    // State
-    mode,
-    layout,
-    primaryPreset,
-    darkPrimaryPreset,
-    secondaryPreset,
-    darkSecondaryPreset,
-    accentPreset,
-    darkAccentPreset,
-    mutedPreset,
-    darkMutedPreset,
-    darkBgPreset,
-    lightBgPreset,
-    lightDarkPreset,
-    darkLightDarkPreset,
-    direction,
-    logo,
-    lang,
-    isSettingsOpen,
-    showSettings,
-
-    // Setters
-    setMode,
-    setLayout,
-    setPrimaryPreset,
-    setDarkPrimaryPreset,
-    setSecondaryPreset,
-    setDarkSecondaryPreset,
-    setAccentPreset,
-    setDarkAccentPreset,
-    setMutedPreset,
-    setDarkMutedPreset,
-    setDarkBgPreset,
-    setLightBgPreset,
-    setLightDarkPreset,
-    setDarkLightDarkPreset,
-    setDirection,
-    setLogo,
-    setLang,
-    setIsSettingsOpen,
-    setShowSettings,
-    restoreDefaultColors,
-  } = useTheme();
-
-  return (
-    <div>
-      {/* Basic Controls */}
-      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
-        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
-      </button>
-
-      <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>
-
-      <select
-        value={direction}
-        onChange={(e) => setDirection(e.target.value as 'ltr' | 'rtl')}
-      >
-        <option value="ltr">LTR</option>
-        <option value="rtl">RTL</option>
-      </select>
-
-      {/* Advanced Color Controls */}
-      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
-        Set Primary Color
-      </button>
-
-      <button onClick={() => setSecondaryPreset({ label: 'DEFAULT_SECONDARY', value: '#f3f4f6' })}>
-        Set Secondary Color
-      </button>
-
-      {/* Settings Panel Control */}
-      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
-        {isSettingsOpen ? 'Close' : 'Open'} Settings
-      </button>
-
-      {/* Restore Defaults */}
-      <button onClick={restoreDefaultColors}>
-        Restore Default Colors
-      </button>
-    </div>
-  );
-}`})]})]})})});exports.default=o;

package/documentation/ValidationSystemSection-Ca9vjcW1.js

@@ -1,54 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-VrMogvDN.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const i=[{key:"rule",label:"Rule"},{key:"example",label:"Example"},{key:"description",label:"Description"}],l=[{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"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Validation System"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Centralized validation with built-in and custom rules"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Validation Approaches",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"You can define validation in two ways:"}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg",children:e.jsx(t.FileText,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Centralized Validation Schema"})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Define all validation rules in a single schema object and pass it to the Form component. This eliminates the need to define rules on each FormField."}),e.jsx(a.CodeBlock,{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.',
-    },
-  },
-};
-
-// Use in Form component
-<Form<FormValues>
-  onSubmit={handleSubmit}
-  validationSchema={formValidations}
-  useFormProps={{ defaultValues }}
->
-  {/* FormFields don't need rules prop */}
-  <FormField<FormValues> name="name" label="Name">
-    <Input />
-  </FormField>
-</Form>`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg",children:e.jsx(t.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Per-Field Validation"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define validation rules directly on each FormField using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","prop. Useful for field-specific validation."]}),e.jsx(a.CodeBlock,{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 'Password must contain uppercase, lowercase, and number';
-        }
-        return true;
-      }
-    }
-  }}
->
-  <Input type="password" />
-</FormField>`})]})]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Info,{className:"h-4 w-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"Validation Schema vs Rules Prop"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"validationSchema:"})," Centralized validation for all fields. Rules are automatically applied."," ",e.jsx("strong",{children:"rules prop:"})," Field-specific validation that overrides schema rules for that field. Both can be used together, with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","taking precedence."]})]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Available Validation Rules",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Complete list of validation rules supported by React Hook Form:"}),e.jsx(a.BasicTable,{columns:i.map(s=>({...s,render:r=>s.key==="rule"?e.jsx("code",{className:"text-xs text-brand",children:String(r??"")}):s.key==="example"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r??"")}):s.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r??"")}):String(r??"")})),data:l,containerClassName:"mb-4"})]})})})]})};exports.default=n;

package/documentation/ValidationSystemSection-CiTBMt8_.js

@@ -1,197 +0,0 @@
-import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as r, C as i, a as l, c as d, ag as c, q as u } from "../index-D3gBsvbO.js";
-import { FileText as p, Code as h, Info as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const F = () => {
-  const n = [
-    { key: "rule", label: "Rule" },
-    { key: "example", label: "Example" },
-    { key: "description", label: "Description" }
-  ], o = [
-    {
-      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"
-    }
-  ];
-  return /* @__PURE__ */ a(m, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Validation System" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Centralized validation with built-in and custom rules"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Validation Approaches", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(r, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "You can define validation in two ways:" }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ a("div", { className: "space-y-4", 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(p, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Centralized Validation Schema" })
-          ] }),
-          /* @__PURE__ */ e(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: "Define all validation rules in a single schema object and pass it to the Form component. This eliminates the need to define rules on each FormField."
-            }
-          ),
-          /* @__PURE__ */ e(
-            d,
-            {
-              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.',
-    },
-  },
-};
-
-// Use in Form component
-<Form<FormValues>
-  onSubmit={handleSubmit}
-  validationSchema={formValidations}
-  useFormProps={{ defaultValues }}
->
-  {/* FormFields don't need rules prop */}
-  <FormField<FormValues> name="name" label="Name">
-    <Input />
-  </FormField>
-</Form>`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ a("div", { className: "space-y-4", 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(h, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Per-Field Validation" })
-          ] }),
-          /* @__PURE__ */ a(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: [
-                "Define validation rules directly on each FormField using the",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
-                " ",
-                "prop. Useful for field-specific validation."
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            d,
-            {
-              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 'Password must contain uppercase, lowercase, and number';
-        }
-        return true;
-      }
-    }
-  }}
->
-  <Input type="password" />
-</FormField>`
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ e(c, { 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(g, { className: "h-4 w-4" }),
-          /* @__PURE__ */ e(r, { tag: "span", className: "font-semibold", children: "Validation Schema vs Rules Prop" })
-        ] }),
-        /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
-          /* @__PURE__ */ e("strong", { children: "validationSchema:" }),
-          " Centralized validation for all fields. Rules are automatically applied.",
-          " ",
-          /* @__PURE__ */ e("strong", { children: "rules prop:" }),
-          " Field-specific validation that overrides schema rules for that field. Both can be used together, with",
-          " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
-          " ",
-          "taking precedence."
-        ] })
-      ] }) })
-    ] }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Available Validation Rules", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(r, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Complete list of validation rules supported by React Hook Form:" }),
-      /* @__PURE__ */ e(
-        u,
-        {
-          columns: n.map((t) => ({
-            ...t,
-            render: (s) => t.key === "rule" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s ?? "") }) : t.key === "example" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") }) : t.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") }) : String(s ?? "")
-          })),
-          data: o,
-          containerClassName: "mb-4"
-        }
-      )
-    ] }) }) })
-  ] });
-};
-export {
-  F as default
-};