@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/inputs/textField/textFieldWrapper.js

@@ -1,50 +1,61 @@
-import { jsxs as r, jsx as e, Fragment as k } from "react/jsx-runtime";
-import d from "clsx";
-import { TextFieldAdornment as a } from "./textFieldAdornment.js";
-function T({
+import { jsxs as n, jsx as e, Fragment as L } from "react/jsx-runtime";
+import i from "clsx";
+import { TextFieldAdornment as f } from "./textFieldAdornment.js";
+import { hasHelperText as M } from "../../../hooks/useHelperText.js";
+function y({
   label: s,
-  helperText: i = /* @__PURE__ */ e(k, { children: " " }),
+  helperText: d,
+  helperTextId: h,
   variant: l,
-  disabled: f,
-  className: h,
-  error: x,
-  fullWidth: w,
-  isFilledState: b,
+  disabled: x,
+  className: w,
+  error: b,
+  fullWidth: p,
+  isFilledState: _,
   isFocused: c,
-  htmlFor: _,
-  shrink: p,
-  children: N,
-  onHolderMouseDown: u,
+  htmlFor: N,
+  labelId: u,
+  shrink: v,
+  children: F,
+  onHolderMouseDown: g,
   startAdornment: o,
-  endAdornment: m,
+  endAdornment: r,
   inline: t,
-  ...F
+  "data-testid": j = "text-field",
+  ...C
 }) {
-  const g = l === "filled", n = s && (b || c || p), j = d(h, "smwb-text-field", {
-    "smwb-text-field--filled": !t && g,
+  const k = l === "filled", m = s && (_ || c || v), a = d === void 0 ? /* @__PURE__ */ e(L, { children: " " }) : d, B = i(w, "smwb-text-field", {
+    "smwb-text-field--filled": !t && k,
     "smwb-text-field--inline": t,
     "smwb-text-field--focused": !t && c,
-    "smwb-text-field--error": x,
-    "smwb-text-field--disabled": f,
-    "smwb-text-field--full-width": w
-  }), v = d("smwb-text-field__label", {
-    "smwb-text-field__label--shrink": n
-  }), C = d("smwb-text-field__notched", {
+    "smwb-text-field--error": b,
+    "smwb-text-field--disabled": x,
+    "smwb-text-field--full-width": p
+  }), D = i("smwb-text-field__label", {
+    "smwb-text-field__label--shrink": m
+  }), H = i("smwb-text-field__notched", {
     "smwb-text-field__notched--with-label": s,
-    "smwb-text-field__notched--active": n
+    "smwb-text-field__notched--active": m
   });
-  return /* @__PURE__ */ r("div", { className: j, ...F, "data-testid": "text-field", children: [
-    !t && s && /* @__PURE__ */ e("label", { className: v, htmlFor: _ || "", children: s }),
-    /* @__PURE__ */ r("div", { className: "smwb-text-field__input-holder", onMouseDown: u, children: [
-      o && /* @__PURE__ */ e(a, { variant: l, inline: !!t, position: "start", children: o }),
-      N,
-      m && /* @__PURE__ */ e(a, { position: "end", children: m }),
-      !t && l === "outlined" && /* @__PURE__ */ e("fieldset", { className: C, children: /* @__PURE__ */ e("legend", { children: s ? /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e("span", { className: "smwb-notranslate", children: "​" }) }) })
+  return /* @__PURE__ */ n("div", { className: B, ...C, "data-testid": j, children: [
+    !t && s && /* @__PURE__ */ e("label", { id: u, className: D, htmlFor: N, children: s }),
+    /* @__PURE__ */ n("div", { className: "smwb-text-field__input-holder", onMouseDown: g, children: [
+      o && /* @__PURE__ */ e(f, { variant: l, inline: !!t, position: "start", children: o }),
+      F,
+      r && /* @__PURE__ */ e(f, { position: "end", children: r }),
+      !t && l === "outlined" && /* @__PURE__ */ e("fieldset", { className: H, children: /* @__PURE__ */ e("legend", { children: s ? /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e("span", { className: "smwb-notranslate", children: "​" }) }) })
     ] }),
-    !t && i && /* @__PURE__ */ e("p", { className: "smwb-text-field__helper-line", children: /* @__PURE__ */ e("span", { className: "smwb-text-field__helper-text", children: i }) })
+    !t && a && /* @__PURE__ */ e("p", { className: "smwb-text-field__helper-line", children: /* @__PURE__ */ e(
+      "span",
+      {
+        className: "smwb-text-field__helper-text",
+        id: M(d, t) ? h : void 0,
+        children: a
+      }
+    ) })
   ] });
 }
 export {
-  T as TextFieldWrapper
+  y as TextFieldWrapper
 };
 //# sourceMappingURL=textFieldWrapper.js.map

package/dist/components/inputs/textField/textFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"textFieldWrapper.js","sources":["../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\n\nexport interface TextFieldWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  label?: string;\n  helperText?: React.ReactNode;\n  variant?: \"outlined\" | \"filled\";\n  disabled?: boolean;\n  className?: string;\n  error?: boolean;\n  fullWidth?: boolean;\n  isFilledState?: boolean;\n  isFocused?: boolean;\n  children: React.ReactNode;\n  htmlFor?: string;\n  shrink?: boolean;\n  onHolderMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  inline?: boolean;\n}\n\nexport function TextFieldWrapper({\n  label,\n  helperText = <>&nbsp;</>,\n  variant,\n  disabled,\n  className,\n  error,\n  fullWidth,\n  isFilledState,\n  isFocused,\n  htmlFor,\n  shrink,\n  children,\n  onHolderMouseDown,\n  startAdornment,\n  endAdornment,\n  inline,\n  ...rest\n}: TextFieldWrapperProps) {\n  const isFilledVariant = variant === \"filled\";\n  const isNotchedActive = label && (isFilledState || isFocused || shrink);\n\n  const classes = cn(className, \"smwb-text-field\", {\n    \"smwb-text-field--filled\": !inline && isFilledVariant,\n    \"smwb-text-field--inline\": inline,\n    \"smwb-text-field--focused\": !inline && isFocused,\n    \"smwb-text-field--error\": error,\n    \"smwb-text-field--disabled\": disabled,\n    \"smwb-text-field--full-width\": fullWidth,\n  });\n  const labelClasses = cn(\"smwb-text-field__label\", {\n    \"smwb-text-field__label--shrink\": isNotchedActive,\n  });\n  const notchedClasses = cn(\"smwb-text-field__notched\", {\n    \"smwb-text-field__notched--with-label\": label,\n    \"smwb-text-field__notched--active\": isNotchedActive,\n  });\n\n  return (\n    <div className={classes} {...rest} data-testid=\"text-field\">\n      {!inline && label && (\n        <label className={labelClasses} htmlFor={htmlFor || \"\"}>\n          {label}\n        </label>\n      )}\n      <div className=\"smwb-text-field__input-holder\" onMouseDown={onHolderMouseDown}>\n        {startAdornment && (\n          <TextFieldAdornment variant={variant} inline={Boolean(inline)} position=\"start\">\n            {startAdornment}\n          </TextFieldAdornment>\n        )}\n        {children}\n        {endAdornment && <TextFieldAdornment position=\"end\">{endAdornment}</TextFieldAdornment>}\n        {!inline && variant === \"outlined\" && (\n          <fieldset className={notchedClasses}>\n            <legend>{label ? <span>{label}</span> : <span className=\"smwb-notranslate\">&#8203;</span>}</legend>\n          </fieldset>\n        )}\n      </div>\n      {!inline && helperText && (\n        <p className=\"smwb-text-field__helper-line\">\n          <span className=\"smwb-text-field__helper-text\">{helperText}</span>\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["TextFieldWrapper","label","helperText","variant","disabled","className","error","fullWidth","isFilledState","isFocused","htmlFor","shrink","children","onHolderMouseDown","startAdornment","endAdornment","inline","rest","isFilledVariant","isNotchedActive","classes","cn","labelClasses","notchedClasses","jsx","jsxs","TextFieldAdornment"],"mappings":";;;AAuBO,SAASA,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,YAAAC,2BAAe,UAAA,IAAA,CAAM;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAkBf,MAAY,UAC9BgB,IAAkBlB,MAAUO,KAAiBC,KAAaE,IAE1DS,IAAUC,EAAGhB,GAAW,mBAAmB;AAAA,IAC/C,2BAA2B,CAACW,KAAUE;AAAA,IACtC,2BAA2BF;AAAA,IAC3B,4BAA4B,CAACA,KAAUP;AAAA,IACvC,0BAA0BH;AAAA,IAC1B,6BAA6BF;AAAA,IAC7B,+BAA+BG;AAAA,EAAA,CAChC,GACKe,IAAeD,EAAG,0BAA0B;AAAA,IAChD,kCAAkCF;AAAA,EAAA,CACnC,GACKI,IAAiBF,EAAG,4BAA4B;AAAA,IACpD,wCAAwCpB;AAAA,IACxC,oCAAoCkB;AAAA,EAAA,CACrC;AAED,2BACG,OAAA,EAAI,WAAWC,GAAU,GAAGH,GAAM,eAAY,cAC5C,UAAA;AAAA,IAAA,CAACD,KAAUf,KACV,gBAAAuB,EAAC,SAAA,EAAM,WAAWF,GAAc,SAASZ,KAAW,IACjD,UAAAT,EAAA,CACH;AAAA,IAEF,gBAAAwB,EAAC,OAAA,EAAI,WAAU,iCAAgC,aAAaZ,GACzD,UAAA;AAAA,MAAAC,KACC,gBAAAU,EAACE,KAAmB,SAAAvB,GAAkB,QAAQ,EAAQa,GAAS,UAAS,SACrE,UAAAF,EAAA,CACH;AAAA,MAEDF;AAAA,MACAG,KAAgB,gBAAAS,EAACE,GAAA,EAAmB,UAAS,OAAO,UAAAX,GAAa;AAAA,MACjE,CAACC,KAAUb,MAAY,gCACrB,YAAA,EAAS,WAAWoB,GACnB,UAAA,gBAAAC,EAAC,UAAA,EAAQ,cAAQ,gBAAAA,EAAC,QAAA,EAAM,aAAM,IAAU,gBAAAA,EAAC,UAAK,WAAU,oBAAmB,UAAA,IAAA,CAAO,EAAA,CAAQ,EAAA,CAC5F;AAAA,IAAA,GAEJ;AAAA,IACC,CAACR,KAAUd,KACV,gBAAAsB,EAAC,KAAA,EAAE,WAAU,gCACX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAtB,EAAA,CAAW,EAAA,CAC7D;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"textFieldWrapper.js","sources":["../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport { hasHelperText } from \"../../../hooks/useHelperText\";\n\nexport interface TextFieldWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  label?: string;\n  helperText?: React.ReactNode;\n  /**\n   * Id of the helper text, for the control's `aria-describedby`. Only shown helper text takes it: not the blank line\n   * drawn without helper text, and an inline field shows none.\n   */\n  helperTextId?: string;\n  variant?: \"outlined\" | \"filled\";\n  disabled?: boolean;\n  className?: string;\n  error?: boolean;\n  fullWidth?: boolean;\n  isFilledState?: boolean;\n  isFocused?: boolean;\n  children: React.ReactNode;\n  /** Id of the control the label names. Without it, the label names nothing. */\n  htmlFor?: string;\n  /**\n   * Id of the `<label>`. A control that `htmlFor` cannot label (one that is not\n   * a form element, such as SelectField's `role=\"button\"`) points\n   * `aria-labelledby` at it.\n   */\n  labelId?: string;\n  shrink?: boolean;\n  onHolderMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  inline?: boolean;\n  /** Test id of the root `<div>`; `text-field` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport function TextFieldWrapper({\n  label,\n  helperText,\n  helperTextId,\n  variant,\n  disabled,\n  className,\n  error,\n  fullWidth,\n  isFilledState,\n  isFocused,\n  htmlFor,\n  labelId,\n  shrink,\n  children,\n  onHolderMouseDown,\n  startAdornment,\n  endAdornment,\n  inline,\n  \"data-testid\": dataTestId = \"text-field\",\n  ...rest\n}: TextFieldWrapperProps) {\n  const isFilledVariant = variant === \"filled\";\n  const isNotchedActive = label && (isFilledState || isFocused || shrink);\n  // Without helper text a blank line holds its place.\n  const helperLine = helperText === undefined ? <>&nbsp;</> : helperText;\n\n  const classes = cn(className, \"smwb-text-field\", {\n    \"smwb-text-field--filled\": !inline && isFilledVariant,\n    \"smwb-text-field--inline\": inline,\n    \"smwb-text-field--focused\": !inline && isFocused,\n    \"smwb-text-field--error\": error,\n    \"smwb-text-field--disabled\": disabled,\n    \"smwb-text-field--full-width\": fullWidth,\n  });\n  const labelClasses = cn(\"smwb-text-field__label\", {\n    \"smwb-text-field__label--shrink\": isNotchedActive,\n  });\n  const notchedClasses = cn(\"smwb-text-field__notched\", {\n    \"smwb-text-field__notched--with-label\": label,\n    \"smwb-text-field__notched--active\": isNotchedActive,\n  });\n\n  return (\n    <div className={classes} {...rest} data-testid={dataTestId}>\n      {!inline && label && (\n        <label id={labelId} className={labelClasses} htmlFor={htmlFor}>\n          {label}\n        </label>\n      )}\n      <div className=\"smwb-text-field__input-holder\" onMouseDown={onHolderMouseDown}>\n        {startAdornment && (\n          <TextFieldAdornment variant={variant} inline={Boolean(inline)} position=\"start\">\n            {startAdornment}\n          </TextFieldAdornment>\n        )}\n        {children}\n        {endAdornment && <TextFieldAdornment position=\"end\">{endAdornment}</TextFieldAdornment>}\n        {!inline && variant === \"outlined\" && (\n          <fieldset className={notchedClasses}>\n            <legend>{label ? <span>{label}</span> : <span className=\"smwb-notranslate\">&#8203;</span>}</legend>\n          </fieldset>\n        )}\n      </div>\n      {!inline && helperLine && (\n        <p className=\"smwb-text-field__helper-line\">\n          <span\n            className=\"smwb-text-field__helper-text\"\n            id={hasHelperText(helperText, inline) ? helperTextId : undefined}\n          >\n            {helperLine}\n          </span>\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["TextFieldWrapper","label","helperText","helperTextId","variant","disabled","className","error","fullWidth","isFilledState","isFocused","htmlFor","labelId","shrink","children","onHolderMouseDown","startAdornment","endAdornment","inline","dataTestId","rest","isFilledVariant","isNotchedActive","helperLine","jsx","Fragment","classes","cn","labelClasses","notchedClasses","jsxs","TextFieldAdornment","hasHelperText"],"mappings":";;;;AAsCO,SAASA,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAkBjB,MAAY,UAC9BkB,IAAkBrB,MAAUQ,KAAiBC,KAAaG,IAE1DU,IAAarB,MAAe,SAAY,gBAAAsB,EAAAC,GAAA,EAAE,eAAM,IAAMvB,GAEtDwB,IAAUC,EAAGrB,GAAW,mBAAmB;AAAA,IAC/C,2BAA2B,CAACY,KAAUG;AAAA,IACtC,2BAA2BH;AAAA,IAC3B,4BAA4B,CAACA,KAAUR;AAAA,IACvC,0BAA0BH;AAAA,IAC1B,6BAA6BF;AAAA,IAC7B,+BAA+BG;AAAA,EAAA,CAChC,GACKoB,IAAeD,EAAG,0BAA0B;AAAA,IAChD,kCAAkCL;AAAA,EAAA,CACnC,GACKO,IAAiBF,EAAG,4BAA4B;AAAA,IACpD,wCAAwC1B;AAAA,IACxC,oCAAoCqB;AAAA,EAAA,CACrC;AAED,2BACG,OAAA,EAAI,WAAWI,GAAU,GAAGN,GAAM,eAAaD,GAC7C,UAAA;AAAA,IAAA,CAACD,KAAUjB,KACV,gBAAAuB,EAAC,SAAA,EAAM,IAAIZ,GAAS,WAAWgB,GAAc,SAAAjB,GAC1C,UAAAV,EAAA,CACH;AAAA,IAEF,gBAAA6B,EAAC,OAAA,EAAI,WAAU,iCAAgC,aAAaf,GACzD,UAAA;AAAA,MAAAC,KACC,gBAAAQ,EAACO,KAAmB,SAAA3B,GAAkB,QAAQ,EAAQc,GAAS,UAAS,SACrE,UAAAF,EAAA,CACH;AAAA,MAEDF;AAAA,MACAG,KAAgB,gBAAAO,EAACO,GAAA,EAAmB,UAAS,OAAO,UAAAd,GAAa;AAAA,MACjE,CAACC,KAAUd,MAAY,gCACrB,YAAA,EAAS,WAAWyB,GACnB,UAAA,gBAAAL,EAAC,UAAA,EAAQ,cAAQ,gBAAAA,EAAC,QAAA,EAAM,aAAM,IAAU,gBAAAA,EAAC,UAAK,WAAU,oBAAmB,UAAA,IAAA,CAAO,EAAA,CAAQ,EAAA,CAC5F;AAAA,IAAA,GAEJ;AAAA,IACC,CAACN,KAAUK,KACV,gBAAAC,EAAC,KAAA,EAAE,WAAU,gCACX,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAIQ,EAAc9B,GAAYgB,CAAM,IAAIf,IAAe;AAAA,QAEtD,UAAAoB;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/inputs/timePicker/timePicker.js

@@ -1,118 +1,124 @@
-import { jsxs as U, Fragment as $, jsx as n } from "react/jsx-runtime";
+import { jsxs as $, Fragment as q, jsx as i } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/timePicker/timePicker.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import q, { useMemo as z, useState as m, useRef as C, useCallback as i } from "react";
-import { useFloating as G, autoUpdate as H } from "@floating-ui/react";
-import J from "react-transition-group/Transition";
-import { resolvePlacement as K, buildFloatingMiddleware as Q } from "../../../utils/floating.js";
+import z, { useMemo as G, useState as y, useRef as T, useCallback as m, useEffect as H } from "react";
+import { useFloating as J, autoUpdate as Q } from "@floating-ui/react";
+import W from "react-transition-group/Transition";
+import { resolvePlacement as X, buildFloatingMiddleware as Y } from "../../../utils/floating.js";
 import { useSafeLayoutEffect as P } from "../../../hooks/useSafeLayoutEffect.js";
-import { useForkRef as T } from "../../../hooks/useForkRef.js";
-import { TimePickerInput as W } from "./timePickerInput.js";
-import { TimePickerColumns as X } from "./timePickerColumns.js";
-import { isValidTimeDate as F } from "./timeUtils.js";
-import { createPortal as Y } from "react-dom";
-import { ClickAwayListener as Z } from "../../clickAwayListener/clickAwayListener.js";
-const ee = (u) => ({
-  transition: `opacity ${u}ms ease-in-out`,
+import { useForkRef as F } from "../../../hooks/useForkRef.js";
+import { isTopOverlayLayer as Z } from "../../../utils/overlayLayer.js";
+import { TimePickerInput as ee } from "./timePickerInput.js";
+import { TimePickerColumns as te } from "./timePickerColumns.js";
+import { isValidTimeDate as L } from "./timeUtils.js";
+import { createPortal as oe } from "react-dom";
+import { ClickAwayListener as ne } from "../../clickAwayListener/clickAwayListener.js";
+const re = (k) => ({
+  transition: `opacity ${k}ms ease-in-out`,
   opacity: 0
-}), te = {
+}), ie = {
   entering: { opacity: 1 },
   entered: { opacity: 1 },
   exiting: { opacity: 0 }
-}, ge = q.forwardRef(function(a, S) {
+}, he = z.forwardRef(function(u, O) {
   const {
-    value: l,
-    onChange: r,
-    placement: x = "bottom-start",
+    value: f,
+    onChange: a,
+    placement: D = "bottom-start",
     disabled: t,
-    disableClock: f,
-    clockAriaLabel: D = "Choose time",
-    format: d,
-    onBlur: E,
-    ...O
-  } = a, o = z(() => l === void 0 ? void 0 : new Date(l), [l]), [V, p] = m(() => F(o) ? o : /* @__PURE__ */ new Date()), [k, s] = m(!1), g = C(null), c = C(null), w = K(x), { refs: y, floatingStyles: A } = G({
-    open: k,
-    placement: w.placement,
-    whileElementsMounted: H,
-    middleware: Q(w)
-  }), B = T(g, y.setReference, S), L = T(c, y.setFloating), [v, M] = m();
+    disableClock: v,
+    clockAriaLabel: S = "Choose time",
+    format: w,
+    onBlur: x,
+    ...V
+  } = u, o = G(() => f === void 0 ? void 0 : new Date(f), [f]), [A, g] = y(() => L(o) ? o : /* @__PURE__ */ new Date()), [b, s] = y(!1), d = T(null), c = T(null), h = X(D), { refs: R, floatingStyles: B } = J({
+    open: b,
+    placement: h.placement,
+    whileElementsMounted: Q,
+    middleware: Y(h)
+  }), M = F(d, R.setReference, O), j = F(c, R.setFloating), [C, I] = y();
   P(() => {
-    M(document.body);
+    I(document.body);
   }, []), P(() => {
-    t || p(F(o) ? o : /* @__PURE__ */ new Date());
+    t || g(L(o) ? o : /* @__PURE__ */ new Date());
   }, [o, t]);
-  const j = i(() => {
+  const N = m(() => {
     t || s((e) => !e);
-  }, [t]), I = i((e) => {
-    var h, R;
-    const b = e.target;
-    (h = c.current) != null && h.contains(b) || (R = g.current) != null && R.contains(b) || s(!1);
-  }, []), N = i(
+  }, [t]), _ = m((e) => {
+    var n, r;
+    const l = e.target;
+    (n = c.current) != null && n.contains(l) || (r = d.current) != null && r.contains(l) || s(!1);
+  }, []), p = b && !t && !v;
+  H(() => {
+    if (!p)
+      return;
+    const e = (l) => {
+      var E;
+      const n = c.current;
+      if (l.key !== "Escape" || !n || !Z(n))
+        return;
+      s(!1);
+      const r = document.activeElement;
+      (!r || r === document.body || n.contains(r)) && ((E = d.current) == null || E.focus());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [p]);
+  const K = m(
     (e) => {
-      p(e), r == null || r(void 0, e, a);
+      g(e), a == null || a(void 0, e, u);
     },
-    [r, a]
-  ), _ = i(() => {
+    [a, u]
+  ), U = m(() => {
     s(!1);
   }, []);
-  return /* @__PURE__ */ U($, { children: [
-    /* @__PURE__ */ n(
-      W,
+  return /* @__PURE__ */ $(q, { children: [
+    /* @__PURE__ */ i(
+      ee,
       {
-        ref: B,
+        ref: M,
         value: o,
-        onChange: r,
-        onBlur: E,
-        onToggle: j,
+        onChange: a,
+        onBlur: x,
+        onToggle: N,
         disabled: t,
-        disableClock: f,
-        format: d,
-        ...O
+        disableClock: v,
+        format: w,
+        ...V
       }
     ),
-    v ? Y(
-      /* @__PURE__ */ n(
-        J,
+    C ? oe(
+      /* @__PURE__ */ i(W, { nodeRef: c, in: p, timeout: 150, mountOnEnter: !0, unmountOnExit: !0, children: (e) => /* @__PURE__ */ i(ne, { onClickAway: _, children: /* @__PURE__ */ i(
+        "div",
         {
-          nodeRef: c,
-          in: k && !t && !f,
-          timeout: 150,
-          mountOnEnter: !0,
-          unmountOnExit: !0,
-          children: (e) => /* @__PURE__ */ n(Z, { onClickAway: I, children: /* @__PURE__ */ n(
-            "div",
+          ref: j,
+          className: "smwb-date-picker smwb-time-picker",
+          style: {
+            ...B,
+            ...re(150),
+            ...ie[e]
+          },
+          "data-testid": "time-picker",
+          "data-smwb-overlay-layer": "",
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-label": S,
+          children: /* @__PURE__ */ i("div", { className: "smwb-date-picker__inner", children: /* @__PURE__ */ i(
+            te,
             {
-              ref: L,
-              className: "smwb-date-picker smwb-time-picker",
-              style: {
-                ...A,
-                ...ee(150),
-                ...te[e]
-              },
-              "data-testid": "time-picker",
-              "data-smwb-overlay-layer": "",
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-label": D,
-              children: /* @__PURE__ */ n("div", { className: "smwb-date-picker__inner", children: /* @__PURE__ */ n(
-                X,
-                {
-                  value: V,
-                  format: d,
-                  onChange: N,
-                  onComplete: _
-                }
-              ) })
+              value: A,
+              format: w,
+              onChange: K,
+              onComplete: U
             }
           ) })
         }
-      ),
-      v
+      ) }) }),
+      C
     ) : null
   ] });
 });
 export {
-  ge as TimePicker,
-  ge as default
+  he as TimePicker,
+  he as default
 };
 //# sourceMappingURL=timePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  // The clock is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing there, so the\n  // picker renders and hydrates on a server-rendered page.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {portalRoot\n        ? createPortal(\n            <Transition\n              nodeRef={clockRef}\n              in={isOpen && !disabled && !disableClock}\n              timeout={150}\n              mountOnEnter\n              unmountOnExit\n            >\n              {(state) => (\n                <ClickAwayListener onClickAway={onClickAway}>\n                  <div\n                    ref={clockForkRef}\n                    className=\"smwb-date-picker smwb-time-picker\"\n                    style={{\n                      ...floatingStyles,\n                      ...defaultStyle(150),\n                      ...transitionStyles[state],\n                    }}\n                    data-testid=\"time-picker\"\n                    data-smwb-overlay-layer=\"\"\n                    role=\"dialog\"\n                    aria-modal=\"false\"\n                    aria-label={clockAriaLabel}\n                  >\n                    <div className=\"smwb-date-picker__inner\">\n                      <TimePickerColumns\n                        value={viewValue}\n                        format={format}\n                        onChange={onTimeChange}\n                        onComplete={onComplete}\n                      />\n                    </div>\n                  </div>\n                </ClickAwayListener>\n              )}\n            </Transition>,\n            portalRoot\n          )\n        : null}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","portalRoot","setPortalRoot","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}
+{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  // The clock is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing there, so the\n  // picker renders and hydrates on a server-rendered page.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const panelOpen = isOpen && !disabled && !disableClock;\n\n  // Escape closes the panel while it is the topmost overlay layer, so the next one\n  // reaches a Modal or Sheet around the picker. Focus left in the panel (or on\n  // <body> after a click there) goes back to the input rather than being lost.\n  useEffect(() => {\n    if (!panelOpen) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      const panel = clockRef.current;\n      if (event.key !== \"Escape\" || !panel || !isTopOverlayLayer(panel)) {\n        return;\n      }\n      setIsOpen(false);\n      const active = document.activeElement;\n      if (!active || active === document.body || panel.contains(active)) {\n        anchorRef.current?.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [panelOpen]);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {portalRoot\n        ? createPortal(\n            <Transition nodeRef={clockRef} in={panelOpen} timeout={150} mountOnEnter unmountOnExit>\n              {(state) => (\n                <ClickAwayListener onClickAway={onClickAway}>\n                  <div\n                    ref={clockForkRef}\n                    className=\"smwb-date-picker smwb-time-picker\"\n                    style={{\n                      ...floatingStyles,\n                      ...defaultStyle(150),\n                      ...transitionStyles[state],\n                    }}\n                    data-testid=\"time-picker\"\n                    data-smwb-overlay-layer=\"\"\n                    role=\"dialog\"\n                    aria-modal=\"false\"\n                    aria-label={clockAriaLabel}\n                  >\n                    <div className=\"smwb-date-picker__inner\">\n                      <TimePickerColumns\n                        value={viewValue}\n                        format={format}\n                        onChange={onTimeChange}\n                        onComplete={onComplete}\n                      />\n                    </div>\n                  </div>\n                </ClickAwayListener>\n              )}\n            </Transition>,\n            portalRoot\n          )\n        : null}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","portalRoot","setPortalRoot","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","panelOpen","useEffect","onKeyDown","panel","isTopOverlayLayer","active","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}

package/dist/components/inputs/toggle/toggle.d.ts

@@ -2,6 +2,10 @@ import React, { InputHTMLAttributes } from "react";
 import type { SelectionControlColor, SelectionControlSize } from "../checkbox/checkbox";
 export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     disabled?: boolean;
+    /**
+     * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.
+     * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).
+     */
     readOnly?: boolean;
     required?: boolean;
     checked?: boolean;

package/dist/components/inputs/toggle/toggle.js

@@ -1,71 +1,90 @@
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/toggle/toggle.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import k from "react";
-import b from "clsx";
-import { useId as v } from "../../../hooks/useId.js";
-import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
-const R = k.forwardRef(function(e, h) {
+import p from "react";
+import f from "clsx";
+import { useHelperText as v } from "../../../hooks/useHelperText.js";
+import { useId as B } from "../../../hooks/useId.js";
+import { cancelToggle as $, forgetCancelledToggle as j } from "../../../utils/readOnlyToggle.js";
+import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
+const E = p.forwardRef(function(e, _) {
   const {
-    disabled: l,
-    readOnly: r,
-    required: o,
-    checked: s,
-    className: w,
-    id: _,
-    label: m,
-    labelPlacement: c,
-    size: f = "medium",
-    color: u = "primary",
-    helperText: p,
-    error: i,
-    ...x
-  } = e, n = v(_), N = (t) => {
-    var d;
-    if (r) {
-      t.preventDefault();
+    disabled: o,
+    readOnly: l,
+    required: t,
+    checked: c,
+    className: u,
+    id: x,
+    label: d,
+    labelPlacement: s,
+    size: y = "medium",
+    color: k = "primary",
+    helperText: m,
+    error: n,
+    "aria-describedby": N,
+    ...g
+  } = e, b = B(x), h = v(m, { describedBy: N }), T = (a) => {
+    var r;
+    if (l) {
+      j(a, c);
       return;
     }
-    (d = e.onChange) == null || d.call(e, t, t.target.checked, e);
+    (r = e.onChange) == null || r.call(e, a, a.target.checked, e);
+  }, C = (a) => {
+    var r;
+    (r = e.onClick) == null || r.call(e, a), l && $(a, c);
   };
-  return /* @__PURE__ */ a(y, { helperText: p, disabled: l, error: i, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g("span", { className: b("smwb-toggle__wrapper", c && `smwb-toggle__wrapper_label-${c}`), children: [
-    m ? /* @__PURE__ */ a("label", { htmlFor: n, className: "smwb-toggle__label", children: m }) : null,
-    /* @__PURE__ */ g(
-      "label",
-      {
-        className: b("smwb-toggle", `smwb-toggle_size-${f}`, `smwb-toggle_color-${u}`, w, {
-          "smwb-disabled": l,
-          "smwb-readonly": r
-        }),
-        children: [
-          /* @__PURE__ */ a(
-            "input",
-            {
-              type: "checkbox",
-              id: n,
-              className: "smwb-toggle__checkbox",
-              "aria-checked": s,
-              "aria-invalid": i || void 0,
-              "aria-required": o || void 0,
-              role: "switch",
-              checked: s,
-              disabled: l,
-              readOnly: r,
-              required: o,
-              ref: h,
-              ...x,
-              onChange: N
-            }
-          ),
-          /* @__PURE__ */ a("span", { className: "smwb-toggle__track" }),
-          /* @__PURE__ */ a("span", { className: "smwb-toggle__thumb" })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ i(
+    q,
+    {
+      helperText: m,
+      helperTextId: h.id,
+      disabled: o,
+      error: n,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ w("span", { className: f("smwb-toggle__wrapper", s && `smwb-toggle__wrapper_label-${s}`), children: [
+        d ? /* @__PURE__ */ i("label", { htmlFor: b, className: "smwb-toggle__label", children: d }) : null,
+        /* @__PURE__ */ w(
+          "label",
+          {
+            className: f("smwb-toggle", `smwb-toggle_size-${y}`, `smwb-toggle_color-${k}`, u, {
+              "smwb-disabled": o,
+              "smwb-readonly": l
+            }),
+            children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  type: "checkbox",
+                  id: b,
+                  className: "smwb-toggle__checkbox",
+                  "aria-checked": c,
+                  "aria-invalid": n || void 0,
+                  "aria-required": t || void 0,
+                  "aria-describedby": h.describedBy,
+                  role: "switch",
+                  checked: c,
+                  disabled: o,
+                  readOnly: l,
+                  required: t,
+                  ref: _,
+                  ...g,
+                  "aria-readonly": l || g["aria-readonly"],
+                  onChange: T,
+                  onClick: C
+                }
+              ),
+              /* @__PURE__ */ i("span", { className: "smwb-toggle__track" }),
+              /* @__PURE__ */ i("span", { className: "smwb-toggle__thumb" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 });
 export {
-  R as Toggle,
-  R as default
+  E as Toggle,
+  E as default
 };
 //# sourceMappingURL=toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  className?: string;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: ToggleProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(props, ref) {\n  const {\n    disabled,\n    readOnly,\n    required,\n    checked,\n    className,\n    id: idProp,\n    label,\n    labelPlacement,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    props.onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <span className={cn(\"smwb-toggle__wrapper\", labelPlacement && `smwb-toggle__wrapper_label-${labelPlacement}`)}>\n        {label ? (\n          <label htmlFor={id} className=\"smwb-toggle__label\">\n            {label}\n          </label>\n        ) : null}\n        <label\n          className={cn(\"smwb-toggle\", `smwb-toggle_size-${size}`, `smwb-toggle_color-${color}`, className, {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            className=\"smwb-toggle__checkbox\"\n            aria-checked={checked}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            role={\"switch\"}\n            checked={checked}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className=\"smwb-toggle__track\"></span>\n          <span className=\"smwb-toggle__thumb\"></span>\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Toggle;\n"],"names":["Toggle","React","props","ref","disabled","readOnly","required","checked","className","idProp","label","labelPlacement","size","color","helperText","error","args","id","useId","handleChange","e","_a","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;;;AAyBO,MAAMA,IAASC,EAAM,WAA0C,SAAgBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,KAAAC,IAAAnB,EAAM,aAAN,QAAAmB,EAAA,KAAAnB,GAAiBkB,GAAGA,EAAE,OAAO,SAASlB;AAAA,EACxC;AAEA,2BACGoB,GAAA,EAAiB,YAAAR,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAG,wBAAwBb,KAAkB,8BAA8BA,CAAc,EAAE,GACzG,UAAA;AAAA,IAAAD,sBACE,SAAA,EAAM,SAASO,GAAI,WAAU,sBAC3B,aACH,IACE;AAAA,IACJ,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,eAAe,oBAAoBZ,CAAI,IAAI,qBAAqBC,CAAK,IAAIL,GAAW;AAAA,UAChG,iBAAiBJ;AAAA,UACjB,iBAAiBC;AAAA,QAAA,CAClB;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAoB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAAR;AAAA,cACA,WAAU;AAAA,cACV,gBAAcV;AAAA,cACd,gBAAcQ,KAAS;AAAA,cACvB,iBAAeT,KAAY;AAAA,cAC3B,MAAM;AAAA,cACN,SAAAC;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,KAAAH;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAM,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,UACrC,gBAAAA,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useHelperText } from \"../../../hooks/useHelperText\";\nimport { useId } from \"../../../hooks/useId\";\nimport { cancelToggle, forgetCancelledToggle } from \"../../../utils/readOnlyToggle\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  /**\n   * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  className?: string;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: ToggleProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(props, ref) {\n  const {\n    disabled,\n    readOnly,\n    required,\n    checked,\n    className,\n    id: idProp,\n    label,\n    labelPlacement,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    \"aria-describedby\": ariaDescribedBy,\n    ...args\n  } = props;\n  const id = useId(idProp);\n  const helper = useHelperText(helperText, { describedBy: ariaDescribedBy });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      forgetCancelledToggle(e, checked);\n      return;\n    }\n    props.onChange?.(e, e.target.checked, props);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    props.onClick?.(e);\n    if (readOnly) cancelToggle(e, checked);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helperText}\n      helperTextId={helper.id}\n      disabled={disabled}\n      error={error}\n      className=\"smwb-text-field-checkbox\"\n    >\n      <span className={cn(\"smwb-toggle__wrapper\", labelPlacement && `smwb-toggle__wrapper_label-${labelPlacement}`)}>\n        {label ? (\n          <label htmlFor={id} className=\"smwb-toggle__label\">\n            {label}\n          </label>\n        ) : null}\n        <label\n          className={cn(\"smwb-toggle\", `smwb-toggle_size-${size}`, `smwb-toggle_color-${color}`, className, {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            className=\"smwb-toggle__checkbox\"\n            aria-checked={checked}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            aria-describedby={helper.describedBy}\n            role={\"switch\"}\n            checked={checked}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            ref={ref}\n            {...args}\n            aria-readonly={readOnly || args[\"aria-readonly\"]}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span className=\"smwb-toggle__track\"></span>\n          <span className=\"smwb-toggle__thumb\"></span>\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Toggle;\n"],"names":["Toggle","React","props","ref","disabled","readOnly","required","checked","className","idProp","label","labelPlacement","size","color","helperText","error","ariaDescribedBy","args","id","useId","helper","useHelperText","handleChange","e","forgetCancelledToggle","_a","handleClick","cancelToggle","jsx","TextFieldWrapper","jsxs","cn"],"mappings":";;;;;;;;;AA+BO,MAAMA,IAASC,EAAM,WAA0C,SAAgBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDf,GACEgB,IAAKC,EAAMV,CAAM,GACjBW,IAASC,EAAcP,GAAY,EAAE,aAAaE,GAAiB,GAEnEM,IAAe,CAACC,MAA2C;;AAC/D,QAAIlB,GAAU;AACZ,MAAAmB,EAAsBD,GAAGhB,CAAO;AAChC;AAAA,IACF;AACA,KAAAkB,IAAAvB,EAAM,aAAN,QAAAuB,EAAA,KAAAvB,GAAiBqB,GAAGA,EAAE,OAAO,SAASrB;AAAA,EACxC,GAEMwB,IAAc,CAACH,MAA0C;;AAC7D,KAAAE,IAAAvB,EAAM,YAAN,QAAAuB,EAAA,KAAAvB,GAAgBqB,IACZlB,KAAUsB,EAAaJ,GAAGhB,CAAO;AAAA,EACvC;AAEA,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAf;AAAA,MACA,cAAcM,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAW;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAe,EAAC,UAAK,WAAWC,EAAG,wBAAwBpB,KAAkB,8BAA8BA,CAAc,EAAE,GACzG,UAAA;AAAA,QAAAD,sBACE,SAAA,EAAM,SAASQ,GAAI,WAAU,sBAC3B,aACH,IACE;AAAA,QACJ,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,eAAe,oBAAoBnB,CAAI,IAAI,qBAAqBC,CAAK,IAAIL,GAAW;AAAA,cAChG,iBAAiBJ;AAAA,cACjB,iBAAiBC;AAAA,YAAA,CAClB;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAuB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,IAAAV;AAAA,kBACA,WAAU;AAAA,kBACV,gBAAcX;AAAA,kBACd,gBAAcQ,KAAS;AAAA,kBACvB,iBAAeT,KAAY;AAAA,kBAC3B,oBAAkBc,EAAO;AAAA,kBACzB,MAAM;AAAA,kBACN,SAAAb;AAAA,kBACA,UAAAH;AAAA,kBACA,UAAAC;AAAA,kBACA,UAAAC;AAAA,kBACA,KAAAH;AAAA,kBACC,GAAGc;AAAA,kBACJ,iBAAeZ,KAAYY,EAAK,eAAe;AAAA,kBAC/C,UAAUK;AAAA,kBACV,SAASI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,gBAAAE,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,cACrC,gBAAAA,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACvC,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/inputs/valueSlider/valueSlider.d.ts

@@ -1,6 +1,18 @@
 import React from "react";
 import { type SliderProps, type SliderValue } from "../slider";
 export interface ValueSliderProps extends SliderProps {
+    /**
+     * Label text, drawn in the header row beside the readout. It names the slider,
+     * as `Slider`'s label does; each thumb of a range adds its own word: with
+     * `label="Price"` they read "Price minimum" and "Price maximum".
+     */
+    label?: string;
+    /**
+     * Accessible name of the slider. Replaces the name the header `label` gives
+     * it; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb
+     * of a range adds its own word, as with `label`.
+     */
+    "aria-label"?: string;
     /**
      * Read-only value readout beside the label. `true` shows the raw value; pass a
      * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.