@mt-gloss/ui 0.0.10 → 0.0.11

package/BaseAsyncButton-XBXVlXMl.js

@@ -0,0 +1,223 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { f as b, b as y, aj as p, h as B } from "./UIContext-CEp38xw-.js";
+import u, { useEffect as x } from "react";
+const F = {
+  // Font families (CSS vars)
+  FontDisplay: "var(--gloss-font-display)",
+  FontBody: "var(--gloss-font-body)",
+  FontMono: "var(--gloss-font-mono)",
+  // Font sizes (CSS vars)
+  TextXs: "var(--gloss-text-xs)",
+  TextSm: "var(--gloss-text-sm)",
+  TextBase: "var(--gloss-text-base)",
+  TextLg: "var(--gloss-text-lg)",
+  TextXl: "var(--gloss-text-xl)",
+  Text2xl: "var(--gloss-text-2xl)",
+  Text3xl: "var(--gloss-text-3xl)",
+  Text4xl: "var(--gloss-text-4xl)",
+  // Line heights (raw values — no SCSS token)
+  LeadingTight: "1.25",
+  LeadingNormal: "1.5",
+  LeadingRelaxed: "1.75",
+  // Font weights (raw values — no SCSS token)
+  WeightNormal: "400",
+  WeightMedium: "500",
+  WeightSemibold: "600",
+  WeightBold: "700"
+}, f = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+}, N = function(t) {
+  const { as: a, level: s = 2, className: l, ...r } = t, i = a || f[s];
+  return /* @__PURE__ */ o(
+    b,
+    {
+      as: i,
+      className: l ? `gloss-base-title ${l}` : "gloss-base-title",
+      ...r
+    }
+  );
+};
+N.displayName = "BaseTitle";
+const v = function(t) {
+  const { as: a, htmlFor: s, className: l, ...r } = t;
+  return /* @__PURE__ */ o(
+    b,
+    {
+      as: a || "label",
+      htmlFor: s,
+      className: l ? `gloss-base-label ${l}` : "gloss-base-label",
+      ...r
+    }
+  );
+};
+v.displayName = "BaseLabel";
+const _ = function(t) {
+  const { as: a, className: s, ...l } = t;
+  return /* @__PURE__ */ o(
+    b,
+    {
+      as: a || "span",
+      "data-role": "value",
+      className: s ? `gloss-base-value ${s}` : "gloss-base-value",
+      ...l
+    }
+  );
+};
+_.displayName = "BaseValue";
+function T({
+  definition: e,
+  open: t,
+  onDismiss: a,
+  className: s,
+  style: l,
+  children: r
+}) {
+  const i = e?.position ?? "top-right", n = e?.duration ?? 0;
+  x(() => {
+    if (!t || n <= 0 || !a) return;
+    const h = setTimeout(() => {
+      a();
+    }, n);
+    return () => clearTimeout(h);
+  }, [t, n, a]);
+  const c = {
+    portal: !0,
+    dismissOnClickOutside: !1,
+    dismissOnEscape: !0,
+    bg: e?.bg,
+    shadow: e?.shadow,
+    radius: e?.radius,
+    padding: e?.padding,
+    zIndex: e?.zIndex
+  }, g = ["gloss-base-toast", `gloss-base-toast--${i}`];
+  return s && g.push(s), /* @__PURE__ */ o(
+    y,
+    {
+      definition: c,
+      open: t,
+      onDismiss: a,
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: g.join(" "),
+          style: l,
+          role: "status",
+          "aria-live": "polite",
+          children: r
+        }
+      )
+    }
+  );
+}
+T.displayName = "BaseToast";
+const L = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  color: "--_color",
+  padding: "--_padding",
+  radius: "--_radius",
+  iconColor: "--_icon-color"
+};
+function A(e) {
+  const { definition: t, className: a, style: s, role: l, children: r, ...i } = e, { style: n, dataAttrs: c } = p(t, L);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      role: l || "alert",
+      className: a ? `gloss-base-alert ${a}` : "gloss-base-alert",
+      style: { ...n, ...s },
+      ...c,
+      ...i,
+      children: r
+    }
+  );
+}
+A.displayName = "BaseAlert";
+const S = {
+  gap: "--_gap",
+  color: "--_color",
+  fontSize: "--_font-size"
+};
+function C(e) {
+  const { definition: t, separator: a = "/", className: s, style: l, children: r } = e, { style: i } = p(
+    t,
+    S
+  ), n = u.Children.toArray(r);
+  return /* @__PURE__ */ o(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: s ? `gloss-base-breadcrumbs-nav ${s}` : "gloss-base-breadcrumbs-nav",
+      style: { ...i, ...l },
+      children: /* @__PURE__ */ o("ol", { className: "gloss-base-breadcrumbs", children: n.map((c, d) => {
+        const g = d === n.length - 1;
+        return /* @__PURE__ */ m(u.Fragment, { children: [
+          /* @__PURE__ */ o(
+            "li",
+            {
+              className: "gloss-base-breadcrumbs__item",
+              ...g ? { "aria-current": "page" } : {},
+              children: c
+            }
+          ),
+          !g && /* @__PURE__ */ o("li", { className: "gloss-base-breadcrumbs__separator", "aria-hidden": "true", children: a })
+        ] }, d);
+      }) })
+    }
+  );
+}
+C.displayName = "BaseBreadcrumbs";
+function E(e) {
+  const {
+    as: t,
+    definition: a,
+    loading: s = !1,
+    disabled: l = !1,
+    className: r,
+    style: i,
+    children: n,
+    ...c
+  } = e, d = [
+    "gloss-base-async-button",
+    r
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m(
+    B,
+    {
+      as: t,
+      definition: a,
+      disabled: l || s,
+      loading: s,
+      className: d,
+      style: i,
+      ...c,
+      children: [
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: "gloss-base-async-button__content",
+            ...s ? { "data-hidden": "" } : {},
+            children: n
+          }
+        ),
+        s && /* @__PURE__ */ o("span", { className: "gloss-base-async-button__spinner" })
+      ]
+    }
+  );
+}
+E.displayName = "BaseAsyncButton";
+export {
+  N as B,
+  F as T,
+  v as a,
+  _ as b,
+  T as c,
+  A as d,
+  C as e,
+  E as f
+};