@viax.io/uxm 4.36.0

package/dist/ui/badge/badge.css

@@ -0,0 +1,91 @@
+@charset "UTF-8";
+/* ── badge ── */
+/* Badge — notification indicator. Two modes (dot, count) × six tones.
+   - Count mode: root IS the pill — bg + text + padding + radius land on it.
+   - Dot mode: root is a flex row (dot + optional label). The visible circle
+     is the `__dot` inner span; tone bg paints it (not the root). When children
+     are provided, `__label` renders alongside and reads its own typography vars.
+   Per-tone bg/text and per-mode dimension knobs route through `--uxm-badge-*`
+   custom properties via the save-route fallback path; no PER_COMPONENT_MAPPING
+   entry needed. countFontWeight is non-REAL by design (avoids the save route
+   emitting bare `font-weight` on the root — that would leak into the label too). */
+.uxm-badge {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  line-height: 1;
+  /* Count mode — root is the pill */
+  /* Dot mode — root is a layout row; dot circle is `__dot`, label is `__label` */
+  /* Type colors — count uses Tag's tonal palette (soft `${type}-bg` paired
+     with bold `${type}-text`) so adjacent Badges and Tags read as the same
+     status family. Dot mode reads a separate `--dot-color` per type that
+     defaults to the solid hue (`${type}-text`) for a punchier indicator. */
+}
+.uxm-badge--count {
+  border-radius: var(--uxm-badge-count-border-radius, 999px);
+  box-sizing: border-box;
+  font-size: calc(var(--uxm-badge-count-font-size, 11px) * var(--type-scale, 1));
+  font-weight: var(--uxm-badge-count-font-weight, 600);
+  height: var(--uxm-badge-count-min-width, 18px);
+  justify-content: center;
+  min-width: var(--uxm-badge-count-min-width, 18px);
+  padding-block: var(--uxm-badge-count-padding-y, 1px);
+  padding-inline: var(--uxm-badge-count-padding-x, 6px);
+  white-space: nowrap;
+}
+.uxm-badge--dot {
+  gap: var(--uxm-badge-label-gap, 8px);
+}
+.uxm-badge__dot {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: var(--uxm-badge-dot-size, 8px);
+  width: var(--uxm-badge-dot-size, 8px);
+}
+.uxm-badge__label {
+  color: var(--uxm-badge-label-color, var(--color-text));
+  font-size: calc(var(--uxm-badge-label-font-size, 13px) * var(--type-scale, 1));
+  font-weight: var(--uxm-badge-label-font-weight, 500);
+}
+.uxm-badge--count.uxm-badge--accent {
+  background-color: var(--uxm-badge-accent-bg, var(--color-accent-subtle));
+  color: var(--uxm-badge-accent-text, var(--color-accent-bold));
+}
+.uxm-badge--dot.uxm-badge--accent .uxm-badge__dot {
+  background-color: var(--uxm-badge-accent-dot-color, var(--color-accent-bold));
+}
+.uxm-badge--count.uxm-badge--success {
+  background-color: var(--uxm-badge-success-bg, var(--color-success-bg));
+  color: var(--uxm-badge-success-text, var(--color-success-text));
+}
+.uxm-badge--dot.uxm-badge--success .uxm-badge__dot {
+  background-color: var(--uxm-badge-success-dot-color, var(--color-success-text));
+}
+.uxm-badge--count.uxm-badge--warning {
+  background-color: var(--uxm-badge-warning-bg, var(--color-warning-bg));
+  color: var(--uxm-badge-warning-text, var(--color-warning-text));
+}
+.uxm-badge--dot.uxm-badge--warning .uxm-badge__dot {
+  background-color: var(--uxm-badge-warning-dot-color, var(--color-warning-text));
+}
+.uxm-badge--count.uxm-badge--danger {
+  background-color: var(--uxm-badge-danger-bg, var(--color-danger-bg));
+  color: var(--uxm-badge-danger-text, var(--color-danger-text));
+}
+.uxm-badge--dot.uxm-badge--danger .uxm-badge__dot {
+  background-color: var(--uxm-badge-danger-dot-color, var(--color-danger-text));
+}
+.uxm-badge--count.uxm-badge--info {
+  background-color: var(--uxm-badge-info-bg, var(--color-info-bg));
+  color: var(--uxm-badge-info-text, var(--color-info-text));
+}
+.uxm-badge--dot.uxm-badge--info .uxm-badge__dot {
+  background-color: var(--uxm-badge-info-dot-color, var(--color-info-text));
+}
+.uxm-badge--count.uxm-badge--neutral {
+  background-color: var(--uxm-badge-neutral-bg, var(--color-surface-alt));
+  color: var(--uxm-badge-neutral-text, var(--color-text-strong));
+}
+.uxm-badge--dot.uxm-badge--neutral .uxm-badge__dot {
+  background-color: var(--uxm-badge-neutral-dot-color, var(--color-text-muted));
+}

