@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/macos/sonoma/feedback/command-palette.mjs

@@ -0,0 +1,164 @@
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { useState as h, useRef as N, useCallback as O, useEffect as g } from "react";
+import I from "classnames";
+import { Search as P, X as q } from "lucide-react";
+function Q({
+  items: w,
+  placeholder: x = "Search or type a command…",
+  open: u,
+  onOpenChange: f,
+  triggerKey: y = "k",
+  className: C
+}) {
+  const [s, m] = h(""), [p, c] = h(0), k = N(null), [D, E] = h(!1), o = u !== void 0 ? u : D, d = O(
+    (e) => {
+      u === void 0 && E(e), f?.(e);
+    },
+    [u, f]
+  );
+  g(() => {
+    const e = (t) => {
+      (t.metaKey || t.ctrlKey) && t.key === y && (t.preventDefault(), d(!o)), t.key === "Escape" && o && d(!1);
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [o, d, y]), g(() => {
+    o && (setTimeout(() => k.current?.focus(), 0), m(""), c(0));
+  }, [o]);
+  const r = w.filter((e) => {
+    if (!s) return !0;
+    const t = s.toLowerCase();
+    return e.label.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t) || e.group?.toLowerCase().includes(t);
+  }), S = (e) => {
+    e.key === "ArrowDown" ? (e.preventDefault(), c((t) => Math.min(t + 1, r.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), c((t) => Math.max(t - 1, 0))) : e.key === "Enter" && (e.preventDefault(), r[p] && (r[p].onSelect(), d(!1)));
+  }, L = r.reduce(
+    (e, t) => {
+      const i = t.group ?? "";
+      return e[i] || (e[i] = []), e[i].push(t), e;
+    },
+    {}
+  );
+  return o ? (
+    /* Overlay */
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "data-tucu": "command-palette-overlay",
+        role: "presentation",
+        onClick: () => d(!1),
+        className: "fixed inset-0 z-[9999] flex items-start justify-center pt-[15vh]",
+        style: { backgroundColor: "rgba(0,0,0,0.32)" },
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            "data-tucu": "command-palette",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Command Palette",
+            className: I("relative w-full max-w-[600px] mx-[16px]", C),
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: S,
+            children: [
+              /* @__PURE__ */ l("div", { "data-tucu": "command-palette-search", children: [
+                /* @__PURE__ */ a(P, { "aria-hidden": "true", "data-tucu": "command-palette-search-icon" }),
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ref: k,
+                    "data-tucu": "command-palette-input",
+                    type: "text",
+                    role: "combobox",
+                    "aria-expanded": "true",
+                    "aria-autocomplete": "list",
+                    "aria-controls": "command-palette-results",
+                    autoComplete: "off",
+                    value: s,
+                    onChange: (e) => {
+                      m(e.target.value), c(0);
+                    },
+                    placeholder: x
+                  }
+                ),
+                s && /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Clear search",
+                    "data-tucu": "command-palette-clear",
+                    onClick: () => m(""),
+                    children: /* @__PURE__ */ a(q, { "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  id: "command-palette-results",
+                  "data-tucu": "command-palette-results",
+                  role: "listbox",
+                  children: [
+                    r.length === 0 && /* @__PURE__ */ a("div", { "data-tucu": "command-palette-empty", children: "No results found" }),
+                    Object.entries(L).map(([e, t]) => {
+                      const i = r.indexOf(t[0]);
+                      return /* @__PURE__ */ l("div", { "data-tucu": "command-palette-group", children: [
+                        e && /* @__PURE__ */ a("div", { "data-tucu": "command-palette-group-label", children: e }),
+                        t.map((n, j) => {
+                          const v = i + j, b = v === p;
+                          return /* @__PURE__ */ l(
+                            "div",
+                            {
+                              "data-tucu": "command-palette-item",
+                              "data-highlighted": b,
+                              role: "option",
+                              "aria-selected": b,
+                              onClick: () => {
+                                n.onSelect(), d(!1);
+                              },
+                              onMouseEnter: () => c(v),
+                              children: [
+                                n.icon && /* @__PURE__ */ a(
+                                  "span",
+                                  {
+                                    "data-tucu": "command-palette-item-icon",
+                                    "aria-hidden": "true",
+                                    children: n.icon
+                                  }
+                                ),
+                                /* @__PURE__ */ a("span", { "data-tucu": "command-palette-item-label", children: n.label }),
+                                n.description && /* @__PURE__ */ a("span", { "data-tucu": "command-palette-item-desc", children: n.description }),
+                                n.shortcut && n.shortcut.length > 0 && /* @__PURE__ */ a("span", { "data-tucu": "command-palette-shortcut", children: n.shortcut.map((K, M) => /* @__PURE__ */ a("kbd", { "data-tucu": "command-palette-key", children: K }, M)) })
+                              ]
+                            },
+                            n.id
+                          );
+                        })
+                      ] }, e);
+                    })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ l("div", { "data-tucu": "command-palette-footer", children: [
+                /* @__PURE__ */ l("span", { children: [
+                  /* @__PURE__ */ a("kbd", { "data-tucu": "command-palette-key", children: "↑" }),
+                  /* @__PURE__ */ a("kbd", { "data-tucu": "command-palette-key", children: "↓" }),
+                  "Navigate"
+                ] }),
+                /* @__PURE__ */ l("span", { children: [
+                  /* @__PURE__ */ a("kbd", { "data-tucu": "command-palette-key", children: "↵" }),
+                  "Select"
+                ] }),
+                /* @__PURE__ */ l("span", { children: [
+                  /* @__PURE__ */ a("kbd", { "data-tucu": "command-palette-key", children: "Esc" }),
+                  "Close"
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ) : null;
+}
+export {
+  Q as MacOSCommandPalette,
+  Q as default
+};

package/components/macos/sonoma/feedback/macos-sonoma-toast.mjs

@@ -0,0 +1,75 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as m, useCallback as u, useEffect as l } from "react";
+import f from "classnames";
+import { useToastStore as d } from "../../../../hooks/use-toast-store.mjs";
+import { MacOSNotificationBanner as p } from "./notification-banner.mjs";
+function g(s) {
+  switch (s) {
+    case "destructive":
+      return "error";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "info":
+      return "info";
+    default:
+      return "info";
+  }
+}
+function S() {
+  const { toasts: s, dismissToast: n } = d(), [o, c] = m([]), r = u(
+    (i) => {
+      c(
+        (e) => e.map((t) => t.id === i.id ? { ...t, dismissing: !0 } : t)
+      ), setTimeout(() => {
+        n(i.id);
+      }, 300);
+    },
+    [n]
+  );
+  return l(() => {
+    c(s);
+    const i = s.map((e) => {
+      const t = setTimeout(() => {
+        r(e);
+      }, e.timeout || 3e3);
+      return { id: e.id, timer: t };
+    });
+    return () => {
+      i.forEach(({ timer: e }) => clearTimeout(e));
+    };
+  }, [s, r]), o.length === 0 ? null : /* @__PURE__ */ a(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Notifications",
+      "data-tucu": "toast-container",
+      className: "fixed top-4 right-4 z-50 flex w-[360px] flex-col gap-2",
+      children: o.map((i) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: f(
+            "transform transition-all duration-300 ease-in-out",
+            i.dismissing ? "translate-x-full opacity-0" : "translate-x-0 opacity-100"
+          ),
+          children: /* @__PURE__ */ a(
+            p,
+            {
+              title: i.title || "",
+              message: i.message,
+              variant: g(i.variant),
+              dismissible: !0,
+              onDismiss: () => r(i)
+            }
+          )
+        },
+        i.id
+      ))
+    }
+  );
+}
+export {
+  S as MacOSSonomaToast,
+  S as default
+};

package/components/macos/sonoma/feedback/notification-banner.mjs

@@ -0,0 +1,123 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as v } from "react";
+import a from "classnames";
+const b = {
+  info: /* @__PURE__ */ e("svg", { className: "h-[20px] w-[20px]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  success: /* @__PURE__ */ e("svg", { className: "h-[20px] w-[20px]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  warning: /* @__PURE__ */ e("svg", { className: "h-[20px] w-[20px]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  error: /* @__PURE__ */ e("svg", { className: "h-[20px] w-[20px]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+      clipRule: "evenodd"
+    }
+  ) })
+}, g = {
+  info: "text-[var(--color-semantic-bg-primary)]",
+  success: "text-[#34c759]",
+  warning: "text-[#ff9500]",
+  error: "text-[#ff3b30]"
+}, w = {
+  info: "border-l-[var(--color-semantic-bg-primary)]",
+  success: "border-l-[#34c759]",
+  warning: "border-l-[#ff9500]",
+  error: "border-l-[#ff3b30]"
+};
+function C({
+  title: n,
+  message: t,
+  icon: s,
+  variant: l = "info",
+  actions: r,
+  dismissible: c = !0,
+  className: d,
+  onDismiss: p
+}) {
+  const [x, m] = v(!0);
+  if (!x) return null;
+  const f = () => {
+    m(!1), p?.();
+  }, u = () => r ? Array.isArray(r) ? /* @__PURE__ */ e("div", { className: "mt-[8px] flex gap-[16px]", children: r.map((o, h) => /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: o.onClick,
+      className: "text-xs font-semibold text-[var(--color-semantic-bg-primary)] hover:opacity-75 transition-opacity",
+      children: o.label
+    },
+    h
+  )) }) : /* @__PURE__ */ e("div", { className: "mt-[8px] flex items-center gap-[8px]", children: r }) : null;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      role: "alert",
+      className: a(
+        "flex items-start gap-[12px] rounded-[12px] px-[16px] py-[12px]",
+        "bg-[var(--macos-material-popover,rgba(255,255,255,0.90))] backdrop-blur-xl",
+        "border border-[var(--color-border)] border-l-4",
+        "shadow-[var(--shadow-card)]",
+        w[l],
+        d
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: a("mt-[2px] shrink-0", g[l]), children: s || b[l] }),
+        /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-[13px] font-semibold text-gray-900 dark:text-gray-100", children: n }),
+          t && /* @__PURE__ */ e("p", { className: "mt-[2px] text-xs text-gray-500 dark:text-gray-400", children: t }),
+          u()
+        ] }),
+        c && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: f,
+            "aria-label": "Dismiss",
+            className: a(
+              "shrink-0 flex h-[20px] w-[20px] items-center justify-center rounded-full",
+              "text-gray-400 hover:bg-gray-500/15 dark:hover:bg-white/10 transition-colors"
+            ),
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "8",
+                height: "8",
+                viewBox: "0 0 8 8",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ e("path", { d: "M1 1l6 6M7 1L1 7" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as MacOSNotificationBanner,
+  C as default
+};

package/components/macos/sonoma/feedback/popover.mjs

@@ -0,0 +1,79 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useRef as d, useEffect as u } from "react";
+import f from "classnames";
+const b = {
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-[8px]",
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-[8px]",
+  left: "right-full top-1/2 -translate-y-1/2 mr-[8px]",
+  right: "left-full top-1/2 -translate-y-1/2 ml-[8px]"
+};
+function y({
+  isOpen: t,
+  content: e,
+  children: r,
+  placement: l = "bottom",
+  minWidth: a = 200,
+  className: n,
+  contentClassName: i,
+  onClose: s
+}) {
+  const c = d(null);
+  return u(() => {
+    if (!t || !s) return;
+    const p = (m) => {
+      c.current && !c.current.contains(m.target) && s();
+    };
+    return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
+  }, [t, s]), /* @__PURE__ */ x("div", { ref: c, className: f("relative inline-block", n), children: [
+    r,
+    t && /* @__PURE__ */ o(
+      "div",
+      {
+        role: "dialog",
+        style: { minWidth: a },
+        className: f(
+          "absolute z-50",
+          "overflow-hidden rounded-[16px]",
+          "bg-[var(--macos-material-popover,rgba(255,255,255,0.90))] backdrop-blur-2xl",
+          "border border-[var(--color-border)]",
+          "shadow-[var(--shadow-main)]",
+          b[l],
+          i
+        ),
+        children: e
+      }
+    )
+  ] });
+}
+function k({
+  label: t,
+  icon: e,
+  shortcut: r,
+  destructive: l = !1,
+  disabled: a = !1,
+  onClick: n
+}) {
+  return /* @__PURE__ */ x(
+    "button",
+    {
+      type: "button",
+      disabled: a,
+      onClick: n,
+      className: f(
+        "flex w-full items-center gap-[8px] px-[12px] py-[6px] text-[13px] transition-colors",
+        l ? "text-[#ff3b30] hover:bg-[#ff3b30]/10 dark:text-[#ff453a]" : "text-gray-800 dark:text-gray-200 hover:bg-[var(--color-semantic-bg-primary)]/10",
+        a && "cursor-not-allowed opacity-40"
+      ),
+      children: [
+        e && /* @__PURE__ */ o("span", { className: "h-[16px] w-[16px] shrink-0 text-gray-500 dark:text-gray-400", children: e }),
+        /* @__PURE__ */ o("span", { className: "flex-1 text-left", children: t }),
+        r && /* @__PURE__ */ o("span", { className: "shrink-0 text-[11px] text-gray-400 dark:text-gray-500", children: r })
+      ]
+    }
+  );
+}
+export {
+  y as MacOSPopover,
+  k as MacOSPopoverItem,
+  y as default
+};

package/components/macos/sonoma/layout/layout-content-sonoma.mjs

@@ -0,0 +1,45 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import c from "classnames";
+import { MacOSToolbarSonoma as r } from "./toolbar-sonoma.mjs";
+function d({
+  children: o,
+  toolbarCenter: n,
+  toolbarLeading: e,
+  toolbarTrailing: t,
+  headerClassName: m,
+  contentClassName: l
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-tucu": "macos-sonoma-content-shell",
+      className: "flex min-w-0 flex-1 flex-col overflow-visible",
+      children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            center: n,
+            leading: e,
+            trailing: t,
+            className: m
+          }
+        ),
+        /* @__PURE__ */ a(
+          "main",
+          {
+            "data-tucu": "macos-sonoma-main",
+            className: c(
+              "relative flex-1 min-h-0 overflow-auto bg-transparent",
+              l
+            ),
+            children: /* @__PURE__ */ a("div", { "data-tucu": "macos-sonoma-content-inner", className: "p-[24px]", children: o })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  d as MacOSSonomaLayoutContent,
+  d as default
+};

package/components/macos/sonoma/layout/layout-sidebar-sonoma.mjs

@@ -0,0 +1,163 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { useState as j, useEffect as B } from "react";
+import c from "classnames";
+import { useLocation as M } from "react-router-dom";
+import { Logo as H } from "../../../logos/logo.mjs";
+import { AnchorLink as b } from "../../../links/anchor-link.mjs";
+import { matchesPath as g } from "../../../layouts/macos-layout/utils.mjs";
+function G({
+  menuItems: l,
+  logo: v,
+  className: C,
+  onItemClick: S
+}) {
+  const { pathname: d } = M(), [E, k] = j(/* @__PURE__ */ new Set());
+  B(() => {
+    const e = /* @__PURE__ */ new Set();
+    l.forEach((r) => {
+      r.dropdownItems?.some(
+        (t) => t.isActive || g(d, t.path, !0)
+      ) && e.add(r.path);
+    }), k((r) => {
+      const t = new Set(r);
+      return e.forEach((a) => t.add(a)), t;
+    });
+  }, [d, l]);
+  const I = (e) => {
+    k((r) => {
+      const t = new Set(r);
+      return t.has(e) ? t.delete(e) : t.add(e), t;
+    });
+  }, p = (e, r, t = !1) => !!r || g(d, e, t), y = (e) => p(e.path, e.isActive) || !!e.dropdownItems?.some(
+    (r) => r.isActive || g(d, r.path, !0)
+  ), i = (e) => {
+    e?.(), S?.();
+  }, x = (e, r = !1) => c(
+    "group flex w-full items-center gap-[8px] transition-colors duration-150 select-none",
+    r ? e ? "h-[28px] rounded-[6px] px-[8px] text-[12px] font-medium bg-brand/12 text-brand!" : "h-[28px] rounded-[6px] px-[8px] text-[12px] text-foreground! hover:text-foreground hover:bg-foreground/5" : e ? "h-[32px] rounded-[6px] px-[8px] text-[13px] font-medium bg-brand/12 text-brand!" : "h-[32px] rounded-[6px] px-[8px] text-[13px] font-normal text-foreground! hover:text-foreground hover:bg-foreground/5"
+  ), h = (e, r = !1) => c(
+    r ? "h-[14px] w-[14px] shrink-0 [&>svg]:h-[14px] [&>svg]:w-[14px]" : "h-[16px] w-[16px] shrink-0 [&>svg]:h-[16px] [&>svg]:w-[16px]",
+    e ? "text-brand!" : "text-foreground/50! group-hover:text-foreground/80"
+  ), L = () => l.filter((e) => !e.hide).map((e) => {
+    const r = e.dropdownItems?.filter((o) => !o.hide) ?? [], t = r.length > 0, a = E.has(e.path), w = r.some(
+      (o) => p(o.path, o.isActive, !0)
+    ), u = p(e.path, e.isActive) && !w, f = y(e), N = e.href ?? e.path, A = u || w;
+    return /* @__PURE__ */ s("li", { children: [
+      t ? /* @__PURE__ */ s("div", { className: x(u), children: [
+        /* @__PURE__ */ s(
+          b,
+          {
+            to: N,
+            "aria-current": u ? "page" : void 0,
+            onClick: () => i(e.onClick),
+            className: c(
+              "flex min-w-0 flex-1 items-center gap-[8px]",
+              A ? "text-brand!" : "text-foreground!"
+            ),
+            children: [
+              e.icon && /* @__PURE__ */ n(
+                "span",
+                {
+                  className: h(A),
+                  children: e.icon
+                }
+              ),
+              /* @__PURE__ */ n("span", { className: "flex-1 truncate text-left", children: e.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            "aria-label": a ? `Collapse ${e.name}` : `Expand ${e.name}`,
+            "aria-expanded": a,
+            onClick: () => I(e.path),
+            className: "flex h-[24px] w-[24px] shrink-0 items-center justify-center rounded-full transition-colors hover:bg-black/4 dark:hover:bg-white/8",
+            children: /* @__PURE__ */ n(
+              "svg",
+              {
+                className: c(
+                  "h-[12px] w-[12px] shrink-0 transition-transform duration-150 text-foreground/40",
+                  a && "rotate-90"
+                ),
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ n(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ s(
+        b,
+        {
+          to: N,
+          "aria-current": f ? "page" : void 0,
+          onClick: () => i(e.onClick),
+          className: x(f),
+          children: [
+            e.icon && /* @__PURE__ */ n("span", { className: h(f), children: e.icon }),
+            /* @__PURE__ */ n("span", { className: "flex-1 truncate text-left", children: e.name })
+          ]
+        }
+      ),
+      t && a && /* @__PURE__ */ n("ul", { className: "mt-[2px] ml-[16px] space-y-[2px] border-l border-border/60 pl-[8px] dark:border-border/60", children: r.map((o) => {
+        const P = o.href ?? o.path, m = p(
+          o.path,
+          o.isActive,
+          !0
+        );
+        return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ s(
+          b,
+          {
+            to: P,
+            "aria-current": m ? "page" : void 0,
+            onClick: () => i(o.onClick),
+            className: x(m, !0),
+            children: [
+              o.icon && /* @__PURE__ */ n(
+                "span",
+                {
+                  className: h(
+                    m,
+                    !0
+                  ),
+                  children: o.icon
+                }
+              ),
+              /* @__PURE__ */ n("span", { className: "flex-1 truncate text-left", children: o.name })
+            ]
+          }
+        ) }, o.path);
+      }) })
+    ] }, e.path);
+  });
+  return /* @__PURE__ */ s(
+    "aside",
+    {
+      "data-tucu": "macos-sonoma-sidebar",
+      className: c(
+        "flex h-full flex-col w-[var(--macos-sidebar-width,300px)] shrink-0 border-r border-border",
+        "bg-transparent sm:bg-(--macos-glass-regular-bg) sm:backdrop-blur-xl ",
+        C
+      ),
+      children: [
+        /* @__PURE__ */ n("div", { className: "hidden sm:flex h-[58px] shrink-0 items-center border-b border-border px-[12px]", children: v && /* @__PURE__ */ n(H, { ...v, size: "small" }) }),
+        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto px-[8px] py-[12px]", children: /* @__PURE__ */ n("ul", { className: "space-y-[2px]", children: L() }) })
+      ]
+    }
+  );
+}
+export {
+  G as MacOSSonomaLayoutSidebar,
+  G as default
+};

package/components/macos/sonoma/layout/toolbar-sonoma.mjs

@@ -0,0 +1,36 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import m from "classnames";
+function p({
+  title: r,
+  leading: a,
+  trailing: s,
+  center: o,
+  children: c,
+  className: l,
+  transparent: n = !1,
+  bordered: i = !0
+}) {
+  return /* @__PURE__ */ t(
+    "header",
+    {
+      "data-tucu": "toolbar",
+      className: m(
+        "relative z-20 flex h-(--macos-toolbar-height,58px) shrink-0 items-center gap-[12px] px-[24px]!",
+        !n && "bg-(--macos-glass-regular-bg) backdrop-blur-xl",
+        i && "border-b border-(--macos-separator)",
+        l
+      ),
+      children: [
+        a && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-[8px]", children: a }),
+        /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 items-center justify-center overflow-hidden", children: [
+          o ?? (r && /* @__PURE__ */ e("span", { className: "select-none truncate text-[13px] font-semibold text-gray-800 dark:text-gray-100", children: r })),
+          c
+        ] }),
+        s && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-[8px]", children: s })
+      ]
+    }
+  );
+}
+export {
+  p as MacOSToolbarSonoma
+};