@viax.io/uxm 4.36.0

package/dist/ui/breadcrumb/breadcrumb.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+import { Link } from "../link/index.js";
+const SEPARATOR_GLYPH = {
+  slash: "/",
+  dot: "\xB7",
+  dash: "\u2014"
+};
+function Breadcrumb({
+  items,
+  separator = "chevron",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("uxm-breadcrumb", className), ...rest, children: /* @__PURE__ */ jsx("ol", { className: "uxm-breadcrumb__list", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const showSeparator = !isLast;
+    return /* @__PURE__ */ jsxs("li", { className: "uxm-breadcrumb__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: item.href,
+          underline: "hover",
+          disabled: item.disabled,
+          className: "uxm-breadcrumb__link",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "uxm-breadcrumb__current",
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      ),
+      showSeparator && (separator === "chevron" ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          glyph: "chevron-right",
+          className: "uxm-breadcrumb__separator uxm-breadcrumb__separator--icon",
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "uxm-breadcrumb__separator", "aria-hidden": true, children: SEPARATOR_GLYPH[separator] }))
+    ] }, i);
+  }) }) });
+}
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/ui/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { Link } from '../link';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | 'dash';\n\nexport interface BreadcrumbCrumb {\n  label: ReactNode;\n  href?: string;\n  /** Disabled crumbs render as a Link with `aria-disabled` so the CSS\n   *  disabled rule paints. The crumb stays clickable in the DOM tree but\n   *  `pointer-events: none` blocks interaction. */\n  disabled?: boolean;\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbCrumb[];\n  separator?: BreadcrumbSeparator;\n}\n\nconst SEPARATOR_GLYPH: Record<Exclude<BreadcrumbSeparator, 'chevron'>, string> = {\n  slash: '/',\n  dot: '·',\n  dash: '—',\n};\n\nexport function Breadcrumb({\n  items,\n  separator = 'chevron',\n  className,\n  ...rest\n}: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn('uxm-breadcrumb', className)} {...rest}>\n      <ol className=\"uxm-breadcrumb__list\">\n        {items.map((item, i) => {\n          const isLast = i === items.length - 1;\n          const showSeparator = !isLast;\n          return (\n            <li key={i} className=\"uxm-breadcrumb__item\">\n              {item.href && !isLast ? (\n                <Link\n                  href={item.href}\n                  underline=\"hover\"\n                  disabled={item.disabled}\n                  className=\"uxm-breadcrumb__link\"\n                >\n                  {item.label}\n                </Link>\n              ) : (\n                <span\n                  className=\"uxm-breadcrumb__current\"\n                  aria-current={isLast ? 'page' : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n              {showSeparator &&\n                (separator === 'chevron' ? (\n                  <Icon\n                    glyph=\"chevron-right\"\n                    className=\"uxm-breadcrumb__separator uxm-breadcrumb__separator--icon\"\n                    aria-hidden\n                  />\n                ) : (\n                  <span className=\"uxm-breadcrumb__separator\" aria-hidden>\n                    {SEPARATOR_GLYPH[separator]}\n                  </span>\n                ))}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"AA0CY,SAEI,KAFJ;AA1CZ,SAAS,UAAU;AAEnB,SAAS,YAAY;AACrB,SAAS,YAAY;AAoBrB,MAAM,kBAA2E;AAAA,EAC/E,OAAO;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AACR;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,oBAAC,SAAI,cAAW,cAAa,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,MAC3E,8BAAC,QAAG,WAAU,wBACX,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,SAAS,MAAM,MAAM,SAAS;AACpC,UAAM,gBAAgB,CAAC;AACvB,WACE,qBAAC,QAAW,WAAU,wBACnB;AAAA,WAAK,QAAQ,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UACV,UAAU,KAAK;AAAA,UACf,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,gBAAc,SAAS,SAAS;AAAA,UAE/B,eAAK;AAAA;AAAA,MACR;AAAA,MAED,kBACE,cAAc,YACb;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA;AAAA,MACb,IAEA,oBAAC,UAAK,WAAU,6BAA4B,eAAW,MACpD,0BAAgB,SAAS,GAC5B;AAAA,SA5BG,CA8BT;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/ui/breadcrumb/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 breadcrumb_exports = {};
+module.exports = __toCommonJS(breadcrumb_exports);
+__reExport(breadcrumb_exports, require("./breadcrumb.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./breadcrumb.cjs")
+});
+//# sourceMappingURL=index.cjs.map

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

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

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

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

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

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

package/dist/ui/breadcrumb/index.js

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

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

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

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.cjs

