@smwb/ui-react 2.6.2 → 2.7.0

package/dist/headless/components/dataDisplay/stat/stat.js

@@ -0,0 +1,46 @@
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import i from "react";
+import w from "clsx";
+import { Icon as d } from "../../base/icon/icon.js";
+const S = i.forwardRef(function({ className: l, label: n, value: a, hint: r, icon: t, tone: o = "neutral", variant: e = "tile", href: m, children: c, ...b }, u) {
+  return /* @__PURE__ */ _(
+    m ? "a" : "div",
+    {
+      ...b,
+      ref: u,
+      ...m ? { href: m } : {},
+      "data-testid": "stat",
+      className: w(
+        "smwb-stat",
+        `smwb-stat_${e}`,
+        `smwb-stat_tone-${o}`,
+        { "smwb-stat_link": !!m, "smwb-stat_with-icon": !!t },
+        l
+      ),
+      children: [
+        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(d, { name: t, size: 20 }) : t }) : null,
+        /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: n }),
+        /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
+        r ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: r }) : null,
+        c ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: c }) : null
+      ]
+    }
+  );
+}), R = i.forwardRef(function({ className: l, style: n, minItemWidth: a, children: r, ...t }, o) {
+  const e = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...t,
+      ref: o,
+      className: w("smwb-stat-group", l),
+      style: e === void 0 ? n : { ...n, "--smwb-stat-min": e },
+      children: r
+    }
+  );
+});
+export {
+  S as Stat,
+  R as StatGroup
+};
+//# sourceMappingURL=stat.js.map

