"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const 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"},{rule:"validate",example:"validate: { custom: (v) => v > 0 || '...' }",description:"Custom validation function(s)"}],t=[{key:"rule",label:"Rule",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"example",label:"Example",render:s=>e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(s)})},{key:"description",label:"Description",render:s=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(s)})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{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: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-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Shield,{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:"Validation Approaches"}),e.jsx(a.Typography,{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"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Centralized Schema",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",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(r.FileText,{className:"w-5 h-5 text-white"})}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define all rules in one"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"FormValidations"})," ","object, pass to Form via"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"validationSchema"}),"."]})]}),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.',
    },
  },
};

// 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>`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Per-Field Rules",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",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(r.Code,{className:"w-5 h-5 text-white"})}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define rules directly on"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"FormField"})," ","via the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"rules"})," ","prop. Overrides schema for that field."]})]}),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 '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(r.Info,{className:"h-4 w-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"Priority"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["Both approaches can be used together. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"rules"})," ","prop on FormField takes precedence over"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"validationSchema"})," ","for that specific field."]})]})})]}),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:"Available Rules"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"All validation rules supported by the form system"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:t,data:l})})})]})]})};exports.default=i;
