"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 s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Basic Usage",description:"Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Code,{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:"Step by Step"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three steps to create a fully typed, validated form"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
  name: string;
  email: string;
  password: string;
  message: string;
  acceptTerms: boolean;
  age: number;
  gender: string;
  country: string;
}`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"2. Create Default Values",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Define default values matching your interface. These initialize the form and are used by"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"reset()"}),"."]}),e.jsx(a.CodeBlock,{language:"ts",code:`export const defaultValues: FormValues = {
  name: '',
  email: '',
  password: '',
  message: '',
  acceptTerms: false,
  age: 0,
  gender: '',
  country: 'ar',
};`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"3. Compose the Form",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<Form>"})," ","as the container and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<FormField>"})," ","to wrap each input. FormField handles registration, error display, and labeling."]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Button } from '@e-burgos/tucu-ui';

function ContactForm() {
  const handleSubmit = (data: FormValues) => {
    console.log('Form submitted:', data);
  };

  return (
    <Form<FormValues>
      onSubmit={handleSubmit}
      useFormProps={{
        defaultValues: defaultValues,
        mode: 'onChange',
      }}
    >
      <FormField<FormValues> name="name" label="Name">
        <Input placeholder="Enter your name" />
      </FormField>

      <FormField<FormValues> name="email" label="Email">
        <Input type="email" placeholder="Enter your email" />
      </FormField>

      <Button type="submit">Submit</Button>
    </Form>
  );
}`})]})})})]})]})]});exports.default=s;
