@smwb/ui-react 2.6.3 → 2.8.0

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

@@ -1,45 +1,63 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/typography/typography.entry.css';/* empty css                                                               */
-import m from "react";
-import f from "clsx";
-const u = {
+import { jsx as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/typography/typography.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
+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"
-}, c = m.forwardRef(function({ variant: h = "body1", color: p = "inherit", align: r, gutterBottom: a, noWrap: o, component: t, className: y, children: s, ...b }, i) {
-  const g = t != null ? t : u[h];
-  return /* @__PURE__ */ e(
-    g,
+}, j = f.forwardRef(function({
+  variant: r = "body1",
+  color: a = "inherit",
+  align: o,
+  gutterBottom: s,
+  noWrap: m,
+  lines: p,
+  tabularNums: b,
+  component: t,
+  className: g,
+  style: h,
+  children: i,
+  ...w
+}, e) {
+  const u = t != null ? t : n[r], y = p !== void 0 && p > 0;
+  return /* @__PURE__ */ d(
+    u,
     {
-      ref: i,
-      className: f(
+      ref: e,
+      className: l(
         "smwb-typography",
-        `smwb-typography_${h}`,
-        p !== "inherit" && `smwb-typography_color-${p}`,
-        r && `smwb-typography_align-${r}`,
+        `smwb-typography_${r}`,
+        a !== "inherit" && `smwb-typography_color-${a}`,
+        o && `smwb-typography_align-${o}`,
         {
-          "smwb-typography_gutter": a,
-          "smwb-typography_nowrap": o
+          "smwb-typography_gutter": s,
+          "smwb-typography_nowrap": m,
+          "smwb-typography_clamp": y,
+          "smwb-typography_tabular-nums": b
         },
-        y
+        g
       ),
-      ...b,
-      children: s
+      style: y ? { ...h, "--smwb-typography-lines": p } : h,
+      ...w,
+      children: i
     }
   );
 });
 export {
-  c as Typography,
-  c as default
+  j as Typography,
+  j as default
 };
 //# sourceMappingURL=typography.js.map

package/dist/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":";;;;AA+BA,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":";;;;;AAgCA,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/components/feedBack/confirmDialog/confirmDialog.js

@@ -1,39 +1,40 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';/* empty css                                                                     */
+import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                     */
 import { useId as p } from "react";
 import j from "clsx";
-import { Modal as r } from "../modal/modal.js";
+import { Modal as e } from "../modal/modal.js";
 import { Typography as b } from "../../dataDisplay/typography/typography.js";
 import { Button as f } from "../../inputs/button/button.js";
-function _(u) {
-  const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
+function w(u) {
+  const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: r, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ l(
-    r,
+    e,
     {
       open: y,
       onClose: c,
       size: "medium",
       role: "alertdialog",
       backdrop: "dark",
-      closeOnEsc: !e,
-      closeOnOutsideClick: !e,
+      closeOnEsc: !r,
+      closeOnOutsideClick: !r,
       "aria-label": t,
       ...m ? { "aria-describedby": m } : {},
       children: [
-        /* @__PURE__ */ o(r.Header, { children: t }),
-        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
+        /* @__PURE__ */ o(e.Header, { children: t }),
+        /* @__PURE__ */ o(e.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
           i ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: i }) : null,
           n ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: n }) : null
         ] }) }),
-        /* @__PURE__ */ l(r.Footer, { children: [
-          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
+        /* @__PURE__ */ l(e.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!r, onClick: c, label: a != null ? a : "Cancel" }),
           /* @__PURE__ */ o(
             f,
             {
               variant: "contained",
               size: "small",
               color: h ? "error" : "primary",
-              disabled: !!e,
+              disabled: !!r,
               onClick: g,
               label: C
             }
@@ -44,6 +45,6 @@ function _(u) {
   );
 }
 export {
-  _ as ConfirmDialog
+  w as ConfirmDialog
 };
 //# sourceMappingURL=confirmDialog.js.map

package/dist/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=\"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":";;;;;;;AAgCO,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":";;;;;;;;AAiCO,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/components/feedBack/emptyState/emptyState.d.ts

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    className?: string;
+    /** What is empty, e.g. "No works yet". */
+    title?: ReactNode;
+    /** An icon name, or an icon element. Decorative: the title and the message say it all. */
+    icon?: ReactNode | string;
+    /** What the reader can do about it: buttons or links. */
+    actions?: ReactNode;
+    /**
+     * `block` (default): centred, for an empty page, panel or card.
+     * `inline`: a muted line of text, for a list, a table or a column that came
+     * out empty; an action follows the last word.
+     */
+    variant?: "block" | "inline";
+    /** `small`: tighter, for a narrow column or a card. */
+    size?: "small" | "medium";
+    /** Test id of the root `<div>`; `empty-state` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * What a list, a table or a panel shows when it has nothing: an icon, a title,
+ * the message (the children) and actions.
+ */
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default EmptyState;

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

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

package/dist/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  /** Test id of the root `<div>`; `empty-state` unless given. */\n  \"data-testid\"?: string;\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  {\n    className,\n    title,\n    icon,\n    actions,\n    variant = \"block\",\n    size = \"medium\",\n    children,\n    \"data-testid\": dataTestId = \"empty-state\",\n    ...rest\n  },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\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","dataTestId","rest","ref","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AA0BA,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;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaH;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,oBAAoB,oBAAoBP,CAAO,IAAI,oBAAoBC,CAAI,IAAIL,CAAS;AAAA,MAErG,UAAA;AAAA,QAAAJ,EAAQM,CAAI,IACX,gBAAAU,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAY,QAClD,UAAA,OAAOV,KAAS,6BAAYW,GAAA,EAAK,MAAMX,GAAM,MAAMP,EAAUS,CAAO,EAAEC,CAAI,EAAA,CAAG,IAAKH,EAAA,CACrF,IACE;AAAA,QACHN,EAAQK,CAAK,IAAI,gBAAAW,EAAC,SAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,QAC1EhB,EAAQU,CAAQ,IAAI,gBAAAM,EAAC,SAAI,WAAU,iCAAiC,UAAAN,GAAS,IAAS;AAAA,QACtFV,EAAQO,CAAO,IAAI,gBAAAS,EAAC,SAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF,CAAC;"}

package/dist/components/feedBack/emptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState, default } from "./emptyState";
+export type { EmptyStateProps } from "./emptyState";

package/dist/components/feedBack/message/message.d.ts

@@ -10,6 +10,8 @@ export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
     severity?: MessageSeverity;
     /** Accessible label for the close button. */
     closeAriaLabel?: string;
+    /** Test id of the root `<div>`; `message` unless given. */
+    "data-testid"?: string;
 }
 export declare const MessageContainer: React.ForwardRefExoticComponent<MessageProps & {
     children?: React.ReactNode | undefined;

package/dist/components/feedBack/message/message.js

@@ -1,32 +1,44 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/message/message.entry.css';/* empty css                                                         */
-import { forwardRef as b } from "react";
-import f from "clsx";
-import { Icon as p } from "../../base/icon/icon.js";
-const w = b(
-  ({ className: e, children: m, type: t, severity: s, variant: l = "filled", onClose: r, closeAriaLabel: n = "Close", ...i }, c) => {
-    const a = s != null ? s : t, d = f("smwb-message", `smwb-message_${l}`, e, {
-      [`smwb-message_${a}`]: !!a
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/message/message.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                         */
+import { forwardRef as _ } from "react";
+import p from "clsx";
+import { Icon as u } from "../../base/icon/icon.js";
+const h = _(
+  ({
+    className: e,
+    children: i,
+    type: n,
+    severity: s,
+    variant: c = "filled",
+    onClose: r,
+    closeAriaLabel: d = "Close",
+    "data-testid": g = "message",
+    ...a
+  }, b) => {
+    var m, l;
+    const t = s != null ? s : n, f = p("smwb-message", `smwb-message_${c}`, e, {
+      [`smwb-message_${t}`]: !!t
     });
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ w(
       "div",
       {
-        "data-testid": "message",
-        role: "alert",
-        "aria-live": a === "error" ? "assertive" : "polite",
-        ...i,
-        className: d,
-        ref: c,
+        "data-testid": g,
+        ...a,
+        role: (m = a.role) != null ? m : "alert",
+        "aria-live": (l = a["aria-live"]) != null ? l : t === "error" ? "assertive" : "polite",
+        className: f,
+        ref: b,
         children: [
-          m,
-          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": n, type: "button", children: /* @__PURE__ */ o(p, { name: "close", weight: 1e3 }) })
+          i,
+          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": d, type: "button", children: /* @__PURE__ */ o(u, { name: "close", weight: 1e3 }) })
         ]
       }
     );
   }
-), _ = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), N = Object.assign(w, { Header: _ });
+), j = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), k = Object.assign(h, { Header: j });
 export {
-  w as MessageContainer,
-  N as default
+  h as MessageContainer,
+  k as default
 };
 //# sourceMappingURL=message.js.map

package/dist/components/feedBack/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  ({ className, children, type, severity, variant = \"filled\", onClose, closeAriaLabel = \"Close\", ...props }, ref) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid=\"message\"\n        role=\"alert\"\n        aria-live={resolvedSeverity === \"error\" ? \"assertive\" : \"polite\"}\n        {...props}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","jsx","Icon","Header","Message"],"mappings":";;;;;AAmBO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,SAAAC,IAAU,UAAU,SAAAC,GAAS,gBAAAC,IAAiB,SAAS,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAAmBN,KAAA,OAAAA,IAAYD,GAC/BQ,IAAoBC,EAAG,gBAAgB,gBAAgBP,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBS,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,aAAWH,MAAqB,UAAU,cAAc;AAAA,QACvD,GAAGF;AAAA,QACJ,WAAWG;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAP;AAAA,UACAI,KACC,gBAAAQ,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASR,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAO,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAd,QACT,gBAAAY,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAZ,EAAA,CAAS,GAGnDe,IAAU,OAAO,OAAOlB,GAAkB,EAAE,QAAAiB,GAAQ;"}
+{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Test id of the root `<div>`; `message` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  (\n    {\n      className,\n      children,\n      type,\n      severity,\n      variant = \"filled\",\n      onClose,\n      closeAriaLabel = \"Close\",\n      \"data-testid\": dataTestId = \"message\",\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid={dataTestId}\n        {...props}\n        // Defaults: the caller's own role and aria-live win, and an explicit\n        // undefined keeps these.\n        role={props.role ?? \"alert\"}\n        aria-live={props[\"aria-live\"] ?? (resolvedSeverity === \"error\" ? \"assertive\" : \"polite\")}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","dataTestId","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","_a","_b","jsx","Icon","Header","Message"],"mappings":";;;;;;AAsBO,MAAMA,IAAmBC;AAAA,EAC9B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,MACG;;AACH,UAAMC,IAAmBP,KAAA,OAAAA,IAAYD,GAC/BS,IAAoBC,EAAG,gBAAgB,gBAAgBR,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBU,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaN;AAAA,QACZ,GAAGC;AAAA,QAGJ,OAAMM,IAAAN,EAAM,SAAN,OAAAM,IAAc;AAAA,QACpB,cAAWC,IAAAP,EAAM,WAAW,MAAjB,OAAAO,IAAuBL,MAAqB,UAAU,cAAc;AAAA,QAC/E,WAAWC;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAR;AAAA,UACAI,KACC,gBAAAW,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASX,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAU,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAjB,QACT,gBAAAe,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAf,EAAA,CAAS,GAGnDkB,IAAU,OAAO,OAAOrB,GAAkB,EAAE,QAAAoB,GAAQ;"}

package/dist/components/feedBack/modal/modal.js

@@ -1,42 +1,43 @@
-import { jsx as o, Fragment as D } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/modal/modal.entry.css';/* empty css                                                     */
-import { forwardRef as L, useState as S, useRef as c, useEffect as $ } from "react";
+import { jsx as t, Fragment as D } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import { forwardRef as L, useState as S, useRef as f, useEffect as $ } from "react";
 import { CSSTransition as h } from "react-transition-group";
 import { createPortal as A } from "react-dom";
 import a from "clsx";
 import { useSafeLayoutEffect as F } from "../../../hooks/useSafeLayoutEffect.js";
 import { useForkRef as M } from "../../../hooks/useForkRef.js";
 import { isTopOverlayLayer as O } from "../../../utils/overlayLayer.js";
-const j = L(function({
+const P = L(function({
   children: e,
   onClose: r,
   open: m,
-  className: f,
-  animation: u = "fade",
-  backdrop: p = "dark",
+  className: u,
+  animation: p = "fade",
+  backdrop: v = "dark",
   size: i = "large",
-  closeOnOutsideClick: v = !0,
-  asForm: _ = !1,
-  disableAppearAnimation: w = !1,
-  role: b = "dialog",
+  closeOnOutsideClick: _ = !0,
+  asForm: w = !1,
+  disableAppearAnimation: b = !1,
+  role: y = "dialog",
   closeOnEsc: d = !0,
-  ...y
-}, k) {
-  const [l, x] = S(), s = c(null), R = c(null), E = M(k, R);
+  ...k
+}, x) {
+  const [l, R] = S(), s = f(null), E = f(null), N = M(x, E);
   if (F(() => {
-    x(document.body);
+    R(document.body);
   }, []), $(() => {
     if (!m || !d || !r)
       return;
-    const n = (g) => {
-      g.key === "Escape" && O(s.current) && r();
+    const n = (c) => {
+      c.key === "Escape" && !c.defaultPrevented && O(s.current) && r();
     };
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
   }, [m, d, r]), !l)
-    return /* @__PURE__ */ o(D, {});
-  const N = _ ? "form" : "div";
+    return /* @__PURE__ */ t(D, {});
+  const g = w ? "form" : "div";
   return A(
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       h,
       {
         timeout: {
@@ -55,26 +56,26 @@ const j = L(function({
           exit: "smwb-modal__overlay-exit",
           exitActive: "smwb-modal__overlay-exit-active"
         },
-        appear: !w,
+        appear: !b,
         mountOnEnter: !0,
         unmountOnExit: !0,
         nodeRef: s,
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ t(
           "div",
           {
             ref: s,
             "data-smwb-overlay-layer": "",
-            className: a("smwb-modal__overlay", `smwb-${p}`, `smwb-${i}`),
-            onClick: v && r ? r : void 0,
-            children: /* @__PURE__ */ o(
-              N,
+            className: a("smwb-modal__overlay", `smwb-${v}`, `smwb-${i}`),
+            onClick: _ && r ? r : void 0,
+            children: /* @__PURE__ */ t(
+              g,
               {
-                ref: E,
-                className: a("smwb-modal", `smwb-${i}`, `smwb-${u}`, f),
+                ref: N,
+                className: a("smwb-modal", `smwb-${i}`, `smwb-${p}`, u),
                 onClick: (n) => n.stopPropagation(),
-                role: b,
+                role: y,
                 "aria-modal": "true",
-                ...y,
+                ...k,
                 children: e
               }
             )
@@ -85,25 +86,25 @@ const j = L(function({
     l
   );
 });
-function C({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__header", t), children: e });
+function j({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__header", o), children: e });
 }
-function P({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__content", t), children: e });
+function C({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__content", o), children: e });
 }
-function T({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__footer", t), children: e });
+function T({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__footer", o), children: e });
 }
-const V = Object.assign(j, {
+const W = Object.assign(P, {
   Footer: T,
-  Header: C,
-  Content: P
+  Header: j,
+  Content: C
 });
 export {
-  P as Content,
+  C as Content,
   T as Footer,
-  C as Header,
-  V as Modal,
-  V as default
+  j as Header,
+  W as Modal,
+  W as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/feedBack/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

package/dist/components/feedBack/progressIndicator/progressIndicator.d.ts

@@ -1,20 +1,33 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 export type ProgressColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
 export interface ProgressIndicatorProps {
     className?: string;
     variant: "circular" | "linear";
     type: "determinate" | "indeterminate";
     progressValue?: number;
+    /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */
+    max?: number;
     /** Semantic color. */
     color?: ProgressColor;
     /** Circular size preset. */
     size?: "small" | "medium" | "large";
+    /** Linear: fill the container's width instead of the fixed 240px track. */
+    fullWidth?: boolean;
+    /** Linear: the width, in px or any CSS length. */
+    width?: number | string;
+    /**
+     * Linear, determinate: the value as text beside the bar. `true` shows a
+     * percentage — or "3 / 14" with a custom `max`; a function formats it, e.g.
+     * `(value, max) => <>{value} of {max}</>`.
+     */
+    valueLabel?: boolean | ((value: number, max: number) => ReactNode);
     /** Accessible name for the progress bar. */
     "aria-label"?: string;
     id?: string;
 }
 export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
 export interface CircularProgressProps {
+    /** Percent, 0–100. */
     progressValue?: number;
 }
 export declare function CircularProgress({ progressValue }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;