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-sdOMz8GW.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 k = () => /* @__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-border rounded text-xs", children: "FormValidations" }),
                " ",
                "object, pass to Form via",
                " ",
                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border 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-border rounded text-xs", children: "FormField" }),
                " ",
                "via the",
                " ",
                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border 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-border rounded text-xs", children: "rules" }),
        " ",
        "prop on FormField takes precedence over",
        " ",
        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border 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 {
  k as default
};
