import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as h, C as r, a as s, bH as l, c as u, P as p, A as x } from "../index-sdOMz8GW.js";
import { Search as S } from "lucide-react";
import "react-router-dom";
import "react-dom";
const C = () => {
  const [c, o] = d(""), [i, m] = d("Documents");
  return /* @__PURE__ */ a(n, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "Search Bar",
        description: "Liquid Glass search field with glass material background, clear button, and submit/escape keyboard support.",
        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-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", children: /* @__PURE__ */ e(S, { 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(r, { children: /* @__PURE__ */ e(s, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 max-w-sm", children: [
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-[var(--macos-tahoe-text-muted)] mb-1 block", children: "Small" }),
        /* @__PURE__ */ e(
          l,
          {
            size: "sm",
            placeholder: "Search...",
            className: "w-full"
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-[var(--macos-tahoe-text-muted)] mb-1 block", children: "Medium (default)" }),
        /* @__PURE__ */ e(
          l,
          {
            size: "md",
            placeholder: "Search...",
            className: "w-full"
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-[var(--macos-tahoe-text-muted)] mb-1 block", children: "Large" }),
        /* @__PURE__ */ e(
          l,
          {
            size: "lg",
            placeholder: "Search...",
            className: "w-full"
          }
        )
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(s, { title: "Interactive", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "max-w-md space-y-3", children: [
      /* @__PURE__ */ e(
        l,
        {
          value: c,
          onChange: o,
          onClear: () => o(""),
          onSubmit: (t) => alert(`Searched: ${t}`),
          placeholder: "Type and press Enter...",
          className: "w-full"
        }
      ),
      /* @__PURE__ */ a("p", { className: "text-[12px] text-[var(--macos-tahoe-text-muted)]", children: [
        "Current value: “",
        c,
        "”"
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(s, { title: "With Pre-filled Value", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
      l,
      {
        value: i,
        onChange: m,
        onClear: () => m(""),
        size: "lg",
        className: "max-w-sm"
      }
    ) }) }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
      u,
      {
        code: `import { MacOSTahoeSearchBar } from '@e-burgos/tucu-ui';

<MacOSTahoeSearchBar
  value={query}
  placeholder="Search files..."
  size="md"
  onChange={setQuery}
  onClear={() => setQuery('')}
  onSubmit={(q) => search(q)}
/>`,
        language: "tsx"
      }
    ) }) }),
    /* @__PURE__ */ e(
      p,
      {
        componentName: "MacOSTahoeSearchBar",
        defaultValues: {
          placeholder: "Search...",
          size: "md",
          autoFocus: !1
        },
        includeProps: ["placeholder", "size", "autoFocus"],
        excludeProps: ["className", "value", "onChange", "onClear", "onSubmit"],
        children: (t) => /* @__PURE__ */ e("div", { className: "max-w-sm", children: /* @__PURE__ */ e(l, { ...t, className: "w-full" }) })
      }
    ),
    /* @__PURE__ */ e(x, { componentName: "MacOSTahoeSearchBar" })
  ] });
};
export {
  C as TahoeSearchBarSection,
  C as default
};
