@mt-gloss/ui 0.1.106 → 0.1.108

package/{BaseAsyncButton-Cq_l7clO.js → BaseAsyncButton-aDQ_TjJi.js}

@@ -1,48 +1,49 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { g as p, d as B, al as g, i as _ } from "./UIContext-DP6JGCto.js";
-import b, { useEffect as f } from "react";
-const N = function(l) {
-  const { as: e, htmlFor: s, className: t, ...n } = l;
+import { c as p } from "./BaseText-Dxbk1JJa.js";
+import b, { useEffect as B } from "react";
+import { b as f, ah as g, e as _ } from "./UIContext-Dm0GYHFT.js";
+const h = function(t) {
+  const { as: e, htmlFor: s, className: l, ...n } = t;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "label",
       htmlFor: s,
-      className: t ? `gloss-base-label ${t}` : "gloss-base-label",
+      className: l ? `gloss-base-label ${l}` : "gloss-base-label",
       ...n
     }
   );
 };
-N.displayName = "BaseLabel";
-const h = function(l) {
-  const { as: e, className: s, ...t } = l;
+h.displayName = "BaseLabel";
+const N = function(t) {
+  const { as: e, className: s, ...l } = t;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "span",
       "data-role": "value",
       className: s ? `gloss-base-value ${s}` : "gloss-base-value",
-      ...t
+      ...l
     }
   );
 };
