@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/docs-kit/components/table-of-contents/toc-default.mjs

@@ -0,0 +1,240 @@
+import { jsx as e, jsxs as n, Fragment as D } from "react/jsx-runtime";
+/* empty css                   */
+import * as h from "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import s from "classnames";
+import { useToc as S } from "./use-toc.mjs";
+import { Typography as y } from "../../../components/typography/index.mjs";
+import { LAYOUT_OPTIONS as o } from "../../../themes/config/index.mjs";
+import { DrawerContainer as H } from "../../../components/dialog/drawer-container.mjs";
+import { Button as M } from "../../../components/buttons/button/index.mjs";
+import { Scrollbar as N } from "../../../components/common/scrollbar.mjs";
+const J = ({
+  items: b,
+  title: g = "Table of Contents",
+  className: k = "",
+  onItemClick: w,
+  children: f,
+  onSidebarToggle: O,
+  navigationMode: C = "anchor",
+  activeSectionId: T
+}) => {
+  const {
+    layout: t,
+    isSidebarOpen: i,
+    setIsSidebarOpen: d,
+    activeSection: p,
+    openCategories: I,
+    categoryRefs: A,
+    groupedItems: m,
+    handleCategoryToggle: L,
+    handleItemClick: u,
+    smallScreen: j,
+    isMobile: x
+  } = S({
+    items: b,
+    navigationMode: C,
+    activeSectionId: T,
+    onItemClick: w,
+    onSidebarToggle: O
+  }), v = /* @__PURE__ */ e("nav", { className: "p-4 space-y-2", children: m ? Object.entries(m).map(([r, c]) => {
+    const a = I.has(r);
+    return /* @__PURE__ */ n("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: () => L(r, c),
+          className: "w-full flex items-center transition-colors select-none justify-between rounded-lg px-3 py-2 text-xs font-semibold uppercase tracking-wider text-foreground/60 hover:bg-gray-100 dark:hover:bg-gray-800",
+          "aria-expanded": a,
+          "aria-label": `${a ? "Close" : "Open"} ${r} category`,
+          children: [
+            /* @__PURE__ */ e("span", { children: r }),
+            /* @__PURE__ */ e(
+              h.ChevronDown,
+              {
+                className: s(
+                  "w-4 h-4 transition-transform duration-200",
+                  a && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          ref: (l) => {
+            A.current[r] = l;
+          },
+          className: "grid transition-all duration-300 ease-in-out",
+          style: {
+            gridTemplateRows: a ? "1fr" : "0fr",
+            opacity: a ? 1 : 0
+          },
+          children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "space-y-1 pt-1", children: c.map((l) => {
+            const z = p === l.id;
+            return /* @__PURE__ */ e(
+              "a",
+              {
+                href: `#${l.id}`,
+                className: s(
+                  "block w-full text-left rounded-lg px-3 py-2 text-sm transition-all duration-200",
+                  z ? "bg-brand/10 text-brand font-semibold" : "text-foreground/60 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-foreground dark:hover:text-foreground"
+                ),
+                onClick: (R) => u(R, l),
+                children: /* @__PURE__ */ e("span", { children: l.label })
+              },
+              l.id
+            );
+          }) }) })
+        }
+      )
+    ] }, r);
+  }) : b.map((r) => {
+    const c = p === r.id;
+    return /* @__PURE__ */ e(
+      "a",
+      {
+        href: `#${r.id}`,
+        className: s(
+          "block w-full text-left rounded-lg px-3 py-2 text-sm transition-all duration-200",
+          c ? "bg-brand/10 text-brand font-semibold" : "text-foreground/60 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-foreground dark:hover:text-foreground"
+        ),
+        onClick: (a) => u(a, r),
+        children: /* @__PURE__ */ e("span", { children: r.label })
+      },
+      r.id
+    );
+  }) });
+  return /* @__PURE__ */ n(D, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: s(
+          t === o.ADMIN && "fixed top-1/2 mt-13 z-40 -translate-y-1/2 ltr:right-0 rtl:left-0",
+          t === o.HORIZONTAL && "fixed top-1/2 z-40 -translate-y-1/2 ltr:left-0 rtl:right-0",
+          t === o.CLEAN && "fixed top-1/2 z-40 -translate-y-1/2 ltr:left-0 rtl:right-0"
+        ),
+        children: !i && /* @__PURE__ */ e(
+          "button",
+          {
+            className: s(
+              "flex items-center justify-center",
+              "h-12 w-12 text-gray-600 shadow-large backdrop-blur-sm bg-light-dark dark:text-gray-200/70",
+              t === o.ADMIN && "rounded-l-lg",
+              t === o.HORIZONTAL && "rounded-r-lg",
+              t === o.CLEAN && "rounded-r-lg"
+            ),
+            onClick: () => d(!i),
+            "aria-label": "Toggle table of contents",
+            title: "Toggle table of contents",
+            children: /* @__PURE__ */ e(h.Menu, { className: "w-5 h-5" })
+          }
+        )
+      }
+    ),
+    x && /* @__PURE__ */ e(
+      H,
+      {
+        isOpen: i,
+        setIsOpen: d,
+        position: "left",
+        backdrop: !0,
+        children: /* @__PURE__ */ n("div", { className: "h-full flex flex-col w-72 bg-body border-r border-[var(--color-border)]", children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between shrink-0 px-4 py-4 border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ e(
+              y,
+              {
+                tag: "h3",
+                className: "text-sm font-semibold text-foreground",
+                children: g
+              }
+            ),
+            /* @__PURE__ */ e(
+              M,
+              {
+                variant: "ghost",
+                size: "mini",
+                shape: "circle",
+                className: "p-0.5! hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                onClick: () => d(!1),
+                "aria-label": "Close table of contents",
+                children: /* @__PURE__ */ e(h.X, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            N,
+            {
+              style: { height: "calc(100vh - 60px)" },
+              className: "h-full",
+              children: v
+            }
+          )
+        ] })
+      }
+    ),
+    !x && i && /* @__PURE__ */ n(
+      "aside",
+      {
+        className: s(
+          "transition-all duration-300 ease-in-out overflow-y-hidden",
+          t === o.ADMIN && !j ? "fixed left-0 translate-x-25 w-64 lg:w-72 border-r bg-light-dark backdrop-blur-lg shadow-md border-[var(--color-border)] z-20" : "fixed left-0 translate-x-0 w-72 lg:w-72 border-r bg-light-dark backdrop-blur-lg shadow-md border-[var(--color-border)] z-20",
+          k
+        ),
+        style: {
+          top: t === o.HORIZONTAL ? "80px" : "0px",
+          zIndex: t === o.HORIZONTAL ? "inherit" : 30,
+          height: t === o.HORIZONTAL ? "calc(100vh - 80px)" : "100vh"
+        },
+        children: [
+          /* @__PURE__ */ n("div", { className: "z-10 flex items-center justify-between shrink-0 pl-4 pr-2 p-4 border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ e(
+              y,
+              {
+                tag: "h3",
+                className: "text-sm font-semibold text-foreground!",
+                children: g
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => d(!1),
+                "aria-label": "Close table of contents",
+                className: "flex items-center justify-center rounded-full transition-colors h-6 w-6 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400",
+                children: /* @__PURE__ */ e(h.X, { className: "w-3 h-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            N,
+            {
+              style: { height: "calc(100vh - 72px - 60px)" },
+              className: "h-full",
+              children: v
+            }
+          )
+        ]
+      }
+    ),
+    f && /* @__PURE__ */ e(
+      "div",
+      {
+        className: s(
+          "transition-all duration-300 min-h-screen",
+          i ? "lg:ml-72" : "lg:ml-0"
+        ),
+        children: f
+      }
+    )
+  ] });
+};
+export {
+  J as TocDefault
+};

package/docs-kit/components/table-of-contents/toc-sonoma.mjs

@@ -0,0 +1,224 @@
+import { jsx as e, jsxs as l, Fragment as I } from "react/jsx-runtime";
+/* empty css                   */
+import * as c from "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import n from "classnames";
+import { useToc as $ } from "./use-toc.mjs";
+import { DrawerContainer as L } from "../../../components/dialog/drawer-container.mjs";
+import { Button as M } from "../../../components/buttons/button/index.mjs";
+import { Scrollbar as x } from "../../../components/common/scrollbar.mjs";
+const H = ({
+  items: d,
+  title: v = "Table of Contents",
+  className: k = "",
+  onItemClick: N,
+  children: h,
+  onSidebarToggle: w,
+  navigationMode: y = "anchor",
+  activeSectionId: C
+}) => {
+  const {
+    isSidebarOpen: o,
+    setIsSidebarOpen: s,
+    activeSection: p,
+    openCategories: j,
+    categoryRefs: T,
+    groupedItems: m,
+    handleCategoryToggle: O,
+    handleItemClick: b,
+    isMobile: f
+  } = $({
+    items: d,
+    navigationMode: y,
+    activeSectionId: C,
+    onItemClick: N,
+    onSidebarToggle: w
+  }), g = () => /* @__PURE__ */ e(
+    "div",
+    {
+      role: "heading",
+      "aria-level": 3,
+      className: "text-[16px] font-semibold text-foreground",
+      children: v
+    }
+  ), u = /* @__PURE__ */ e("nav", { className: "flex-1 overflow-y-auto px-2 py-3", children: m ? Object.entries(m).map(([r, i]) => {
+    const t = j.has(r);
+    return /* @__PURE__ */ l("div", { children: [
+      /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: () => O(r, i),
+          className: "w-full flex items-center transition-colors select-none group h-8 gap-2 rounded-md px-2 text-[13px] font-normal text-foreground! hover:bg-gray-500/8 dark:hover:bg-white/6",
+          "aria-expanded": t,
+          "aria-label": `${t ? "Close" : "Open"} ${r} category`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: r }),
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                className: n(
+                  "h-3 w-3 shrink-0 transition-transform duration-150 text-gray-400",
+                  t && "rotate-90"
+                ),
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          ref: (a) => {
+            T.current[r] = a;
+          },
+          className: "grid transition-all duration-300 ease-in-out",
+          style: {
+            gridTemplateRows: t ? "1fr" : "0fr",
+            opacity: t ? 1 : 0
+          },
+          children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "mt-0.5 ml-4 space-y-0.5 border-l border-border/60 pl-2 dark:border-border/60", children: i.map((a) => {
+            const S = p === a.id;
+            return /* @__PURE__ */ e(
+              "a",
+              {
+                href: `#${a.id}`,
+                className: n(
+                  "group flex h-8 w-full items-center gap-2 rounded-xl px-3",
+                  "text-[12px] transition-colors select-none",
+                  S ? "bg-brand/12 font-medium text-brand!" : "text-foreground! hover:bg-gray-500/8 dark:hover:bg-white/6"
+                ),
+                onClick: (z) => b(z, a),
+                children: /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: a.label })
+              },
+              a.id
+            );
+          }) }) })
+        }
+      )
+    ] }, r);
+  }) : d.map((r) => {
+    const i = p === r.id;
+    return /* @__PURE__ */ e(
+      "a",
+      {
+        href: `#${r.id}`,
+        className: n(
+          "group flex h-9 w-full items-center gap-2 rounded-xl px-3",
+          "text-[13px] transition-colors select-none",
+          i ? "bg-brand/12 font-medium text-brand!" : "text-foreground! hover:bg-gray-500/8 dark:hover:bg-white/6"
+        ),
+        onClick: (t) => b(t, r),
+        children: /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: r.label })
+      },
+      r.id
+    );
+  }) });
+  return /* @__PURE__ */ l(I, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed top-[calc(50%-80px)] z-40 ltr:right-0 rtl:left-0", children: !o && /* @__PURE__ */ e(
+      "button",
+      {
+        className: "flex h-[48px] w-[48px] items-center justify-center ltr:rounded-l-lg rtl:rounded-r-lg text-gray-600 shadow-large backdrop-blur-sm bg-light-dark dark:text-gray-200/70 transition-colors",
+        onClick: () => s(!o),
+        "aria-label": "Toggle table of contents",
+        title: "Toggle table of contents",
+        children: /* @__PURE__ */ e(c.Menu, { className: "w-6 h-6" })
+      }
+    ) }),
+    f && /* @__PURE__ */ e(
+      L,
+      {
+        isOpen: o,
+        setIsOpen: s,
+        position: "left",
+        backdrop: !0,
+        children: /* @__PURE__ */ l("div", { className: "h-full flex flex-col w-full max-w-full min-[500px]:w-80 bg-(--macos-material-toolbar,rgba(255,255,255,0.72)) backdrop-blur-xl border-r border-(--macos-separator))", children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center justify-between shrink-0 px-3 py-3 border-b border-(--color-semantic-line-primary-subtle)", children: [
+            g(),
+            /* @__PURE__ */ e(
+              M,
+              {
+                variant: "ghost",
+                size: "mini",
+                shape: "circle",
+                className: "p-0.5! hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                onClick: () => s(!1),
+                "aria-label": "Close table of contents",
+                children: /* @__PURE__ */ e(c.X, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            x,
+            {
+              style: { height: "calc(100vh - 60px)" },
+              className: "h-full",
+              children: u
+            }
+          )
+        ] })
+      }
+    ),
+    !f && o && /* @__PURE__ */ l(
+      "aside",
+      {
+        className: n(
+          "fixed top-[58px] right-0 bottom-0 w-80 border-l border-(--macos-separator) z-10",
+          "bg-(--macos-glass-regular-bg) backdrop-blur-xl ",
+          "transition-all duration-300 ease-in-out overflow-y-hidden",
+          k
+        ),
+        children: [
+          /* @__PURE__ */ l("div", { className: "z-10 flex h-[58px] items-center justify-between shrink-0 pl-4 pr-2 p-4 border-b border-(--macos-separator)", children: [
+            g(),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => s(!1),
+                "aria-label": "Close table of contents",
+                className: "flex items-center justify-center rounded-full transition-colors h-6 w-6 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400",
+                children: /* @__PURE__ */ e(c.X, { className: "w-3 h-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            x,
+            {
+              style: { height: "calc(100vh - 52px - 52px)" },
+              className: "h-full",
+              children: u
+            }
+          )
+        ]
+      }
+    ),
+    h && /* @__PURE__ */ e(
+      "div",
+      {
+        className: n(
+          "transition-all duration-300 min-h-screen",
+          o ? "lg:mr-80" : "lg:mr-0"
+        ),
+        children: h
+      }
+    )
+  ] });
+};
+export {
+  H as TocSonoma
+};

package/docs-kit/components/table-of-contents/toc-tahoe.mjs

@@ -0,0 +1,234 @@
+import { jsx as e, jsxs as a, Fragment as z } from "react/jsx-runtime";
+/* empty css                   */
+import * as d from "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import n from "classnames";
+import { useToc as M } from "./use-toc.mjs";
+import { useTheme as $ } from "../../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as R } from "../../../themes/config/index.mjs";
+import { DrawerContainer as _ } from "../../../components/dialog/drawer-container.mjs";
+import { Scrollbar as v } from "../../../components/common/scrollbar.mjs";
+const q = ({
+  items: c,
+  title: w = "Table of Contents",
+  className: k = "",
+  onItemClick: N,
+  children: h,
+  onSidebarToggle: y,
+  navigationMode: C = "anchor",
+  activeSectionId: T
+}) => {
+  const { layout: O } = $(), b = O === R.MACOS_TAHOE_NAVBAR, {
+    isSidebarOpen: l,
+    setIsSidebarOpen: s,
+    activeSection: p,
+    openCategories: j,
+    categoryRefs: A,
+    groupedItems: m,
+    handleCategoryToggle: S,
+    handleItemClick: x,
+    isMobile: f
+  } = M({
+    items: c,
+    navigationMode: C,
+    activeSectionId: T,
+    onItemClick: N,
+    onSidebarToggle: y
+  }), u = () => /* @__PURE__ */ e(
+    "div",
+    {
+      role: "heading",
+      "aria-level": 3,
+      className: "text-[16px] font-semibold text-foreground",
+      children: w
+    }
+  ), g = /* @__PURE__ */ e("nav", { className: "flex-1 overflow-y-auto px-2 py-3", children: m ? Object.entries(m).map(([r, i]) => {
+    const t = j.has(r);
+    return /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: () => S(r, i),
+          className: "w-full flex items-center transition-colors select-none group h-9 gap-2 rounded-xl px-3 text-[13px] font-normal text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)",
+          "aria-expanded": t,
+          "aria-label": `${t ? "Close" : "Open"} ${r} category`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: r }),
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                className: n(
+                  "h-3 w-3 shrink-0 transition-transform duration-150 text-foreground/40",
+                  t && "rotate-90"
+                ),
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          ref: (o) => {
+            A.current[r] = o;
+          },
+          className: "grid transition-all duration-300 ease-in-out",
+          style: {
+            gridTemplateRows: t ? "1fr" : "0fr",
+            opacity: t ? 1 : 0
+          },
+          children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "mt-0.5 ml-4 space-y-0.5 border-l border-border/60 pl-2 dark:border-border/60", children: i.map((o) => {
+            const I = p === o.id;
+            return /* @__PURE__ */ e(
+              "a",
+              {
+                href: `#${o.id}`,
+                className: n(
+                  "group flex h-8 w-full items-center gap-2 rounded-xl px-3",
+                  "text-[12px] transition-colors select-none",
+                  I ? "border border-(--macos-tahoe-sidebar-item-active-stroke) bg-(--macos-tahoe-sidebar-item-active-bg) font-semibold text-brand!" : "font-normal text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)"
+                ),
+                onClick: (L) => x(L, o),
+                children: /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: o.label })
+              },
+              o.id
+            );
+          }) }) })
+        }
+      )
+    ] }, r);
+  }) : c.map((r) => {
+    const i = p === r.id;
+    return /* @__PURE__ */ e(
+      "a",
+      {
+        href: `#${r.id}`,
+        className: n(
+          "group flex h-9 w-full items-center gap-2 rounded-xl px-3",
+          "text-[13px] transition-colors select-none",
+          i ? "border border-(--macos-tahoe-sidebar-item-active-stroke) bg-(--macos-tahoe-sidebar-item-active-bg) font-semibold text-brand!" : "font-normal text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)"
+        ),
+        onClick: (t) => x(t, r),
+        children: /* @__PURE__ */ e("span", { className: "flex-1 truncate text-left", children: r.label })
+      },
+      r.id
+    );
+  }) });
+  return /* @__PURE__ */ a(z, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed top-[calc(50%-80px)] z-40 ltr:right-0 rtl:left-0", children: !l && /* @__PURE__ */ e(
+      "button",
+      {
+        className: "flex h-[48px] w-[48px] items-center justify-center ltr:rounded-l-lg rtl:rounded-r-lg border border-r-0 border-border bg-light-dark text-gray-600 dark:text-gray-200/70 shadow-large backdrop-blur-sm transition-colors hover:text-white/90",
+        onClick: () => s(!l),
+        "aria-label": "Toggle table of contents",
+        title: "Toggle table of contents",
+        children: /* @__PURE__ */ e(d.Menu, { className: "w-6 h-6" })
+      }
+    ) }),
+    f && /* @__PURE__ */ e(
+      _,
+      {
+        isOpen: l,
+        setIsOpen: s,
+        position: "left",
+        backdrop: !1,
+        backdropClassName: "backdrop-blur-[2px] bg-transparent",
+        children: /* @__PURE__ */ e("div", { className: "pointer-events-none relative z-10 flex h-full w-full items-stretch p-3 min-[500px]:p-4", children: /* @__PURE__ */ a(
+          "aside",
+          {
+            "data-tucu": "macos-tahoe-toc",
+            className: "pointer-events-auto flex h-full w-62 max-w-[calc(100vw-24px)] flex-col rounded-[30px] border border-border bg-(--macos-tahoe-sidebar-bg) backdrop-blur-[30px]",
+            children: [
+              /* @__PURE__ */ a("div", { className: "shrink-0 px-5 pb-3 pt-5 flex items-center justify-between gap-3", children: [
+                u(),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => s(!1),
+                    "aria-label": "Close table of contents",
+                    className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-black/8 text-(--macos-tahoe-text-muted) transition-colors hover:bg-black/12 hover:text-(--macos-tahoe-text) dark:bg-white/6 dark:hover:bg-white/10",
+                    children: /* @__PURE__ */ e(d.X, { className: "w-3.5 h-3.5" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                v,
+                {
+                  style: { height: "calc(100vh - 80px)" },
+                  className: "h-full",
+                  children: g
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    ),
+    !f && l && /* @__PURE__ */ a(
+      "aside",
+      {
+        "data-tucu": "macos-tahoe-toc",
+        className: n(
+          "fixed w-[240px] xl:w-[var(--macos-tahoe-sidebar-width,280px)] rounded-3xl border border-border/50 bg-white dark:bg-light-dark shadow-card z-10",
+          "transition-all duration-300 ease-in-out overflow-y-hidden",
+          b ? "top-[90px] bottom-[32px] right-[32px]" : "top-[70px] bottom-4 right-4",
+          k
+        ),
+        children: [
+          /* @__PURE__ */ a("div", { className: "z-10 flex items-center justify-between shrink-0 px-5 pt-4 pb-3 border-b border-border", children: [
+            u(),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => s(!1),
+                "aria-label": "Close table of contents",
+                className: "flex items-center justify-center rounded-full transition-colors h-6 w-6 border border-border bg-gray-100 dark:bg-white/6 text-gray-500 dark:text-white/50 hover:bg-gray-200 dark:hover:bg-white/12 hover:text-gray-700 dark:hover:text-white/80",
+                children: /* @__PURE__ */ e(d.X, { className: "w-3 h-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            v,
+            {
+              style: {
+                height: b ? "calc(100vh - 90px - 32px - 52px)" : "calc(100vh - 68px - 16px - 52px - 16px)"
+              },
+              className: "h-full",
+              children: g
+            }
+          )
+        ]
+      }
+    ),
+    h && /* @__PURE__ */ e(
+      "div",
+      {
+        className: n(
+          "transition-all duration-300 min-h-screen",
+          l ? "mr-[255px] xl:mr-[var(--macos-tahoe-sidebar-width,295px)]" : "lg:mr-0"
+        ),
+        children: h
+      }
+    )
+  ] });
+};
+export {
+  q as TocTahoe
+};