@@ -0,0 +1,85 @@
+"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 bulk_action_bar_preview_exports = {};
+__export(bulk_action_bar_preview_exports, {
+  BulkActionBarPreview: () => BulkActionBarPreview
+});
+module.exports = __toCommonJS(bulk_action_bar_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_bulk_action_bar = require("./bulk-action-bar.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-bulk-action-bar-background-color": styles.backgroundColor,
+    "--uxm-bulk-action-bar-color": styles.color,
+    "--uxm-bulk-action-bar-border-color": styles.borderColor,
+    "--uxm-bulk-action-bar-border-radius": `${styles.borderRadius}px`,
+    "--uxm-bulk-action-bar-padding-x": `${styles.paddingX}px`,
+    "--uxm-bulk-action-bar-padding-y": `${styles.paddingY}px`,
+    "--uxm-bulk-action-bar-gap": `${styles.gap}px`,
+    "--uxm-bulk-action-bar-font-size": `${styles.fontSize}px`,
+    "--uxm-bulk-action-bar-shadow-color": styles.shadowColor,
+    "--uxm-bulk-action-bar-shadow-blur": `${styles.shadowBlur}px`,
+    "--uxm-bulk-action-bar-shadow-offset-y": `${styles.shadowOffsetY}px`,
+    "--uxm-bulk-action-bar-action-color": styles.actionColor,
+    "--uxm-bulk-action-bar-action-hover-bg": styles.actionHoverBg,
+    "--uxm-bulk-action-bar-action-radius": `${styles.actionRadius}px`,
+    "--uxm-bulk-action-bar-danger-color": styles.dangerColor,
+    "--uxm-bulk-action-bar-danger-hover-bg": styles.dangerHoverBg,
+    "--uxm-bulk-action-bar-divider-color": styles.dividerColor
+  };
+}
+function BulkActionBarPreview({ styles }) {
+  const count = 3;
+  const cssVars = buildVars(styles);
+  const [status, setStatus] = (0, import_react.useState)(null);
+  const run = (label) => () => setStatus(`Last action: ${label}`);
+  const actions = [
+    { key: "export", label: "Export", icon: "document", onClick: run("Export") },
+    { key: "archive", label: "Archive", icon: "archive-x", onClick: run("Archive") },
+    { key: "delete", label: "Delete", icon: "trash", danger: true, onClick: run("Delete") }
+  ];
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Bulk action bar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_bulk_action_bar.BulkActionBar,
+        {
+          count,
+          actions,
+          onClear: () => setStatus("Selection cleared"),
+          style: cssVars
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "var(--color-text-subtle)" }, children: status ?? "No action yet" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BulkActionBarPreview
+});
+//# sourceMappingURL=bulk-action-bar-preview.cjs.map

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/bulk-action-bar/bulk-action-bar-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\n\nimport { BulkActionBar, type BulkAction } from './bulk-action-bar';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-bulk-action-bar-{kebab(key)}` — exactly what generate-css emits\n * (REAL_CSS_PROPS land bare on the root, the rest kebab through the\n * fallback), so no PER_COMPONENT_MAPPING entry is needed. Set on the bar\n * itself; the per-part vars cascade down to the inner buttons.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-bulk-action-bar-background-color': styles.backgroundColor as string,\n    '--uxm-bulk-action-bar-color': styles.color as string,\n    '--uxm-bulk-action-bar-border-color': styles.borderColor as string,\n    '--uxm-bulk-action-bar-border-radius': `${styles.borderRadius}px`,\n    '--uxm-bulk-action-bar-padding-x': `${styles.paddingX}px`,\n    '--uxm-bulk-action-bar-padding-y': `${styles.paddingY}px`,\n    '--uxm-bulk-action-bar-gap': `${styles.gap}px`,\n    '--uxm-bulk-action-bar-font-size': `${styles.fontSize}px`,\n\n    '--uxm-bulk-action-bar-shadow-color': styles.shadowColor as string,\n    '--uxm-bulk-action-bar-shadow-blur': `${styles.shadowBlur}px`,\n    '--uxm-bulk-action-bar-shadow-offset-y': `${styles.shadowOffsetY}px`,\n\n    '--uxm-bulk-action-bar-action-color': styles.actionColor as string,\n    '--uxm-bulk-action-bar-action-hover-bg': styles.actionHoverBg as string,\n    '--uxm-bulk-action-bar-action-radius': `${styles.actionRadius}px`,\n\n    '--uxm-bulk-action-bar-danger-color': styles.dangerColor as string,\n    '--uxm-bulk-action-bar-danger-hover-bg': styles.dangerHoverBg as string,\n\n    '--uxm-bulk-action-bar-divider-color': styles.dividerColor as string,\n  } as CSSProperties;\n}\n\nexport function BulkActionBarPreview({ styles }: PreviewProps & { componentId: string }) {\n  // Representative count — the real count is runtime data the consumer owns.\n  const count = 3;\n  const cssVars = buildVars(styles);\n\n  const [status, setStatus] = useState<string | null>(null);\n  const run = (label: string) => () => setStatus(`Last action: ${label}`);\n\n  const actions: BulkAction[] = [\n    { key: 'export', label: 'Export', icon: 'document', onClick: run('Export') },\n    { key: 'archive', label: 'Archive', icon: 'archive-x', onClick: run('Archive') },\n    { key: 'delete', label: 'Delete', icon: 'trash', danger: true, onClick: run('Delete') },\n  ];\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n      <div>\n        <div style={sectionLabel}>Bulk action bar</div>\n        <BulkActionBar\n          count={count}\n          actions={actions}\n          onClear={() => setStatus('Selection cleared')}\n          style={cssVars}\n        />\n      </div>\n      <div style={{ fontSize: 12, color: 'var(--color-text-subtle)' }}>\n        {status ?? 'No action yet'}\n      </div>\n    </div>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEM;AAjEN,mBAA6C;AAI7C,6BAA+C;AAW/C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,0CAA0C,OAAO;AAAA,IACjD,+BAA+B,OAAO;AAAA,IACtC,sCAAsC,OAAO;AAAA,IAC7C,uCAAuC,GAAG,OAAO,YAAY;AAAA,IAC7D,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,6BAA6B,GAAG,OAAO,GAAG;AAAA,IAC1C,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IAErD,sCAAsC,OAAO;AAAA,IAC7C,qCAAqC,GAAG,OAAO,UAAU;AAAA,IACzD,yCAAyC,GAAG,OAAO,aAAa;AAAA,IAEhE,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAChD,uCAAuC,GAAG,OAAO,YAAY;AAAA,IAE7D,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAEhD,uCAAuC,OAAO;AAAA,EAChD;AACF;AAEO,SAAS,qBAAqB,EAAE,OAAO,GAA2C;AAEvF,QAAM,QAAQ;AACd,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAwB,IAAI;AACxD,QAAM,MAAM,CAAC,UAAkB,MAAM,UAAU,gBAAgB,KAAK,EAAE;AAEtE,QAAM,UAAwB;AAAA,IAC5B,EAAE,KAAK,UAAU,OAAO,UAAU,MAAM,YAAY,SAAS,IAAI,QAAQ,EAAE;AAAA,IAC3E,EAAE,KAAK,WAAW,OAAO,WAAW,MAAM,aAAa,SAAS,IAAI,SAAS,EAAE;AAAA,IAC/E,EAAE,KAAK,UAAU,OAAO,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,IAAI,QAAQ,EAAE;AAAA,EACxF;AAEA,QAAM,eAA8B;AAAA,IAClC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GAC9D;AAAA,iDAAC,SACC;AAAA,kDAAC,SAAI,OAAO,cAAc,6BAAe;AAAA,MACzC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,mBAAmB;AAAA,UAC5C,OAAO;AAAA;AAAA,MACT;AAAA,OACF;AAAA,IACA,4CAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,GAC3D,oBAAU,iBACb;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.d.ts

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

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-action-bar-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/bulk-action-bar/bulk-action-bar-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAuCrD,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CAsCtF"}

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { BulkActionBar } from "./bulk-action-bar.js";
+function buildVars(styles) {
+  return {
+    "--uxm-bulk-action-bar-background-color": styles.backgroundColor,
+    "--uxm-bulk-action-bar-color": styles.color,
+    "--uxm-bulk-action-bar-border-color": styles.borderColor,
+    "--uxm-bulk-action-bar-border-radius": `${styles.borderRadius}px`,
+    "--uxm-bulk-action-bar-padding-x": `${styles.paddingX}px`,
+    "--uxm-bulk-action-bar-padding-y": `${styles.paddingY}px`,
+    "--uxm-bulk-action-bar-gap": `${styles.gap}px`,
+    "--uxm-bulk-action-bar-font-size": `${styles.fontSize}px`,
+    "--uxm-bulk-action-bar-shadow-color": styles.shadowColor,
+    "--uxm-bulk-action-bar-shadow-blur": `${styles.shadowBlur}px`,
+    "--uxm-bulk-action-bar-shadow-offset-y": `${styles.shadowOffsetY}px`,
+    "--uxm-bulk-action-bar-action-color": styles.actionColor,
+    "--uxm-bulk-action-bar-action-hover-bg": styles.actionHoverBg,
+    "--uxm-bulk-action-bar-action-radius": `${styles.actionRadius}px`,
+    "--uxm-bulk-action-bar-danger-color": styles.dangerColor,
+    "--uxm-bulk-action-bar-danger-hover-bg": styles.dangerHoverBg,
+    "--uxm-bulk-action-bar-divider-color": styles.dividerColor
+  };
+}
+function BulkActionBarPreview({ styles }) {
+  const count = 3;
+  const cssVars = buildVars(styles);
+  const [status, setStatus] = useState(null);
+  const run = (label) => () => setStatus(`Last action: ${label}`);
+  const actions = [
+    { key: "export", label: "Export", icon: "document", onClick: run("Export") },
+    { key: "archive", label: "Archive", icon: "archive-x", onClick: run("Archive") },
+    { key: "delete", label: "Delete", icon: "trash", danger: true, onClick: run("Delete") }
+  ];
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Bulk action bar" }),
+      /* @__PURE__ */ jsx(
+        BulkActionBar,
+        {
+          count,
+          actions,
+          onClear: () => setStatus("Selection cleared"),
+          style: cssVars
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--color-text-subtle)" }, children: status ?? "No action yet" })
+  ] });
+}
+export {
+  BulkActionBarPreview
+};
+//# sourceMappingURL=bulk-action-bar-preview.js.map

package/dist/ui/bulk-action-bar/bulk-action-bar-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/bulk-action-bar/bulk-action-bar-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\n\nimport { BulkActionBar, type BulkAction } from './bulk-action-bar';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-bulk-action-bar-{kebab(key)}` — exactly what generate-css emits\n * (REAL_CSS_PROPS land bare on the root, the rest kebab through the\n * fallback), so no PER_COMPONENT_MAPPING entry is needed. Set on the bar\n * itself; the per-part vars cascade down to the inner buttons.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-bulk-action-bar-background-color': styles.backgroundColor as string,\n    '--uxm-bulk-action-bar-color': styles.color as string,\n    '--uxm-bulk-action-bar-border-color': styles.borderColor as string,\n    '--uxm-bulk-action-bar-border-radius': `${styles.borderRadius}px`,\n    '--uxm-bulk-action-bar-padding-x': `${styles.paddingX}px`,\n    '--uxm-bulk-action-bar-padding-y': `${styles.paddingY}px`,\n    '--uxm-bulk-action-bar-gap': `${styles.gap}px`,\n    '--uxm-bulk-action-bar-font-size': `${styles.fontSize}px`,\n\n    '--uxm-bulk-action-bar-shadow-color': styles.shadowColor as string,\n    '--uxm-bulk-action-bar-shadow-blur': `${styles.shadowBlur}px`,\n    '--uxm-bulk-action-bar-shadow-offset-y': `${styles.shadowOffsetY}px`,\n\n    '--uxm-bulk-action-bar-action-color': styles.actionColor as string,\n    '--uxm-bulk-action-bar-action-hover-bg': styles.actionHoverBg as string,\n    '--uxm-bulk-action-bar-action-radius': `${styles.actionRadius}px`,\n\n    '--uxm-bulk-action-bar-danger-color': styles.dangerColor as string,\n    '--uxm-bulk-action-bar-danger-hover-bg': styles.dangerHoverBg as string,\n\n    '--uxm-bulk-action-bar-divider-color': styles.dividerColor as string,\n  } as CSSProperties;\n}\n\nexport function BulkActionBarPreview({ styles }: PreviewProps & { componentId: string }) {\n  // Representative count — the real count is runtime data the consumer owns.\n  const count = 3;\n  const cssVars = buildVars(styles);\n\n  const [status, setStatus] = useState<string | null>(null);\n  const run = (label: string) => () => setStatus(`Last action: ${label}`);\n\n  const actions: BulkAction[] = [\n    { key: 'export', label: 'Export', icon: 'document', onClick: run('Export') },\n    { key: 'archive', label: 'Archive', icon: 'archive-x', onClick: run('Archive') },\n    { key: 'delete', label: 'Delete', icon: 'trash', danger: true, onClick: run('Delete') },\n  ];\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n      <div>\n        <div style={sectionLabel}>Bulk action bar</div>\n        <BulkActionBar\n          count={count}\n          actions={actions}\n          onClear={() => setStatus('Selection cleared')}\n          style={cssVars}\n        />\n      </div>\n      <div style={{ fontSize: 12, color: 'var(--color-text-subtle)' }}>\n        {status ?? 'No action yet'}\n      </div>\n    </div>\n  );\n}"],"mappings":"AAiEM,SACE,KADF;AAjEN,SAAS,gBAAoC;AAI7C,SAAS,qBAAsC;AAW/C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,0CAA0C,OAAO;AAAA,IACjD,+BAA+B,OAAO;AAAA,IACtC,sCAAsC,OAAO;AAAA,IAC7C,uCAAuC,GAAG,OAAO,YAAY;AAAA,IAC7D,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,6BAA6B,GAAG,OAAO,GAAG;AAAA,IAC1C,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IAErD,sCAAsC,OAAO;AAAA,IAC7C,qCAAqC,GAAG,OAAO,UAAU;AAAA,IACzD,yCAAyC,GAAG,OAAO,aAAa;AAAA,IAEhE,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAChD,uCAAuC,GAAG,OAAO,YAAY;AAAA,IAE7D,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAEhD,uCAAuC,OAAO;AAAA,EAChD;AACF;AAEO,SAAS,qBAAqB,EAAE,OAAO,GAA2C;AAEvF,QAAM,QAAQ;AACd,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,MAAM,CAAC,UAAkB,MAAM,UAAU,gBAAgB,KAAK,EAAE;AAEtE,QAAM,UAAwB;AAAA,IAC5B,EAAE,KAAK,UAAU,OAAO,UAAU,MAAM,YAAY,SAAS,IAAI,QAAQ,EAAE;AAAA,IAC3E,EAAE,KAAK,WAAW,OAAO,WAAW,MAAM,aAAa,SAAS,IAAI,SAAS,EAAE;AAAA,IAC/E,EAAE,KAAK,UAAU,OAAO,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,IAAI,QAAQ,EAAE;AAAA,EACxF;AAEA,QAAM,eAA8B;AAAA,IAClC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GAC9D;AAAA,yBAAC,SACC;AAAA,0BAAC,SAAI,OAAO,cAAc,6BAAe;AAAA,MACzC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,mBAAmB;AAAA,UAC5C,OAAO;AAAA;AAAA,MACT;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,GAC3D,oBAAU,iBACb;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/bulk-action-bar/bulk-action-bar.cjs