package/dist/ui/badge/badge.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export type BadgeMode = 'dot' | 'count';
+export type BadgeType = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    mode?: BadgeMode;
+    type?: BadgeType;
+    count?: number;
+    max?: number;
+}
+export declare function Badge({ mode, type, count, max, className, children, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

package/dist/ui/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/ui/badge/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AACxC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAc,EACd,IAAe,EACf,KAAK,EACL,GAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,2CAkCZ"}

package/dist/ui/badge/badge.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function Badge({
+  mode = "count",
+  type = "danger",
+  count,
+  max = 99,
+  className,
+  children,
+  ...rest
+}) {
+  const isDot = mode === "dot";
+  const rootClass = cn(
+    "uxm-badge",
+    `uxm-badge--${mode}`,
+    `uxm-badge--${type}`,
+    className
+  );
+  if (isDot) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: rootClass,
+        role: children ? void 0 : "status",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uxm-badge__dot", "aria-hidden": children ? true : void 0 }),
+          children !== void 0 && children !== null && /* @__PURE__ */ jsx("span", { className: "uxm-badge__label", children })
+        ]
+      }
+    );
+  }
+  const display = children !== void 0 ? children : typeof count === "number" ? count > max ? `${max}+` : String(count) : null;
+  return /* @__PURE__ */ jsx("span", { className: rootClass, ...rest, children: display });
+}
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/ui/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/badge/badge.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes } from 'react';\n\nexport type BadgeMode = 'dot' | 'count';\nexport type BadgeType = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  mode?: BadgeMode;\n  type?: BadgeType;\n  count?: number;\n  max?: number;\n}\n\nexport function Badge({\n  mode = 'count',\n  type = 'danger',\n  count,\n  max = 99,\n  className,\n  children,\n  ...rest\n}: BadgeProps) {\n  const isDot = mode === 'dot';\n  const rootClass = cn(\n    'uxm-badge',\n    `uxm-badge--${mode}`,\n    `uxm-badge--${type}`,\n    className,\n  );\n\n  if (isDot) {\n    return (\n      <span\n        className={rootClass}\n        role={children ? undefined : 'status'}\n        {...rest}\n      >\n        <span className=\"uxm-badge__dot\" aria-hidden={children ? true : undefined} />\n        {children !== undefined && children !== null && (\n          <span className=\"uxm-badge__label\">{children}</span>\n        )}\n      </span>\n    );\n  }\n\n  const display =\n    children !== undefined ? children\n    : typeof count === 'number' ? (count > max ? `${max}+` : String(count))\n    : null;\n\n  return (\n    <span className={rootClass} {...rest}>\n      {display}\n    </span>\n  );\n}\n"],"mappings":"AAiCM,SAKE,KALF;AAjCN,SAAS,UAAU;AAcZ,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,cAAc,IAAI;AAAA,IAClB,cAAc,IAAI;AAAA,IAClB;AAAA,EACF;AAEA,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,MAAM,WAAW,SAAY;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,WAAU,kBAAiB,eAAa,WAAW,OAAO,QAAW;AAAA,UAC1E,aAAa,UAAa,aAAa,QACtC,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA;AAAA;AAAA,IAEjD;AAAA,EAEJ;AAEA,QAAM,UACJ,aAAa,SAAY,WACvB,OAAO,UAAU,WAAY,QAAQ,MAAM,GAAG,GAAG,MAAM,OAAO,KAAK,IACnE;AAEJ,SACE,oBAAC,UAAK,WAAW,WAAY,GAAG,MAC7B,mBACH;AAEJ;","names":[]}

package/dist/ui/badge/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var badge_exports = {};
+module.exports = __toCommonJS(badge_exports);
+__reExport(badge_exports, require("./badge.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./badge.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/badge/index.ts"],"sourcesContent":["export * from './badge';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,oBAAd;","names":[]}

package/dist/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './badge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/ui/badge/index.js

@@ -0,0 +1,2 @@
+export * from "./badge.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/badge/index.ts"],"sourcesContent":["export * from './badge';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/banner/banner-preview.cjs

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var banner_preview_exports = {};
+__export(banner_preview_exports, {
+  BannerPreview: () => BannerPreview
+});
+module.exports = __toCommonJS(banner_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const VARIANT_META = {
+  success: { glyph: "check-circle", label: "Success" },
+  info: { glyph: "info", label: "Info" },
+  warning: { glyph: "exclamation-triangle", label: "Warning" },
+  error: { glyph: "exclamation-circle", label: "Error" }
+};
+function BannerPreview({ styles, variants }) {
+  const variant = variants.variant ?? "success";
+  const meta = VARIANT_META[variant] ?? VARIANT_META.success;
+  const bg = styles[`${variant}Bg`];
+  const color = styles[`${variant}Text`];
+  const border = styles[`${variant}Border`];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        width: 380,
+        backgroundColor: bg,
+        color,
+        border: `1px solid ${border}`,
+        ["--uxm-banner-border-radius"]: `${styles.borderRadius}px`,
+        borderRadius: "var(--uxm-banner-border-radius)",
+        ["--uxm-banner-padding-y"]: `${styles.paddingY}px`,
+        ["--uxm-banner-padding-x"]: `${styles.paddingX}px`,
+        padding: "var(--uxm-banner-padding-y) var(--uxm-banner-padding-x)",
+        ["--uxm-banner-font-size"]: `${styles.fontSize}px`,
+        fontSize: "var(--uxm-banner-font-size)",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 12
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: meta.glyph, size: 20, strokeWidth: 1.5, style: { flexShrink: 0, marginTop: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontWeight: 600, margin: "0 0 4px" }, children: [
+            meta.label,
+            " banner"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { margin: 0, opacity: 0.85, lineHeight: 1.5 }, children: [
+            "This is an example ",
+            variant,
+            " banner \u2014 persistent until the user dismisses it or the consumer removes it from state."
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: () => {
+            },
+            style: {
+              flexShrink: 0,
+              marginLeft: "auto",
+              padding: 4,
+              background: "transparent",
+              border: "none",
+              color: "inherit",
+              cursor: "pointer",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 4,
+              opacity: 0.6
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "close", size: 14, strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BannerPreview
+});
+//# sourceMappingURL=banner-preview.cjs.map

package/dist/ui/banner/banner-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/banner/banner-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\n\n// Glyph + capitalized label per variant. Colors live in the registry's\n// variant-scoped knobs (successBg / infoBg / warningBg / errorBg, etc.) —\n// the preview just reaches into `styles[<variant><Bg|Text|Border>]`.\nconst VARIANT_META: Record<\n  string,\n  { glyph: string; label: string }\n> = {\n  success: { glyph: 'check-circle',         label: 'Success' },\n  info:    { glyph: 'info',                 label: 'Info' },\n  warning: { glyph: 'exclamation-triangle', label: 'Warning' },\n  error:   { glyph: 'exclamation-circle',   label: 'Error' },\n};\n\nexport function BannerPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const variant = (variants.variant ?? 'success') as keyof typeof VARIANT_META;\n  const meta = VARIANT_META[variant] ?? VARIANT_META.success;\n\n  // Pull the current variant's color knobs. The registry passes ALL 12\n  // (4 variants × 3 properties) — `showWhen` only filters what the\n  // Properties panel SHOWS, not what's projected here.\n  const bg = styles[`${variant}Bg`] as string;\n  const color = styles[`${variant}Text`] as string;\n  const border = styles[`${variant}Border`] as string;\n\n  return (\n    <div\n      style={{\n        width: 380,\n        backgroundColor: bg,\n        color,\n        border: `1px solid ${border}`,\n        ['--uxm-banner-border-radius' as string]: `${styles.borderRadius}px`,\n        borderRadius: 'var(--uxm-banner-border-radius)',\n        ['--uxm-banner-padding-y' as string]: `${styles.paddingY}px`,\n        ['--uxm-banner-padding-x' as string]: `${styles.paddingX}px`,\n        padding: 'var(--uxm-banner-padding-y) var(--uxm-banner-padding-x)',\n        ['--uxm-banner-font-size' as string]: `${styles.fontSize}px`,\n        fontSize: 'var(--uxm-banner-font-size)',\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: 12,\n      }}\n    >\n      <Icon glyph={meta.glyph} size={20} strokeWidth={1.5} style={{ flexShrink: 0, marginTop: 1 }} />\n      <div style={{ flex: 1 }}>\n        <p style={{ fontWeight: 600, margin: '0 0 4px' }}>{meta.label} banner</p>\n        <p style={{ margin: 0, opacity: 0.85, lineHeight: 1.5 }}>\n          This is an example {variant} banner — persistent until the user dismisses it or\n          the consumer removes it from state.\n        </p>\n      </div>\n      {/* Show the dismiss affordance so designers see it as part of the\n          atom's surface. No-op handler — the preview is static; the X\n          fires onDismiss when the atom is actually consumed. */}\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        onClick={() => {}}\n        style={{\n          flexShrink: 0,\n          marginLeft: 'auto',\n          padding: 4,\n          background: 'transparent',\n          border: 'none',\n          color: 'inherit',\n          cursor: 'pointer',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderRadius: 4,\n          opacity: 0.6,\n        }}\n      >\n        <Icon glyph=\"close\" size={14} strokeWidth={2} />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CM;AA7CN,gBAAqB;AAKrB,MAAM,eAGF;AAAA,EACF,SAAS,EAAE,OAAO,gBAAwB,OAAO,UAAU;AAAA,EAC3D,MAAS,EAAE,OAAO,QAAwB,OAAO,OAAO;AAAA,EACxD,SAAS,EAAE,OAAO,wBAAwB,OAAO,UAAU;AAAA,EAC3D,OAAS,EAAE,OAAO,sBAAwB,OAAO,QAAQ;AAC3D;AAEO,SAAS,cAAc,EAAE,QAAQ,SAAS,GAA2C;AAC1F,QAAM,UAAW,SAAS,WAAW;AACrC,QAAM,OAAO,aAAa,OAAO,KAAK,aAAa;AAKnD,QAAM,KAAK,OAAO,GAAG,OAAO,IAAI;AAChC,QAAM,QAAQ,OAAO,GAAG,OAAO,MAAM;AACrC,QAAM,SAAS,OAAO,GAAG,OAAO,QAAQ;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ,aAAa,MAAM;AAAA,QAC3B,CAAC,4BAAsC,GAAG,GAAG,OAAO,YAAY;AAAA,QAChE,cAAc;AAAA,QACd,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,SAAS;AAAA,QACT,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEA;AAAA,oDAAC,kBAAK,OAAO,KAAK,OAAO,MAAM,IAAI,aAAa,KAAK,OAAO,EAAE,YAAY,GAAG,WAAW,EAAE,GAAG;AAAA,QAC7F,6CAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB;AAAA,uDAAC,OAAE,OAAO,EAAE,YAAY,KAAK,QAAQ,UAAU,GAAI;AAAA,iBAAK;AAAA,YAAM;AAAA,aAAO;AAAA,UACrE,6CAAC,OAAE,OAAO,EAAE,QAAQ,GAAG,SAAS,MAAM,YAAY,IAAI,GAAG;AAAA;AAAA,YACnC;AAAA,YAAQ;AAAA,aAE9B;AAAA,WACF;AAAA,QAIA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,MAAM;AAAA,YAAC;AAAA,YAChB,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,cAAc;AAAA,cACd,SAAS;AAAA,YACX;AAAA,YAEA,sDAAC,kBAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ui/banner/banner-preview.d.ts

@@ -0,0 +1,5 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function BannerPreview({ styles, variants }: PreviewProps & {
+    componentId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=banner-preview.d.ts.map

package/dist/ui/banner/banner-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/banner/banner-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAgBrD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CAgEzF"}

package/dist/ui/banner/banner-preview.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../../ui/index.js";
+const VARIANT_META = {
+  success: { glyph: "check-circle", label: "Success" },
+  info: { glyph: "info", label: "Info" },
+  warning: { glyph: "exclamation-triangle", label: "Warning" },
+  error: { glyph: "exclamation-circle", label: "Error" }
+};
+function BannerPreview({ styles, variants }) {
+  const variant = variants.variant ?? "success";
+  const meta = VARIANT_META[variant] ?? VARIANT_META.success;
+  const bg = styles[`${variant}Bg`];
+  const color = styles[`${variant}Text`];
+  const border = styles[`${variant}Border`];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: 380,
+        backgroundColor: bg,
+        color,
+        border: `1px solid ${border}`,
+        ["--uxm-banner-border-radius"]: `${styles.borderRadius}px`,
+        borderRadius: "var(--uxm-banner-border-radius)",
+        ["--uxm-banner-padding-y"]: `${styles.paddingY}px`,
+        ["--uxm-banner-padding-x"]: `${styles.paddingX}px`,
+        padding: "var(--uxm-banner-padding-y) var(--uxm-banner-padding-x)",
+        ["--uxm-banner-font-size"]: `${styles.fontSize}px`,
+        fontSize: "var(--uxm-banner-font-size)",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { glyph: meta.glyph, size: 20, strokeWidth: 1.5, style: { flexShrink: 0, marginTop: 1 } }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxs("p", { style: { fontWeight: 600, margin: "0 0 4px" }, children: [
+            meta.label,
+            " banner"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { style: { margin: 0, opacity: 0.85, lineHeight: 1.5 }, children: [
+            "This is an example ",
+            variant,
+            " banner \u2014 persistent until the user dismisses it or the consumer removes it from state."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: () => {
+            },
+            style: {
+              flexShrink: 0,
+              marginLeft: "auto",
+              padding: 4,
+              background: "transparent",
+              border: "none",
+              color: "inherit",
+              cursor: "pointer",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 4,
+              opacity: 0.6
+            },
+            children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 14, strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BannerPreview
+};
+//# sourceMappingURL=banner-preview.js.map

package/dist/ui/banner/banner-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/banner/banner-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\n\n// Glyph + capitalized label per variant. Colors live in the registry's\n// variant-scoped knobs (successBg / infoBg / warningBg / errorBg, etc.) —\n// the preview just reaches into `styles[<variant><Bg|Text|Border>]`.\nconst VARIANT_META: Record<\n  string,\n  { glyph: string; label: string }\n> = {\n  success: { glyph: 'check-circle',         label: 'Success' },\n  info:    { glyph: 'info',                 label: 'Info' },\n  warning: { glyph: 'exclamation-triangle', label: 'Warning' },\n  error:   { glyph: 'exclamation-circle',   label: 'Error' },\n};\n\nexport function BannerPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const variant = (variants.variant ?? 'success') as keyof typeof VARIANT_META;\n  const meta = VARIANT_META[variant] ?? VARIANT_META.success;\n\n  // Pull the current variant's color knobs. The registry passes ALL 12\n  // (4 variants × 3 properties) — `showWhen` only filters what the\n  // Properties panel SHOWS, not what's projected here.\n  const bg = styles[`${variant}Bg`] as string;\n  const color = styles[`${variant}Text`] as string;\n  const border = styles[`${variant}Border`] as string;\n\n  return (\n    <div\n      style={{\n        width: 380,\n        backgroundColor: bg,\n        color,\n        border: `1px solid ${border}`,\n        ['--uxm-banner-border-radius' as string]: `${styles.borderRadius}px`,\n        borderRadius: 'var(--uxm-banner-border-radius)',\n        ['--uxm-banner-padding-y' as string]: `${styles.paddingY}px`,\n        ['--uxm-banner-padding-x' as string]: `${styles.paddingX}px`,\n        padding: 'var(--uxm-banner-padding-y) var(--uxm-banner-padding-x)',\n        ['--uxm-banner-font-size' as string]: `${styles.fontSize}px`,\n        fontSize: 'var(--uxm-banner-font-size)',\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: 12,\n      }}\n    >\n      <Icon glyph={meta.glyph} size={20} strokeWidth={1.5} style={{ flexShrink: 0, marginTop: 1 }} />\n      <div style={{ flex: 1 }}>\n        <p style={{ fontWeight: 600, margin: '0 0 4px' }}>{meta.label} banner</p>\n        <p style={{ margin: 0, opacity: 0.85, lineHeight: 1.5 }}>\n          This is an example {variant} banner — persistent until the user dismisses it or\n          the consumer removes it from state.\n        </p>\n      </div>\n      {/* Show the dismiss affordance so designers see it as part of the\n          atom's surface. No-op handler — the preview is static; the X\n          fires onDismiss when the atom is actually consumed. */}\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        onClick={() => {}}\n        style={{\n          flexShrink: 0,\n          marginLeft: 'auto',\n          padding: 4,\n          background: 'transparent',\n          border: 'none',\n          color: 'inherit',\n          cursor: 'pointer',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderRadius: 4,\n          opacity: 0.6,\n        }}\n      >\n        <Icon glyph=\"close\" size={14} strokeWidth={2} />\n      </button>\n    </div>\n  );\n}\n"],"mappings":"AA8CM,cAEE,YAFF;AA7CN,SAAS,YAAY;AAKrB,MAAM,eAGF;AAAA,EACF,SAAS,EAAE,OAAO,gBAAwB,OAAO,UAAU;AAAA,EAC3D,MAAS,EAAE,OAAO,QAAwB,OAAO,OAAO;AAAA,EACxD,SAAS,EAAE,OAAO,wBAAwB,OAAO,UAAU;AAAA,EAC3D,OAAS,EAAE,OAAO,sBAAwB,OAAO,QAAQ;AAC3D;AAEO,SAAS,cAAc,EAAE,QAAQ,SAAS,GAA2C;AAC1F,QAAM,UAAW,SAAS,WAAW;AACrC,QAAM,OAAO,aAAa,OAAO,KAAK,aAAa;AAKnD,QAAM,KAAK,OAAO,GAAG,OAAO,IAAI;AAChC,QAAM,QAAQ,OAAO,GAAG,OAAO,MAAM;AACrC,QAAM,SAAS,OAAO,GAAG,OAAO,QAAQ;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ,aAAa,MAAM;AAAA,QAC3B,CAAC,4BAAsC,GAAG,GAAG,OAAO,YAAY;AAAA,QAChE,cAAc;AAAA,QACd,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,SAAS;AAAA,QACT,CAAC,wBAAkC,GAAG,GAAG,OAAO,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEA;AAAA,4BAAC,QAAK,OAAO,KAAK,OAAO,MAAM,IAAI,aAAa,KAAK,OAAO,EAAE,YAAY,GAAG,WAAW,EAAE,GAAG;AAAA,QAC7F,qBAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB;AAAA,+BAAC,OAAE,OAAO,EAAE,YAAY,KAAK,QAAQ,UAAU,GAAI;AAAA,iBAAK;AAAA,YAAM;AAAA,aAAO;AAAA,UACrE,qBAAC,OAAE,OAAO,EAAE,QAAQ,GAAG,SAAS,MAAM,YAAY,IAAI,GAAG;AAAA;AAAA,YACnC;AAAA,YAAQ;AAAA,aAE9B;AAAA,WACF;AAAA,QAIA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,MAAM;AAAA,YAAC;AAAA,YAChB,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,cAAc;AAAA,cACd,SAAS;AAAA,YACX;AAAA,YAEA,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ui/banner/banner.cjs

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var banner_exports = {};
+__export(banner_exports, {
+  Banner: () => Banner
+});
+module.exports = __toCommonJS(banner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+const VARIANT_GLYPH = {
+  success: "check-circle",
+  info: "info",
+  warning: "exclamation-triangle",
+  error: "exclamation-circle"
+};
+function Banner({
+  variant = "info",
+  title,
+  icon,
+  children,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: variant === "error" ? "alert" : "status",
+      className: (0, import_helpers.cn)("uxm-banner", `uxm-banner--${variant}`, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-banner__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: VARIANT_GLYPH[variant], size: 20, strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-banner__body", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-banner__title", children: title }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-banner__content", children })
+        ] }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "uxm-banner__close",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close", size: 14, strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});
+//# sourceMappingURL=banner.cjs.map

package/dist/ui/banner/banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/banner/banner.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type BannerVariant = 'success' | 'info' | 'warning' | 'error';\n\nexport interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: BannerVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  children?: ReactNode;\n  /**\n   * When set, renders a close affordance (X icon, right-aligned) that\n   * calls this handler. Banners are persistent by design — they stay\n   * until the user dismisses, or until the consumer removes them from\n   * state. They do NOT auto-disappear; for transient feedback use\n   * `toast.*()` instead (`Toast` rendered by `Toaster`).\n   */\n  onDismiss?: () => void;\n  /** Accessible label for the close affordance. Default `\"Dismiss\"`. */\n  dismissLabel?: string;\n}\n\n// Map each banner variant to its glyph in the Icon registry. Callers\n// that want a custom icon can still pass `icon={...}` to override.\nconst VARIANT_GLYPH: Record<BannerVariant, string> = {\n  success: 'check-circle',\n  info: 'info',\n  warning: 'exclamation-triangle',\n  error: 'exclamation-circle',\n};\n\n/**\n * Banner — a full-width persistent strip rendered inline in page flow.\n * Stays visible until the user acts (via `onDismiss`) or the consumer\n * removes it from state. Doesn't block the rest of the page.\n *\n * Use for system states / announcements: \"Maintenance at 02:00\",\n * \"Subscription expiring\", \"Q1 forecast beat target\". For transient\n * after-the-fact feedback (\"Saved\", \"Copied\") use the Toast atom via\n * the `toast.*()` API instead — Banner stays persistent, Toast\n * auto-dismisses in a corner.\n */\nexport function Banner({\n  variant = 'info',\n  title,\n  icon,\n  children,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  ...rest\n}: BannerProps) {\n  return (\n    <div\n      role={variant === 'error' ? 'alert' : 'status'}\n      className={cn('uxm-banner', `uxm-banner--${variant}`, className)}\n      {...rest}\n    >\n      <span className=\"uxm-banner__icon\" aria-hidden=\"true\">\n        {icon ?? <Icon glyph={VARIANT_GLYPH[variant]} size={20} strokeWidth={1.5} />}\n      </span>\n      <div className=\"uxm-banner__body\">\n        {title && <p className=\"uxm-banner__title\">{title}</p>}\n        {children && <div className=\"uxm-banner__content\">{children}</div>}\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          className=\"uxm-banner__close\"\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n        >\n          <Icon glyph=\"close\" size={14} strokeWidth={2} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DiB;AA9DjB,qBAAmB;AAEnB,kBAAqB;AAyBrB,MAAM,gBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAaO,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,YAAY,UAAU,UAAU;AAAA,MACtC,eAAW,mBAAG,cAAc,eAAe,OAAO,IAAI,SAAS;AAAA,MAC9D,GAAG;AAAA,MAEJ;AAAA,oDAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,kBAAQ,4CAAC,oBAAK,OAAO,cAAc,OAAO,GAAG,MAAM,IAAI,aAAa,KAAK,GAC5E;AAAA,QACA,6CAAC,SAAI,WAAU,oBACZ;AAAA,mBAAS,4CAAC,OAAE,WAAU,qBAAqB,iBAAM;AAAA,UACjD,YAAY,4CAAC,SAAI,WAAU,uBAAuB,UAAS;AAAA,WAC9D;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,SAAS;AAAA,YAET,sDAAC,oBAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/banner/banner.css

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+/* ── banner ── */
+.uxm-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: var(--uxm-banner-padding-y, 12px) var(--uxm-banner-padding-x, 16px);
+  border: 1px solid;
+  border-radius: var(--uxm-banner-border-radius, 8px);
+  font-size: calc(var(--uxm-banner-font-size, 14px) * var(--type-scale, 1));
+}
+
+/* Each variant reads its own `--uxm-banner-{variant}-*` vars so UXM saves
+   target just that variant — editing the Info colors no longer cascades
+   to Warning / Error. Fallbacks reference the semantic token family so
+   the default look matches what the brand tokens produce. */
+.uxm-banner--info {
+  background-color: var(--uxm-banner-info-bg, var(--color-info-bg));
+  color: var(--uxm-banner-info-text, var(--color-info-text));
+  border-color: var(--uxm-banner-info-border, var(--color-info-border));
+}
+
+.uxm-banner--success {
+  background-color: var(--uxm-banner-success-bg, var(--color-success-bg));
+  color: var(--uxm-banner-success-text, var(--color-success-text));
+  border-color: var(--uxm-banner-success-border, var(--color-success-border));
+}
+
+.uxm-banner--warning {
+  background-color: var(--uxm-banner-warning-bg, var(--color-warning-bg));
+  color: var(--uxm-banner-warning-text, var(--color-warning-text));
+  border-color: var(--uxm-banner-warning-border, var(--color-warning-border));
+}
+
+/* The `error` variant key maps to the `--color-danger-*` token family
+   (existing brand-token naming). Saves emit `--uxm-banner-error-*`. */
+.uxm-banner--error {
+  background-color: var(--uxm-banner-error-bg, var(--color-danger-bg));
+  color: var(--uxm-banner-error-text, var(--color-danger-text));
+  border-color: var(--uxm-banner-error-border, var(--color-danger-border));
+}
+
+.uxm-banner__icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.uxm-banner__title {
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.uxm-banner__content {
+  opacity: 0.9;
+  line-height: var(--type-body-line-height, 1.5);
+}
+
+/* Close affordance — rendered only when `onDismiss` is passed.
+   `margin-left: auto` parks it at the right edge regardless of body
+   length; `color: inherit` makes the X pick up the variant's text
+   color so it tints with the alert. */
+.uxm-banner__close {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+
+.uxm-banner__close:hover {
+  opacity: 1;
+  background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
+}
+
+.uxm-banner__close:focus-visible {
+  opacity: 1;
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}

package/dist/ui/banner/banner.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BannerVariant = 'success' | 'info' | 'warning' | 'error';
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: BannerVariant;
+    title?: ReactNode;
+    icon?: ReactNode;
+    children?: ReactNode;
+    /**
+     * When set, renders a close affordance (X icon, right-aligned) that
+     * calls this handler. Banners are persistent by design — they stay
+     * until the user dismisses, or until the consumer removes them from
+     * state. They do NOT auto-disappear; for transient feedback use
+     * `toast.*()` instead (`Toast` rendered by `Toaster`).
+     */
+    onDismiss?: () => void;
+    /** Accessible label for the close affordance. Default `"Dismiss"`. */
+    dismissLabel?: string;
+}
+/**
+ * Banner — a full-width persistent strip rendered inline in page flow.
+ * Stays visible until the user acts (via `onDismiss`) or the consumer
+ * removes it from state. Doesn't block the rest of the page.
+ *
+ * Use for system states / announcements: "Maintenance at 02:00",
+ * "Subscription expiring", "Q1 forecast beat target". For transient
+ * after-the-fact feedback ("Saved", "Copied") use the Toast atom via
+ * the `toast.*()` API instead — Banner stays persistent, Toast
+ * auto-dismisses in a corner.
+ */
+export declare function Banner({ variant, title, icon, children, onDismiss, dismissLabel, className, ...rest }: BannerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=banner.d.ts.map

package/dist/ui/banner/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/ui/banner/banner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAgB,EAChB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,YAAwB,EACxB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,2CA0Bb"}