import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
import { useState as u } from "react";
import { H as S, C as l, a as t, T as n, q as s, P as g, A as b, c as N } from "../index-sdOMz8GW.js";
import { Search as v } from "lucide-react";
import "react-router-dom";
import "react-dom";
const M = () => {
  const [i, d] = u(void 0), p = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], h = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" }
  ], r = [
    { name: "React", value: "react" },
    { name: "Vue", value: "vue" },
    { name: "Angular", value: "angular" },
    { name: "Svelte", value: "svelte" },
    { name: "Next.js", value: "nextjs" }
  ];
  return /* @__PURE__ */ o(m, { children: [
    /* @__PURE__ */ e(
      S,
      {
        title: "InputSearcher",
        description: "A search input component with dropdown suggestions and filtering capabilities.",
        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-cyan-500 via-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", children: /* @__PURE__ */ e(v, { 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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Basic InputSearcher" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Search Framework",
            placeholder: "Search frameworks",
            options: r,
            initialValue: i?.value,
            onOptionSelect: (a) => {
              Array.isArray(a) || d(a);
            }
          }
        )
      ] }),
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Multiple Selection" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Select Frameworks",
            placeholder: "Select frameworks",
            options: r,
            multiple: !0,
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] }),
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Custom No Matches Message" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Search",
            placeholder: "Search...",
            options: r,
            noMatchesMessage: "No results found",
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] }),
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Search",
            disabled: !0,
            placeholder: "Disabled",
            options: r,
            noMatchesMessage: "No results found",
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Ghost Variant",
            placeholder: "Search...",
            variant: "ghost",
            options: r,
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] }),
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Solid Variant",
            placeholder: "Search...",
            variant: "solid",
            options: r,
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] }),
      /* @__PURE__ */ o(l, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ e(
          s,
          {
            label: "Transparent Variant",
            placeholder: "Search...",
            variant: "transparent",
            options: r,
            onOptionSelect: (a) => {
              console.log("Selected:", a);
            }
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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: p.map(({ label: a, color: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
      /* @__PURE__ */ e(
        s,
        {
          label: `${a} Search`,
          placeholder: "Search...",
          color: c,
          options: r
        }
      )
    ] }, c)) }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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: h.map(({ label: a, size: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
      /* @__PURE__ */ e(
        s,
        {
          label: `${a} Search`,
          placeholder: "Search frameworks",
          size: c,
          options: r
        }
      )
    ] }, c)) }) }) }) }),
    /* @__PURE__ */ e(
      g,
      {
        componentName: "InputSearcher",
        defaultValues: {
          label: "Preview Search",
          placeholder: "Search frameworks",
          variant: "ghost",
          color: "primary",
          size: "md",
          multiple: !1,
          noMatchesMessage: "No results found",
          disabled: !1
        },
        controlOverrides: [
          {
            name: "placeholder",
            type: "text",
            description: "Placeholder text rendered inside the search input"
          }
        ],
        includeProps: [
          "label",
          "placeholder",
          "variant",
          "color",
          "size",
          "multiple",
          "noMatchesMessage",
          "disabled"
        ],
        excludeProps: ["options", "initialValue", "onOptionSelect"],
        children: (a) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
          s,
          {
            ...a,
            placeholder: a.placeholder || "Search frameworks",
            options: r
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(b, { componentName: "InputSearcher" }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      N,
      {
        language: "tsx",
        code: `import { InputSearcher } from '@e-burgos/tucu-ui';

const options = [
  { name: 'React', value: 'react' },
  { name: 'Vue', value: 'vue' },
  { name: 'Angular', value: 'angular' },
];

<InputSearcher
  label="Search Framework"
  options={options}
  initialValue={selectedOption?.value}
  onOptionSelect={(option) => {
    if (!Array.isArray(option)) {
      setSelectedOption(option);
    }
  }}
/>

<InputSearcher
  label="Select Frameworks"
  options={options}
  multiple
  onOptionSelect={(option) => {
    console.log('Selected:', option);
  }}
/>

// Variants
<InputSearcher label="Ghost" variant="ghost" options={options} />
<InputSearcher label="Solid" variant="solid" options={options} />
<InputSearcher label="Transparent" variant="transparent" options={options} />

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

// Sizes
<InputSearcher label="Small" size="sm" options={options} />
<InputSearcher label="Medium" size="md" options={options} />
<InputSearcher label="Large" size="lg" options={options} />`
      }
    ) }) }) })
  ] });
};
export {
  M as default
};