@@ -0,0 +1,79 @@
+"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 bulk_action_bar_exports = {};
+__export(bulk_action_bar_exports, {
+  BulkActionBar: () => BulkActionBar
+});
+module.exports = __toCommonJS(bulk_action_bar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../../helpers/cn.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+function BulkActionBar({
+  count,
+  actions = [],
+  onClear,
+  countLabel,
+  clearLabel = "Clear selection",
+  className,
+  ...rest
+}) {
+  const label = countLabel ? countLabel(count) : `${count} selected`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)("uxm-bulk-action-bar", className),
+      role: "toolbar",
+      "aria-label": "Bulk actions",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-bulk-action-bar__count", children: label }),
+        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-bulk-action-bar__divider", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-bulk-action-bar__actions", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: (0, import_cn.cn)(
+                "uxm-bulk-action-bar__action",
+                action.danger && "uxm-bulk-action-bar__action--danger"
+              ),
+              onClick: action.onClick,
+              disabled: action.disabled,
+              children: [
+                action.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: action.icon, size: 16, className: "uxm-bulk-action-bar__action-icon" }),
+                action.label
+              ]
+            },
+            action.key
+          )) })
+        ] }),
+        onClear && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-bulk-action-bar__divider", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_button.IconButton, { "aria-label": clearLabel, onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close", size: 16 }) })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BulkActionBar
+});
+//# sourceMappingURL=bulk-action-bar.cjs.map

