import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as m, T as r, ax as o, C as l, K as s } from "../index-sdOMz8GW.js";
import { Layers as i, Box as c, GitBranch as h, AlertCircle as p, TextCursorInput as g, Link as x, Eye as u, Activity as f, RotateCcw as y, Info as N, Shield as v, Zap as w } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const I = () => /* @__PURE__ */ a(d, { children: [
  /* @__PURE__ */ e(
    m,
    {
      title: "Architecture Overview",
      description: "The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",
      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-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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: "Core Layers" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Four architectural layers that compose the form system"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
      {
        title: "Form Container",
        description: "Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",
        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6" })
      },
      {
        title: "FormField Wrapper",
        description: "Connects any input to the form state. Handles registration, error display, and label rendering automatically.",
        icon: /* @__PURE__ */ e(i, { className: "w-6 h-6" })
      },
      {
        title: "Validation System",
        description: "Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",
        icon: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
      },
      {
        title: "Performance",
        description: "Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",
        icon: /* @__PURE__ */ e(w, { className: "w-6 h-6" })
      }
    ].map((t, n) => /* @__PURE__ */ e(
      o,
      {
        title: t.title,
        description: t.description,
        icon: t.icon
      },
      n
    )) })
  ] }),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Component Tree" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "How Form, FormField, and useFormContext relate to each other"
        }
      )
    ] }),
    /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 flex items-center gap-3", children: [
        /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e(
            r,
            {
              tag: "h3",
              className: "font-semibold text-blue-700 dark:text-blue-300",
              children: "<Form>"
            }
          ),
          /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2 mt-1", children: [
            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "useFormProps" }),
            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "validationSchema" }),
            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "onSubmit" })
          ] })
        ] })
      ] }) }),
      /* @__PURE__ */ e("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600" }),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl", children: [
        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(i, { className: "w-4 h-4 text-purple-600 dark:text-purple-400" }) }),
              /* @__PURE__ */ e(
                r,
                {
                  tag: "h3",
                  className: "font-semibold text-purple-700 dark:text-purple-300",
                  children: "<FormField>"
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(h, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ e(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: "Controller (react-hook-form)"
                  }
                )
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ e(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: "Error display (automatic)"
                  }
                )
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(g, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ a(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: [
                      "<Input />",
                      " (any input)"
                    ]
                  }
                )
              ] })
            ] })
          ] }) }),
          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
          /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-center gap-2", children: ["Input", "Select", "Checkbox", "Switch", "Radio"].map(
            (t) => /* @__PURE__ */ e(s, { variant: "outline", color: "primary", children: t }, t)
          ) })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(x, { className: "w-4 h-4 text-emerald-600 dark:text-emerald-400" }) }),
              /* @__PURE__ */ e(
                r,
                {
                  tag: "h3",
                  className: "font-semibold text-emerald-700 dark:text-emerald-300",
                  children: "useFormContext()"
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ e(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: "watch, setValue, getValues"
                  }
                )
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ e(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: "formState: errors, isDirty"
                  }
                )
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(y, { className: "w-3.5 h-3.5 text-gray-400" }),
                /* @__PURE__ */ e(
                  r,
                  {
                    tag: "span",
                    className: "text-sm text-gray-600 dark:text-gray-400",
                    children: "reset, trigger, clearErrors"
                  }
                )
              ] })
            ] })
          ] }) }),
          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
          /* @__PURE__ */ a(s, { variant: "soft", color: "success", children: [
            /* @__PURE__ */ e(N, { className: "w-3.5 h-3.5" }),
            "Available in any child component"
          ] })
        ] })
      ] })
    ] })
  ] })
] });
export {
  I as default
};
