@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/inputs/valueSlider/valueSlider.js

@@ -1,36 +1,37 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/valueSlider/valueSlider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
-import c from "clsx";
-import { Slider as m } from "../slider/slider.js";
-function h(i, l) {
-  return typeof i == "function" ? i(l) : Array.isArray(l) ? `${l[0]} – ${l[1]}` : l == null ? "" : String(l);
+import h from "clsx";
+import { useId as f } from "../../../hooks/useId.js";
+import { Slider as b } from "../slider/slider.js";
+function p(a, l) {
+  return typeof a == "function" ? a(l) : Array.isArray(l) ? `${l[0]} – ${l[1]}` : l == null ? "" : String(l);
 }
-function b({
-  readout: i,
+function x({
+  readout: a,
   endAdornment: l,
   onReset: n,
   resetLabel: s,
   label: e,
-  className: o,
-  ...a
+  className: u,
+  ...r
 }) {
-  const t = i !== void 0 && i !== !1, u = e != null || t || l != null || n != null;
-  return /* @__PURE__ */ d("div", { className: c("smwb-value-slider", o), children: [
-    u ? /* @__PURE__ */ d("div", { className: "smwb-value-slider__header", children: [
-      e != null ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__label", children: e }) : null,
-      /* @__PURE__ */ r("span", { className: "smwb-value-slider__spacer" }),
-      t ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__readout", children: h(i, a.value) }) : null,
+  const d = a !== void 0 && a !== !1, c = e != null || d || l != null || n != null, t = `${f()}-label`, m = r["aria-labelledby"] || (e && !r["aria-label"] ? t : void 0);
+  return /* @__PURE__ */ o("div", { className: h("smwb-value-slider", u), children: [
+    c ? /* @__PURE__ */ o("div", { className: "smwb-value-slider__header", children: [
+      e != null ? /* @__PURE__ */ i("span", { id: t, className: "smwb-value-slider__label", children: e }) : null,
+      /* @__PURE__ */ i("span", { className: "smwb-value-slider__spacer" }),
+      d ? /* @__PURE__ */ i("span", { className: "smwb-value-slider__readout", children: p(a, r.value) }) : null,
       l,
-      n != null ? /* @__PURE__ */ r(
+      n != null ? /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           className: "smwb-value-slider__reset",
           "aria-label": s != null ? s : "Reset",
-          disabled: !!a.disabled,
+          disabled: !!r.disabled,
           onClick: () => n(),
-          children: /* @__PURE__ */ r(
+          children: /* @__PURE__ */ i(
             "svg",
             {
               viewBox: "0 0 24 24",
@@ -40,17 +41,17 @@ function b({
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "2",
-              children: /* @__PURE__ */ r("path", { d: "M3 12a9 9 0 1 0 3-6.7M3 4v4h4", strokeLinecap: "round", strokeLinejoin: "round" })
+              children: /* @__PURE__ */ i("path", { d: "M3 12a9 9 0 1 0 3-6.7M3 4v4h4", strokeLinecap: "round", strokeLinejoin: "round" })
             }
           )
         }
       ) : null
     ] }) : null,
-    /* @__PURE__ */ r(m, { ...a })
+    /* @__PURE__ */ i(b, { ...r, "aria-labelledby": m })
   ] });
 }
 export {
-  b as ValueSlider,
-  b as default
+  x as ValueSlider,
+  x as default
 };
 //# sourceMappingURL=valueSlider.js.map

package/dist/components/inputs/valueSlider/valueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: React.ReactNode;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nfunction formatReadout(readout: ValueSliderProps[\"readout\"], value: SliderValue | undefined): string {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n}\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the\n * label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider({\n  readout,\n  endAdornment,\n  onReset,\n  resetLabel,\n  label,\n  className,\n  ...sliderProps\n}: ValueSliderProps): React.ReactElement {\n  const hasReadout = readout !== undefined && readout !== false;\n  const showHeader = label != null || hasReadout || endAdornment != null || onReset != null;\n\n  return (\n    <div className={cn(\"smwb-value-slider\", className)}>\n      {showHeader ? (\n        <div className=\"smwb-value-slider__header\">\n          {label != null ? <span className=\"smwb-value-slider__label\">{label}</span> : null}\n          <span className=\"smwb-value-slider__spacer\" />\n          {hasReadout ? (\n            <span className=\"smwb-value-slider__readout\">{formatReadout(readout, sliderProps.value)}</span>\n          ) : null}\n          {endAdornment}\n          {onReset != null ? (\n            <button\n              type=\"button\"\n              className=\"smwb-value-slider__reset\"\n              aria-label={resetLabel ?? \"Reset\"}\n              disabled={!!sliderProps.disabled}\n              onClick={() => onReset()}\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n              >\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","ValueSlider","endAdornment","onReset","resetLabel","label","className","sliderProps","hasReadout","showHeader","cn","jsxs","jsx","Slider"],"mappings":";;;;;AAoBA,SAASA,EAAcC,GAAsCC,GAAwC;AACnG,SAAI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnD,MAAM,QAAQA,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAK,OAAOA,CAAK;AAC1C;AAQO,SAASC,EAAY;AAAA,EAC1B,SAAAF;AAAA,EACA,cAAAG;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyC;AACvC,QAAMC,IAAaT,MAAY,UAAaA,MAAY,IAClDU,IAAaJ,KAAS,QAAQG,KAAcN,KAAgB,QAAQC,KAAW;AAErF,2BACG,OAAA,EAAI,WAAWO,EAAG,qBAAqBJ,CAAS,GAC9C,UAAA;AAAA,IAAAG,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAAN,KAAS,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,4BAA4B,aAAM,IAAU;AAAA,MAC7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,MAC3CJ,IACC,gBAAAI,EAAC,QAAA,EAAK,WAAU,8BAA8B,YAAcb,GAASQ,EAAY,KAAK,EAAA,CAAE,IACtF;AAAA,MACHL;AAAA,MACAC,KAAW,OACV,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAYR,KAAA,OAAAA,IAAc;AAAA,UAC1B,UAAU,CAAC,CAACG,EAAY;AAAA,UACxB,SAAS,MAAMJ,EAAA;AAAA,UAEf,UAAA,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,QAAO;AAAA,cACP,eAAY;AAAA,cACZ,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cAEZ,4BAAC,QAAA,EAAK,GAAE,iCAAgC,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvF;AAAA,MAAA,IAEA;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACJ,gBAAAA,EAACC,GAAA,EAAQ,GAAGN,EAAA,CAAa;AAAA,EAAA,GAC3B;AAEJ;"}
+{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { useId } from \"../../../hooks/useId\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Label text, drawn in the header row beside the readout. It names the slider,\n   * as `Slider`'s label does; each thumb of a range adds its own word: with\n   * `label=\"Price\"` they read \"Price minimum\" and \"Price maximum\".\n   */\n  label?: string;\n  /**\n   * Accessible name of the slider. Replaces the name the header `label` gives\n   * it; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb\n   * of a range adds its own word, as with `label`.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: React.ReactNode;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nfunction formatReadout(readout: ValueSliderProps[\"readout\"], value: SliderValue | undefined): string {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n}\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the\n * label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider({\n  readout,\n  endAdornment,\n  onReset,\n  resetLabel,\n  label,\n  className,\n  ...sliderProps\n}: ValueSliderProps): React.ReactElement {\n  const hasReadout = readout !== undefined && readout !== false;\n  const showHeader = label != null || hasReadout || endAdornment != null || onReset != null;\n  // The header label names the slider through Slider's aria-labelledby, which\n  // goes on its range input (each thumb of a range adds its own word). A\n  // caller's aria-label or aria-labelledby replaces it, as with Slider's label.\n  const labelId = `${useId()}-label`;\n  const labelledBy = sliderProps[\"aria-labelledby\"] || (label && !sliderProps[\"aria-label\"] ? labelId : undefined);\n\n  return (\n    <div className={cn(\"smwb-value-slider\", className)}>\n      {showHeader ? (\n        <div className=\"smwb-value-slider__header\">\n          {label != null ? (\n            <span id={labelId} className=\"smwb-value-slider__label\">\n              {label}\n            </span>\n          ) : null}\n          <span className=\"smwb-value-slider__spacer\" />\n          {hasReadout ? (\n            <span className=\"smwb-value-slider__readout\">{formatReadout(readout, sliderProps.value)}</span>\n          ) : null}\n          {endAdornment}\n          {onReset != null ? (\n            <button\n              type=\"button\"\n              className=\"smwb-value-slider__reset\"\n              aria-label={resetLabel ?? \"Reset\"}\n              disabled={!!sliderProps.disabled}\n              onClick={() => onReset()}\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n              >\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n      <Slider {...sliderProps} aria-labelledby={labelledBy} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","ValueSlider","endAdornment","onReset","resetLabel","label","className","sliderProps","hasReadout","showHeader","labelId","useId","labelledBy","cn","jsxs","jsx","Slider"],"mappings":";;;;;;AAiCA,SAASA,EAAcC,GAAsCC,GAAwC;AACnG,SAAI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnD,MAAM,QAAQA,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAK,OAAOA,CAAK;AAC1C;AAQO,SAASC,EAAY;AAAA,EAC1B,SAAAF;AAAA,EACA,cAAAG;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyC;AACvC,QAAMC,IAAaT,MAAY,UAAaA,MAAY,IAClDU,IAAaJ,KAAS,QAAQG,KAAcN,KAAgB,QAAQC,KAAW,MAI/EO,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAaL,EAAY,iBAAiB,MAAMF,KAAS,CAACE,EAAY,YAAY,IAAIG,IAAU;AAEtG,2BACG,OAAA,EAAI,WAAWG,EAAG,qBAAqBP,CAAS,GAC9C,UAAA;AAAA,IAAAG,IACC,gBAAAK,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAAT,KAAS,yBACP,QAAA,EAAK,IAAIK,GAAS,WAAU,4BAC1B,aACH,IACE;AAAA,MACJ,gBAAAK,EAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,MAC3CP,IACC,gBAAAO,EAAC,QAAA,EAAK,WAAU,8BAA8B,YAAchB,GAASQ,EAAY,KAAK,EAAA,CAAE,IACtF;AAAA,MACHL;AAAA,MACAC,KAAW,OACV,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAYX,KAAA,OAAAA,IAAc;AAAA,UAC1B,UAAU,CAAC,CAACG,EAAY;AAAA,UACxB,SAAS,MAAMJ,EAAA;AAAA,UAEf,UAAA,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,QAAO;AAAA,cACP,eAAY;AAAA,cACZ,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cAEZ,4BAAC,QAAA,EAAK,GAAE,iCAAgC,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvF;AAAA,MAAA,IAEA;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACJ,gBAAAA,EAACC,GAAA,EAAQ,GAAGT,GAAa,mBAAiBK,EAAA,CAAY;AAAA,EAAA,GACxD;AAEJ;"}

package/dist/components/layout/appLayout/appLayout.d.ts

@@ -25,6 +25,8 @@ export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
     /** Keep the header pinned while content scrolls. */
     stickyHeader?: boolean;
     className?: string;
+    /** Test id of the root `<div>`; `app-layout` unless given. */
+    "data-testid"?: string;
 }
 export declare const AppLayout: React.ForwardRefExoticComponent<AppLayoutProps & {
     children?: ReactNode | undefined;

package/dist/components/layout/appLayout/appLayout.js

@@ -1,17 +1,17 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/appLayout/appLayout.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import j, { useId as k } from "react";
-import A from "clsx";
-import { Icon as L } from "../../base/icon/icon.js";
-import { useControllableState as R } from "../../../hooks/useControllableState.js";
-const i = (s) => typeof s == "number" ? `${s}px` : s, E = j.forwardRef(function({
+import k, { useId as A } from "react";
+import L from "clsx";
+import { Icon as R } from "../../base/icon/icon.js";
+import { useControllableState as V } from "../../../hooks/useControllableState.js";
+const i = (s) => typeof s == "number" ? `${s}px` : s, F = k.forwardRef(function({
   header: o,
   sidebar: p,
   footer: n,
-  sidebarWidth: m = 260,
-  sidebarCollapsed: c,
-  defaultSidebarCollapsed: d = !1,
+  sidebarWidth: d = 260,
+  sidebarCollapsed: m,
+  defaultSidebarCollapsed: c = !1,
   onSidebarCollapsedChange: u,
   collapsible: b = !1,
   collapseToggle: l,
@@ -21,27 +21,28 @@ const i = (s) => typeof s == "number" ? `${s}px` : s, E = j.forwardRef(function(
   className: h,
   style: w,
   children: v,
-  ...N
-}, x) {
-  const [a, C] = R({
-    value: c,
-    defaultValue: d,
+  "data-testid": N = "app-layout",
+  ...x
+}, C) {
+  const [a, I] = V({
+    value: m,
+    defaultValue: c,
     onChange: u
-  }), r = k(), I = {
-    "--smui-app-sidebar-w": i(a ? _ : m)
+  }), r = A(), j = {
+    "--smui-app-sidebar-w": i(a ? _ : d)
   };
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: x,
-      "data-testid": "app-layout",
-      className: A(
+      ref: C,
+      "data-testid": N,
+      className: L(
         "smwb-app-layout",
         { "smwb-app-layout_sticky-header": f, "smwb-app-layout_collapsed": a },
         h
       ),
-      style: { ...I, ...w },
-      ...N,
+      style: { ...j, ...w },
+      ...x,
       children: [
         o ? /* @__PURE__ */ t("div", { className: "smwb-app-layout__header", children: o }) : null,
         /* @__PURE__ */ e("div", { className: "smwb-app-layout__body", children: [
@@ -54,8 +55,8 @@ const i = (s) => typeof s == "number" ? `${s}px` : s, E = j.forwardRef(function(
                 "aria-label": y,
                 "aria-expanded": !a,
                 "aria-controls": r,
-                onClick: () => C(!a),
-                children: /* @__PURE__ */ t(L, { name: a ? "chevron_right" : "chevron_left", size: 20 })
+                onClick: () => I(!a),
+                children: /* @__PURE__ */ t(R, { name: a ? "chevron_right" : "chevron_left", size: 20 })
               }
             ) }) : null,
             p
@@ -70,7 +71,7 @@ const i = (s) => typeof s == "number" ? `${s}px` : s, E = j.forwardRef(function(
   );
 });
 export {
-  E as AppLayout,
-  E as default
+  F as AppLayout,
+  F as default
 };
 //# sourceMappingURL=appLayout.js.map

package/dist/components/layout/appLayout/appLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: ReactNode;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: ReactNode;\n  /** Footer slot, below the content. */\n  footer?: ReactNode;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: ReactNode;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  className?: string;\n}\n\nconst len = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\n\nexport const AppLayout = React.forwardRef<HTMLDivElement, PropsWithChildren<AppLayoutProps>>(function AppLayout(\n  {\n    header,\n    sidebar,\n    footer,\n    sidebarWidth = 260,\n    sidebarCollapsed,\n    defaultSidebarCollapsed = false,\n    onSidebarCollapsedChange,\n    collapsible = false,\n    collapseToggle,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    sidebarCollapsedWidth = 72,\n    stickyHeader = true,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: sidebarCollapsed,\n    defaultValue: defaultSidebarCollapsed,\n    onChange: onSidebarCollapsedChange,\n  });\n\n  const sidebarId = useId();\n\n  const cssVars = {\n    \"--smui-app-sidebar-w\": collapsed ? len(sidebarCollapsedWidth) : len(sidebarWidth),\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"app-layout\"\n      className={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": stickyHeader, \"smwb-app-layout_collapsed\": collapsed },\n        className\n      )}\n      style={{ ...cssVars, ...style }}\n      {...rest}\n    >\n      {header ? <div className=\"smwb-app-layout__header\">{header}</div> : null}\n      <div className=\"smwb-app-layout__body\">\n        {sidebar ? (\n          <aside id={sidebarId} className=\"smwb-app-layout__sidebar\">\n            {collapsible ? (\n              <div className=\"smwb-app-layout__collapse\">\n                {collapseToggle ?? (\n                  <button\n                    type=\"button\"\n                    className=\"smwb-app-layout__collapse-btn\"\n                    aria-label={collapseToggleAriaLabel}\n                    aria-expanded={!collapsed}\n                    aria-controls={sidebarId}\n                    onClick={() => setCollapsed(!collapsed)}\n                  >\n                    <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                  </button>\n                )}\n              </div>\n            ) : null}\n            {sidebar}\n          </aside>\n        ) : null}\n        <div className=\"smwb-app-layout__content\">\n          {children}\n          {footer ? <div className=\"smwb-app-layout__footer\">{footer}</div> : null}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","React","header","sidebar","footer","sidebarWidth","sidebarCollapsed","defaultSidebarCollapsed","onSidebarCollapsedChange","collapsible","collapseToggle","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","className","style","children","rest","ref","collapsed","setCollapsed","useControllableState","sidebarId","useId","cssVars","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;AAmCA,MAAMA,IAAM,CAACC,MAAwB,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA,GAE3DC,IAAYC,EAAM,WAA8D,SAC3F;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,kBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,0BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,uBAAAC,IAAwB;AAAA,EACxB,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOf;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAEKc,IAAYC,EAAA,GAEZC,IAAU;AAAA,IACd,wBAAoC1B,EAAZqB,IAAgBP,IAA6BP,CAAR;AAAA,EAAoB;AAGnF,SACE,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,eAAY;AAAA,MACZ,WAAWQ;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCb,GAAc,6BAA6BM,EAAA;AAAA,QAC9EL;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGU,GAAS,GAAGT,EAAA;AAAA,MACvB,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAf,IAAS,gBAAAyB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAtB,IACC,gBAAAsB,EAAC,SAAA,EAAM,IAAIH,GAAW,WAAU,4BAC7B,UAAA;AAAA,YAAAb,IACC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAAjB,KAAA,OAAAA,IACC,gBAAAiB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAYhB;AAAA,gBACZ,iBAAe,CAACQ;AAAA,gBAChB,iBAAeG;AAAA,gBACf,SAAS,MAAMF,EAAa,CAACD,CAAS;AAAA,gBAEtC,4BAACS,GAAA,EAAK,MAAMT,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,GAG1E,IACE;AAAA,YACHhB;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UACJ,gBAAAsB,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAAT;AAAA,YACAZ,IAAS,gBAAAuB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: ReactNode;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: ReactNode;\n  /** Footer slot, below the content. */\n  footer?: ReactNode;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: ReactNode;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  className?: string;\n  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst len = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\n\nexport const AppLayout = React.forwardRef<HTMLDivElement, PropsWithChildren<AppLayoutProps>>(function AppLayout(\n  {\n    header,\n    sidebar,\n    footer,\n    sidebarWidth = 260,\n    sidebarCollapsed,\n    defaultSidebarCollapsed = false,\n    onSidebarCollapsedChange,\n    collapsible = false,\n    collapseToggle,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    sidebarCollapsedWidth = 72,\n    stickyHeader = true,\n    className,\n    style,\n    children,\n    \"data-testid\": dataTestId = \"app-layout\",\n    ...rest\n  },\n  ref\n) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: sidebarCollapsed,\n    defaultValue: defaultSidebarCollapsed,\n    onChange: onSidebarCollapsedChange,\n  });\n\n  const sidebarId = useId();\n\n  const cssVars = {\n    \"--smui-app-sidebar-w\": collapsed ? len(sidebarCollapsedWidth) : len(sidebarWidth),\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": stickyHeader, \"smwb-app-layout_collapsed\": collapsed },\n        className\n      )}\n      style={{ ...cssVars, ...style }}\n      {...rest}\n    >\n      {header ? <div className=\"smwb-app-layout__header\">{header}</div> : null}\n      <div className=\"smwb-app-layout__body\">\n        {sidebar ? (\n          <aside id={sidebarId} className=\"smwb-app-layout__sidebar\">\n            {collapsible ? (\n              <div className=\"smwb-app-layout__collapse\">\n                {collapseToggle ?? (\n                  <button\n                    type=\"button\"\n                    className=\"smwb-app-layout__collapse-btn\"\n                    aria-label={collapseToggleAriaLabel}\n                    aria-expanded={!collapsed}\n                    aria-controls={sidebarId}\n                    onClick={() => setCollapsed(!collapsed)}\n                  >\n                    <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                  </button>\n                )}\n              </div>\n            ) : null}\n            {sidebar}\n          </aside>\n        ) : null}\n        <div className=\"smwb-app-layout__content\">\n          {children}\n          {footer ? <div className=\"smwb-app-layout__footer\">{footer}</div> : null}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","React","header","sidebar","footer","sidebarWidth","sidebarCollapsed","defaultSidebarCollapsed","onSidebarCollapsedChange","collapsible","collapseToggle","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","className","style","children","dataTestId","rest","ref","collapsed","setCollapsed","useControllableState","sidebarId","useId","cssVars","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;AAqCA,MAAMA,IAAM,CAACC,MAAwB,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA,GAE3DC,IAAYC,EAAM,WAA8D,SAC3F;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,kBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,0BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,uBAAAC,IAAwB;AAAA,EACxB,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOhB;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAEKe,IAAYC,EAAA,GAEZC,IAAU;AAAA,IACd,wBAAoC3B,EAAZsB,IAAgBR,IAA6BP,CAAR;AAAA,EAAoB;AAGnF,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,eAAaF;AAAA,MACb,WAAWU;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCd,GAAc,6BAA6BO,EAAA;AAAA,QAC9EN;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGW,GAAS,GAAGV,EAAA;AAAA,MACvB,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAhB,IAAS,gBAAA0B,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAvB,IACC,gBAAAuB,EAAC,SAAA,EAAM,IAAIH,GAAW,WAAU,4BAC7B,UAAA;AAAA,YAAAd,IACC,gBAAAmB,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAAlB,KAAA,OAAAA,IACC,gBAAAkB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAYjB;AAAA,gBACZ,iBAAe,CAACS;AAAA,gBAChB,iBAAeG;AAAA,gBACf,SAAS,MAAMF,EAAa,CAACD,CAAS;AAAA,gBAEtC,4BAACS,GAAA,EAAK,MAAMT,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,GAG1E,IACE;AAAA,YACHjB;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UACJ,gBAAAuB,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAAV;AAAA,YACAZ,IAAS,gBAAAwB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/layout/divider/divider.d.ts

@@ -14,6 +14,8 @@ export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
     thickness?: number | string;
     /** Stretch to fill a flex container along the cross axis. */
     flexItem?: boolean;
+    /** Test id of the root `<div>`; `divider` unless given. */
+    "data-testid"?: string;
 }
 export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & {
     children?: import("react").ReactNode | undefined;

package/dist/components/layout/divider/divider.js

@@ -1,9 +1,9 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/divider/divider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { forwardRef as w } from "react";
-import C from "clsx";
-const x = {
+import { forwardRef as C } from "react";
+import x from "clsx";
+const y = {
   default: void 0,
   primary: "var(--smui-primaryColor)",
   secondary: "var(--smui-secondaryColor)",
@@ -11,8 +11,8 @@ const x = {
   success: "var(--smui-successColor)",
   warning: "var(--smui-warningColor)",
   info: "var(--smui-infoColor)"
-}, N = w(function({
-  className: t,
+}, W = C(function({
+  className: a,
   orientation: r = "horizontal",
   variant: l = "fullWidth",
   textAlign: m = "center",
@@ -21,13 +21,14 @@ const x = {
   flexItem: c,
   style: n,
   children: o,
-  ...u
-}, f) {
-  const e = o != null && o !== !1, d = x[v], s = typeof i == "number" ? `${i}px` : i, p = {
+  "data-testid": u = "divider",
+  ...f
+}, p) {
+  const e = o != null && o !== !1, s = y[v], d = typeof i == "number" ? `${i}px` : i, b = {
     ...n,
-    ...d ? { borderColor: d } : {},
-    ...s ? r === "vertical" ? { borderLeftWidth: s } : { borderBottomWidth: s } : {}
-  }, b = C(
+    ...s ? { borderColor: s } : {},
+    ...d ? r === "vertical" ? { borderLeftWidth: d } : { borderBottomWidth: d } : {}
+  }, w = x(
     "smwb-divider",
     `smwb-divider_${r}`,
     `smwb-divider_${l}`,
@@ -36,24 +37,24 @@ const x = {
       [`smwb-divider_align-${m}`]: e && r === "horizontal",
       "smwb-divider_flex-item": c
     },
-    t
+    a
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ t(
     "div",
     {
-      ...u,
-      ref: f,
-      "data-testid": "divider",
+      ...f,
+      ref: p,
+      "data-testid": u,
       role: "separator",
       "aria-orientation": r,
-      className: b,
-      style: p,
-      children: e && r === "horizontal" ? /* @__PURE__ */ a("span", { className: "smwb-divider__text", children: o }) : null
+      className: w,
+      style: b,
+      children: e && r === "horizontal" ? /* @__PURE__ */ t("span", { className: "smwb-divider__text", children: o }) : null
     }
   );
 });
 export {
-  N as Divider,
-  N as default
+  W as Divider,
+  W as default
 };
 //# sourceMappingURL=divider.js.map

package/dist/components/layout/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport const Divider = forwardRef<HTMLDivElement, PropsWithChildren<DividerProps>>(function Divider(\n  {\n    className,\n    orientation = \"horizontal\",\n    variant = \"fullWidth\",\n    textAlign = \"center\",\n    color = \"default\",\n    thickness,\n    flexItem,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const hasText = children !== undefined && children !== null && children !== false;\n  const c = colorVar[color];\n  const t = typeof thickness === \"number\" ? `${thickness}px` : thickness;\n\n  const dividerStyle: CSSProperties = {\n    ...style,\n    ...(c ? { borderColor: c } : {}),\n    ...(t ? (orientation === \"vertical\" ? { borderLeftWidth: t } : { borderBottomWidth: t }) : {}),\n  };\n\n  const dividerClassName = cn(\n    \"smwb-divider\",\n    `smwb-divider_${orientation}`,\n    `smwb-divider_${variant}`,\n    {\n      \"smwb-divider_with-text\": hasText && orientation === \"horizontal\",\n      [`smwb-divider_align-${textAlign}`]: hasText && orientation === \"horizontal\",\n      \"smwb-divider_flex-item\": flexItem,\n    },\n    className\n  );\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={dividerClassName}\n      style={dividerStyle}\n    >\n      {hasText && orientation === \"horizontal\" ? <span className=\"smwb-divider__text\">{children}</span> : null}\n    </div>\n  );\n});\n\nexport default Divider;\n"],"names":["colorVar","Divider","forwardRef","className","orientation","variant","textAlign","color","thickness","flexItem","style","children","props","ref","hasText","c","t","dividerStyle","dividerClassName","cn","jsx"],"mappings":";;;;;AAuBA,MAAMA,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR,GAEaC,IAAUC,EAA4D,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoCH,KAAa,QAAQA,MAAa,IACtEI,IAAIf,EAASO,CAAK,GAClBS,IAAI,OAAOR,KAAc,WAAW,GAAGA,CAAS,OAAOA,GAEvDS,IAA8B;AAAA,IAClC,GAAGP;AAAA,IACH,GAAIK,IAAI,EAAE,aAAaA,EAAA,IAAM,CAAA;AAAA,IAC7B,GAAIC,IAAKZ,MAAgB,aAAa,EAAE,iBAAiBY,MAAM,EAAE,mBAAmBA,MAAO,CAAA;AAAA,EAAC,GAGxFE,IAAmBC;AAAA,IACvB;AAAA,IACA,gBAAgBf,CAAW;AAAA,IAC3B,gBAAgBC,CAAO;AAAA,IACvB;AAAA,MACE,0BAA0BS,KAAWV,MAAgB;AAAA,MACrD,CAAC,sBAAsBE,CAAS,EAAE,GAAGQ,KAAWV,MAAgB;AAAA,MAChE,0BAA0BK;AAAA,IAAA;AAAA,IAE5BN;AAAA,EAAA;AAGF,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,oBAAkBT;AAAA,MAClB,WAAWc;AAAA,MACX,OAAOD;AAAA,MAEN,UAAAH,KAAWV,MAAgB,eAAe,gBAAAgB,EAAC,UAAK,WAAU,sBAAsB,UAAAT,GAAS,IAAU;AAAA,IAAA;AAAA,EAAA;AAG1G,CAAC;"}
+{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  /** Test id of the root `<div>`; `divider` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport const Divider = forwardRef<HTMLDivElement, PropsWithChildren<DividerProps>>(function Divider(\n  {\n    className,\n    orientation = \"horizontal\",\n    variant = \"fullWidth\",\n    textAlign = \"center\",\n    color = \"default\",\n    thickness,\n    flexItem,\n    style,\n    children,\n    \"data-testid\": dataTestId = \"divider\",\n    ...props\n  },\n  ref\n) {\n  const hasText = children !== undefined && children !== null && children !== false;\n  const c = colorVar[color];\n  const t = typeof thickness === \"number\" ? `${thickness}px` : thickness;\n\n  const dividerStyle: CSSProperties = {\n    ...style,\n    ...(c ? { borderColor: c } : {}),\n    ...(t ? (orientation === \"vertical\" ? { borderLeftWidth: t } : { borderBottomWidth: t }) : {}),\n  };\n\n  const dividerClassName = cn(\n    \"smwb-divider\",\n    `smwb-divider_${orientation}`,\n    `smwb-divider_${variant}`,\n    {\n      \"smwb-divider_with-text\": hasText && orientation === \"horizontal\",\n      [`smwb-divider_align-${textAlign}`]: hasText && orientation === \"horizontal\",\n      \"smwb-divider_flex-item\": flexItem,\n    },\n    className\n  );\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={dividerClassName}\n      style={dividerStyle}\n    >\n      {hasText && orientation === \"horizontal\" ? <span className=\"smwb-divider__text\">{children}</span> : null}\n    </div>\n  );\n});\n\nexport default Divider;\n"],"names":["colorVar","Divider","forwardRef","className","orientation","variant","textAlign","color","thickness","flexItem","style","children","dataTestId","props","ref","hasText","c","t","dividerStyle","dividerClassName","cn","jsx"],"mappings":";;;;;AAyBA,MAAMA,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR,GAEaC,IAAUC,EAA4D,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoCJ,KAAa,QAAQA,MAAa,IACtEK,IAAIhB,EAASO,CAAK,GAClBU,IAAI,OAAOT,KAAc,WAAW,GAAGA,CAAS,OAAOA,GAEvDU,IAA8B;AAAA,IAClC,GAAGR;AAAA,IACH,GAAIM,IAAI,EAAE,aAAaA,EAAA,IAAM,CAAA;AAAA,IAC7B,GAAIC,IAAKb,MAAgB,aAAa,EAAE,iBAAiBa,MAAM,EAAE,mBAAmBA,MAAO,CAAA;AAAA,EAAC,GAGxFE,IAAmBC;AAAA,IACvB;AAAA,IACA,gBAAgBhB,CAAW;AAAA,IAC3B,gBAAgBC,CAAO;AAAA,IACvB;AAAA,MACE,0BAA0BU,KAAWX,MAAgB;AAAA,MACrD,CAAC,sBAAsBE,CAAS,EAAE,GAAGS,KAAWX,MAAgB;AAAA,MAChE,0BAA0BK;AAAA,IAAA;AAAA,IAE5BN;AAAA,EAAA;AAGF,SACE,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,MAAK;AAAA,MACL,oBAAkBR;AAAA,MAClB,WAAWe;AAAA,MACX,OAAOD;AAAA,MAEN,UAAAH,KAAWX,MAAgB,eAAe,gBAAAiB,EAAC,UAAK,WAAU,sBAAsB,UAAAV,GAAS,IAAU;AAAA,IAAA;AAAA,EAAA;AAG1G,CAAC;"}

package/dist/components/layout/floatingWindow/floatingWindow.d.ts

@@ -75,6 +75,8 @@ export interface FloatingWindowProps extends Omit<React.HTMLAttributes<HTMLDivEl
     /** Accessible label for the collapse toggle while collapsed. */
     expandAriaLabel?: string;
     "aria-label"?: string;
+    /** Test id of the window's root `<div>`; `floating-window` unless given. */
+    "data-testid"?: string;
 }
 /**
  * Free-floating, non-modal window: draggable by its title bar, resizable from every