import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
import { useState as o } from "react";
import { H as g, C as a, a as i, T as t, I as r, P as N, A as v, c as y } from "../index-sdOMz8GW.js";
import { TextCursorInput as f } from "lucide-react";
import "react-router-dom";
import "react-dom";
const P = () => {
  const [d, c] = o(""), [p, m] = o(""), h = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], u = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" }
  ];
  return /* @__PURE__ */ l(b, { children: [
    /* @__PURE__ */ e(
      g,
      {
        title: "Input",
        description: "A versatile input component that supports various input types including text, email, password, date, and more.",
        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-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(f, { 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(i, { 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(t, { tag: "h5", className: "mb-3", children: "Basic Input" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Name",
            placeholder: "Enter your name",
            value: d,
            onChange: (s) => c(s.target.value)
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Email",
            type: "email",
            placeholder: "Enter your email",
            helperText: "We'll never share your email"
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Password",
            type: "password",
            placeholder: "Enter password",
            error: "Password is required"
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(r, { label: "Disabled", placeholder: "Disabled input", disabled: !0 })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Date Input" }),
        /* @__PURE__ */ e(r, { label: "Date", type: "date", dateFormat: "DD-MM-YYYY" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Number Input" }),
        /* @__PURE__ */ e(r, { label: "Age", type: "number", placeholder: "Enter age" })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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(t, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Ghost Variant",
            placeholder: "Enter text",
            variant: "ghost"
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Solid Variant",
            placeholder: "Enter text",
            variant: "solid"
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ e(
          r,
          {
            label: "Transparent Variant",
            placeholder: "Enter text",
            variant: "transparent"
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: h.map(({ label: s, color: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
      /* @__PURE__ */ e(
        r,
        {
          label: `${s} Input`,
          placeholder: "Enter text",
          color: n
        }
      )
    ] }, n)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: u.map(({ label: s, size: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
      /* @__PURE__ */ e(
        r,
        {
          label: `${s} Input`,
          placeholder: "Enter text",
          size: n
        }
      )
    ] }, n)) }) }) }) }),
    /* @__PURE__ */ e(
      N,
      {
        componentName: "Input",
        defaultValues: {
          label: "Preview Input",
          placeholder: "Enter text",
          variant: "ghost",
          color: "primary",
          size: "md",
          type: "text",
          dateFormat: "DD/MM/YYYY",
          locale: "en-US",
          helperText: "",
          error: "",
          useUppercaseLabel: !1,
          disabled: !1
        },
        controlOverrides: [
          {
            name: "placeholder",
            type: "text",
            description: "Placeholder text rendered inside the input"
          },
          {
            name: "color",
            type: "select",
            options: [
              "primary",
              "secondary",
              "danger",
              "info",
              "success",
              "warning"
            ],
            description: "Color treatment applied to the control"
          },
          {
            name: "type",
            type: "select",
            options: ["text", "email", "password", "number", "date"],
            description: "Native input type used for the preview"
          },
          {
            name: "disabled",
            type: "boolean",
            description: "Disables the input and prevents interaction"
          }
        ],
        includeProps: [
          "label",
          "placeholder",
          "variant",
          "color",
          "size",
          "type",
          "dateFormat",
          "locale",
          "helperText",
          "error",
          "useUppercaseLabel",
          "disabled"
        ],
        excludeProps: [
          "inputClassName",
          "labelClassName",
          "suffix",
          "suffixClassName",
          "icon",
          "dateFormat",
          "locale"
        ],
        children: (s) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
          r,
          {
            ...s,
            placeholder: s.placeholder || "Enter text",
            value: p,
            onChange: (n) => m(n.target.value)
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(v, { componentName: "Input" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      y,
      {
        language: "tsx",
        code: `import { Input } from '@e-burgos/tucu-ui';

// Basic usage
<Input
  label="Name"
  placeholder="Enter your name"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// With helper text
<Input
  label="Email"
  type="email"
  placeholder="Enter your email"
  helperText="We'll never share your email"
/>

// With error
<Input
  label="Password"
  type="password"
  placeholder="Enter password"
  error="Password is required"
/>

// Variants
<Input label="Ghost" variant="ghost" />
<Input label="Solid" variant="solid" />
<Input label="Transparent" variant="transparent" />

// Colors
<Input label="Primary" color="primary" />
<Input label="Secondary" color="secondary" />
<Input label="Danger" color="danger" />
<Input label="Info" color="info" />
<Input label="Success" color="success" />
<Input label="Warning" color="warning" />

// Sizes
<Input label="Small" size="sm" />
<Input label="Medium" size="md" />
<Input label="Large" size="lg" />

// Date input
<Input
  label="Date"
  type="date"
  dateFormat="DD-MM-YYYY"
/>`
      }
    ) }) }) })
  ] });
};
export {
  P as default
};
