import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
import { H as d, T as r, C as t, a as s, c as o } from "../index-sdOMz8GW.js";
import { Code as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const F = () => /* @__PURE__ */ a(l, { children: [
  /* @__PURE__ */ e(
    d,
    {
      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: /* @__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-green-500 via-emerald-500 to-teal-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(r, { tag: "h2", className: "mb-2", children: "Step by Step" }),
      /* @__PURE__ */ e(
        r,
        {
          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"
        }
      )
    ] }),
    /* @__PURE__ */ a("div", { className: "space-y-6", children: [
      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
        s,
        {
          title: "1. Define Form Values Interface",
          className: "mt-2 mb-2",
          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
            /* @__PURE__ */ e(
              r,
              {
                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."
              }
            ),
            /* @__PURE__ */ e(o, { language: "tsx", code: `export interface FormValues {
  name: string;
  email: string;
  password: string;
  message: string;
  acceptTerms: boolean;
  age: number;
  gender: string;
  country: string;
}` })
          ] })
        }
      ) }),
      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "2. Create Default Values", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
        /* @__PURE__ */ a(
          r,
          {
            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",
              " ",
              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "reset()" }),
              "."
            ]
          }
        ),
        /* @__PURE__ */ e(o, { language: "ts", code: `export const defaultValues: FormValues = {
  name: '',
  email: '',
  password: '',
  message: '',
  acceptTerms: false,
  age: 0,
  gender: '',
  country: 'ar',
};` })
      ] }) }) }),
      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "3. Compose the Form", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
        /* @__PURE__ */ a(
          r,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400",
            children: [
              "Use",
              " ",
              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "<Form>" }),
              " ",
              "as the container and",
              " ",
              /* @__PURE__ */ e("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."
            ]
          }
        ),
        /* @__PURE__ */ e(o, { 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>
  );
}` })
      ] }) }) })
    ] })
  ] })
] });
export {
  F as default
};