package/dist/ui/bulk-action-bar/bulk-action-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/bulk-action-bar/bulk-action-bar.tsx"],"sourcesContent":["import { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\n/**\n * One action in a {@link BulkActionBar}. Presentational — the consumer\n * owns `onClick` and decides what \"do it to the selection\" means.\n */\nexport type BulkAction = {\n  /** Stable React key + identity. */\n  key: string;\n  /** Visible label, e.g. \"Export\", \"Archive\", \"Delete\". */\n  label: string;\n  /** Optional leading icon glyph id (see the icon registry). */\n  icon?: string;\n  /** Render in the destructive (danger) colour. Reserve for Delete/Remove. */\n  danger?: boolean;\n  /** Disable this single action without removing it. */\n  disabled?: boolean;\n  /** Invoked on click. */\n  onClick?: () => void;\n};\n\nexport interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of selected items. Drives the default count label. */\n  count: number;\n  /** Action buttons, in display order. */\n  actions?: BulkAction[];\n  /** When provided, renders a trailing × that clears the selection. */\n  onClear?: () => void;\n  /**\n   * Override the \"{n} selected\" count label — e.g. for pluralisation or\n   * a different noun (\"3 rows\"). Receives the current count.\n   */\n  countLabel?: (count: number) => ReactNode;\n  /**\n   * Accessible name for the trailing × . Default `\"Clear selection\"`. The\n   * button has no visible text, so this is the only thing AT announces for\n   * it.\n   *\n   * The toolbar's OWN name needs no prop — `aria-label` is spread from\n   * `...rest` after the default, so `<BulkActionBar aria-label=\"…\" />`\n   * already overrides `\"Bulk actions\"`.\n   */\n  clearLabel?: string;\n}\n\n/**\n * Floating bulk-action bar — the toolbar that appears once rows are\n * selected: \"{N} selected · actions · × to clear\". Purely presentational;\n * the consumer wires it to its own `selectedKeys` state and renders it\n * (typically fixed/sticky near the bottom of a table view). Destructive\n * actions get the danger treatment via `danger: true`.\n */\nexport function BulkActionBar({\n  count,\n  actions = [],\n  onClear,\n  countLabel,\n  clearLabel = 'Clear selection',\n  className,\n  ...rest\n}: BulkActionBarProps) {\n  const label = countLabel ? countLabel(count) : `${count} selected`;\n\n  return (\n    <div\n      className={cn('uxm-bulk-action-bar', className)}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n      {...rest}\n    >\n      <span className=\"uxm-bulk-action-bar__count\">{label}</span>\n\n      {actions.length > 0 && (\n        <>\n          <span className=\"uxm-bulk-action-bar__divider\" aria-hidden=\"true\" />\n          <div className=\"uxm-bulk-action-bar__actions\">\n            {actions.map((action) => (\n              <button\n                key={action.key}\n                type=\"button\"\n                className={cn(\n                  'uxm-bulk-action-bar__action',\n                  action.danger && 'uxm-bulk-action-bar__action--danger',\n                )}\n                onClick={action.onClick}\n                disabled={action.disabled}\n              >\n                {action.icon && (\n                  <Icon glyph={action.icon} size={16} className=\"uxm-bulk-action-bar__action-icon\" />\n                )}\n                {action.label}\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n\n      {onClear && (\n        <>\n          <span className=\"uxm-bulk-action-bar__divider\" aria-hidden=\"true\" />\n          <IconButton aria-label={clearLabel} onClick={onClear}>\n            <Icon glyph=\"close\" size={16} />\n          </IconButton>\n        </>\n      )}\n    </div>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0EM;AA1EN,gBAAmB;AACnB,kBAAqB;AACrB,yBAA2B;AAsDpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,QAAQ,aAAa,WAAW,KAAK,IAAI,GAAG,KAAK;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,cAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,cAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,oDAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,QAEnD,QAAQ,SAAS,KAChB,4EACE;AAAA,sDAAC,UAAK,WAAU,gCAA+B,eAAY,QAAO;AAAA,UAClE,4CAAC,SAAI,WAAU,gCACZ,kBAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAW;AAAA,gBACT;AAAA,gBACA,OAAO,UAAU;AAAA,cACnB;AAAA,cACA,SAAS,OAAO;AAAA,cAChB,UAAU,OAAO;AAAA,cAEhB;AAAA,uBAAO,QACN,4CAAC,oBAAK,OAAO,OAAO,MAAM,MAAM,IAAI,WAAU,oCAAmC;AAAA,gBAElF,OAAO;AAAA;AAAA;AAAA,YAZH,OAAO;AAAA,UAad,CACD,GACH;AAAA,WACF;AAAA,QAGD,WACC,4EACE;AAAA,sDAAC,UAAK,WAAU,gCAA+B,eAAY,QAAO;AAAA,UAClE,4CAAC,iCAAW,cAAY,YAAY,SAAS,SAC3C,sDAAC,oBAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/bulk-action-bar/bulk-action-bar.css

@@ -0,0 +1,88 @@
+@charset "UTF-8";
+/* ── Bulk Action Bar ──
+   Floating toolbar shown once rows are selected: "{N} selected · actions ·
+   × clear". The `.uxm-bulk-action-bar` root IS the styled element (card
+   surface + border + decomposed shadow), so the real-CSS knobs
+   (background/color/border/radius/padding/gap/font) land on it directly,
+   while the per-part colours (action / danger / divider / clear) read
+   `--uxm-bulk-action-bar-*` custom properties on the inner elements. */
+.uxm-bulk-action-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uxm-bulk-action-bar-gap, 8px);
+  background-color: var(--uxm-bulk-action-bar-background-color, var(--color-card));
+  color: var(--uxm-bulk-action-bar-color, var(--color-text));
+  border: 1px solid var(--uxm-bulk-action-bar-border-color, var(--color-border));
+  border-radius: var(--uxm-bulk-action-bar-border-radius, 12px);
+  padding: var(--uxm-bulk-action-bar-padding-y, 8px) var(--uxm-bulk-action-bar-padding-x, 12px);
+  font-size: calc(var(--uxm-bulk-action-bar-font-size, 14px) * var(--type-scale, 1));
+  box-shadow: 0 var(--uxm-bulk-action-bar-shadow-offset-y, 10px) var(--uxm-bulk-action-bar-shadow-blur, 28px) var(--uxm-bulk-action-bar-shadow-color, rgba(0, 0, 0, 0.16));
+}
+
+.uxm-bulk-action-bar__count {
+  font-weight: 600;
+  white-space: nowrap;
+  padding-inline: 4px;
+}
+
+.uxm-bulk-action-bar__divider {
+  width: 1px;
+  align-self: stretch;
+  min-height: 20px;
+  background-color: var(--uxm-bulk-action-bar-divider-color, var(--color-border));
+}
+
+.uxm-bulk-action-bar__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.uxm-bulk-action-bar__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background-color: transparent;
+  color: var(--uxm-bulk-action-bar-action-color, var(--color-text));
+  border: none;
+  border-radius: var(--uxm-bulk-action-bar-action-radius, 6px);
+  padding: 6px 10px;
+  font-size: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+}
+
+.uxm-bulk-action-bar__action:hover:not(:disabled) {
+  background-color: var(--uxm-bulk-action-bar-action-hover-bg, var(--color-surface-alt));
+}
+
+.uxm-bulk-action-bar__action:focus-visible {
+  outline: 2px solid var(--uxm-bulk-action-bar-action-color, var(--color-text));
+  outline-offset: 1px;
+}
+
+.uxm-bulk-action-bar__action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.uxm-bulk-action-bar__action--danger {
+  color: var(--uxm-bulk-action-bar-danger-color, var(--color-danger-text));
+}
+
+.uxm-bulk-action-bar__action--danger:hover:not(:disabled) {
+  background-color: var(--uxm-bulk-action-bar-danger-hover-bg, var(--color-danger-bg));
+}
+
+.uxm-bulk-action-bar__action--danger:focus-visible {
+  outline-color: var(--uxm-bulk-action-bar-danger-color, var(--color-danger-text));
+}
+
+.uxm-bulk-action-bar__action-icon {
+  flex: none;
+}
+
+/* The trailing clear (×) is the canonical IconButton atom — its chrome
+   (size / muted colour / surface-alt hover / focus ring) comes from
+   `.uxm-icon-button`, themed by the IconButton component's own knobs. */

