import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
import { useState as i } from "react";
import { H as d, C as r, a as t, bn as l, bo as c, c as m } from "../index-sdOMz8GW.js";
import { PanelTop as h, Share2 as b, MoreHorizontal as g, ChevronLeft as u, SlidersHorizontal as p, Mail as f } from "lucide-react";
import "react-router-dom";
import "react-dom";
const T = () => {
  const [s, o] = i("");
  return /* @__PURE__ */ a(n, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "MacOSToolbar",
        description: "A macOS-style toolbar with leading, center, and trailing slots. Supports vibrancy backdrop blur, a transparent mode, and an optional bottom border.",
        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-sky-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-sky-400/50", children: /* @__PURE__ */ e(h, { 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, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Title + Leading + Trailing", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)", children: [
      /* @__PURE__ */ e(
        l,
        {
          title: "Documents",
          leading: /* @__PURE__ */ a("button", { className: "flex items-center gap-1 text-xs text-[#007aff] hover:opacity-80", children: [
            /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5" }),
            "Back"
          ] }),
          trailing: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(b, { className: "w-4 h-4" }) }),
            /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(g, { className: "w-4 h-4" }) })
          ] })
        }
      ),
      /* @__PURE__ */ e("div", { className: "h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400", children: "Content area" })
    ] }) }) }) }),
    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Search Bar in Center", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)", children: [
      /* @__PURE__ */ e(
        l,
        {
          leading: /* @__PURE__ */ e(f, { className: "w-4 h-4 text-gray-500" }),
          center: /* @__PURE__ */ e(
            c,
            {
              value: s,
              onChange: o,
              onClear: () => o(""),
              className: "w-56",
              placeholder: "Search messages"
            }
          ),
          trailing: /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(p, { className: "w-4 h-4" }) })
        }
      ),
      /* @__PURE__ */ e("div", { className: "h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400", children: "Content area" })
    ] }) }) }) }),
    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Transparent (no background)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card) bg-linear-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900", children: [
      /* @__PURE__ */ e(
        l,
        {
          title: "Transparent Toolbar",
          transparent: !0,
          bordered: !1
        }
      ),
      /* @__PURE__ */ e("div", { className: "h-24 flex items-center justify-center text-sm text-gray-500", children: "Toolbar blends into background" })
    ] }) }) }) }),
    /* @__PURE__ */ e(r, { 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(
      m,
      {
        language: "tsx",
        code: `import { MacOSToolbar, MacOSSearchBar } from '@e-burgos/tucu-ui';

// Title with leading and trailing slots
<MacOSToolbar
  title="Documents"
  leading={<BackButton />}
  trailing={<MoreButton />}
/>

// Search bar in center slot
<MacOSToolbar
  center={
    <MacOSSearchBar
      value={search}
      onChange={setSearch}
      onClear={() => setSearch('')}
    />
  }
  trailing={<FilterButton />}
/>

// Transparent — blends into parent background
<MacOSToolbar title="Overlay" transparent bordered={false} />`
      }
    ) }) }) })
  ] });
};
export {
  T as MacOSToolbarSection,
  T as default
};
