import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as d, C as r, a as t, bB as l, c as i } from "../index-sdOMz8GW.js";
import { PanelTop as n, Search as o, Bell as c, Plus as h, ChevronLeft as m, Settings as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const f = () => /* @__PURE__ */ a(s, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "MacOSToolbarTahoe",
      description: "Tahoe-style toolbar with Liquid Glass blur, leading / center / trailing slots, optional border, and a title shorthand.",
      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(n, { 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: "With 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-[14px] overflow-hidden border border-border shadow-[var(--shadow-card)]", children: [
    /* @__PURE__ */ e(
      l,
      {
        leading: /* @__PURE__ */ a("button", { className: "flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: [
          /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
          "Back"
        ] }),
        title: "Dashboard",
        trailing: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e("button", { className: "rounded-[8px] p-1.5 text-gray-500 hover:bg-black/5 dark:hover:bg-white/8", children: /* @__PURE__ */ e(o, { className: "h-4 w-4" }) }),
          /* @__PURE__ */ e("button", { className: "rounded-[8px] p-1.5 text-gray-500 hover:bg-black/5 dark:hover:bg-white/8", children: /* @__PURE__ */ e(c, { className: "h-4 w-4" }) }),
          /* @__PURE__ */ a("button", { className: "flex items-center gap-1.5 rounded-[10px] px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600", children: [
            /* @__PURE__ */ e(h, { className: "h-3.5 w-3.5" }),
            "New"
          ] })
        ] })
      }
    ),
    /* @__PURE__ */ e("div", { className: "flex h-24 items-center justify-center bg-[var(--color-semantic-bg)] text-sm text-gray-400", children: "Content area" })
  ] }) }) }) }),
  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Center Slot (Custom Content)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-[14px] overflow-hidden border border-border shadow-[var(--shadow-card)]", children: [
    /* @__PURE__ */ e(
      l,
      {
        center: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 rounded-[10px] bg-black/5 dark:bg-white/8 px-3 py-1.5", children: [
          /* @__PURE__ */ e(o, { className: "h-3.5 w-3.5 text-gray-400" }),
          /* @__PURE__ */ e("span", { className: "text-sm text-gray-400", children: "Search…" })
        ] }),
        trailing: /* @__PURE__ */ e("button", { className: "rounded-[8px] p-1.5 text-gray-500 hover:bg-black/5 dark:hover:bg-white/8", children: /* @__PURE__ */ e(b, { className: "h-4 w-4" }) })
      }
    ),
    /* @__PURE__ */ e("div", { className: "flex h-24 items-center justify-center bg-[var(--color-semantic-bg)] text-sm text-gray-400", children: "Content area" })
  ] }) }) }) }),
  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Without Border", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-[14px] overflow-hidden border border-border shadow-[var(--shadow-card)]", children: [
    /* @__PURE__ */ e(l, { title: "No Border", bordered: !1 }),
    /* @__PURE__ */ e("div", { className: "flex h-24 items-center justify-center bg-[var(--color-semantic-bg)] text-sm text-gray-400", children: "Content area" })
  ] }) }) }) }),
  /* @__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(
    i,
    {
      language: "tsx",
      code: `import { MacOSToolbarTahoe } from '@e-burgos/tucu-ui';

function Page() {
  return (
    <div className="flex flex-col h-full">
      <MacOSToolbarTahoe
        leading={<BackButton />}
        title="Dashboard"
        trailing={<NewButton />}
        bordered
      />
      <main className="flex-1 overflow-auto p-6">
        <YourContent />
      </main>
    </div>
  );
}`
    }
  ) }) }) })
] });
export {
  f as TahoeToolbarSection,
  f as default
};
