@smwb/ui-react 2.7.0 → 2.8.0

package/dist/headless/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/headless/components/inputs/timePicker/timePicker.js

@@ -1,116 +1,122 @@
-import { jsxs as U, Fragment as $, jsx as n } from "react/jsx-runtime";
-import q, { useMemo as z, useState as m, useRef as C, useCallback as a } 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 { jsxs as $, Fragment as q, jsx as a } from "react/jsx-runtime";
+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 = {
+}), ae = {
   entering: { opacity: 1 },
   entered: { opacity: 1 },
   exiting: { opacity: 0 }
-}, pe = q.forwardRef(function(i, S) {
+}, ge = z.forwardRef(function(u, O) {
   const {
-    value: l,
-    onChange: r,
-    placement: x = "bottom-start",
+    value: f,
+    onChange: i,
+    placement: D = "bottom-start",
     disabled: t,
-    disableClock: f,
-    clockAriaLabel: D = "Choose time",
-    format: d,
-    onBlur: E,
-    ...O
-  } = i, 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 = a(() => {
+  const N = m(() => {
     t || s((e) => !e);
-  }, [t]), I = a((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 = a(
+  }, [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, i);
+      g(e), i == null || i(void 0, e, u);
     },
-    [r, i]
-  ), _ = a(() => {
+    [i, u]
+  ), U = m(() => {
     s(!1);
   }, []);
-  return /* @__PURE__ */ U($, { children: [
-    /* @__PURE__ */ n(
-      W,
+  return /* @__PURE__ */ $(q, { children: [
+    /* @__PURE__ */ a(
+      ee,
       {
-        ref: B,
+        ref: M,
         value: o,
-        onChange: r,
-        onBlur: E,
-        onToggle: j,
+        onChange: i,
+        onBlur: x,
+        onToggle: N,
         disabled: t,
-        disableClock: f,
-        format: d,
-        ...O
+        disableClock: v,
+        format: w,
+        ...V
       }
     ),
-    v ? Y(
-      /* @__PURE__ */ n(
-        J,
+    C ? oe(
+      /* @__PURE__ */ a(W, { nodeRef: c, in: p, timeout: 150, mountOnEnter: !0, unmountOnExit: !0, children: (e) => /* @__PURE__ */ a(ne, { onClickAway: _, children: /* @__PURE__ */ a(
+        "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),
+            ...ae[e]
+          },
+          "data-testid": "time-picker",
+          "data-smwb-overlay-layer": "",
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-label": S,
+          children: /* @__PURE__ */ a("div", { className: "smwb-date-picker__inner", children: /* @__PURE__ */ a(
+            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 {
-  pe as TimePicker,
-  pe as default
+  ge as TimePicker,
+  ge as default
 };
 //# sourceMappingURL=timePicker.js.map

package/dist/headless/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":";;;;;;;;;;;;;AAcA,MAAMA,KAAe,CAACC,OAAsB;AAAA,EAC1C,YAAY,WAAWA,CAAQ;AAAA,EAC/B,SAAS;AACX,IAEMC,KAAmB;AAAA,EACvB,UAAU,EAAE,SAAS,EAAA;AAAA,EACrB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAgBaC,KAAaC,EAAM,WAAW,SAAoBC,GAAwBC,GAAK;AAC1F,QAAM;AAAA,IACJ,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,QAAAC;AAAA,IACA,QAAQC;AAAA,IACR,GAAGC;AAAA,EAAA,IACDV,GACEW,IAAQC,EAAQ,MAAOV,MAAc,SAAY,SAAY,IAAI,KAAKA,CAAS,GAAI,CAACA,CAAS,CAAC,GAC9F,CAACW,GAAWC,CAAY,IAAIC,EAAe,MAAOC,EAAgBL,CAAK,IAAIA,IAAQ,oBAAI,MAAO,GAC9F,CAACM,GAAQC,CAAS,IAAIH,EAAS,EAAK,GAEpCI,IAAYC,EAA8B,IAAI,GAC9CC,IAAWD,EAA8B,IAAI,GAE7CE,IAAWC,EAAiBnB,CAAS,GACrC,EAAE,MAAAoB,GAAM,gBAAAC,EAAA,IAAmBC,EAAY;AAAA,IAC3C,MAAMT;AAAA,IACN,WAAWK,EAAS;AAAA,IACpB,sBAAsBK;AAAA,IACtB,YAAYC,EAAwBN,CAAQ;AAAA,EAAA,CAC7C,GAEKO,IAAgBC,EAAWX,GAAWK,EAAK,cAAcvB,CAAG,GAC5D8B,IAAeD,EAAWT,GAAUG,EAAK,WAAW,GAKpD,CAACQ,GAAYC,CAAa,IAAIlB,EAAA;AACpC,EAAAmB,EAAoB,MAAM;AACxB,IAAAD,EAAc,SAAS,IAAI;AAAA,EAC7B,GAAG,CAAA,CAAE,GAELC,EAAoB,MAAM;AACxB,IAAI7B,KAIJS,EAAaE,EAAgBL,CAAK,IAAIA,IAAQ,oBAAI,MAAM;AAAA,EAC1D,GAAG,CAACA,GAAON,CAAQ,CAAC;AAEpB,QAAM8B,IAAWC,EAAY,MAAM;AACjC,IAAK/B,KACHa,EAAU,CAACmB,MAAc,CAACA,CAAS;AAAA,EAEvC,GAAG,CAAChC,CAAQ,CAAC,GAEPiC,IAAcF,EAAY,CAACG,MAAwC;;AACvE,UAAMC,IAASD,EAAM;AAErB,KAAIE,IAAApB,EAAS,YAAT,QAAAoB,EAAkB,SAASD,OAAWE,IAAAvB,EAAU,YAAV,QAAAuB,EAAmB,SAASF,MAItEtB,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECyB,IAAY1B,KAAU,CAACZ,KAAY,CAACC;AAK1C,EAAAsC,EAAU,MAAM;AACd,QAAI,CAACD;AACH;AAEF,UAAME,IAAY,CAACN,MAAyB;;AAC1C,YAAMO,IAAQzB,EAAS;AACvB,UAAIkB,EAAM,QAAQ,YAAY,CAACO,KAAS,CAACC,EAAkBD,CAAK;AAC9D;AAEF,MAAA5B,EAAU,EAAK;AACf,YAAM8B,IAAS,SAAS;AACxB,OAAI,CAACA,KAAUA,MAAW,SAAS,QAAQF,EAAM,SAASE,CAAM,QAC9DP,IAAAtB,EAAU,YAAV,QAAAsB,EAAmB;AAAA,IAEvB;AACA,oBAAS,iBAAiB,WAAWI,CAAS,GAEvC,MAAM,SAAS,oBAAoB,WAAWA,CAAS;AAAA,EAChE,GAAG,CAACF,CAAS,CAAC;AAEd,QAAMM,IAAeb;AAAA,IACnB,CAACc,MAAe;AACd,MAAApC,EAAaoC,CAAI,GACjB/C,KAAA,QAAAA,EAAe,QAAW+C,GAAMlD;AAAA,IAClC;AAAA,IACA,CAACG,GAAcH,CAAK;AAAA,EAAA,GAGhBmD,IAAaf,EAAY,MAAM;AACnC,IAAAlB,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE;AAEL,SACE,gBAAAkC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAK1B;AAAA,QACL,OAAAlB;AAAA,QACA,UAAUR;AAAA,QACV,QAAQM;AAAA,QACR,UAAA0B;AAAA,QACA,UAAA9B;AAAA,QACA,cAAAC;AAAA,QACA,QAAAE;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,IAELsB,IACGwB;AAAA,wBACGC,GAAA,EAAW,SAASpC,GAAU,IAAIsB,GAAW,SAAS,KAAK,cAAY,IAAC,eAAa,IACnF,UAAA,CAACe,MACA,gBAAAJ,EAACK,MAAkB,aAAArB,GACjB,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKvB;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,YACL,GAAGN;AAAA,YACH,GAAG9B,GAAa,GAAG;AAAA,YACnB,GAAGE,GAAiB6D,CAAK;AAAA,UAAA;AAAA,UAE3B,eAAY;AAAA,UACZ,2BAAwB;AAAA,UACxB,MAAK;AAAA,UACL,cAAW;AAAA,UACX,cAAYnD;AAAA,UAEZ,UAAA,gBAAA+C,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAA;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,OAAO/C;AAAA,cACP,QAAAL;AAAA,cACA,UAAUyC;AAAA,cACV,YAAAE;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA,GAEJ,EAAA,CAEJ;AAAA,MACAnB;AAAA,IAAA,IAEF;AAAA,EAAA,GACN;AAEJ,CAAC;"}

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

@@ -1,69 +1,88 @@
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
-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 F = k.forwardRef(function(e, h) {
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+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 W = p.forwardRef(function(e, _) {
   const {
-    disabled: l,
-    readOnly: r,
+    disabled: o,
+    readOnly: l,
     required: t,
-    checked: o,
-    className: w,
-    id: _,
-    label: c,
-    labelPlacement: m,
-    size: f = "medium",
-    color: u = "primary",
-    helperText: p,
-    error: i,
-    ...x
-  } = e, n = v(_), N = (s) => {
-    var d;
-    if (r) {
-      s.preventDefault();
+    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, s, s.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", m && `smwb-toggle__wrapper_label-${m}`), children: [
-    c ? /* @__PURE__ */ a("label", { htmlFor: n, className: "smwb-toggle__label", children: c }) : 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": o,
-              "aria-invalid": i || void 0,
-              "aria-required": t || void 0,
-              role: "switch",
-              checked: o,
-              disabled: l,
-              readOnly: r,
-              required: t,
-              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 {
-  F as Toggle,
-  F as default
+  W as Toggle,
+  W as default
 };
 //# sourceMappingURL=toggle.js.map

package/dist/headless/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":";;;;;AAuBO,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":";;;;;;;AA6BO,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/headless/components/inputs/valueSlider/valueSlider.js

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

package/dist/headless/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":";;;AAkBA,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":";;;;AA+BA,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;"}