@smwb/ui-react 2.7.0 → 2.9.0

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

@@ -1,82 +1,92 @@
-import { jsx as h, jsxs as y } from "react/jsx-runtime";
+import { jsx as k, jsxs as y } from "react/jsx-runtime";
 import x from "react";
-import v from "clsx";
-import { Ripple as z } from "../../base/ripple/ripple.js";
-import { Icon as C } from "../../base/icon/icon.js";
-const F = x.forwardRef(
-  function(N, i) {
+import W from "clsx";
+import { Ripple as _ } from "../../base/ripple/ripple.js";
+import { resolveLinkRel as q, resolveLinkTarget as A } from "../../../utils/linkAttrs.js";
+import { Icon as F } from "../../base/icon/icon.js";
+const T = x.forwardRef(
+  function(N, c) {
     const {
-      label: e,
+      label: n,
       variant: $ = "contained",
-      icon: t,
-      iconProps: g = {},
-      href: l,
-      className: j,
-      disabled: n,
+      icon: o,
+      iconProps: j = {},
+      href: m,
+      target: v,
+      rel: B,
+      className: D,
+      disabled: r,
       children: a,
-      onMouseDown: o,
-      fullWidth: k,
-      rippleCenter: B,
-      disableRipple: D,
-      size: E = "medium",
-      colorTheme: _ = "primary",
-      color: r,
-      ...c
-    } = N, m = r != null ? r : _, p = x.useRef(null), d = (s) => {
-      o == null || o(s);
-    }, b = (s) => {
-      var R;
-      n || (R = p.current) == null || R.onRipple(s);
-    }, f = v(
+      onMouseDown: i,
+      // The button sets this on its root too; its own handler calls the caller's first.
+      onPointerDown: s,
+      fullWidth: E,
+      rippleCenter: L,
+      disableRipple: z,
+      size: C = "medium",
+      colorTheme: M = "primary",
+      color: l,
+      "data-testid": e,
+      ...p
+    } = N, f = l != null ? l : M, u = x.useRef(null), b = (t) => {
+      i == null || i(t);
+    }, d = (t) => {
+      var g;
+      s == null || s(t), r || (g = u.current) == null || g.onRipple(t);
+    }, w = W(
       "smwb-button",
       `smwb-${$}`,
-      `smwb-${E}`,
-      m === "primary" ? "smwb-primary" : `smwb-button_color-${m}`,
-      j,
+      `smwb-${C}`,
+      f === "primary" ? "smwb-primary" : `smwb-button_color-${f}`,
+      D,
       {
-        "smwb-disabled": n,
-        "smwb-full-width": k
+        "smwb-disabled": r,
+        "smwb-full-width": E
       }
-    ), u = !D && /* @__PURE__ */ h(z, { actionRef: p, center: B }), w = typeof t == "string" ? /* @__PURE__ */ h(C, { ...g, name: t }) : t;
-    return l ? /* @__PURE__ */ y(
-      "a",
-      {
-        "data-testid": "button-link",
-        ref: i,
-        className: f,
-        href: l,
-        target: "_blank",
-        rel: "noreferrer",
-        onMouseDown: d,
-        onPointerDown: b,
-        ...c,
-        children: [
-          t && w,
-          e || a,
-          u
-        ]
-      }
-    ) : /* @__PURE__ */ y(
+    ), R = !z && /* @__PURE__ */ k(_, { actionRef: u, center: L }), h = typeof o == "string" ? /* @__PURE__ */ k(F, { ...j, name: o }) : o;
+    if (m) {
+      const t = A(v);
+      return /* @__PURE__ */ y(
+        "a",
+        {
+          "data-testid": e != null ? e : "button-link",
+          ref: c,
+          className: w,
+          href: m,
+          target: t,
+          rel: q(B, t),
+          onMouseDown: b,
+          onPointerDown: d,
+          ...p,
+          children: [
+            o && h,
+            n || a,
+            R
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ y(
       "button",
       {
-        "data-testid": "button",
-        ref: i,
-        className: f,
-        onMouseDown: d,
-        onPointerDown: b,
-        disabled: !!n,
-        ...c,
+        "data-testid": e != null ? e : "button",
+        ref: c,
+        className: w,
+        onMouseDown: b,
+        onPointerDown: d,
+        disabled: !!r,
+        ...p,
         children: [
-          t && w,
-          e || a,
-          u
+          o && h,
+          n || a,
+          R
         ]
       }
     );
   }
 );
 export {
-  F as Button,
-  F as default
+  T as Button,
+  T as default
 };
 //# sourceMappingURL=button.js.map

package/dist/headless/components/inputs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент может рендериться как <a>.\n   */\n  href?: string;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      return (\n        <a\n          data-testid=\"button-link\"\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid=\"button\"\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","className","disabled","children","onMouseDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","jsxs"],"mappings":";;;;;AAwEO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA,MACb,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,GAAGC;AAAA,IAAA,IACDjB,GACEkB,IAAQF,KAAA,OAAAA,IAAaD,GACrBI,IAAYpB,EAAM,OAAyB,IAAI,GAE/CqB,IAAc,CAACC,MAAmE;AACtF,MAAAX,KAAA,QAAAA,EAAkBW;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAKb,MACHe,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQtB,CAAO;AAAA,MACf,QAAQW,CAAI;AAAA,MACZI,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEX;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBG;AAAA,MAAA;AAAA,IACrB,GAGIe,IAAgB,CAACb,KAAiB,gBAAAc,EAACC,KAAO,WAAWT,GAAW,QAAQP,GAAc,GACtFiB,IAAc,OAAOzB,KAAS,WAAW,gBAAAuB,EAACG,KAAM,GAAGzB,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,WAAIE,IAEA,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAA9B;AAAA,QACA,WAAWuB;AAAA,QACX,MAAAlB;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,aAAAc;AAAA,QACA,eAAAE;AAAA,QACC,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAb,KAAQyB;AAAA,UACR3B,KAAgBO;AAAA,UAChBiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAA9B;AAAA,QACA,WAAWuB;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAACd;AAAA,QACX,GAAGS;AAAA,QAEH,UAAA;AAAA,UAAAb,KAAQyB;AAAA,UACR3B,KAAgBO;AAAA,UAChBiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"button.js","sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент рендерится как <a>.\n   */\n  href?: string;\n\n  /**\n   * Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\n   * attribute out, so the link opens in place, like an internal one; an empty string does the same, and\n   * any other string is used as is.\n   */\n  target?: string | null;\n\n  /**\n   * The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\n   * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      target,\n      rel,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      // The button sets this on its root too; its own handler calls the caller's first.\n      onPointerDown: onPointerDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      \"data-testid\": dataTestId,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onPointerDownProp?.(event);\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      const linkTarget = resolveLinkTarget(target);\n      return (\n        <a\n          data-testid={dataTestId ?? \"button-link\"}\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target={linkTarget}\n          rel={resolveLinkRel(rel, linkTarget)}\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid={dataTestId ?? \"button\"}\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","target","rel","className","disabled","children","onMouseDownProp","onPointerDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","dataTestId","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","linkTarget","resolveLinkTarget","jsxs","resolveLinkRel"],"mappings":";;;;;;AA0FO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA;AAAA,MAEb,eAAeC;AAAA,MACf,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,eAAeC;AAAA,MACf,GAAGC;AAAA,IAAA,IACDrB,GACEsB,IAAQH,KAAA,OAAAA,IAAaD,GACrBK,IAAYxB,EAAM,OAAyB,IAAI,GAE/CyB,IAAc,CAACC,MAAmE;AACtF,MAAAb,KAAA,QAAAA,EAAkBa;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAAZ,KAAA,QAAAA,EAAoBY,IACff,MACHiB,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQ1B,CAAO;AAAA,MACf,QAAQc,CAAI;AAAA,MACZK,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEb;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBI;AAAA,MAAA;AAAA,IACrB,GAGIgB,IAAgB,CAACd,KAAiB,gBAAAe,EAACC,KAAO,WAAWT,GAAW,QAAQR,GAAc,GACtFkB,IAAc,OAAO7B,KAAS,WAAW,gBAAA2B,EAACG,KAAM,GAAG7B,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,QAAIE,GAAM;AACR,YAAM6B,IAAaC,EAAkB7B,CAAM;AAC3C,aACE,gBAAA8B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAajB,KAAA,OAAAA,IAAc;AAAA,UAC3B,KAAAnB;AAAA,UACA,WAAW2B;AAAA,UACX,MAAAtB;AAAA,UACA,QAAQ6B;AAAA,UACR,KAAKG,EAAe9B,GAAK2B,CAAU;AAAA,UACnC,aAAAX;AAAA,UACA,eAAAE;AAAA,UACC,GAAGL;AAAA,UAEH,UAAA;AAAA,YAAAjB,KAAQ6B;AAAA,YACR/B,KAAgBS;AAAA,YAChBmB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAajB,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAnB;AAAA,QACA,WAAW2B;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAAChB;AAAA,QACX,GAAGW;AAAA,QAEH,UAAA;AAAA,UAAAjB,KAAQ6B;AAAA,UACR/B,KAAgBS;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/headless/components/inputs/buttonGroups/buttonGroup.js

@@ -1,52 +1,56 @@
-import { jsx as N } from "react/jsx-runtime";
+import { jsx as x } from "react/jsx-runtime";
 import r from "react";
-import T from "clsx";
-const R = r.forwardRef(function(u, c) {
+import b from "clsx";
+const _ = r.forwardRef(function(h, w) {
+  var n;
   const {
-    className: f,
-    children: b,
-    variant: e = "contained",
-    size: h = "medium",
-    orientation: t = "horizontal",
-    colorTheme: w = "primary",
-    color: g,
-    fullWidth: l = !1,
-    disabled: s = !1,
-    ...v
-  } = u;
-  return /* @__PURE__ */ N(
+    className: g,
+    children: v,
+    variant: t = "contained",
+    size: z = "medium",
+    orientation: s = "horizontal",
+    colorTheme: N = "primary",
+    color: T,
+    fullWidth: a = !1,
+    disabled: l = !1,
+    "data-testid": W = "button-group",
+    ...i
+  } = h;
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: c,
-      className: T(
+      ref: w,
+      className: b(
         "smwb-button-group",
-        f,
+        g,
+        `smwb-${s}`,
         `smwb-${t}`,
-        `smwb-${e}`,
-        l && "smwb-full-width",
-        s
+        a && "smwb-full-width",
+        l
       ),
-      role: "group",
-      "data-testid": "button-group",
-      ...v,
-      children: r.Children.map(b, (z) => {
-        var a, i, n, p, m, d;
-        const o = z;
+      "data-testid": W,
+      ...i,
+      role: (n = i.role) != null ? n : "group",
+      children: r.Children.map(v, (e) => {
+        var p, m, d, u, c, f;
+        if (!r.isValidElement(e))
+          return e;
+        const o = e;
         return r.cloneElement(o, {
-          className: "smwb-button-group__grouped",
-          fullWidth: t === "vertical" || ((a = o.props.fullWidth) != null ? a : l),
-          variant: (i = o.props.variant) != null ? i : e,
-          size: (n = o.props.size) != null ? n : h,
-          disabled: (p = o.props.disabled) != null ? p : s,
-          colorTheme: (m = o.props.colorTheme) != null ? m : w,
-          color: (d = o.props.color) != null ? d : g
+          className: b("smwb-button-group__grouped", o.props.className),
+          fullWidth: (p = o.props.fullWidth) != null ? p : s === "vertical" || a,
+          variant: (m = o.props.variant) != null ? m : t,
+          size: (d = o.props.size) != null ? d : z,
+          disabled: (u = o.props.disabled) != null ? u : l,
+          colorTheme: (c = o.props.colorTheme) != null ? c : N,
+          color: (f = o.props.color) != null ? f : T
         });
       })
     }
   );
 });
 export {
-  R as ButtonGroup,
-  R as default
+  _ as ButtonGroup,
+  _ as default
 };
 //# sourceMappingURL=buttonGroup.js.map

package/dist/headless/components/inputs/buttonGroups/buttonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.js","sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { ButtonProps } from \"../button\";\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n}\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const {\n    className,\n    children,\n    variant = \"contained\",\n    size = \"medium\",\n    orientation = \"horizontal\",\n    colorTheme = \"primary\",\n    color,\n    fullWidth = false,\n    disabled = false,\n    ...rest\n  } = props;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"smwb-button-group\",\n        className,\n        `smwb-${orientation}`,\n        `smwb-${variant}`,\n        fullWidth && \"smwb-full-width\",\n        disabled\n      )}\n      role=\"group\"\n      data-testid=\"button-group\"\n      {...rest}\n    >\n      {React.Children.map(children, (child) => {\n        const element = child as React.ReactElement<ButtonProps>;\n\n        return React.cloneElement(element, {\n          className: \"smwb-button-group__grouped\",\n          fullWidth: orientation === \"vertical\" || (element.props.fullWidth ?? fullWidth),\n          variant: element.props.variant ?? variant,\n          size: element.props.size ?? size,\n          disabled: element.props.disabled ?? disabled,\n          colorTheme: element.props.colorTheme ?? colorTheme,\n          color: element.props.color ?? color,\n        });\n      })}\n    </div>\n  );\n});\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","React","props","ref","className","children","variant","size","orientation","colorTheme","color","fullWidth","disabled","rest","jsx","cn","child","element","_a","_b","_c","_d","_e","_f"],"mappings":";;;AAgBO,MAAMA,IAAcC,EAAM,WAAW,SAC1CC,GACAC,GACA;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDX;AAEJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,WAAWY;AAAA,QACT;AAAA,QACAX;AAAA,QACA,QAAQI,CAAW;AAAA,QACnB,QAAQF,CAAO;AAAA,QACfK,KAAa;AAAA,QACbC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,eAAY;AAAA,MACX,GAAGC;AAAA,MAEH,UAAAZ,EAAM,SAAS,IAAII,GAAU,CAACW,MAAU;;AACvC,cAAMC,IAAUD;AAEhB,eAAOf,EAAM,aAAagB,GAAS;AAAA,UACjC,WAAW;AAAA,UACX,WAAWT,MAAgB,gBAAeU,IAAAD,EAAQ,MAAM,cAAd,OAAAC,IAA2BP;AAAA,UACrE,UAASQ,IAAAF,EAAQ,MAAM,YAAd,OAAAE,IAAyBb;AAAA,UAClC,OAAMc,IAAAH,EAAQ,MAAM,SAAd,OAAAG,IAAsBb;AAAA,UAC5B,WAAUc,IAAAJ,EAAQ,MAAM,aAAd,OAAAI,IAA0BT;AAAA,UACpC,aAAYU,IAAAL,EAAQ,MAAM,eAAd,OAAAK,IAA4Bb;AAAA,UACxC,QAAOc,IAAAN,EAAQ,MAAM,UAAd,OAAAM,IAAuBb;AAAA,QAAA,CAC/B;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"buttonGroup.js","sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { ButtonProps } from \"../button\";\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Test id of the root `<div>`; `button-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const {\n    className,\n    children,\n    variant = \"contained\",\n    size = \"medium\",\n    orientation = \"horizontal\",\n    colorTheme = \"primary\",\n    color,\n    fullWidth = false,\n    disabled = false,\n    \"data-testid\": dataTestId = \"button-group\",\n    ...rest\n  } = props;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"smwb-button-group\",\n        className,\n        `smwb-${orientation}`,\n        `smwb-${variant}`,\n        fullWidth && \"smwb-full-width\",\n        disabled\n      )}\n      data-testid={dataTestId}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"group\"}\n    >\n      {React.Children.map(children, (child) => {\n        // A child left out, such as `{show && <Button />}`, is null here: nothing to group.\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n        const element = child as React.ReactElement<ButtonProps>;\n\n        // The group's props are defaults: a button's own win, and its own class\n        // adds to the group's.\n        return React.cloneElement(element, {\n          className: cn(\"smwb-button-group__grouped\", element.props.className),\n          fullWidth: element.props.fullWidth ?? (orientation === \"vertical\" || fullWidth),\n          variant: element.props.variant ?? variant,\n          size: element.props.size ?? size,\n          disabled: element.props.disabled ?? disabled,\n          colorTheme: element.props.colorTheme ?? colorTheme,\n          color: element.props.color ?? color,\n        });\n      })}\n    </div>\n  );\n});\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","React","props","ref","className","children","variant","size","orientation","colorTheme","color","fullWidth","disabled","dataTestId","rest","jsx","cn","_a","child","element","_b","_c","_d","_e","_f"],"mappings":";;;AAkBO,MAAMA,IAAcC,EAAM,WAAW,SAC1CC,GACAC,GACA;;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,IACDZ;AAEJ,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWa;AAAA,QACT;AAAA,QACAZ;AAAA,QACA,QAAQI,CAAW;AAAA,QACnB,QAAQF,CAAO;AAAA,QACfK,KAAa;AAAA,QACbC;AAAA,MAAA;AAAA,MAEF,eAAaC;AAAA,MACZ,GAAGC;AAAA,MAEJ,OAAMG,IAAAH,EAAK,SAAL,OAAAG,IAAa;AAAA,MAElB,UAAAhB,EAAM,SAAS,IAAII,GAAU,CAACa,MAAU;;AAEvC,YAAI,CAACjB,EAAM,eAAeiB,CAAK;AAC7B,iBAAOA;AAET,cAAMC,IAAUD;AAIhB,eAAOjB,EAAM,aAAakB,GAAS;AAAA,UACjC,WAAWH,EAAG,8BAA8BG,EAAQ,MAAM,SAAS;AAAA,UACnE,YAAWF,IAAAE,EAAQ,MAAM,cAAd,OAAAF,IAA4BT,MAAgB,cAAcG;AAAA,UACrE,UAASS,IAAAD,EAAQ,MAAM,YAAd,OAAAC,IAAyBd;AAAA,UAClC,OAAMe,IAAAF,EAAQ,MAAM,SAAd,OAAAE,IAAsBd;AAAA,UAC5B,WAAUe,IAAAH,EAAQ,MAAM,aAAd,OAAAG,IAA0BV;AAAA,UACpC,aAAYW,IAAAJ,EAAQ,MAAM,eAAd,OAAAI,IAA4Bd;AAAA,UACxC,QAAOe,IAAAL,EAAQ,MAAM,UAAd,OAAAK,IAAuBd;AAAA,QAAA,CAC/B;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -1,73 +1,98 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import v from "react";
-import b from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-import { useId as y } from "../../../hooks/useId.js";
-import { TextFieldWrapper as z } from "../textField/textFieldWrapper.js";
-const $ = v.forwardRef(function(m, h) {
+import { jsx as c, jsxs as z } from "react/jsx-runtime";
+import x from "react";
+import u from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+import { cancelToggle as F, forgetCancelledToggle as I } from "../../../utils/readOnlyToggle.js";
+import { useHelperText as j } from "../../../hooks/useHelperText.js";
+import { useId as q } from "../../../hooks/useId.js";
+import { useForkRef as $ } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as D } from "../../../hooks/useSafeLayoutEffect.js";
+import { TextFieldWrapper as E } from "../textField/textFieldWrapper.js";
+const Q = x.forwardRef(function(e, _) {
   const {
-    label: o,
-    disabled: r,
-    readOnly: c,
-    required: t,
-    name: p,
-    id: x,
+    label: m,
+    disabled: o,
+    readOnly: i,
+    required: s,
+    name: y,
+    id: g,
     indeterminate: a,
-    className: w,
-    size: k = "medium",
-    color: _ = "primary",
-    onChange: s,
-    helperText: f,
-    error: n,
-    ...u
-  } = m, l = y(x), N = (i) => {
-    if (c) {
-      i.preventDefault();
+    className: p,
+    size: N = "medium",
+    color: C = "primary",
+    onChange: t,
+    helperText: l,
+    error: d,
+    "aria-describedby": T,
+    ...b
+  } = e, h = q(g), f = j(l, { describedBy: T }), n = x.useRef(null), B = $(_, n);
+  D(() => {
+    n.current && (n.current.indeterminate = !!a);
+  });
+  const R = (r) => {
+    if (r.target.indeterminate = !!a, i) {
+      I(r, e.checked);
       return;
     }
-    s == null || s(i, i.target.checked, m);
+    t == null || t(r, r.target.checked, e);
+  }, v = (r) => {
+    var k;
+    (k = e.onClick) == null || k.call(e, r), i && F(r, e.checked);
   };
-  return /* @__PURE__ */ e(z, { helperText: f, disabled: r, error: n, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g(
-    "label",
+  return /* @__PURE__ */ c(
+    E,
     {
-      htmlFor: l,
-      className: b(
-        "smwb-checkbox__wrapper",
-        `smwb-checkbox_size-${k}`,
-        `smwb-checkbox_color-${_}`,
-        w,
+      helperText: l,
+      helperTextId: f.id,
+      disabled: o,
+      error: d,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ z(
+        "label",
         {
-          "smwb-disabled": r,
-          "smwb-readonly": c,
-          "smwb-indeterminate": a
+          htmlFor: h,
+          className: u(
+            "smwb-checkbox__wrapper",
+            `smwb-checkbox_size-${N}`,
+            `smwb-checkbox_color-${C}`,
+            p,
+            {
+              "smwb-disabled": o,
+              "smwb-readonly": i,
+              "smwb-indeterminate": a
+            }
+          ),
+          children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                type: "checkbox",
+                id: h,
+                name: y,
+                className: "smwb-checkbox__input",
+                disabled: o,
+                readOnly: i,
+                required: s,
+                "aria-invalid": d || void 0,
+                "aria-required": s || void 0,
+                "aria-describedby": f.describedBy,
+                ref: B,
+                ...b,
+                "aria-readonly": i || b["aria-readonly"],
+                onChange: R,
+                onClick: v
+              }
+            ),
+            /* @__PURE__ */ c("span", { className: u("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ c(w, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ c(w, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
+            m && /* @__PURE__ */ c("span", { className: "smwb-checkbox__label", children: m })
+          ]
         }
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            id: l,
-            name: p,
-            className: "smwb-checkbox__input",
-            disabled: r,
-            readOnly: c,
-            required: t,
-            "aria-invalid": n || void 0,
-            "aria-required": t || void 0,
-            ref: h,
-            ...u,
-            onChange: N
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: b("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ e(d, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ e(d, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
-        o && /* @__PURE__ */ e("span", { className: "smwb-checkbox__label", children: o })
-      ]
+      )
     }
-  ) });
+  );
 });
 export {
-  $ as Checkbox,
-  $ as default
+  Q as Checkbox,
+  Q as default
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/headless/components/inputs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\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    onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          ref={ref}\n          {...args}\n          onChange={handleChange}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AA0BO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAK;AACtG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACEgB,IAAKC,EAAMV,CAAM,GAEjBW,IAAe,CAACC,MAA2C;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAP,KAAA,QAAAA,EAAWO,GAAGA,EAAE,OAAO,SAASnB;AAAA,EAClC;AAEA,2BACGoB,GAAA,EAAiB,YAAAP,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM;AAAA,QACT;AAAA,QACA,sBAAsBZ,CAAI;AAAA,QAC1B,uBAAuBC,CAAK;AAAA,QAC5BF;AAAA,QACA;AAAA,UACE,iBAAiBN;AAAA,UACjB,iBAAiBC;AAAA,UACjB,sBAAsBI;AAAA,QAAA;AAAA,MACxB;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAAP;AAAA,YACA,MAAAV;AAAA,YACA,WAAU;AAAA,YACV,UAAAH;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,gBAAcS,KAAS;AAAA,YACvB,iBAAeT,KAAY;AAAA,YAC3B,KAAAJ;AAAA,YACC,GAAGc;AAAA,YACJ,UAAUG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAK,EAAC,QAAA,EAAK,WAAWD,EAAG,sBAAsB,EAAE,sBAAsBd,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAe,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,QACCtB,KAAS,gBAAAqB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAArB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5D;AAEJ,CAAC;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { cancelToggle, forgetCancelledToggle } from \"../../../utils/readOnlyToggle\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useHelperText } from \"../../../hooks/useHelperText\";\nimport { useId } from \"../../../hooks/useId\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the checkbox 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  name?: string;\n  id?: string;\n  /**\n   * Shows the checkbox as partly checked, as for a \"select all\" over a partial selection: drawn with a dash and\n   * announced as \"mixed\" by screen readers, whatever `checked` is. A click does not clear it: the click toggles\n   * `checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns\n   * false.\n   */\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, forwardedRef) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\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 inputRef = React.useRef<HTMLInputElement>(null);\n  const ref = useForkRef(forwardedRef, inputRef);\n  // `indeterminate` is a DOM property with no attribute, so no markup carries it:\n  // set it on the input after every render.\n  useSafeLayoutEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = Boolean(indeterminate);\n  });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // A click clears the input's indeterminate property; the prop still decides it.\n    e.target.indeterminate = Boolean(indeterminate);\n    if (readOnly) {\n      forgetCancelledToggle(e, props.checked);\n      return;\n    }\n    onChange?.(e, e.target.checked, props);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    props.onClick?.(e);\n    if (readOnly) cancelToggle(e, props.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      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={helper.describedBy}\n          ref={ref}\n          {...args}\n          aria-readonly={readOnly || args[\"aria-readonly\"]}\n          onChange={handleChange}\n          onClick={handleClick}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","forwardedRef","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","ariaDescribedBy","args","id","useId","helper","useHelperText","inputRef","ref","useForkRef","useSafeLayoutEffect","handleChange","e","forgetCancelledToggle","handleClick","_a","cancelToggle","jsx","TextFieldWrapper","jsxs","cn","Icon"],"mappings":";;;;;;;;;;AAwCO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAc;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB,GACEiB,IAAKC,EAAMX,CAAM,GACjBY,IAASC,EAAcP,GAAY,EAAE,aAAaE,GAAiB,GAEnEM,IAAWtB,EAAM,OAAyB,IAAI,GAC9CuB,IAAMC,EAAWtB,GAAcoB,CAAQ;AAG7C,EAAAG,EAAoB,MAAM;AACxB,IAAIH,EAAS,YAASA,EAAS,QAAQ,gBAAgB,EAAQb;AAAA,EACjE,CAAC;AAED,QAAMiB,IAAe,CAACC,MAA2C;AAG/D,QADAA,EAAE,OAAO,gBAAgB,EAAQlB,GAC7BJ,GAAU;AACZ,MAAAuB,EAAsBD,GAAG1B,EAAM,OAAO;AACtC;AAAA,IACF;AACA,IAAAY,KAAA,QAAAA,EAAWc,GAAGA,EAAE,OAAO,SAAS1B;AAAA,EAClC,GAEM4B,IAAc,CAACF,MAA0C;;AAC7D,KAAAG,IAAA7B,EAAM,YAAN,QAAA6B,EAAA,KAAA7B,GAAgB0B,IACZtB,KAAU0B,EAAaJ,GAAG1B,EAAM,OAAO;AAAA,EAC7C;AAEA,SACE,gBAAA+B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAnB;AAAA,MACA,cAAcM,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAW;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAShB;AAAA,UACT,WAAWiB;AAAA,YACT;AAAA,YACA,sBAAsBxB,CAAI;AAAA,YAC1B,uBAAuBC,CAAK;AAAA,YAC5BF;AAAA,YACA;AAAA,cACE,iBAAiBN;AAAA,cACjB,iBAAiBC;AAAA,cACjB,sBAAsBI;AAAA,YAAA;AAAA,UACxB;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAuB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAAd;AAAA,gBACA,MAAAX;AAAA,gBACA,WAAU;AAAA,gBACV,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,UAAAC;AAAA,gBACA,gBAAcS,KAAS;AAAA,gBACvB,iBAAeT,KAAY;AAAA,gBAC3B,oBAAkBc,EAAO;AAAA,gBACzB,KAAAG;AAAA,gBACC,GAAGN;AAAA,gBACJ,iBAAeZ,KAAYY,EAAK,eAAe;AAAA,gBAC/C,UAAUS;AAAA,gBACV,SAASG;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX,gBAAAG,EAAC,QAAA,EAAK,WAAWG,EAAG,sBAAsB,EAAE,sBAAsB1B,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAuB,EAACI,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,YACCjC,KAAS,gBAAA6B,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA7B,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN,CAAC;"}