@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/macos/tahoe/containers/dialog-tahoe.mjs

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useRef as f, useCallback as h, useEffect as x } from "react";
+import b from "classnames";
+function k({
+  children: t,
+  variant: r = "default",
+  onClick: s,
+  disabled: o,
+  className: i
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: s,
+      disabled: o,
+      className: b(
+        "inline-flex h-[32px] items-center justify-center rounded-[8px] px-[16px] text-[13px] font-medium transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--macos-tahoe-accent)/40",
+        o && "pointer-events-none opacity-40",
+        r === "primary" && [
+          "bg-(--macos-tahoe-accent) text-white",
+          "hover:brightness-110 active:brightness-95"
+        ],
+        r === "destructive" && [
+          "bg-red-500 text-white",
+          "hover:bg-red-600 active:bg-red-700"
+        ],
+        r === "default" && [
+          "bg-(--macos-glass-clear-bg) backdrop-blur-sm",
+          "border border-(--macos-glass-border)",
+          "text-(--macos-tahoe-text)",
+          "hover:bg-(--macos-tahoe-hover)"
+        ],
+        i
+      ),
+      children: t
+    }
+  );
+}
+function w({
+  open: t,
+  title: r,
+  children: s,
+  footer: o,
+  className: i,
+  width: m = 420,
+  onClose: a,
+  closeOnOverlay: p = !0,
+  closeOnEscape: d = !0
+}) {
+  const n = f(null), l = h(
+    (c) => {
+      c.key === "Escape" && d && a();
+    },
+    [a, d]
+  );
+  return x(() => {
+    if (t)
+      return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [t, l]), x(() => {
+    t && n.current && n.current.focus();
+  }, [t]), t ? /* @__PURE__ */ e(
+    "div",
+    {
+      "data-tucu": "tahoe-dialog-overlay",
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[2px]",
+      onClick: p ? a : void 0,
+      children: /* @__PURE__ */ u(
+        "div",
+        {
+          ref: n,
+          "data-tucu": "tahoe-dialog",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": r,
+          tabIndex: -1,
+          onClick: (c) => c.stopPropagation(),
+          className: b(
+            "flex max-h-[80vh] flex-col overflow-hidden outline-none",
+            "rounded-[16px]",
+            "bg-(--macos-glass-prominent-bg) backdrop-blur-(--macos-glass-prominent-blur,40px)",
+            "border border-(--macos-glass-prominent-border,var(--macos-glass-border))",
+            "shadow-[0_24px_80px_rgba(0,0,0,0.2),0_0_0_1px_rgba(255,255,255,0.06)_inset]",
+            i
+          ),
+          style: { width: m },
+          children: [
+            r && /* @__PURE__ */ u("div", { className: "flex items-center justify-between border-b border-(--macos-glass-border-subtle) px-[24px] py-[16px]", children: [
+              /* @__PURE__ */ e("h2", { className: "text-[15px] font-semibold text-(--macos-tahoe-text)", children: r }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: a,
+                  "aria-label": "Close dialog",
+                  className: "rounded-[6px] p-[4px] text-(--macos-tahoe-text-muted) transition-colors hover:text-(--macos-tahoe-text)",
+                  children: /* @__PURE__ */ e("svg", { className: "h-[16px] w-[16px]", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M4 4l8 8M12 4l-8 8" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto px-[24px] py-[16px]", children: s }),
+            o && /* @__PURE__ */ e("div", { className: "flex items-center justify-end gap-[8px] border-t border-(--macos-glass-border-subtle) px-[24px] py-[12px]", children: o })
+          ]
+        }
+      )
+    }
+  ) : null;
+}
+export {
+  w as MacOSTahoeDialog,
+  k as MacOSTahoeDialogButton,
+  w as default
+};

package/components/macos/tahoe/containers/widget-tahoe.mjs

@@ -0,0 +1,50 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import x from "classnames";
+const d = {
+  sm: "w-[170px] h-[170px]",
+  md: "w-[364px] h-[170px]",
+  lg: "w-[170px] h-[364px]",
+  xl: "w-[364px] h-[364px]"
+};
+function i({
+  title: s,
+  subtitle: a,
+  icon: t,
+  actions: r
+}) {
+  return /* @__PURE__ */ c("div", { className: "flex items-center gap-[8px] px-[14px] pt-[12px]", children: [
+    t && /* @__PURE__ */ e("div", { className: "flex h-[24px] w-[24px] shrink-0 items-center justify-center text-(--macos-tahoe-accent)", children: t }),
+    /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ e("p", { className: "truncate text-[11px] font-semibold uppercase tracking-wide text-(--macos-tahoe-text-muted)", children: s }),
+      a && /* @__PURE__ */ e("p", { className: "truncate text-[13px] font-medium text-(--macos-tahoe-text)", children: a })
+    ] }),
+    r && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", children: r })
+  ] });
+}
+function m({
+  size: s = "sm",
+  children: a,
+  className: t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-tucu": "tahoe-widget",
+      className: x(
+        "flex flex-col overflow-hidden",
+        "rounded-[22px]",
+        "bg-(--macos-glass-regular-bg) backdrop-blur-(--macos-glass-regular-blur,20px)",
+        "border border-(--macos-glass-border)",
+        "shadow-(--macos-glass-shadow,0_4px_16px_rgba(0,0,0,0.08))",
+        d[s],
+        t
+      ),
+      children: a
+    }
+  );
+}
+export {
+  m as MacOSTahoeWidget,
+  i as MacOSTahoeWidgetHeader,
+  m as default
+};

package/components/macos/tahoe/containers/window-tahoe.mjs

@@ -0,0 +1,322 @@
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import { useRef as S, useState as P, useEffect as q, useCallback as A } from "react";
+import { createPortal as ie } from "react-dom";
+import f from "classnames";
+function G({
+  onClose: N,
+  onMinimize: L,
+  onMaximize: E,
+  disableClose: m,
+  disableMinimize: c,
+  disableMaximize: a
+}) {
+  return /* @__PURE__ */ _("div", { "data-tucu": "traffic-lights", className: "group flex items-center gap-[8px]", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        "data-tucu": "traffic-light",
+        "data-type": "close",
+        onClick: N,
+        disabled: m,
+        "aria-label": "Close",
+        className: f(
+          "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+          m ? "bg-gray-400/40 cursor-not-allowed" : "bg-(--macos-traffic-close) hover:brightness-90"
+        ),
+        children: !m && /* @__PURE__ */ t(
+          "svg",
+          {
+            className: "hidden group-hover:block",
+            width: "6",
+            height: "6",
+            viewBox: "0 0 6 6",
+            fill: "none",
+            stroke: "rgba(0,0,0,0.5)",
+            strokeWidth: "1.2",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ t("path", { d: "M1 1l4 4M5 1L1 5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        "data-tucu": "traffic-light",
+        "data-type": "minimize",
+        onClick: L,
+        disabled: c,
+        "aria-label": "Minimize",
+        className: f(
+          "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+          c ? "bg-gray-400/40 cursor-not-allowed" : "bg-(--macos-traffic-minimize) hover:brightness-90"
+        ),
+        children: !c && /* @__PURE__ */ t(
+          "svg",
+          {
+            className: "hidden group-hover:block",
+            width: "6",
+            height: "2",
+            viewBox: "0 0 6 2",
+            fill: "none",
+            stroke: "rgba(0,0,0,0.5)",
+            strokeWidth: "1.2",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ t("path", { d: "M0.5 1h5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        "data-tucu": "traffic-light",
+        "data-type": "maximize",
+        onClick: E,
+        disabled: a,
+        "aria-label": "Maximize",
+        className: f(
+          "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+          a ? "bg-gray-400/40 cursor-not-allowed" : "bg-(--macos-traffic-maximize) hover:brightness-90"
+        ),
+        children: !a && /* @__PURE__ */ t(
+          "svg",
+          {
+            className: "hidden group-hover:block",
+            width: "6",
+            height: "6",
+            viewBox: "0 0 6 6",
+            fill: "none",
+            stroke: "rgba(0,0,0,0.5)",
+            strokeWidth: "1.1",
+            children: /* @__PURE__ */ t(
+              "path",
+              {
+                d: "M1 5L5 1M3 1h2v2M1 3V5h2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+const ce = {
+  n: "cursor-n-resize",
+  s: "cursor-s-resize",
+  e: "cursor-e-resize",
+  w: "cursor-w-resize",
+  ne: "cursor-ne-resize",
+  nw: "cursor-nw-resize",
+  se: "cursor-se-resize",
+  sw: "cursor-sw-resize"
+};
+function fe({
+  title: N,
+  children: L,
+  className: E,
+  titleBarClassName: m,
+  showTrafficLights: c = !0,
+  trafficLightsPosition: a = "left",
+  onClose: J,
+  onMinimize: K,
+  onMaximize: Q,
+  disableClose: X = !1,
+  disableMinimize: Y = !1,
+  disableMaximize: j = !1,
+  fullSize: Z = !1,
+  portal: $ = !1,
+  draggable: C = !1,
+  defaultState: D = "normal",
+  resizable: h = !1,
+  width: H,
+  height: T,
+  minWidth: R = 200,
+  minHeight: W = 120
+}) {
+  const l = S(null), [b, U] = P({ w: 0, h: 0 }), [n, u] = P(D), [s, ee] = P(null), o = S(null);
+  q(() => {
+    u(D);
+  }, [D]);
+  const r = S(null);
+  q(() => {
+    if (!l.current) return;
+    const e = l.current.getBoundingClientRect();
+    U({ w: e.width, h: e.height });
+  }, [H, T]);
+  const F = () => {
+    X || (u("closed"), J?.());
+  }, I = () => {
+    Y || (u((e) => e === "fullscreen" ? "normal" : e === "normal" ? "minimized" : "normal"), K?.());
+  }, O = () => {
+    j || (u(n === "fullscreen" ? "normal" : n === "normal" && Z ? "fullscreen" : "normal"), Q?.());
+  }, te = A(
+    (e) => {
+      if (!C || n === "fullscreen" || e.target.closest('[data-tucu="traffic-light"]'))
+        return;
+      e.preventDefault();
+      const i = l.current?.getBoundingClientRect();
+      if (!i) return;
+      const y = s ? s.x : i.left, k = s ? s.y : i.top;
+      o.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        originX: y,
+        originY: k
+      };
+      const p = (g) => {
+        if (!o.current) return;
+        const M = g.clientX - o.current.startX, w = g.clientY - o.current.startY;
+        ee({
+          x: o.current.originX + M,
+          y: o.current.originY + w
+        });
+      }, x = () => {
+        o.current = null, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", x);
+      };
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", x);
+    },
+    [C, n, s]
+  ), re = A(
+    (e) => (i) => {
+      if (!h || !l.current || n === "fullscreen")
+        return;
+      i.preventDefault();
+      const y = l.current.getBoundingClientRect();
+      r.current = {
+        edge: e,
+        startX: i.clientX,
+        startY: i.clientY,
+        startW: y.width,
+        startH: y.height
+      };
+      const k = (x) => {
+        if (!r.current) return;
+        const g = x.clientX - r.current.startX, M = x.clientY - r.current.startY;
+        let w = r.current.startW, B = r.current.startH;
+        e.includes("e") && (w = Math.max(R, r.current.startW + g)), e.includes("w") && (w = Math.max(R, r.current.startW - g)), e.includes("s") && (B = Math.max(W, r.current.startH + M)), e.includes("n") && (B = Math.max(W, r.current.startH - M)), U({ w, h: B });
+      }, p = () => {
+        r.current = null, document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", p);
+      };
+      document.addEventListener("mousemove", k), document.addEventListener("mouseup", p);
+    },
+    [h, R, W, n]
+  ), ne = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+  if (n === "closed") return null;
+  const d = n === "fullscreen", v = n === "minimized", z = C && !d, se = $ || d || z && !!s, oe = d ? { width: "100vw", height: "100vh" } : {
+    width: h && b.w ? b.w : H,
+    height: v ? void 0 : h && b.h ? b.h : T,
+    ...z && s ? {
+      position: "fixed",
+      left: s.x,
+      top: s.y,
+      zIndex: 9999
+    } : {}
+  }, V = /* @__PURE__ */ _(
+    "div",
+    {
+      ref: l,
+      "data-tucu": "tahoe-window",
+      "data-state": n,
+      className: f(
+        "flex flex-col",
+        "rounded-[16px]",
+        "border border-(--macos-glass-border)",
+        "bg-(--macos-glass-regular-bg) backdrop-blur-(--macos-glass-regular-blur,20px)",
+        "shadow-(--macos-glass-shadow,0_8px_32px_rgba(0,0,0,0.12))",
+        d && "fixed inset-0 z-50 rounded-none!",
+        !d && "relative overflow-hidden",
+        E
+      ),
+      style: {
+        ...oe,
+        transition: "width 0.35s cubic-bezier(0.22,1,0.36,1), height 0.35s cubic-bezier(0.22,1,0.36,1), transform 0.35s cubic-bezier(0.22,1,0.36,1), border-radius 0.35s cubic-bezier(0.22,1,0.36,1)"
+      },
+      children: [
+        /* @__PURE__ */ _(
+          "div",
+          {
+            "data-tucu": "tahoe-window-titlebar",
+            className: f(
+              "relative flex h-[52px] shrink-0 items-center gap-[12px] px-[20px]",
+              "border-b border-(--macos-glass-border-subtle)",
+              "bg-(--macos-glass-clear-bg)",
+              "backdrop-blur-(--macos-glass-clear-blur,30px)",
+              v && "rounded-[16px] border-b-0",
+              z && "cursor-grab active:cursor-grabbing",
+              m
+            ),
+            style: {
+              transition: "border-radius 0.35s cubic-bezier(0.22,1,0.36,1)"
+            },
+            onMouseDown: z ? te : void 0,
+            children: [
+              c && a === "left" && /* @__PURE__ */ t(
+                G,
+                {
+                  onClose: F,
+                  onMinimize: I,
+                  onMaximize: O,
+                  disableClose: X,
+                  disableMinimize: Y,
+                  disableMaximize: j
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none select-none text-[13px] font-semibold tracking-[0.01em] text-(--macos-tahoe-text)", children: N }),
+              /* @__PURE__ */ t("div", { className: "flex-1" }),
+              c && a === "right" && /* @__PURE__ */ t(
+                G,
+                {
+                  onClose: F,
+                  onMinimize: I,
+                  onMaximize: O,
+                  disableClose: X,
+                  disableMinimize: Y,
+                  disableMaximize: j
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "overflow-hidden",
+            style: {
+              display: "grid",
+              gridTemplateRows: v ? "0fr" : "1fr",
+              transition: "grid-template-rows 0.35s cubic-bezier(0.22,1,0.36,1)"
+            },
+            children: /* @__PURE__ */ t("div", { className: "min-h-0 overflow-auto", children: L })
+          }
+        ),
+        h && !d && !v && ne.map((e) => /* @__PURE__ */ t(
+          "div",
+          {
+            onMouseDown: re(e),
+            className: f(
+              "absolute z-10",
+              ce[e],
+              e === "n" && "inset-x-0 top-0 h-[4px]",
+              e === "s" && "inset-x-0 bottom-0 h-[4px]",
+              e === "e" && "inset-y-0 right-0 w-[4px]",
+              e === "w" && "inset-y-0 left-0 w-[4px]",
+              e === "ne" && "right-0 top-0 h-[12px] w-[12px]",
+              e === "nw" && "left-0 top-0 h-[12px] w-[12px]",
+              e === "se" && "bottom-0 right-0 h-[12px] w-[12px]",
+              e === "sw" && "bottom-0 left-0 h-[12px] w-[12px]"
+            )
+          },
+          e
+        ))
+      ]
+    }
+  );
+  return se ? ie(V, document.body) : V;
+}
+export {
+  fe as MacOSTahoeWindow,
+  fe as default
+};

package/components/macos/tahoe/controls/macos-tahoe-toast.mjs

@@ -0,0 +1,75 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as u, useCallback as m, useEffect as l } from "react";
+import f from "classnames";
+import { useToastStore as d } from "../../../../hooks/use-toast-store.mjs";
+import { MacOSTahoeNotificationBanner as p } from "./notification-banner-tahoe.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 w() {
+  const { toasts: s, dismissToast: n } = d(), [o, c] = u([]), r = m(
+    (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 {
+  w as MacOSTahoeToast,
+  w as default
+};

package/components/macos/tahoe/controls/notification-banner-tahoe.mjs

@@ -0,0 +1,127 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as v, useCallback as b } from "react";
+import l from "classnames";
+const f = {
+  info: "bg-blue-500",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  error: "bg-red-500"
+}, g = {
+  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"
+    }
+  ) })
+}, w = {
+  info: "text-blue-500",
+  success: "text-green-500",
+  warning: "text-amber-500",
+  error: "text-red-500"
+};
+function C({
+  title: i,
+  message: s,
+  icon: c,
+  variant: t = "info",
+  actions: a,
+  dismissible: d = !0,
+  className: x,
+  onDismiss: o
+}) {
+  const [p, m] = v(!1), h = b(() => {
+    m(!0), o?.();
+  }, [o]);
+  return p ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      "data-tucu": "tahoe-notification-banner",
+      role: "alert",
+      className: l(
+        "relative flex items-start gap-[12px] overflow-hidden px-[16px] py-[12px]",
+        "rounded-[12px]",
+        "bg-(--macos-glass-prominent-bg) backdrop-blur-(--macos-glass-prominent-blur,32px) backdrop-saturate-(--macos-glass-prominent-saturate,2)",
+        "border border-(--macos-glass-border)",
+        "shadow-(--macos-glass-shadow,0_4px_24px_rgba(0,0,0,0.08))",
+        "[box-shadow:var(--macos-glass-shadow),var(--macos-glass-highlight)]",
+        x
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: l(
+              "absolute inset-y-0 left-0 w-[3px]",
+              f[t]
+            )
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: l("mt-[2px] shrink-0", w[t]), children: c || g[t] }),
+        /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-[13px] font-semibold text-(--macos-tahoe-text)", children: i }),
+          s && /* @__PURE__ */ e("p", { className: "mt-[2px] text-[12px] leading-relaxed text-(--macos-tahoe-text-muted)", children: s }),
+          a && /* @__PURE__ */ e("div", { className: "mt-[8px] flex items-center gap-[8px]", children: Array.isArray(a) ? a.map((r, u) => /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: r.onClick,
+              className: "text-xs font-semibold text-(--macos-tahoe-accent) hover:opacity-75 transition-opacity",
+              children: r.label
+            },
+            u
+          )) : a })
+        ] }),
+        d && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: h,
+            "aria-label": "Dismiss",
+            className: "shrink-0 rounded-[6px] p-[2px] text-(--macos-tahoe-text-muted) transition-colors hover:text-(--macos-tahoe-text)",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "h-[16px] w-[16px]",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ e("path", { d: "M4 4l8 8M12 4l-8 8" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as MacOSTahoeNotificationBanner,
+  C as default
+};