package/dist/ui/bulk-action-bar/bulk-action-bar.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * One action in a {@link BulkActionBar}. Presentational — the consumer
+ * owns `onClick` and decides what "do it to the selection" means.
+ */
+export type BulkAction = {
+    /** Stable React key + identity. */
+    key: string;
+    /** Visible label, e.g. "Export", "Archive", "Delete". */
+    label: string;
+    /** Optional leading icon glyph id (see the icon registry). */
+    icon?: string;
+    /** Render in the destructive (danger) colour. Reserve for Delete/Remove. */
+    danger?: boolean;
+    /** Disable this single action without removing it. */
+    disabled?: boolean;
+    /** Invoked on click. */
+    onClick?: () => void;
+};
+export interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of selected items. Drives the default count label. */
+    count: number;
+    /** Action buttons, in display order. */
+    actions?: BulkAction[];
+    /** When provided, renders a trailing × that clears the selection. */
+    onClear?: () => void;
+    /**
+     * Override the "{n} selected" count label — e.g. for pluralisation or
+     * a different noun ("3 rows"). Receives the current count.
+     */
+    countLabel?: (count: number) => ReactNode;
+    /**
+     * Accessible name for the trailing × . Default `"Clear selection"`. The
+     * button has no visible text, so this is the only thing AT announces for
+     * it.
+     *
+     * The toolbar's OWN name needs no prop — `aria-label` is spread from
+     * `...rest` after the default, so `<BulkActionBar aria-label="…" />`
+     * already overrides `"Bulk actions"`.
+     */
+    clearLabel?: string;
+}
+/**
+ * Floating bulk-action bar — the toolbar that appears once rows are
+ * selected: "{N} selected · actions · × to clear". Purely presentational;
+ * the consumer wires it to its own `selectedKeys` state and renders it
+ * (typically fixed/sticky near the bottom of a table view). Destructive
+ * actions get the danger treatment via `danger: true`.
+ */
+export declare function BulkActionBar({ count, actions, onClear, countLabel, clearLabel, className, ...rest }: BulkActionBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bulk-action-bar.d.ts.map

package/dist/ui/bulk-action-bar/bulk-action-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/ui/bulk-action-bar/bulk-action-bar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1C;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAY,EACZ,OAAO,EACP,UAAU,EACV,UAA8B,EAC9B,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,2CA+CpB"}

package/dist/ui/bulk-action-bar/bulk-action-bar.js

@@ -0,0 +1,55 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/cn.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+function BulkActionBar({
+  count,
+  actions = [],
+  onClear,
+  countLabel,
+  clearLabel = "Clear selection",
+  className,
+  ...rest
+}) {
+  const label = countLabel ? countLabel(count) : `${count} selected`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("uxm-bulk-action-bar", className),
+      role: "toolbar",
+      "aria-label": "Bulk actions",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uxm-bulk-action-bar__count", children: label }),
+        actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "uxm-bulk-action-bar__divider", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "uxm-bulk-action-bar__actions", children: actions.map((action) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "uxm-bulk-action-bar__action",
+                action.danger && "uxm-bulk-action-bar__action--danger"
+              ),
+              onClick: action.onClick,
+              disabled: action.disabled,
+              children: [
+                action.icon && /* @__PURE__ */ jsx(Icon, { glyph: action.icon, size: 16, className: "uxm-bulk-action-bar__action-icon" }),
+                action.label
+              ]
+            },
+            action.key
+          )) })
+        ] }),
+        onClear && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "uxm-bulk-action-bar__divider", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": clearLabel, onClick: onClear, children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 16 }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  BulkActionBar
+};
+//# sourceMappingURL=bulk-action-bar.js.map