package/dist/headless/components/dataDisplay/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  { className, label, value, hint, icon, tone = \"neutral\", variant = \"tile\", href, children, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid=\"stat\"\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;AA4BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,SAAAC,IAAU,QAAQ,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC9FC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWJ,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGE;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIH,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAY;AAAA,MACZ,WAAWK;AAAA,QACT;AAAA,QACA,aAAaN,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAS,EAACC,KAAK,MAAMV,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAS,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QAC1C,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QACzCC,IAAO,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDL,IAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAL,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYO,IAAYhB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAgB,GAAO,cAAAC,GAAc,UAAAT,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBZ,CAAS;AAAA,MAC1C,OAAOkB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/headless/components/dataDisplay/table/table.js

@@ -1,37 +1,42 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import r from "clsx";
-import _ from "./tablePagination/tablePagination.js";
-const u = n(
-  ({ className: m, dense: b, hovered: o, children: t, paginationSettings: e, isLoading: c, stickyHeader: i, caption: s, ...w }, d) => /* @__PURE__ */ l(
+import p from "./tablePagination/tablePagination.js";
+const v = n(
+  ({ className: b, dense: t, hovered: o, children: w, paginationSettings: e, isLoading: c, stickyHeader: i, caption: s, stackBelow: m, ..._ }, d) => /* @__PURE__ */ l(
     "div",
     {
       ref: d,
-      className: r("smwb-table__wrapper", m, {
-        "smwb-table__wrapper_loading": c
-      }),
-      ...w,
+      className: r(
+        "smwb-table__wrapper",
+        b,
+        {
+          "smwb-table__wrapper_loading": c
+        },
+        m && `smwb-table__wrapper_stack-${m}`
+      ),
+      ..._,
       children: [
         /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ l(
           "table",
           {
             className: r("smwb-table", {
-              "smwb-dense": b,
+              "smwb-dense": t,
               "smwb-hovered": o,
               "smwb-table_sticky-header": i
             }),
             children: [
               s != null && /* @__PURE__ */ a("caption", { className: "smwb-table__caption", children: s }),
-              t
+              w
             ]
           }
         ) }),
-        !!e && /* @__PURE__ */ a(_, { ...e })
+        !!e && /* @__PURE__ */ a(p, { ...e })
       ]
     }
   )
 );
 export {
-  u as default
+  v as default
 };
 //# sourceMappingURL=table.js.map

package/dist/headless/components/dataDisplay/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  ({ className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-table__wrapper\", className, {\n          [\"smwb-table__wrapper_loading\"]: isLoading,\n        })}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;AAgBA,MAAMA,IAAQC;AAAA,EACZ,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GAASC,MAEtG,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,uBAAuBX,GAAW;AAAA,QAC7C,+BAAgCK;AAAA,MAAA,CAClC;AAAA,MACA,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACP,GAAoB,GACzF,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcV;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAK,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAL,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAQ,EAACC,GAAA,EAAiB,GAAGT,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}
+{"version":3,"file":"table.js","sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  (\n    { className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, stackBelow, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"smwb-table__wrapper\",\n          className,\n          {\n            [\"smwb-table__wrapper_loading\"]: isLoading,\n          },\n          stackBelow && `smwb-table__wrapper_stack-${stackBelow}`\n        )}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","stackBelow","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;AAuBA,MAAMA,IAAQC;AAAA,EACZ,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,YAAAC,GAAY,GAAGC,EAAA,GAC5GC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAZ;AAAA,QACA;AAAA,UACG,+BAAgCK;AAAA,QAAA;AAAA,QAEnCG,KAAc,6BAA6BA,CAAU;AAAA,MAAA;AAAA,MAEtD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACR,GAAoB,GACzF,UAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcX;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAM,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAN,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAS,EAACC,GAAA,EAAiB,GAAGV,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}

package/dist/headless/components/dataDisplay/table/tableCell.js

@@ -1,7 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
 import m from "clsx";
-const f = ({ children: l, cellAlign: e = "left", className: t, ...a }) => /* @__PURE__ */ r("td", { ...a, className: m("smwb-table__cell", t), align: e || "left", children: l });
+const c = ({ children: t, cellAlign: e = "left", className: a, label: l, ...o }) => /* @__PURE__ */ r(
+  "td",
+  {
+    ...o,
+    className: m("smwb-table__cell", a),
+    align: e || "left",
+    ...l !== void 0 && { "data-label": l },
+    children: t
+  }
+);
 export {
-  f as default
+  c as default
 };
 //# sourceMappingURL=tableCell.js.map

package/dist/headless/components/dataDisplay/table/tableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableCell.js","sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td {...props} className={cn(\"smwb-table__cell\", className)} align={cellAlign || \"left\"}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","props","jsx","cn"],"mappings":";;AAQA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,GAAGC,QAE7D,gBAAAC,EAAC,MAAA,EAAI,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAAG,OAAOD,KAAa,QAC9E,UAAAD,EAAA,CACH;"}
+{"version":3,"file":"tableCell.js","sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, label, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td\n      {...props}\n      className={cn(\"smwb-table__cell\", className)}\n      align={cellAlign || \"left\"}\n      // Only a given label sets data-label: without one, a caller's own\n      // data-label (the way to label cells by hand) must survive, as in Solid.\n      {...(label !== undefined && { \"data-label\": label })}\n    >\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","label","props","jsx","cn"],"mappings":";;AAUA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,OAAAC,GAAO,GAAGC,QAEpE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE,EAAG,oBAAoBJ,CAAS;AAAA,IAC3C,OAAOD,KAAa;AAAA,IAGnB,GAAIE,MAAU,UAAa,EAAE,cAAcA,EAAA;AAAA,IAE3C,UAAAH;AAAA,EAAA;AAAA;"}

package/dist/headless/components/dataDisplay/table/tableHeadCell.js

@@ -1,41 +1,71 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import p from "clsx";
-import { Icon as x } from "../../base/icon/icon.js";
-const y = ({
-  children: i,
+import { jsx as d, jsxs as p } from "react/jsx-runtime";
+import _ from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+const g = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((c) => `[role='${c}']`)
+].join(","), T = ({
+  children: c,
   className: l,
-  cellAlign: a = "left",
+  cellAlign: s = "left",
   isSortedByAsc: m,
-  isSortedByDesc: t,
+  isSortedByDesc: r,
   sortable: e,
-  sortDirection: d,
-  onSort: s,
-  ..._
+  sortDirection: i,
+  onSort: t,
+  ...u
 }) => {
-  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, r = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, f = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "unfold_more", w = (c) => {
-    e && s && (c.key === "Enter" || c.key === " ") && (c.preventDefault(), s());
+  const a = i !== void 0 ? i : m ? "asc" : r ? "desc" : !1, b = e ? a === "asc" ? "ascending" : a === "desc" ? "descending" : "none" : void 0, f = a === "asc" ? "expand_more" : a === "desc" ? "expand_less" : "unfold_more", h = (n) => {
+    n.target === n.currentTarget && e && t && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), t());
+  }, x = (n) => {
+    var o;
+    n.defaultPrevented || ((o = n.target) == null ? void 0 : o.closest(g)) === n.currentTarget && (t == null || t());
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ d(
     "th",
     {
-      ..._,
-      "aria-sort": r,
-      className: p("smwb-table__cell", "smwb-head-cell", l, {
-        [`smwb-align_${a}`]: !!a,
+      ...u,
+      "aria-sort": b,
+      className: _("smwb-table__cell", "smwb-head-cell", l, {
+        [`smwb-align_${s}`]: !!s,
         "smwb-head-cell_sortable": e,
-        "smwb-head-cell_sorted": !!e && n !== !1
+        "smwb-head-cell_sorted": !!e && a !== !1
       }),
-      children: /* @__PURE__ */ h(
+      children: /* @__PURE__ */ p(
         "span",
         {
           className: "smwb-head-cell__content",
-          onClick: e ? s : void 0,
-          onKeyDown: e ? w : void 0,
+          onClick: e ? x : void 0,
+          onKeyDown: e ? h : void 0,
           role: e ? "button" : void 0,
           tabIndex: e ? 0 : void 0,
           children: [
-            i,
-            e && /* @__PURE__ */ o(x, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
+            c,
+            e && /* @__PURE__ */ d(w, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
           ]
         }
       )
@@ -43,6 +73,6 @@ const y = ({
   );
 };
 export {
-  y as default
+  T as default
 };
 //# sourceMappingURL=tableHeadCell.js.map

package/dist/headless/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAS,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\n/**\n * Whatever takes a click of its own inside the sort control. The control\n * matches too (`role=\"button\"`), so it is the nearest match for a click on the\n * header's text or marker, and only then does the click sort.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a portal rendered inside fails that too: React delivers it here,\n  // though it landed outside the control.\n  const onClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    onSort?.();\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onClick : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["INTERACTIVE","role","TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","onClick","_a","jsx","cn","jsxs","Icon"],"mappings":";;;AAoCA,MAAMA,IAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,IAAI,CAACC,MAAS,UAAUA,CAAI,IAAI;AACpC,EAAE,KAAK,GAAG,GAEJC,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAIxFG,IAAY,CAACC,MAAgD;AACjE,IAAIA,EAAM,WAAWA,EAAM,iBACvBR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ,GAKMO,IAAU,CAACD,MAA6C;;AAC5D,IAAIA,EAAM,sBACLE,IAAAF,EAAM,WAAN,gBAAAE,EAAiC,QAAQlB,QAAiBgB,EAAM,kBACrEN,KAAA,QAAAA;AAAA,EACF;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWO,EAAG,oBAAoB,kBAAkBhB,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASb,IAAWS,IAAU;AAAA,UAC9B,WAAWT,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAW,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMR,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}

package/dist/headless/components/dataDisplay/timeline/timeline.js

@@ -0,0 +1,42 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import r from "react";
+import c from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+const h = r.forwardRef(function({ className: s, dense: n, stickyLabels: m, children: l, ...i }, t) {
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      ...i,
+      ref: t,
+      className: c(
+        "smwb-timeline",
+        { "smwb-timeline_dense": n, "smwb-timeline_sticky-labels": m },
+        s
+      ),
+      children: l
+    }
+  );
+}), v = r.forwardRef(
+  function({ className: s, label: n, children: m, ...l }, i) {
+    return /* @__PURE__ */ a("li", { ...l, ref: i, className: c("smwb-timeline__group", s), children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__label", children: n }),
+      /* @__PURE__ */ e("ol", { className: "smwb-timeline__items", children: m })
+    ] });
+  }
+), T = r.forwardRef(function({ className: s, title: n, meta: m, time: l, icon: i, tone: t = "neutral", children: o, ...d }, b) {
+  return /* @__PURE__ */ a("li", { ...d, ref: b, className: c("smwb-timeline__item", `smwb-timeline__item_tone-${t}`, s), children: [
+    /* @__PURE__ */ e("span", { className: "smwb-timeline__mark", "aria-hidden": "true", children: i ? typeof i == "string" ? /* @__PURE__ */ e(w, { name: i, size: 16 }) : i : /* @__PURE__ */ e("span", { className: "smwb-timeline__dot" }) }),
+    /* @__PURE__ */ a("div", { className: "smwb-timeline__body", children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__title", children: n }),
+      m ? /* @__PURE__ */ e("div", { className: "smwb-timeline__meta", children: m }) : null,
+      o ? /* @__PURE__ */ e("div", { className: "smwb-timeline__content", children: o }) : null
+    ] }),
+    l ? /* @__PURE__ */ e("div", { className: "smwb-timeline__time", children: l }) : null
+  ] });
+});
+export {
+  h as Timeline,
+  v as TimelineGroup,
+  T as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

package/dist/headless/components/dataDisplay/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import React, { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {\n  className?: string;\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n}\n\nexport interface TimelineGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** What groups the events — a day, a week, a stage. */\n  label: ReactNode;\n}\n\nexport interface TimelineItemProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The event itself: a line of text, usually a link. */\n  title: ReactNode;\n  /** A second line: who, what kind, where. */\n  meta?: ReactNode;\n  /** When: a time or a date, at the end of the row. */\n  time?: ReactNode;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | ReactNode;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport const Timeline = React.forwardRef<HTMLOListElement, PropsWithChildren<TimelineProps>>(function Timeline(\n  { className, dense, stickyLabels, children, ...rest },\n  ref\n) {\n  return (\n    <ol\n      {...rest}\n      ref={ref}\n      className={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": dense, \"smwb-timeline_sticky-labels\": stickyLabels },\n        className\n      )}\n    >\n      {children}\n    </ol>\n  );\n});\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport const TimelineGroup = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineGroupProps>>(\n  function TimelineGroup({ className, label, children, ...rest }, ref) {\n    return (\n      <li {...rest} ref={ref} className={cn(\"smwb-timeline__group\", className)}>\n        <div className=\"smwb-timeline__label\">{label}</div>\n        <ol className=\"smwb-timeline__items\">{children}</ol>\n      </li>\n    );\n  }\n);\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport const TimelineItem = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineItemProps>>(function TimelineItem(\n  { className, title, meta, time, icon, tone = \"neutral\", children, ...rest },\n  ref\n) {\n  return (\n    <li {...rest} ref={ref} className={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${tone}`, className)}>\n      <span className=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        {icon ? (\n          typeof icon === \"string\" ? (\n            <Icon name={icon} size={16} />\n          ) : (\n            icon\n          )\n        ) : (\n          <span className=\"smwb-timeline__dot\" />\n        )}\n      </span>\n      <div className=\"smwb-timeline__body\">\n        <div className=\"smwb-timeline__title\">{title}</div>\n        {meta ? <div className=\"smwb-timeline__meta\">{meta}</div> : null}\n        {children ? <div className=\"smwb-timeline__content\">{children}</div> : null}\n      </div>\n      {time ? <div className=\"smwb-timeline__time\">{time}</div> : null}\n    </li>\n  );\n});\n\nexport default Timeline;\n"],"names":["Timeline","React","className","dense","stickyLabels","children","rest","ref","jsx","cn","TimelineGroup","label","jsxs","TimelineItem","title","meta","time","icon","tone","Icon"],"mappings":";;;;AAsCO,MAAMA,IAAWC,EAAM,WAA+D,SAC3F,EAAE,WAAAC,GAAW,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA,EAAE,uBAAuBN,GAAO,+BAA+BC,EAAA;AAAA,QAC/DF;AAAA,MAAA;AAAA,MAGD,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAgBT,EAAM;AAAA,EACjC,SAAuB,EAAE,WAAAC,GAAW,OAAAS,GAAO,UAAAN,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACnE,WACE,gBAAAK,EAAC,QAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,wBAAwBP,CAAS,GACrE,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAG,GAAM;AAAA,MAC7C,gBAAAH,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAH,EAAA,CAAS;AAAA,IAAA,GACjD;AAAA,EAEJ;AACF,GAGaQ,IAAeZ,EAAM,WAAgE,SAChG,EAAE,WAAAC,GAAW,OAAAY,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,UAAAb,GAAU,GAAGC,EAAA,GACrEC,GACA;AACA,SACE,gBAAAK,EAAC,MAAA,EAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,uBAAuB,4BAA4BS,CAAI,IAAIhB,CAAS,GACxG,UAAA;AAAA,IAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAS,IACC,OAAOA,KAAS,WACd,gBAAAT,EAACW,KAAK,MAAMF,GAAM,MAAM,GAAA,CAAI,IAE5BA,IAGF,gBAAAT,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB,EAAA,CAEzC;AAAA,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAM,GAAM;AAAA,MAC5CC,IAAO,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,MAC3DH,IAAW,gBAAAG,EAAC,OAAA,EAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,IAAA,GACzE;AAAA,IACCW,IAAO,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,EAAA,GAC9D;AAEJ,CAAC;"}

package/dist/headless/components/dataDisplay/typography/typography.js

@@ -1,44 +1,61 @@
-import { jsx as e } from "react/jsx-runtime";
-import m from "react";
-import f from "clsx";
-const u = {
+import { jsx as d } from "react/jsx-runtime";
+import f from "react";
+import l from "clsx";
+const n = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
   overline: "span",
   button: "span"
-}, _ = m.forwardRef(function({ variant: t = "body1", color: p = "inherit", align: r, gutterBottom: a, noWrap: o, component: h, className: y, children: s, ...b }, g) {
-  const i = h != null ? h : u[t];
-  return /* @__PURE__ */ e(
-    i,
+}, x = f.forwardRef(function({
+  variant: a = "body1",
+  color: r = "inherit",
+  align: h,
+  gutterBottom: s,
+  noWrap: b,
+  lines: p,
+  tabularNums: m,
+  component: t,
+  className: g,
+  style: y,
+  children: i,
+  ...w
+}, e) {
+  const u = t != null ? t : n[a], o = p !== void 0 && p > 0;
+  return /* @__PURE__ */ d(
+    u,
     {
-      ref: g,
-      className: f(
+      ref: e,
+      className: l(
         "smwb-typography",
-        `smwb-typography_${t}`,
-        p !== "inherit" && `smwb-typography_color-${p}`,
-        r && `smwb-typography_align-${r}`,
+        `smwb-typography_${a}`,
+        r !== "inherit" && `smwb-typography_color-${r}`,
+        h && `smwb-typography_align-${h}`,
         {
-          "smwb-typography_gutter": a,
-          "smwb-typography_nowrap": o
+          "smwb-typography_gutter": s,
+          "smwb-typography_nowrap": b,
+          "smwb-typography_clamp": o,
+          "smwb-typography_tabular-nums": m
         },
-        y
+        g
       ),
-      ...b,
-      children: s
+      style: o ? { ...y, "--smwb-typography-lines": p } : y,
+      ...w,
+      children: i
     }
   );
 });
 export {
-  _ as Typography,
-  _ as default
+  x as Typography,
+  x as default
 };
 //# sourceMappingURL=typography.js.map

package/dist/headless/components/dataDisplay/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  subtitle1: \"h6\",\n  subtitle2: \"h6\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Render as a different element/component. */\n  component?: keyof JSX.IntrinsicElements;\n  className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n  { variant = \"body1\", color = \"inherit\", align, gutterBottom, noWrap, component, className, children, ...rest },\n  ref\n) {\n  const Tag = (component ?? defaultTag[variant]) as \"p\";\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={cn(\n        \"smwb-typography\",\n        `smwb-typography_${variant}`,\n        color !== \"inherit\" && `smwb-typography_color-${color}`,\n        align && `smwb-typography_align-${align}`,\n        {\n          \"smwb-typography_gutter\": gutterBottom,\n          \"smwb-typography_nowrap\": noWrap,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","component","className","children","rest","ref","Tag","jsx","cn"],"mappings":";;;AA8BA,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,GAeaC,IAAaC,EAAM,WAA4D,SAC1F,EAAE,SAAAC,IAAU,SAAS,OAAAC,IAAQ,WAAW,OAAAC,GAAO,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACxGC,GACA;AACA,QAAMC,IAAOL,KAAA,OAAAA,IAAaR,EAAWG,CAAO;AAC5C,SACE,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACA,mBAAmBZ,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,QAAA;AAAA,QAE5BE;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element/component. */\n  component?: keyof JSX.IntrinsicElements;\n  className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n  {\n    variant = \"body1\",\n    color = \"inherit\",\n    align,\n    gutterBottom,\n    noWrap,\n    lines,\n    tabularNums,\n    component,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const Tag = (component ?? defaultTag[variant]) as \"p\";\n  const clamped = lines !== undefined && lines > 0;\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={cn(\n        \"smwb-typography\",\n        `smwb-typography_${variant}`,\n        color !== \"inherit\" && `smwb-typography_color-${color}`,\n        align && `smwb-typography_align-${align}`,\n        {\n          \"smwb-typography_gutter\": gutterBottom,\n          \"smwb-typography_nowrap\": noWrap,\n          \"smwb-typography_clamp\": clamped,\n          \"smwb-typography_tabular-nums\": tabularNums,\n        },\n        className\n      )}\n      style={clamped ? ({ ...style, \"--smwb-typography-lines\": lines } as CSSProperties) : style}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","lines","tabularNums","component","className","style","children","rest","ref","Tag","clamped","jsx","cn"],"mappings":";;;AA8BA,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,GAmBaC,IAAaC,EAAM,WAA4D,SAC1F;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAON,KAAA,OAAAA,IAAaV,EAAWG,CAAO,GACtCc,IAAUT,MAAU,UAAaA,IAAQ;AAC/C,SACE,gBAAAU;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA,mBAAmBhB,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,UAC1B,yBAAyBU;AAAA,UACzB,gCAAgCR;AAAA,QAAA;AAAA,QAElCE;AAAA,MAAA;AAAA,MAEF,OAAOM,IAAW,EAAE,GAAGL,GAAO,2BAA2BJ,MAA4BI;AAAA,MACpF,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { useId as p } from "react";
 import j from "clsx";
 import { Modal as r } from "../modal/modal.js";
 import { Typography as b } from "../../dataDisplay/typography/typography.js";
 import { Button as f } from "../../inputs/button/button.js";
 function N(u) {
-  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: l, danger: h, busy: e, onConfirm: g, onCancel: s, className: x } = u, c = p(), d = p(), m = [n ? c : "", i ? d : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(
+  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [n ? s : "", i ? d : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
     r,
     {
       open: y,
-      onClose: s,
-      size: "small",
+      onClose: c,
+      size: "medium",
       role: "alertdialog",
       backdrop: "dark",
       closeOnEsc: !e,
@@ -20,12 +20,12 @@ function N(u) {
       ...m ? { "aria-describedby": m } : {},
       children: [
         /* @__PURE__ */ o(r.Header, { children: t }),
-        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ a("div", { className: j("smwb-confirm-dialog__body", x), children: [
-          n ? /* @__PURE__ */ o(b, { id: c, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
+        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
+          n ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
           i ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: i }) : null
         ] }) }),
-        /* @__PURE__ */ a(r.Footer, { children: [
-          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: s, label: l != null ? l : "Cancel" }),
+        /* @__PURE__ */ l(r.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
           /* @__PURE__ */ o(
             f,
             {

package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"medium\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/headless/components/feedBack/emptyState/emptyState.js

@@ -0,0 +1,25 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import y from "react";
+import _ from "clsx";
+import { Icon as b } from "../../base/icon/icon.js";
+const f = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } }, m = (t) => t != null && t !== !1 && t !== "" && !(Array.isArray(t) && t.length === 0), x = y.forwardRef(function({ className: p, title: a, icon: e, actions: r, variant: i = "block", size: l = "medium", children: n, ...o }, d) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-testid": "empty-state",
+      ...o,
+      ref: d,
+      className: _("smwb-empty-state", `smwb-empty-state_${i}`, `smwb-empty-state_${l}`, p),
+      children: [
+        m(e) ? /* @__PURE__ */ s("span", { className: "smwb-empty-state__icon", "aria-hidden": "true", children: typeof e == "string" ? /* @__PURE__ */ s(b, { name: e, size: f[i][l] }) : e }) : null,
+        m(a) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__title", children: a }) : null,
+        m(n) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__description", children: n }) : null,
+        m(r) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__actions", children: r }) : null
+      ]
+    }
+  );
+});
+export {
+  x as EmptyState
+};
+//# sourceMappingURL=emptyState.js.map

package/dist/headless/components/feedBack/emptyState/emptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emptyState.js","sources":["../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** What is empty, e.g. \"No works yet\". */\n  title?: ReactNode;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: ReactNode | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: ReactNode;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, PropsWithChildren<EmptyStateProps>>(function EmptyState(\n  { className, title, icon, actions, variant = \"block\", size = \"medium\", children, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-empty-state\", `smwb-empty-state_${variant}`, `smwb-empty-state_${size}`, className)}\n    >\n      {present(icon) ? (\n        <span className=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={ICON_SIZE[variant][size]} /> : icon}\n        </span>\n      ) : null}\n      {present(title) ? <div className=\"smwb-empty-state__title\">{title}</div> : null}\n      {present(children) ? <div className=\"smwb-empty-state__description\">{children}</div> : null}\n      {present(actions) ? <div className=\"smwb-empty-state__actions\">{actions}</div> : null}\n    </div>\n  );\n});\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","present","value","EmptyState","React","className","title","icon","actions","variant","size","children","rest","ref","jsxs","cn","jsx","Icon"],"mappings":";;;;AAsBA,MAAMA,IAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,MAAM,QAAQ,EAAE,QAAQ,IAAI,OAAO,KAAG,GAEhFC,IAAU,CAACC,MAEfA,KAAU,QACVA,MAAU,MACVA,MAAU,MACV,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,IAMhCC,IAAaC,EAAM,WAA+D,SAC7F,EAAE,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,SAAAC,IAAU,SAAS,MAAAC,IAAO,UAAU,UAAAC,GAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,oBAAoB,oBAAoBN,CAAO,IAAI,oBAAoBC,CAAI,IAAIL,CAAS;AAAA,MAErG,UAAA;AAAA,QAAAJ,EAAQM,CAAI,IACX,gBAAAS,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAY,QAClD,UAAA,OAAOT,KAAS,6BAAYU,GAAA,EAAK,MAAMV,GAAM,MAAMP,EAAUS,CAAO,EAAEC,CAAI,EAAA,CAAG,IAAKH,EAAA,CACrF,IACE;AAAA,QACHN,EAAQK,CAAK,IAAI,gBAAAU,EAAC,SAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,QAC1Ef,EAAQU,CAAQ,IAAI,gBAAAK,EAAC,SAAI,WAAU,iCAAiC,UAAAL,GAAS,IAAS;AAAA,QACtFV,EAAQO,CAAO,IAAI,gBAAAQ,EAAC,SAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF,CAAC;"}