import { jsxs as l, Fragment as S, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as N, C as a, a as n, T as s, S as o, P as f, A as w, c as y } from "../index-sdOMz8GW.js";
import { ChevronDown as C, Globe as i, Star as x, Zap as P, Shield as O } from "lucide-react";
import "react-router-dom";
import "react-dom";
const E = () => {
  const [p, m] = d(void 0), r = [
    { name: "Argentina", value: "ar" },
    { name: "Brasil", value: "br" },
    { name: "Chile", value: "cl" },
    { name: "Colombia", value: "co" },
    { name: "México", value: "mx" },
    { name: "Perú", value: "pe" },
    { name: "Uruguay", value: "uy" },
    { name: "Venezuela", value: "ve" }
  ], h = [
    {
      name: "Free",
      value: "free",
      description: "Basic features, 1 user",
      icon: /* @__PURE__ */ e(x, { className: "h-4 w-4 text-gray-400" })
    },
    {
      name: "Pro",
      value: "pro",
      description: "Advanced features, 5 users",
      icon: /* @__PURE__ */ e(P, { className: "h-4 w-4 text-brand" })
    },
    {
      name: "Enterprise",
      value: "enterprise",
      description: "Custom features, unlimited",
      icon: /* @__PURE__ */ e(O, { className: "h-4 w-4 text-green-500" })
    },
    {
      name: "Legacy",
      value: "legacy",
      description: "No longer available",
      disabled: !0
    }
  ], u = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], g = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" }
  ], [b, v] = d(r[0]);
  return /* @__PURE__ */ l(S, { children: [
    /* @__PURE__ */ e(
      N,
      {
        title: "Select",
        description: "A dropdown select component with search, descriptions, disabled options, and check indicators.",
        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-teal-500 via-emerald-500 to-green-500 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50", children: /* @__PURE__ */ e(C, { 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(n, { 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(s, { tag: "h5", className: "mb-3", children: "Basic Select" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Country",
            placeholder: "Select a country",
            options: r,
            selectedOption: p,
            onChange: m
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Searchable" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Country",
            placeholder: "Search and select...",
            options: r,
            searchable: !0,
            searchPlaceholder: "Type to filter...",
            showCheck: !0
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Descriptions & Icons" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Plan",
            placeholder: "Choose a plan",
            options: h,
            showCheck: !0
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Language",
            placeholder: "Select a language",
            helperText: "Choose your preferred language",
            options: [
              {
                name: "English",
                value: "en",
                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
              },
              {
                name: "Spanish",
                value: "es",
                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
              },
              {
                name: "French",
                value: "fr",
                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
              }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Category",
            placeholder: "Select a category",
            errorMessage: "Category is required",
            options: [
              { name: "Option 1", value: "opt1" },
              { name: "Option 2", value: "opt2" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Status",
            placeholder: "Select status",
            disabled: !0,
            options: [
              { name: "Active", value: "active" },
              { name: "Inactive", value: "inactive" }
            ]
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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(s, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Ghost Variant",
            placeholder: "Select option",
            variant: "ghost",
            options: r
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Solid Variant",
            placeholder: "Select option",
            variant: "solid",
            options: r
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ e(
          o,
          {
            label: "Transparent Variant",
            placeholder: "Select option",
            variant: "transparent",
            options: r
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: u.map(({ label: t, color: c }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: t }),
      /* @__PURE__ */ e(
        o,
        {
          label: `${t} Select`,
          placeholder: "Select option",
          color: c,
          options: r
        }
      )
    ] }, c)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: g.map(({ label: t, size: c }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: t }),
      /* @__PURE__ */ e(
        o,
        {
          label: `${t} Select`,
          placeholder: "Select option",
          size: c,
          options: r
        }
      )
    ] }, c)) }) }) }) }),
    /* @__PURE__ */ e(
      f,
      {
        componentName: "Select",
        defaultValues: {
          label: "Preview Select",
          placeholder: "Select a country",
          variant: "ghost",
          color: "primary",
          size: "md",
          helperText: "",
          errorMessage: "",
          searchable: !1,
          searchPlaceholder: "Search...",
          showCheck: !0,
          disabled: !1
        },
        controlOverrides: [
          {
            name: "placeholder",
            type: "text",
            description: "Placeholder text rendered before selecting an option"
          }
        ],
        includeProps: [
          "label",
          "placeholder",
          "variant",
          "color",
          "size",
          "helperText",
          "errorMessage",
          "searchable",
          "searchPlaceholder",
          "showCheck",
          "disabled"
        ],
        excludeProps: [
          "options",
          "selectedOption",
          "onChange",
          "onSelect",
          "value",
          "name",
          "buttonClassName",
          "children"
        ],
        children: (t) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
          o,
          {
            ...t,
            placeholder: t.placeholder || "Select a country",
            options: r,
            selectedOption: b,
            onChange: (c) => v(c)
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(w, { componentName: "Select" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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 { Select } from '@e-burgos/tucu-ui';

const options = [
  { name: 'Argentina', value: 'ar' },
  { name: 'Brasil', value: 'br' },
  { name: 'Chile', value: 'cl' },
];

// Basic
<Select
  label="Country"
  placeholder="Select a country"
  options={options}
  selectedOption={selectedOption}
  onChange={setSelectedOption}
/>

// Searchable with check
<Select
  label="Country"
  placeholder="Search..."
  options={options}
  searchable
  searchPlaceholder="Type to filter..."
  showCheck
/>

// With descriptions, icons, and disabled options
const plans = [
  { name: 'Free', value: 'free', description: 'Basic features' },
  { name: 'Pro', value: 'pro', description: 'Advanced', icon: <Zap /> },
  { name: 'Legacy', value: 'legacy', disabled: true },
];
<Select label="Plan" options={plans} showCheck />

// Variants
<Select variant="ghost" options={options} />
<Select variant="solid" options={options} />
<Select variant="transparent" options={options} />

// Colors
<Select color="primary" options={options} />
<Select color="secondary" options={options} />
<Select color="danger" options={options} />
<Select color="info" options={options} />
<Select color="success" options={options} />
<Select color="warning" options={options} />

// Sizes
<Select size="sm" options={options} />
<Select size="md" options={options} />
<Select size="lg" options={options} />`
      }
    ) }) }) })
  ] });
};
export {
  E as default
};