package/dist/ui/bulk-action-bar/bulk-action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/bulk-action-bar/bulk-action-bar.tsx"],"sourcesContent":["import { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\n/**\n * One action in a {@link BulkActionBar}. Presentational — the consumer\n * owns `onClick` and decides what \"do it to the selection\" means.\n */\nexport type BulkAction = {\n  /** Stable React key + identity. */\n  key: string;\n  /** Visible label, e.g. \"Export\", \"Archive\", \"Delete\". */\n  label: string;\n  /** Optional leading icon glyph id (see the icon registry). */\n  icon?: string;\n  /** Render in the destructive (danger) colour. Reserve for Delete/Remove. */\n  danger?: boolean;\n  /** Disable this single action without removing it. */\n  disabled?: boolean;\n  /** Invoked on click. */\n  onClick?: () => void;\n};\n\nexport interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of selected items. Drives the default count label. */\n  count: number;\n  /** Action buttons, in display order. */\n  actions?: BulkAction[];\n  /** When provided, renders a trailing × that clears the selection. */\n  onClear?: () => void;\n  /**\n   * Override the \"{n} selected\" count label — e.g. for pluralisation or\n   * a different noun (\"3 rows\"). Receives the current count.\n   */\n  countLabel?: (count: number) => ReactNode;\n  /**\n   * Accessible name for the trailing × . Default `\"Clear selection\"`. The\n   * button has no visible text, so this is the only thing AT announces for\n   * it.\n   *\n   * The toolbar's OWN name needs no prop — `aria-label` is spread from\n   * `...rest` after the default, so `<BulkActionBar aria-label=\"…\" />`\n   * already overrides `\"Bulk actions\"`.\n   */\n  clearLabel?: string;\n}\n\n/**\n * Floating bulk-action bar — the toolbar that appears once rows are\n * selected: \"{N} selected · actions · × to clear\". Purely presentational;\n * the consumer wires it to its own `selectedKeys` state and renders it\n * (typically fixed/sticky near the bottom of a table view). Destructive\n * actions get the danger treatment via `danger: true`.\n */\nexport function BulkActionBar({\n  count,\n  actions = [],\n  onClear,\n  countLabel,\n  clearLabel = 'Clear selection',\n  className,\n  ...rest\n}: BulkActionBarProps) {\n  const label = countLabel ? countLabel(count) : `${count} selected`;\n\n  return (\n    <div\n      className={cn('uxm-bulk-action-bar', className)}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n      {...rest}\n    >\n      <span className=\"uxm-bulk-action-bar__count\">{label}</span>\n\n      {actions.length > 0 && (\n        <>\n          <span className=\"uxm-bulk-action-bar__divider\" aria-hidden=\"true\" />\n          <div className=\"uxm-bulk-action-bar__actions\">\n            {actions.map((action) => (\n              <button\n                key={action.key}\n                type=\"button\"\n                className={cn(\n                  'uxm-bulk-action-bar__action',\n                  action.danger && 'uxm-bulk-action-bar__action--danger',\n                )}\n                onClick={action.onClick}\n                disabled={action.disabled}\n              >\n                {action.icon && (\n                  <Icon glyph={action.icon} size={16} className=\"uxm-bulk-action-bar__action-icon\" />\n                )}\n                {action.label}\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n\n      {onClear && (\n        <>\n          <span className=\"uxm-bulk-action-bar__divider\" aria-hidden=\"true\" />\n          <IconButton aria-label={clearLabel} onClick={onClear}>\n            <Icon glyph=\"close\" size={16} />\n          </IconButton>\n        </>\n      )}\n    </div>\n  );\n}"],"mappings":"AA0EM,SAGE,UAHF,KAOQ,YAPR;AA1EN,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAsDpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,QAAQ,aAAa,WAAW,KAAK,IAAI,GAAG,KAAK;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,cAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,QAEnD,QAAQ,SAAS,KAChB,iCACE;AAAA,8BAAC,UAAK,WAAU,gCAA+B,eAAY,QAAO;AAAA,UAClE,oBAAC,SAAI,WAAU,gCACZ,kBAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,UAAU;AAAA,cACnB;AAAA,cACA,SAAS,OAAO;AAAA,cAChB,UAAU,OAAO;AAAA,cAEhB;AAAA,uBAAO,QACN,oBAAC,QAAK,OAAO,OAAO,MAAM,MAAM,IAAI,WAAU,oCAAmC;AAAA,gBAElF,OAAO;AAAA;AAAA;AAAA,YAZH,OAAO;AAAA,UAad,CACD,GACH;AAAA,WACF;AAAA,QAGD,WACC,iCACE;AAAA,8BAAC,UAAK,WAAU,gCAA+B,eAAY,QAAO;AAAA,UAClE,oBAAC,cAAW,cAAY,YAAY,SAAS,SAC3C,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/bulk-action-bar/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 bulk_action_bar_exports = {};
+module.exports = __toCommonJS(bulk_action_bar_exports);
+__reExport(bulk_action_bar_exports, require("./bulk-action-bar.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./bulk-action-bar.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/bulk-action-bar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/bulk-action-bar/index.ts"],"sourcesContent":["export * from './bulk-action-bar';"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAc,8BAAd;","names":[]}

package/dist/ui/bulk-action-bar/index.d.ts

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

package/dist/ui/bulk-action-bar/index.d.ts.map

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

package/dist/ui/bulk-action-bar/index.js

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