import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as n, T as o, C as i, K as c } from "../index-sdOMz8GW.js";
import { LayoutGrid as m, Type as p, List as h, CheckSquare as g, Upload as u, Hash as x } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ t(d, { children: [
  /* @__PURE__ */ e(
    n,
    {
      title: "Form Components",
      description: "11 input components ready for use with FormField. Each integrates automatically with validation, error display, and form state.",
      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-purple-500 via-violet-500 to-indigo-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__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Available Inputs" }),
      /* @__PURE__ */ e(
        o,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "All form inputs organized by category"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Text Inputs",
        description: "Standard text entry with validation and helper text",
        color: "from-blue-500 to-cyan-500",
        components: ["Input", "Textarea"]
      },
      {
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Selection",
        description: "Dropdown and autocomplete with search support",
        color: "from-green-500 to-emerald-500",
        components: ["Select", "InputSearcher"]
      },
      {
        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Choice Controls",
        description: "Boolean and group selection inputs",
        color: "from-purple-500 to-violet-500",
        components: ["Checkbox", "Radio", "RadioGroup", "Switch"]
      },
      {
        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "File Upload",
        description: "File input with drag & drop support",
        color: "from-pink-500 to-rose-500",
        components: ["FileInput"]
      },
      {
        icon: /* @__PURE__ */ e(x, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Specialized",
        description: "PIN codes and toggle selection bars",
        color: "from-indigo-500 to-purple-500",
        components: ["PinCode", "ToggleBar"]
      }
    ].map((a, r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ e(
          "div",
          {
            className: `p-2.5 rounded-xl bg-linear-to-br ${a.color} shadow-lg`,
            children: a.icon
          }
        ),
        /* @__PURE__ */ t("div", { children: [
          /* @__PURE__ */ e(o, { tag: "h3", className: "font-semibold", children: a.title }),
          /* @__PURE__ */ e(
            o,
            {
              tag: "p",
              className: "text-sm text-gray-500 dark:text-gray-400",
              children: a.description
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: a.components.map((l, s) => /* @__PURE__ */ e(
        c,
        {
          color: "success",
          variant: "outline",
          className: "text-xs",
          children: l
        },
        s
      )) })
    ] }) }, r)) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Usage with FormField" }),
      /* @__PURE__ */ e(
        o,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Any input wrapped in FormField gets automatic registration and error handling"
        }
      )
    ] }),
    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
      {
        label: "Input",
        code: '<FormField name="email"><Input type="email" /></FormField>'
      },
      {
        label: "Select",
        code: '<FormField name="country"><Select options={countries} /></FormField>'
      },
      {
        label: "Checkbox",
        code: '<FormField name="terms"><Checkbox label="Accept" /></FormField>'
      },
      {
        label: "InputSearcher",
        code: '<FormField name="city"><InputSearcher options={cities} /></FormField>'
      }
    ].map((a, r) => /* @__PURE__ */ t(
      "div",
      {
        className: "p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-border",
        children: [
          /* @__PURE__ */ e(
            o,
            {
              tag: "span",
              className: "text-xs font-semibold text-brand block mb-2",
              children: a.label
            }
          ),
          /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400 break-all", children: a.code })
        ]
      },
      r
    )) }) }) })
  ] })
] });
export {
  C as default
};
