import { jsxs as l, Fragment as C, jsx as e } from "react/jsx-runtime";
import { useState as t } from "react";
import { H as N, C as a, a as s, T as n, r as i, P as b, A as v, c as f } from "../index-sdOMz8GW.js";
import { Hash as P } from "lucide-react";
import "react-router-dom";
import "react-dom";
const V = () => {
  const [o, c] = t(""), [m, h] = t(""), g = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], p = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" }
  ], u = [
    { label: "Square", rounded: "none" },
    { label: "Soft", rounded: "sm" },
    { label: "Default", rounded: "md" },
    { label: "Large", rounded: "lg" },
    { label: "Pill", rounded: "full" }
  ];
  return /* @__PURE__ */ l(C, { children: [
    /* @__PURE__ */ e(
      N,
      {
        title: "PinCode",
        description: "A pin code input component for entering numeric codes digit by digit.",
        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-amber-500 via-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50", children: /* @__PURE__ */ e(P, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "4 Digit PinCode" }),
        /* @__PURE__ */ l("div", { children: [
          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
          /* @__PURE__ */ e(
            i,
            {
              length: 4,
              value: o,
              onChange: c
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "6 Digit PinCode" }),
        /* @__PURE__ */ l("div", { children: [
          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Verification Code" }),
          /* @__PURE__ */ e(
            i,
            {
              length: 6,
              value: o,
              onChange: c
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ l("div", { children: [
          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Security Code" }),
          /* @__PURE__ */ e(
            i,
            {
              length: 4,
              helperText: "Enter the 4-digit code",
              value: o,
              onChange: c
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ l("div", { children: [
          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
          /* @__PURE__ */ e(
            i,
            {
              length: 4,
              error: "Invalid pin code",
              value: o,
              onChange: c
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ l("div", { children: [
          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
          /* @__PURE__ */ e(i, { length: 4, disabled: !0 })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Ghost (default)" }),
        /* @__PURE__ */ e(i, { length: 4, variant: "ghost" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Solid" }),
        /* @__PURE__ */ e(i, { length: 4, variant: "solid" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Transparent" }),
        /* @__PURE__ */ e(i, { length: 4, variant: "transparent" })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: g.map(({ label: r, color: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
      /* @__PURE__ */ e(i, { length: 4, color: d })
    ] }, d)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: p.map(({ label: r, size: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
      /* @__PURE__ */ e(i, { length: 4, size: d })
    ] }, d)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: u.map(({ label: r, rounded: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
      /* @__PURE__ */ e(i, { length: 4, rounded: d })
    ] }, d)) }) }) }) }),
    /* @__PURE__ */ e(
      b,
      {
        componentName: "PinCode",
        defaultValues: {
          length: 4,
          type: "text",
          placeholder: "-",
          mask: !1,
          center: !0,
          size: "md",
          rounded: "md",
          variant: "ghost",
          color: "primary",
          helperText: "",
          error: "",
          fullWidth: !1,
          disabled: !1
        },
        controlOverrides: [
          {
            name: "placeholder",
            type: "text",
            description: "Character placeholder rendered in each box"
          },
          {
            name: "disabled",
            type: "boolean",
            description: "Disables the pin input and prevents interaction"
          }
        ],
        includeProps: [
          "length",
          "type",
          "placeholder",
          "mask",
          "center",
          "size",
          "rounded",
          "variant",
          "color",
          "helperText",
          "error",
          "fullWidth",
          "disabled"
        ],
        excludeProps: [
          "value",
          "onChange",
          "inputClassName",
          "errorClassName",
          "helperTextClassName",
          "className"
        ],
        children: (r) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg flex justify-center", children: /* @__PURE__ */ e(
          i,
          {
            ...r,
            value: m,
            onChange: h
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(v, { componentName: "PinCode" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      f,
      {
        language: "tsx",
        code: `import { PinCode } from '@e-burgos/tucu-ui';

<PinCode
  length={4}
  value={value}
  onChange={setValue}
/>

// Variants
<PinCode length={4} variant="ghost" />
<PinCode length={4} variant="solid" />
<PinCode length={4} variant="transparent" />

// Colors
<PinCode length={4} color="primary" />
<PinCode length={4} color="secondary" />
<PinCode length={4} color="danger" />
<PinCode length={4} color="info" />
<PinCode length={4} color="success" />
<PinCode length={4} color="warning" />

// Sizes
<PinCode length={4} size="sm" />
<PinCode length={4} size="md" />
<PinCode length={4} size="lg" />

// Shapes
<PinCode length={4} rounded="none" />
<PinCode length={4} rounded="sm" />
<PinCode length={4} rounded="md" />
<PinCode length={4} rounded="lg" />
<PinCode length={4} rounded="full" />`
      }
    ) }) }) })
  ] });
};
export {
  V as default
};
