"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const i=[{title:"Conditional Fields",description:"Show/hide fields based on other values using watch(). Validation adapts dynamically when fields appear or disappear.",icon:e.jsx(o.GitBranch,{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:e.jsx(o.Zap,{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:e.jsx(o.Eye,{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:e.jsx(o.Settings,{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:e.jsx(o.Clock,{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:e.jsx(o.AlertTriangle,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{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: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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Sparkles,{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:"Capabilities"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Advanced patterns available through the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map((s,r)=>e.jsx(a.FeatureCard,{title:s.title,description:s.description,icon:s.icon},r))})]}),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:"Conditional Fields Example"}),e.jsx(a.Typography,{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"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{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>
  );
}`})})})]})]})};exports.default=t;
