import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
import { useState as n } from "react";
import { H as d, C as o, a as s, bo as c, P as u, A as h, c as p } from "../index-sdOMz8GW.js";
import { Search as g } from "lucide-react";
import "react-router-dom";
import "react-dom";
function S(t) {
  const [r, a] = n("");
  return /* @__PURE__ */ e("div", { className: "w-full max-w-lg mx-auto", children: /* @__PURE__ */ e(
    c,
    {
      ...t,
      value: r,
      onChange: a,
      onClear: () => a(""),
      onSubmit: (m) => alert(`Submitted: ${m}`)
    }
  ) });
}
const N = () => {
  const [t, r] = n("");
  return /* @__PURE__ */ l(i, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "SearchBar",
        description: "A macOS-style search input with clear button, keyboard submit, auto-focus, and multiple sizes. Includes smooth transitions and icon accent matching the system appearance.",
        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-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", children: /* @__PURE__ */ e(g, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Interactive", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6 max-w-lg mx-auto", children: [
      /* @__PURE__ */ e(
        c,
        {
          value: t,
          onChange: r,
          onClear: () => r(""),
          onSubmit: (a) => alert(`Search: ${a}`),
          placeholder: "Search files, apps, settings…"
        }
      ),
      /* @__PURE__ */ l("p", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: [
        "Current value: ",
        /* @__PURE__ */ e("code", { className: "bg-gray-100 dark:bg-gray-800 px-1 rounded", children: t || "(empty)" })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(o, { 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 space-y-4 max-w-lg mx-auto", children: ["sm", "md", "lg"].map((a) => /* @__PURE__ */ l("div", { children: [
      /* @__PURE__ */ e("p", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase", children: a }),
      /* @__PURE__ */ e(
        c,
        {
          size: a,
          placeholder: `Size: ${a}`,
          value: "",
          onChange: () => {
          }
        }
      )
    ] }, a)) }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "MacOSSearchBar",
        defaultValues: {
          placeholder: "Search…",
          size: "md",
          autoFocus: !1
        },
        controlOverrides: [
          { name: "placeholder", type: "text", description: "Placeholder text" },
          { name: "size", type: "select", options: ["sm", "md", "lg"], description: "Input size" },
          { name: "autoFocus", type: "boolean", description: "Auto-focus on mount" }
        ],
        includeProps: ["placeholder", "size", "autoFocus"],
        excludeProps: ["className", "value", "onChange", "onClear", "onSubmit"],
        children: (a) => /* @__PURE__ */ e(S, { ...a })
      }
    ),
    /* @__PURE__ */ e(h, { componentName: "MacOSSearchBar" }),
    /* @__PURE__ */ e(o, { 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(
      p,
      {
        language: "tsx",
        code: `import { MacOSSearchBar } from '@e-burgos/tucu-ui';

function SearchDemo() {
  const [value, setValue] = useState('');

  return (
    <MacOSSearchBar
      value={value}
      onChange={setValue}
      onClear={() => setValue('')}
      onSubmit={(v) => console.log('Search:', v)}
      placeholder="Search files, apps, settings…"
      size="md"       // 'sm' | 'md' | 'lg'
      autoFocus={false}
    />
  );
}`
      }
    ) }) }) })
  ] });
};
export {
  N as MacOSSearchBarSection,
  N as default
};
