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-sdOMz8GW.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
};