-h.displayName = "BaseValue";
+N.displayName = "BaseValue";
 function v({
   definition: a,
-  open: l,
+  open: t,
   onDismiss: e,
   className: s,
-  style: t,
+  style: l,
   children: n
 }) {
   const c = a?.position ?? "top-right", r = a?.duration ?? 0;
-  f(() => {
-    if (!l || r <= 0 || !e) return;
+  B(() => {
+    if (!t || r <= 0 || !e) return;
     const y = setTimeout(() => {
       e();
     }, r);
     return () => clearTimeout(y);
-  }, [l, r, e]);
+  }, [t, r, e]);
   const i = {
     portal: !0,
     dismissOnClickOutside: !1,
@@ -54,16 +55,16 @@ function v({
     zIndex: a?.zIndex
   }, u = ["gloss-base-toast", `gloss-base-toast--${c}`];
   return s && u.push(s), /* @__PURE__ */ o(
-    B,
+    f,
     {
       definition: i,
-      open: l,
+      open: t,
       onDismiss: e,
       children: /* @__PURE__ */ o(
         "div",
         {
           className: u.join(" "),
-          style: t,
+          style: l,
           role: "status",
           "aria-live": "polite",
           children: n
@@ -82,11 +83,11 @@ const A = {
   iconColor: "--_icon-color"
 };
 function C(a) {
-  const { definition: l, className: e, style: s, role: t, children: n, ...c } = a, { style: r, dataAttrs: i } = g(l, A);
+  const { definition: t, className: e, style: s, role: l, children: n, ...c } = a, { style: r, dataAttrs: i } = g(t, A);
   return /* @__PURE__ */ o(
     "div",
     {
-      role: t || "alert",
+      role: l || "alert",
       className: e ? `gloss-base-alert ${e}` : "gloss-base-alert",
       style: { ...r, ...s },
       ...i,
@@ -102,8 +103,8 @@ const S = {
   fontSize: "--_font-size"
 };
 function $(a) {
-  const { definition: l, separator: e = "/", className: s, style: t, children: n } = a, { style: c } = g(
-    l,
+  const { definition: t, separator: e = "/", className: s, style: l, children: n } = a, { style: c } = g(
+    t,
     S
   ), r = b.Children.toArray(n);
   return /* @__PURE__ */ o(
@@ -111,7 +112,7 @@ function $(a) {
     {
       "aria-label": "Breadcrumb",
       className: s ? `gloss-base-breadcrumbs-nav ${s}` : "gloss-base-breadcrumbs-nav",
-      style: { ...c, ...t },
+      style: { ...c, ...l },
       children: /* @__PURE__ */ o("ol", { className: "gloss-base-breadcrumbs", children: r.map((i, d) => {
         const u = d === r.length - 1;
         return /* @__PURE__ */ m(b.Fragment, { children: [
@@ -132,10 +133,10 @@ function $(a) {
 $.displayName = "BaseBreadcrumbs";
 function T(a) {
   const {
-    as: l,
+    as: t,
     definition: e,
     loading: s = !1,
-    disabled: t = !1,
+    disabled: l = !1,
     className: n,
     style: c,
     children: r,
@@ -147,9 +148,9 @@ function T(a) {
   return /* @__PURE__ */ m(
     _,
     {
-      as: l,
+      as: t,
       definition: e,
-      disabled: t || s,
+      disabled: l || s,
       loading: s,
       className: d,
       style: c,
@@ -170,8 +171,8 @@ function T(a) {
 }
 T.displayName = "BaseAsyncButton";
 export {
-  N as B,
-  h as a,
+  h as B,
+  N as a,
   v as b,
   C as c,
   $ as d,

package/BaseText-Dxbk1JJa.js

@@ -0,0 +1,66 @@
+import { jsx as c } from "react/jsx-runtime";
+function f(r) {
+  const { as: n, definition: a, className: s, style: o, children: d, ...l } = r, e = n || "div", i = { ...o };
+  a?.padding && (i["--_padding"] = a.padding), a?.paddingX && (i["--_px"] = a.paddingX), a?.paddingY && (i["--_py"] = a.paddingY), a?.margin && (i["--_margin"] = a.margin), a?.gap && (i["--_gap"] = a.gap), a?.bg && (i["--_bg"] = a.bg), a?.border && (i["--_border"] = a.border), a?.radius && (i["--_radius"] = a.radius);
+  const t = {};
+  return a?.display && (t["data-display"] = a.display), a?.direction && (t["data-direction"] = a.direction), a?.align && (t["data-align"] = a.align), a?.justify && (t["data-justify"] = a.justify), a?.wrap && (t["data-wrap"] = ""), a?.paddingX && (t["data-has-px"] = ""), a?.paddingY && (t["data-has-py"] = ""), /* @__PURE__ */ c(
+    e,
+    {
+      className: s ? `gloss-base-box ${s}` : "gloss-base-box",
+      style: i,
+      ...t,
+      ...l,
+      children: d
+    }
+  );
+}
+f.displayName = "BaseBox";
+function g(r) {
+  const { as: n, definition: a, className: s, style: o, ...d } = r, l = n || "hr", e = { ...o };
+  a?.color && (e["--_color"] = a.color), a?.thickness && (e["--_thickness"] = a.thickness), a?.spacing && (e["--_spacing"] = a.spacing);
+  const i = {};
+  return a?.orientation === "vertical" && (i["data-orientation"] = "vertical"), /* @__PURE__ */ c(
+    l,
+    {
+      className: s ? `gloss-base-divider ${s}` : "gloss-base-divider",
+      style: e,
+      ...i,
+      ...d
+    }
+  );
+}
+g.displayName = "BaseDivider";
+function p(r) {
+  const { as: n, definition: a, className: s, style: o, children: d, ...l } = r, e = n || "span", i = { ...o };
+  a?.fontFamily && (i["--_font-family"] = a.fontFamily), a?.fontSize && (i["--_font-size"] = a.fontSize), a?.fontWeight && (i["--_font-weight"] = a.fontWeight), a?.lineHeight && (i["--_line-height"] = a.lineHeight), a?.letterSpacing && (i["--_letter-spacing"] = a.letterSpacing), a?.color && (i["--_color"] = a.color);
+  const t = {};
+  return a?.align && (t["data-align"] = a.align), a?.truncate && (t["data-truncate"] = ""), a?.wrap && (t["data-wrap"] = a.wrap), /* @__PURE__ */ c(
+    e,
+    {
+      className: s ? `gloss-base-typography ${s}` : "gloss-base-typography",
+      style: i,
+      ...t,
+      ...l,
+      children: d
+    }
+  );
+}
+p.displayName = "BaseTypography";
+const y = function(n) {
+  const { as: a, className: s, ...o } = n;
+  return /* @__PURE__ */ c(
+    p,
+    {
+      as: a || "span",
+      className: s ? `gloss-base-text ${s}` : "gloss-base-text",
+      ...o
+    }
+  );
+};
+y.displayName = "BaseText";
+export {
+  f as B,
+  y as a,
+  g as b,
+  p as c
+};

package/{COMMITS-kaUvc5jL.js → COMMITS-DG0Q_9DU.js}

@@ -1,7 +1,7 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
+import { jsx as c, jsxs as E } from "react/jsx-runtime";
 import { motion as L } from "framer-motion";
-import { useSyncExternalStore as O, createContext as T, useContext as S, useReducer as w, useRef as g, useEffect as d, useMemo as m, useCallback as I, useLayoutEffect as _, useState as N } from "react";
-import { z as v } from "zod";
+import { useSyncExternalStore as O, createContext as T, useContext as y, useReducer as N, useRef as C, useEffect as d, useMemo as S, useCallback as I, useLayoutEffect as _, useState as w } from "react";
+import { z as f } from "zod";
 const x = "(prefers-reduced-motion: reduce)";
 function b() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(x);
@@ -29,7 +29,7 @@ const R = {
   slots: "Slots",
   color: "Color"
 };
-function k({
+function B({
   dimensions: e,
   activeTab: n,
   onSelect: t,
@@ -39,8 +39,8 @@ function k({
 }) {
   const s = P(), i = r ?? s;
   if (e.length < 2) return null;
-  const u = (o) => l?.[o] ?? R[o], E = (o, f) => {
-    o.key === "ArrowRight" ? (o.preventDefault(), t(e[(f + 1) % e.length])) : o.key === "ArrowLeft" ? (o.preventDefault(), t(e[(f - 1 + e.length) % e.length])) : o.key === "Home" ? (o.preventDefault(), t(e[0])) : o.key === "End" && (o.preventDefault(), t(e[e.length - 1]));
+  const u = (o) => l?.[o] ?? R[o], h = (o, p) => {
+    o.key === "ArrowRight" ? (o.preventDefault(), t(e[(p + 1) % e.length])) : o.key === "ArrowLeft" ? (o.preventDefault(), t(e[(p - 1 + e.length) % e.length])) : o.key === "Home" ? (o.preventDefault(), t(e[0])) : o.key === "End" && (o.preventDefault(), t(e[e.length - 1]));
   };
   return /* @__PURE__ */ c(
     "div",
@@ -48,23 +48,23 @@ function k({
       role: "tablist",
       "aria-label": a,
       className: "settings-tab-strip",
-      children: e.map((o, f) => {
-        const p = n === o;
-        return /* @__PURE__ */ C(
+      children: e.map((o, p) => {
+        const g = n === o;
+        return /* @__PURE__ */ E(
           "button",
           {
             role: "tab",
             type: "button",
             id: `settings-tab-${o}`,
-            "aria-selected": p,
+            "aria-selected": g,
             "aria-controls": `settings-tabpanel-${o}`,
-            tabIndex: p ? 0 : -1,
-            className: `settings-tab-strip__tab${p ? " settings-tab-strip__tab--active" : ""}`,
+            tabIndex: g ? 0 : -1,
+            className: `settings-tab-strip__tab${g ? " settings-tab-strip__tab--active" : ""}`,
             onClick: () => t(o),
-            onKeyDown: (D) => E(D, f),
+            onKeyDown: (D) => h(D, p),
             children: [
               /* @__PURE__ */ c("span", { className: "settings-tab-strip__label", children: u(o) }),
-              p && !i && /* @__PURE__ */ c(
+              g && !i && /* @__PURE__ */ c(
                 L.span,
                 {
                   layoutId: "settings-active-tab-indicator",
@@ -82,10 +82,10 @@ function k({
     }
   );
 }
-k.displayName = "SettingsTabStrip";
-const h = T(null);
-function B() {
-  const e = S(h);
+B.displayName = "SettingsTabStrip";
+const v = T(null);
+function k() {
+  const e = y(v);
   if (!e)
     throw new Error(
       "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
@@ -93,10 +93,10 @@ function B() {
   return e;
 }
 function ie() {
-  return S(h);
+  return y(v);
 }
-const M = v.number().min(0).max(100), U = v.number().min(7).max(90), V = v.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]);
-function K(e, n) {
+const M = f.number().min(0).max(100), U = f.number().min(7).max(90), V = f.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]), K = f.array(f.string().min(1)).max(3);
+function j(e, n) {
   if (e === "threshold") {
     const t = M.safeParse(n);
     return t.success ? t.data : 80;
@@ -109,9 +109,13 @@ function K(e, n) {
     const t = V.safeParse(n);
     return t.success ? t.data : null;
   }
+  if (e === "slots") {
+    const t = K.safeParse(n);
+    return t.success ? t.data : [];
+  }
   return n;
 }
-const j = {
+const q = {
   activePanelId: null,
   activeTrigger: null,
   bellCutoutOpen: !1,
@@ -121,8 +125,8 @@ const j = {
   bufferByCard: {},
   lastClose: null,
   pendingSideEffects: []
-}, y = /* @__PURE__ */ new Set(["settings"]);
-function q(e, n) {
+}, m = /* @__PURE__ */ new Set(["settings"]);
+function z(e, n) {
   if (e == null || e.kind !== n.kind) return !1;
   switch (e.kind) {
     case "bell":
@@ -137,7 +141,7 @@ function q(e, n) {
       return e.action === n.action && e.blockedCardId === n.blockedCardId && e.activeCardId === n.activeCardId;
   }
 }
-function z(e, n) {
+function Y(e, n) {
   switch (n.type) {
     case "OPEN_PANEL": {
       if (e.activePanelId && e.isDirty)
@@ -155,7 +159,7 @@ function z(e, n) {
             }
           ]
         };
-      if (e.activePanelId === n.panelId && q(e.activeTrigger, n.trigger))
+      if (e.activePanelId === n.panelId && z(e.activeTrigger, n.trigger))
         return e;
       const t = e.activePanelId != null ? [
         {
@@ -217,7 +221,7 @@ function z(e, n) {
     case "CLOSE_BELL_CUTOUT":
       return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
     case "SET_BUFFER_VALUE": {
-      if (e.activePanelId == null || !y.has(e.activePanelId))
+      if (e.activePanelId == null || !m.has(e.activePanelId))
         return {
           ...e,
           pendingSideEffects: [
@@ -225,7 +229,7 @@ function z(e, n) {
             { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
           ]
         };
-      const t = e.bufferByCard[n.cardId], r = t == null, l = K(n.key, n.value);
+      const t = e.bufferByCard[n.cardId], r = t == null, l = j(n.key, n.value);
       if (!r && t.changes[n.key] === l)
         return e;
       const s = { kind: "settings", changes: {
@@ -263,7 +267,7 @@ function z(e, n) {
       };
     }
     case "BUFFER_BECOMES_DIRTY":
-      return e.activePanelId == null || !y.has(e.activePanelId) ? {
+      return e.activePanelId == null || !m.has(e.activePanelId) ? {
         ...e,
         pendingSideEffects: [
           ...e.pendingSideEffects,
@@ -299,11 +303,11 @@ function z(e, n) {
       return e;
   }
 }
-function Y(e) {
+function $(e) {
   return e.activePanelId === "notification-center" ? "notif-center" : e.activePanelId != null && e.bellCutoutOpen ? e.isDirty ? "panel-dirty+cutout" : "panel-clean+cutout" : e.activePanelId != null ? e.isDirty ? "panel-dirty" : "panel-clean" : e.bellCutoutOpen ? "bell-cutout-only" : "idle";
 }
-function $() {
-  const [e, n] = w(z, j), t = g([]), r = g(null);
+function Q() {
+  const [e, n] = N(Y, q), t = C([]), r = C(null);
   d(() => () => {
     r.current != null && (window.clearTimeout(r.current), r.current = null);
   }, []), d(() => {
@@ -336,53 +340,57 @@ function $() {
       s
     ];
   }, [e.lastClose]);
-  const l = m(
-    () => Y(e),
+  const l = S(
+    () => $(e),
     [e.activePanelId, e.bellCutoutOpen, e.isDirty]
   ), a = I(() => t.current.slice(), []);
   return { state: e, surfaceState: l, dispatch: n, getCloseLog: a };
 }
-function le({ children: e }) {
-  const n = $(), t = m(
+function oe({ children: e }) {
+  const n = Q(), t = S(
     () => n,
     // Re-publish only when one of the four coordinator fields changes identity.
     // dispatch + getCloseLog are stable. state + surfaceState change on dispatch.
     [n.state, n.surfaceState, n.dispatch, n.getCloseLog]
   );
-  return /* @__PURE__ */ c(h.Provider, { value: t, children: e });
+  return /* @__PURE__ */ c(v.Provider, { value: t, children: e });
 }
-const Q = {
+const W = {
   position: "relative",
   pointerEvents: "auto"
 };
-function W({ children: e, onClose: n, footer: t }) {
-  return /* @__PURE__ */ C(
+function G({ children: e, onClose: n, footer: t, title: r, variant: l = "default" }) {
+  return /* @__PURE__ */ E(
     "div",
     {
       "data-chrome": "panel",
+      "data-chrome-variant": l,
       role: "dialog",
       "aria-modal": "true",
-      className: "gloss-panel-chrome",
-      style: Q,
+      className: l === "merged-stage" ? "gloss-panel-chrome gloss-panel-chrome--merged-stage" : "gloss-panel-chrome",
+      style: W,
       children: [
-        /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ c(
-          "button",
-          {
-            id: "panel-close",
-            type: "button",
-            "aria-label": "Close panel",
-            className: "gloss-panel-chrome__close",
-            onClick: n,
-            children: "×"
-          }
-        ) }),
+        /* @__PURE__ */ E("div", { className: "gloss-panel-chrome__header", children: [
+          r != null && /* @__PURE__ */ c("span", { className: "gloss-panel-chrome__title", children: r }),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              id: "panel-close",
+              type: "button",
+              "aria-label": "Close panel",
+              className: "gloss-panel-chrome__close",
+              onClick: n,
+              children: "×"
+            }
+          )
+        ] }),
         /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__body", children: e }),
         t != null && /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__footer", children: t })
       ]
     }
   );
 }
-function G(e) {
+function J(e) {
   if (process.env.NODE_ENV === "production" || !e || !e.parentElement) return;
   const n = e.parentElement, t = window.getComputedStyle(n);
   t.perspective === "none" && console.warn(
@@ -393,12 +401,12 @@ function G(e) {
     n
   );
 }
-function J({ isOpen: e, children: n }) {
-  const t = P(), r = g(null);
+function X({ isOpen: e, children: n }) {
+  const t = P(), r = C(null);
   _(() => {
-    G(r.current);
+    J(r.current);
   }, []);
-  const [l, a] = N(!1);
+  const [l, a] = w(!1);
   d(() => {
     if (!e) {
       a(!1);
@@ -423,7 +431,7 @@ function J({ isOpen: e, children: n }) {
     }
   );
 }
-const X = {
+const Z = {
   position: "fixed",
   top: 0,
   left: 0,
@@ -434,7 +442,7 @@ const X = {
   overflow: "visible",
   pointerEvents: "none",
   zIndex: 55
-}, Z = {
+}, ee = {
   position: "fixed",
   top: "var(--tb-h, 60px)",
   left: 0,
@@ -450,21 +458,21 @@ const X = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function oe({ panelComponents: e }) {
-  const { state: n, dispatch: t, getCloseLog: r } = B(), l = n.activePanelId ? e[n.activePanelId] : null;
+function ae({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: r } = k(), l = n.activePanelId ? e[n.activePanelId] : null;
   n.activePanelId && !l && process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     n.activePanelId
   ), d(() => {
     if (n.activePanelId == null) return;
-    function u(E) {
-      E.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function u(h) {
+      h.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
     return document.addEventListener("keydown", u), () => {
       document.removeEventListener("keydown", u);
     };
   }, [n.activePanelId, t]);
-  const a = g(n);
+  const a = C(n);
   _(() => {
     a.current = n;
   }), d(() => {
@@ -481,17 +489,17 @@ function oe({ panelComponents: e }) {
   const s = I(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]), i = n.activePanelId != null && l != null;
-  return /* @__PURE__ */ C("div", { "data-panel-host": "true", style: X, children: [
+  return /* @__PURE__ */ E("div", { "data-panel-host": "true", style: Z, children: [
     i && /* @__PURE__ */ c(
       "div",
       {
         "data-panel-scrim": "true",
-        style: Z,
+        style: ee,
         onClick: s
       }
     ),
-    /* @__PURE__ */ c(J, { isOpen: i, children: i && /* @__PURE__ */ c(
-      W,
+    /* @__PURE__ */ c(X, { isOpen: i, children: i && /* @__PURE__ */ c(
+      G,
       {
         isOpen: !0,
         onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
@@ -500,7 +508,7 @@ function oe({ panelComponents: e }) {
     ) })
   ] });
 }
-const ae = {
+const se = {
   "apply-button": !0,
   // the ONLY commit reason
   "cancel-button": !1,
@@ -514,17 +522,17 @@ const ae = {
   "nav-escape-hatch": !1
 };
 export {
-  ae as C,
-  le as P,
-  k as S,
-  B as a,
-  oe as b,
-  W as c,
-  $ as d,
-  Y as e,
+  se as C,
+  oe as P,
+  B as S,
+  k as a,
+  ae as b,
+  G as c,
+  Q as d,
+  $ as e,
   P as f,
-  J as g,
-  j as i,
-  z as r,
+  X as g,
+  q as i,
+  Y as r,
   ie as u
 };