@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/inputs/fileDrop/fileDrop.js

@@ -1,13 +1,14 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/fileDrop/fileDrop.entry.css';/* empty css                                                           */
+import '../../../assets/styles/less/components/fileDrop/fileDrop.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
 import g, { forwardRef as P } from "react";
 import { useDropzone as R } from "../../../hooks/useDropzone.js";
 import { PreviewWrapper as z } from "./previewWrapper.js";
 import C from "clsx";
-const U = P(function(a, n) {
+const W = P(function(a, n) {
   const {
-    preview: d,
-    previewCols: m = 3,
+    preview: m,
+    previewCols: d = 3,
     galleryItemSize: c = 100,
     onDrop: f,
     label: s = "",
@@ -16,23 +17,23 @@ const U = P(function(a, n) {
     disabled: e,
     error: o,
     ...u
-  } = a, [l, i] = g.useState([]), v = (t) => {
-    i((x) => [...x, ...t]), f(t);
+  } = a, [i, l] = g.useState([]), v = (t) => {
+    l((x) => [...x, ...t]), f(t);
   }, { getRootProps: h, getInputProps: D } = R({
     onDrop: v,
     disabled: e,
     ...u
   }), N = () => {
-    i([]);
+    l([]);
   }, _ = C("smwb-file-drop", { "smwb-disabled": e, "smwb-error": !!o }, b);
   return /* @__PURE__ */ p("div", { ref: n, className: _, "data-testid": "file-drop", children: [
-    l.length > 0 ? /* @__PURE__ */ r(
+    i.length > 0 ? /* @__PURE__ */ r(
       z,
       {
-        preview: d,
-        files: l,
+        preview: m,
+        files: i,
         handleRemoveAll: N,
-        previewCols: m,
+        previewCols: d,
         galleryItemSize: c,
         previewClassName: w
       }
@@ -55,6 +56,6 @@ const U = P(function(a, n) {
   ] });
 });
 export {
-  U as FileDrop
+  W as FileDrop
 };
 //# sourceMappingURL=fileDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fileDrop.js","sources":["../../../../src/components/inputs/fileDrop/fileDrop.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport { PreviewWrapper } from \"./previewWrapper\";\nimport cn from \"clsx\";\n\nexport interface FileUploadProps extends DropzoneOptions {\n  preview?: boolean;\n  previewCols?: number;\n  galleryItemSize?: number;\n  onDrop: (files: File[]) => void;\n  label?: string;\n  className?: string;\n  previewClassName?: string;\n  disabled?: boolean;\n  /** Validation message rendered below the drop zone. */\n  error?: string;\n}\n\nexport const FileDrop = forwardRef<HTMLDivElement, FileUploadProps>(function FileDrop(props, ref) {\n  const {\n    preview,\n    previewCols = 3,\n    galleryItemSize = 100,\n    onDrop: onDropProp,\n    label = \"\",\n    className,\n    previewClassName,\n    disabled,\n    error,\n    ...dropzoneOptions\n  } = props;\n\n  const [files, setFiles] = React.useState<File[]>([]);\n\n  const onDrop = (acceptedFiles: File[]) => {\n    setFiles((prev) => [...prev, ...acceptedFiles]);\n    onDropProp(acceptedFiles);\n  };\n\n  const { getRootProps, getInputProps } = useDropzone({\n    onDrop,\n    disabled,\n    ...dropzoneOptions,\n  });\n\n  const handleRemoveAll = () => {\n    setFiles([]);\n  };\n\n  const wrapperClasses = cn(\"smwb-file-drop\", { \"smwb-disabled\": disabled, \"smwb-error\": !!error }, className);\n\n  return (\n    <div ref={ref} className={wrapperClasses} data-testid=\"file-drop\">\n      {files.length > 0 ? (\n        <PreviewWrapper\n          preview={preview}\n          files={files}\n          handleRemoveAll={handleRemoveAll}\n          previewCols={previewCols}\n          galleryItemSize={galleryItemSize}\n          previewClassName={previewClassName}\n        />\n      ) : (\n        <div\n          className=\"smwb-file-drop__input\"\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          aria-label={label || \"Upload files\"}\n          {...getRootProps()}\n        >\n          <div className=\"smwb-file-drop__input-text\">{label}</div>\n          <input {...getInputProps()} />\n        </div>\n      )}\n      {error ? (\n        <span className=\"smwb-file-drop__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileDrop;\n"],"names":["FileDrop","forwardRef","props","ref","preview","previewCols","galleryItemSize","onDropProp","label","className","previewClassName","disabled","error","dropzoneOptions","files","setFiles","React","onDrop","acceptedFiles","prev","getRootProps","getInputProps","useDropzone","handleRemoveAll","wrapperClasses","cn","jsx","PreviewWrapper","jsxs"],"mappings":";;;;;;AAmBO,MAAMA,IAAWC,EAA4C,SAAkBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,QAAQC;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDX,GAEE,CAACY,GAAOC,CAAQ,IAAIC,EAAM,SAAiB,CAAA,CAAE,GAE7CC,IAAS,CAACC,MAA0B;AACxC,IAAAH,EAAS,CAACI,MAAS,CAAC,GAAGA,GAAM,GAAGD,CAAa,CAAC,GAC9CX,EAAWW,CAAa;AAAA,EAC1B,GAEM,EAAE,cAAAE,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,QAAAL;AAAA,IACA,UAAAN;AAAA,IACA,GAAGE;AAAA,EAAA,CACJ,GAEKU,IAAkB,MAAM;AAC5B,IAAAR,EAAS,CAAA,CAAE;AAAA,EACb,GAEMS,IAAiBC,EAAG,kBAAkB,EAAE,iBAAiBd,GAAU,cAAc,CAAC,CAACC,EAAA,GAASH,CAAS;AAE3G,2BACG,OAAA,EAAI,KAAAN,GAAU,WAAWqB,GAAgB,eAAY,aACnD,UAAA;AAAA,IAAAV,EAAM,SAAS,IACd,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAvB;AAAA,QACA,OAAAU;AAAA,QACA,iBAAAS;AAAA,QACA,aAAAlB;AAAA,QACA,iBAAAC;AAAA,QACA,kBAAAI;AAAA,MAAA;AAAA,IAAA,IAGF,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAUjB,IAAW,KAAK;AAAA,QAC1B,iBAAeA,KAAY;AAAA,QAC3B,cAAYH,KAAS;AAAA,QACpB,GAAGY,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAlB,GAAM;AAAA,UACnD,gBAAAkB,EAAC,SAAA,EAAO,GAAGL,IAAc,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/BT,sBACE,QAAA,EAAK,WAAU,yBAAwB,MAAK,SAC1C,aACH,IACE;AAAA,EAAA,GACN;AAEJ,CAAC;"}
+{"version":3,"file":"fileDrop.js","sources":["../../../../src/components/inputs/fileDrop/fileDrop.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport { PreviewWrapper } from \"./previewWrapper\";\nimport cn from \"clsx\";\n\nexport interface FileUploadProps extends DropzoneOptions {\n  preview?: boolean;\n  previewCols?: number;\n  galleryItemSize?: number;\n  onDrop: (files: File[]) => void;\n  label?: string;\n  className?: string;\n  previewClassName?: string;\n  disabled?: boolean;\n  /** Validation message rendered below the drop zone. */\n  error?: string;\n}\n\nexport const FileDrop = forwardRef<HTMLDivElement, FileUploadProps>(function FileDrop(props, ref) {\n  const {\n    preview,\n    previewCols = 3,\n    galleryItemSize = 100,\n    onDrop: onDropProp,\n    label = \"\",\n    className,\n    previewClassName,\n    disabled,\n    error,\n    ...dropzoneOptions\n  } = props;\n\n  const [files, setFiles] = React.useState<File[]>([]);\n\n  const onDrop = (acceptedFiles: File[]) => {\n    setFiles((prev) => [...prev, ...acceptedFiles]);\n    onDropProp(acceptedFiles);\n  };\n\n  const { getRootProps, getInputProps } = useDropzone({\n    onDrop,\n    disabled,\n    ...dropzoneOptions,\n  });\n\n  const handleRemoveAll = () => {\n    setFiles([]);\n  };\n\n  const wrapperClasses = cn(\"smwb-file-drop\", { \"smwb-disabled\": disabled, \"smwb-error\": !!error }, className);\n\n  return (\n    <div ref={ref} className={wrapperClasses} data-testid=\"file-drop\">\n      {files.length > 0 ? (\n        <PreviewWrapper\n          preview={preview}\n          files={files}\n          handleRemoveAll={handleRemoveAll}\n          previewCols={previewCols}\n          galleryItemSize={galleryItemSize}\n          previewClassName={previewClassName}\n        />\n      ) : (\n        <div\n          className=\"smwb-file-drop__input\"\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          aria-label={label || \"Upload files\"}\n          {...getRootProps()}\n        >\n          <div className=\"smwb-file-drop__input-text\">{label}</div>\n          <input {...getInputProps()} />\n        </div>\n      )}\n      {error ? (\n        <span className=\"smwb-file-drop__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileDrop;\n"],"names":["FileDrop","forwardRef","props","ref","preview","previewCols","galleryItemSize","onDropProp","label","className","previewClassName","disabled","error","dropzoneOptions","files","setFiles","React","onDrop","acceptedFiles","prev","getRootProps","getInputProps","useDropzone","handleRemoveAll","wrapperClasses","cn","jsx","PreviewWrapper","jsxs"],"mappings":";;;;;;;AAoBO,MAAMA,IAAWC,EAA4C,SAAkBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,QAAQC;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDX,GAEE,CAACY,GAAOC,CAAQ,IAAIC,EAAM,SAAiB,CAAA,CAAE,GAE7CC,IAAS,CAACC,MAA0B;AACxC,IAAAH,EAAS,CAACI,MAAS,CAAC,GAAGA,GAAM,GAAGD,CAAa,CAAC,GAC9CX,EAAWW,CAAa;AAAA,EAC1B,GAEM,EAAE,cAAAE,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,QAAAL;AAAA,IACA,UAAAN;AAAA,IACA,GAAGE;AAAA,EAAA,CACJ,GAEKU,IAAkB,MAAM;AAC5B,IAAAR,EAAS,CAAA,CAAE;AAAA,EACb,GAEMS,IAAiBC,EAAG,kBAAkB,EAAE,iBAAiBd,GAAU,cAAc,CAAC,CAACC,EAAA,GAASH,CAAS;AAE3G,2BACG,OAAA,EAAI,KAAAN,GAAU,WAAWqB,GAAgB,eAAY,aACnD,UAAA;AAAA,IAAAV,EAAM,SAAS,IACd,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAvB;AAAA,QACA,OAAAU;AAAA,QACA,iBAAAS;AAAA,QACA,aAAAlB;AAAA,QACA,iBAAAC;AAAA,QACA,kBAAAI;AAAA,MAAA;AAAA,IAAA,IAGF,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAUjB,IAAW,KAAK;AAAA,QAC1B,iBAAeA,KAAY;AAAA,QAC3B,cAAYH,KAAS;AAAA,QACpB,GAAGY,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAlB,GAAM;AAAA,UACnD,gBAAAkB,EAAC,SAAA,EAAO,GAAGL,IAAc,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/BT,sBACE,QAAA,EAAK,WAAU,yBAAwB,MAAK,SAC1C,aACH,IACE;AAAA,EAAA,GACN;AAEJ,CAAC;"}

package/dist/components/inputs/fileInput/fileInput.js

@@ -1,9 +1,10 @@
 import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/fileInput/fileInput.entry.css';/* empty css                                                             */
+import '../../../assets/styles/less/components/fileInput/fileInput.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
 import { forwardRef as x } from "react";
 import { useDropzone as D } from "../../../hooks/useDropzone.js";
 import p from "clsx";
-const R = x(function(a, m) {
+const _ = x(function(a, m) {
   const { label: c, onClick: o, onFilesSelected: e, className: u, buttonClassName: d, disabled: s, error: i, ...t } = a, { getRootProps: f, getInputProps: b } = D({
     ...t,
     disabled: s,
@@ -30,6 +31,6 @@ const R = x(function(a, m) {
   );
 });
 export {
-  R as FileInput
+  _ as FileInput
 };
 //# sourceMappingURL=fileInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fileInput.js","sources":["../../../../src/components/inputs/fileInput/fileInput.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport cn from \"clsx\";\n\nexport interface FileInputProps extends DropzoneOptions {\n  label?: string;\n  className?: string;\n  buttonClassName?: string;\n  disabled?: boolean;\n  /** Validation message shown below the control. */\n  error?: string;\n  /** Fired with the accepted files when the user picks them. */\n  onFilesSelected?: (files: File[]) => void;\n  /** @deprecated optional click passthrough on the trigger button. */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const FileInput = forwardRef<HTMLDivElement, FileInputProps>(function FileInput(props, ref) {\n  const { label, onClick, onFilesSelected, className, buttonClassName, disabled, error, ...dropzoneOptions } = props;\n\n  const { getRootProps, getInputProps } = useDropzone({\n    ...dropzoneOptions,\n    disabled,\n    onDropAccepted: (accepted, event) => {\n      onFilesSelected?.(accepted);\n      dropzoneOptions.onDropAccepted?.(accepted, event);\n    },\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-file-input\", { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"file-input\"\n      {...getRootProps()}\n    >\n      <button type=\"button\" className={cn(buttonClassName)} disabled={disabled} onClick={handleClick}>\n        {label}\n      </button>\n      <input {...getInputProps()} />\n      {error ? (\n        <span className=\"smwb-file-input__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileInput;\n"],"names":["FileInput","forwardRef","props","ref","label","onClick","onFilesSelected","className","buttonClassName","disabled","error","dropzoneOptions","getRootProps","getInputProps","useDropzone","accepted","event","_a","handleClick","e","jsxs","cn","jsx"],"mappings":";;;;;AAkBO,MAAMA,IAAYC,EAA2C,SAAmBC,GAAOC,GAAK;AACjG,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,GAAiB,UAAAC,GAAU,OAAAC,GAAO,GAAGC,EAAA,IAAoBT,GAEvG,EAAE,cAAAU,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,GAAGH;AAAA,IACH,UAAAF;AAAA,IACA,gBAAgB,CAACM,GAAUC,MAAU;;AACnC,MAAAV,KAAA,QAAAA,EAAkBS,KAClBE,IAAAN,EAAgB,mBAAhB,QAAAM,EAAA,KAAAN,GAAiCI,GAAUC;AAAA,IAC7C;AAAA,EAAA,CACD,GAEKE,IAAc,CAACC,MAA2C;AAC9D,IAAAd,KAAA,QAAAA,EAAUc;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,WAAWkB,EAAG,mBAAmB,EAAE,iBAAiBZ,EAAA,GAAYF,CAAS;AAAA,MACzE,eAAY;AAAA,MACX,GAAGK,EAAA;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWD,EAAGb,CAAe,GAAG,UAAAC,GAAoB,SAASS,GAChF,UAAAd,EAAA,CACH;AAAA,QACA,gBAAAkB,EAAC,SAAA,EAAO,GAAGT,EAAA,EAAc,CAAG;AAAA,QAC3BH,sBACE,QAAA,EAAK,WAAU,0BAAyB,MAAK,SAC3C,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"fileInput.js","sources":["../../../../src/components/inputs/fileInput/fileInput.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport cn from \"clsx\";\n\nexport interface FileInputProps extends DropzoneOptions {\n  label?: string;\n  className?: string;\n  buttonClassName?: string;\n  disabled?: boolean;\n  /** Validation message shown below the control. */\n  error?: string;\n  /** Fired with the accepted files when the user picks them. */\n  onFilesSelected?: (files: File[]) => void;\n  /** @deprecated optional click passthrough on the trigger button. */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const FileInput = forwardRef<HTMLDivElement, FileInputProps>(function FileInput(props, ref) {\n  const { label, onClick, onFilesSelected, className, buttonClassName, disabled, error, ...dropzoneOptions } = props;\n\n  const { getRootProps, getInputProps } = useDropzone({\n    ...dropzoneOptions,\n    disabled,\n    onDropAccepted: (accepted, event) => {\n      onFilesSelected?.(accepted);\n      dropzoneOptions.onDropAccepted?.(accepted, event);\n    },\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-file-input\", { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"file-input\"\n      {...getRootProps()}\n    >\n      <button type=\"button\" className={cn(buttonClassName)} disabled={disabled} onClick={handleClick}>\n        {label}\n      </button>\n      <input {...getInputProps()} />\n      {error ? (\n        <span className=\"smwb-file-input__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileInput;\n"],"names":["FileInput","forwardRef","props","ref","label","onClick","onFilesSelected","className","buttonClassName","disabled","error","dropzoneOptions","getRootProps","getInputProps","useDropzone","accepted","event","_a","handleClick","e","jsxs","cn","jsx"],"mappings":";;;;;;AAmBO,MAAMA,IAAYC,EAA2C,SAAmBC,GAAOC,GAAK;AACjG,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,GAAiB,UAAAC,GAAU,OAAAC,GAAO,GAAGC,EAAA,IAAoBT,GAEvG,EAAE,cAAAU,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,GAAGH;AAAA,IACH,UAAAF;AAAA,IACA,gBAAgB,CAACM,GAAUC,MAAU;;AACnC,MAAAV,KAAA,QAAAA,EAAkBS,KAClBE,IAAAN,EAAgB,mBAAhB,QAAAM,EAAA,KAAAN,GAAiCI,GAAUC;AAAA,IAC7C;AAAA,EAAA,CACD,GAEKE,IAAc,CAACC,MAA2C;AAC9D,IAAAd,KAAA,QAAAA,EAAUc;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,WAAWkB,EAAG,mBAAmB,EAAE,iBAAiBZ,EAAA,GAAYF,CAAS;AAAA,MACzE,eAAY;AAAA,MACX,GAAGK,EAAA;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWD,EAAGb,CAAe,GAAG,UAAAC,GAAoB,SAASS,GAChF,UAAAd,EAAA,CACH;AAAA,QACA,gBAAAkB,EAAC,SAAA,EAAO,GAAGT,EAAA,EAAc,CAAG;AAAA,QAC3BH,sBACE,QAAA,EAAK,WAAU,0BAAyB,MAAK,SAC3C,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/inputs/floatingButton/floatingButton.js

@@ -1,42 +1,45 @@
-import { jsxs as R, jsx as d } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/floatingButton/floatingButton.entry.css';/* empty css                                                                       */
-import m from "react";
-import w from "clsx";
-import { Ripple as x } from "../../base/ripple/ripple.js";
-const y = m.forwardRef(function({
-  children: e,
-  className: i,
-  onMouseDown: t,
-  variant: f = "default",
-  size: a = "medium",
-  color: s = "primary",
-  type: c = "button",
-  ...l
-}, u) {
-  const n = m.useRef(null), p = (o) => {
-    t == null || t(o);
-  }, b = (o) => {
-    var r;
-    (r = n.current) == null || r.onRipple(o);
+import { jsxs as d, jsx as x } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/floatingButton/floatingButton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                       */
+import s from "react";
+import $ from "clsx";
+import { Ripple as g } from "../../base/ripple/ripple.js";
+const _ = s.forwardRef(function({
+  children: c,
+  className: l,
+  onMouseDown: m,
+  // The button sets this on its root too; its own handler calls the caller's first.
+  onPointerDown: f,
+  variant: r = "default",
+  size: e = "medium",
+  color: u = "primary",
+  type: b = "button",
+  ...n
+}, o) {
+  const i = s.useRef(null), R = (t) => {
+    m == null || m(t);
+  }, p = (t) => {
+    var a;
+    f == null || f(t), (a = i.current) == null || a.onRipple(t);
   };
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ d(
     "button",
     {
-      ref: u,
-      type: c,
-      className: w("smwb-fab", `smwb-${f}`, `smwb-${a}`, `smwb-fab_color-${s}`, i),
-      onMouseDown: p,
-      onPointerDown: b,
-      ...l,
+      ref: o,
+      type: b,
+      className: $("smwb-fab", `smwb-${r}`, `smwb-${e}`, `smwb-fab_color-${u}`, l),
+      onMouseDown: R,
+      onPointerDown: p,
+      ...n,
       children: [
-        e,
-        /* @__PURE__ */ d(x, { actionRef: n })
+        c,
+        /* @__PURE__ */ x(g, { actionRef: i })
       ]
     }
   );
 });
 export {
-  y as FloatingButton,
-  y as default
+  _ as FloatingButton,
+  _ as default
 };
 //# sourceMappingURL=floatingButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"floatingButton.js","sources":["../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n}\n\nexport const FloatingButton = React.forwardRef<HTMLButtonElement, FloatingButtonProps>(function FloatingButton(\n  {\n    children,\n    className,\n    onMouseDown: onMouseDownProp,\n    variant = \"default\",\n    size = \"medium\",\n    color = \"primary\",\n    type = \"button\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\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>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\"smwb-fab\", `smwb-${variant}`, `smwb-${size}`, `smwb-fab_color-${color}`, className)}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      <Ripple actionRef={rippleRef} />\n    </button>\n  );\n});\n\nexport default FloatingButton;\n"],"names":["FloatingButton","React","children","className","onMouseDownProp","variant","size","color","type","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;;AAeO,MAAMA,IAAiBC,EAAM,WAAmD,SACrF;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAaC;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYV,EAAM,OAAyB,IAAI,GAE/CW,IAAc,CAACC,MAA+C;AAClE,IAAAT,KAAA,QAAAA,EAAkBS;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAiD;;AACtE,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,WAAWS,EAAG,YAAY,QAAQZ,CAAO,IAAI,QAAQC,CAAI,IAAI,kBAAkBC,CAAK,IAAIJ,CAAS;AAAA,MACjG,aAAAS;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAP;AAAA,QACD,gBAAAgB,EAACC,GAAA,EAAO,WAAWR,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}
+{"version":3,"file":"floatingButton.js","sources":["../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n}\n\nexport const FloatingButton = React.forwardRef<HTMLButtonElement, FloatingButtonProps>(function FloatingButton(\n  {\n    children,\n    className,\n    onMouseDown: onMouseDownProp,\n    // The button sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    variant = \"default\",\n    size = \"medium\",\n    color = \"primary\",\n    type = \"button\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\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>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\"smwb-fab\", `smwb-${variant}`, `smwb-${size}`, `smwb-fab_color-${color}`, className)}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      <Ripple actionRef={rippleRef} />\n    </button>\n  );\n});\n\nexport default FloatingButton;\n"],"names":["FloatingButton","React","children","className","onMouseDownProp","onPointerDownProp","variant","size","color","type","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;;;AAgBO,MAAMA,IAAiBC,EAAM,WAAmD,SACrF;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAaC;AAAA;AAAA,EAEb,eAAeC;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYX,EAAM,OAAyB,IAAI,GAE/CY,IAAc,CAACC,MAA+C;AAClE,IAAAV,KAAA,QAAAA,EAAkBU;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAiD;;AACtE,IAAAT,KAAA,QAAAA,EAAoBS,KACpBE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,WAAWS,EAAG,YAAY,QAAQZ,CAAO,IAAI,QAAQC,CAAI,IAAI,kBAAkBC,CAAK,IAAIL,CAAS;AAAA,MACjG,aAAAU;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAR;AAAA,QACD,gBAAAiB,EAACC,GAAA,EAAO,WAAWR,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}

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

@@ -3,6 +3,13 @@ import type { SelectionControlColor, SelectionControlSize } from "../checkbox/ch
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     label?: string;
     disabled?: boolean;
+    /**
+     * Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and
+     * `onChange` is not called. It stays focusable.
+     *
+     * The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,
+     * only for its group. Put `role="radiogroup"`, a name and `aria-readonly="true"` on the element around the radios.
+     */
     readOnly?: boolean;
     required?: boolean;
     name?: string;
@@ -14,6 +21,8 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     error?: boolean;
     /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | readonly string[] | boolean | undefined, data: RadioButtonProps) => void;
+    /** Test id of the `<input>`; `radio` unless given. */
+    "data-testid"?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/dist/components/inputs/radioButton/radioButton.js

@@ -1,69 +1,89 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';/* empty css                                                                 */
-import x from "react";
-import i from "clsx";
-import { useId as g } from "../../../hooks/useId.js";
-import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
-const T = x.forwardRef(function(r, b) {
+import { jsx as d, jsxs as h } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                 */
+import B from "react";
+import s from "clsx";
+import { useHelperText as C } from "../../../hooks/useHelperText.js";
+import { useId as R } from "../../../hooks/useId.js";
+import { cancelToggle as I, forgetCancelledToggle as j } from "../../../utils/readOnlyToggle.js";
+import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
+const G = B.forwardRef(function(e, u) {
   const {
-    label: m,
-    disabled: a,
-    readOnly: s,
-    required: l,
-    name: p,
-    id: u,
-    size: w = "medium",
-    color: f = "primary",
-    helperText: _,
-    error: t,
-    onChange: d,
-    className: h,
-    ...N
-  } = r, n = g(u), v = (o) => {
-    if (s) {
-      o.preventDefault();
+    label: t,
+    disabled: i,
+    readOnly: r,
+    required: o,
+    name: w,
+    id: _,
+    size: g = "medium",
+    color: x = "primary",
+    "data-testid": y = "radio",
+    helperText: c,
+    error: m,
+    onChange: l,
+    className: N,
+    "aria-describedby": k,
+    ...p
+  } = e, n = R(_), b = C(c, { describedBy: k }), T = (a) => {
+    if (r) {
+      j(a, e.checked);
       return;
     }
-    d == null || d(o, r.value !== void 0 ? r.value : o.target.checked, r);
+    l == null || l(a, e.value !== void 0 ? e.value : a.target.checked, e);
+  }, v = (a) => {
+    var f;
+    (f = e.onClick) == null || f.call(e, a), r && I(a, e.checked);
   };
-  return /* @__PURE__ */ e(y, { helperText: _, disabled: a, error: t, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ c(
-    "label",
+  return /* @__PURE__ */ d(
+    q,
     {
-      htmlFor: n,
-      className: i("smwb-radio", `smwb-radio_size-${w}`, `smwb-radio_color-${f}`, {
-        "smwb-disabled": a,
-        "smwb-readonly": s
-      }),
-      children: [
-        /* @__PURE__ */ c("span", { className: "smwb-radio__wrapper", children: [
-          /* @__PURE__ */ e(
-            "input",
-            {
-              id: n,
-              name: p,
-              disabled: a,
-              readOnly: s,
-              required: l,
-              "aria-invalid": t || void 0,
-              "aria-required": l || void 0,
-              className: i("smwb-radio__input", h),
-              type: "radio",
-              "data-testid": "radio",
-              ref: b,
-              ...N,
-              onChange: v
-            }
-          ),
-          /* @__PURE__ */ e("span", { className: i("smwb-radio__btn", { "smwb-disabled": a }) }),
-          /* @__PURE__ */ e("span", { className: i("smwb-radio__bg", { "smwb-disabled": a }) })
-        ] }),
-        m && /* @__PURE__ */ e("span", { className: "smwb-radio__label", children: m })
-      ]
+      helperText: c,
+      helperTextId: b.id,
+      disabled: i,
+      error: m,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ h(
+        "label",
+        {
+          htmlFor: n,
+          className: s("smwb-radio", `smwb-radio_size-${g}`, `smwb-radio_color-${x}`, {
+            "smwb-disabled": i,
+            "smwb-readonly": r
+          }),
+          children: [
+            /* @__PURE__ */ h("span", { className: "smwb-radio__wrapper", children: [
+              /* @__PURE__ */ d(
+                "input",
+                {
+                  id: n,
+                  name: w,
+                  disabled: i,
+                  readOnly: r,
+                  required: o,
+                  "aria-invalid": m || void 0,
+                  "aria-required": o || void 0,
+                  "aria-describedby": b.describedBy,
+                  className: s("smwb-radio__input", N),
+                  type: "radio",
+                  "data-testid": y,
+                  ref: u,
+                  ...p,
+                  onChange: T,
+                  onClick: v
+                }
+              ),
+              /* @__PURE__ */ d("span", { className: s("smwb-radio__btn", { "smwb-disabled": i }) }),
+              /* @__PURE__ */ d("span", { className: s("smwb-radio__bg", { "smwb-disabled": i }) })
+            ] }),
+            t && /* @__PURE__ */ d("span", { className: "smwb-radio__label", children: t })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 export {
-  T as RadioButton,
-  T as default
+  G as RadioButton,
+  G as default
 };
 //# sourceMappingURL=radioButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.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 RadioButtonProps 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  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: React.ReactNode;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string | number | readonly string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    onChange,\n    className,\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, props.value !== undefined ? props.value : 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(\"smwb-radio\", `smwb-radio_size-${size}`, `smwb-radio_color-${color}`, {\n          \"smwb-disabled\": disabled,\n          \"smwb-readonly\": readOnly,\n        })}\n      >\n        <span className=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            className={cn(\"smwb-radio__input\", className)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className={cn(\"smwb-radio__btn\", { \"smwb-disabled\": disabled })} />\n          <span className={cn(\"smwb-radio__bg\", { \"smwb-disabled\": disabled })} />\n        </span>\n        {label && <span className=\"smwb-radio__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","label","disabled","readOnly","required","name","idProp","size","color","helperText","error","onChange","className","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;;AA2BO,MAAMA,IAAcC,EAAM,WAA+C,SAAqBC,GAAOC,GAAK;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;AAC/D,QAAId,GAAU;AACZ,MAAAc,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAN,KAAA,QAAAA,EAAWM,GAAGlB,EAAM,UAAU,SAAYA,EAAM,QAAQkB,EAAE,OAAO,SAASlB;AAAA,EAC5E;AAEA,2BACGmB,GAAA,EAAiB,YAAAT,GAAwB,UAAAP,GAAoB,OAAAQ,GAAc,WAAU,4BACpF,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM,EAAG,cAAc,mBAAmBb,CAAI,IAAI,oBAAoBC,CAAK,IAAI;AAAA,QAClF,iBAAiBN;AAAA,QACjB,iBAAiBC;AAAA,MAAA,CAClB;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAAP;AAAA,cACA,MAAAT;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,gBAAcM,KAAS;AAAA,cACvB,iBAAeN,KAAY;AAAA,cAC3B,WAAWgB,EAAG,qBAAqBR,CAAS;AAAA,cAC5C,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,KAAAZ;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAK,EAAC,UAAK,WAAWD,EAAG,mBAAmB,EAAE,iBAAiBlB,EAAA,CAAU,GAAG;AAAA,UACvE,gBAAAmB,EAAC,UAAK,WAAWD,EAAG,kBAAkB,EAAE,iBAAiBlB,EAAA,CAAU,EAAA,CAAG;AAAA,QAAA,GACxE;AAAA,QACCD,KAAS,gBAAAoB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAApB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEzD;AAEJ,CAAC;"}
+{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.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 RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and\n   * `onChange` is not called. It stays focusable.\n   *\n   * The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,\n   * only for its group. Put `role=\"radiogroup\"`, a name and `aria-readonly=\"true\"` on the element around the radios.\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: React.ReactNode;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string | number | readonly string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  /** Test id of the `<input>`; `radio` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    size = \"medium\",\n    color = \"primary\",\n    \"data-testid\": dataTestId = \"radio\",\n    helperText,\n    error,\n    onChange,\n    className,\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, props.checked);\n      return;\n    }\n    onChange?.(e, props.value !== undefined ? props.value : 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(\"smwb-radio\", `smwb-radio_size-${size}`, `smwb-radio_color-${color}`, {\n          \"smwb-disabled\": disabled,\n          \"smwb-readonly\": readOnly,\n        })}\n      >\n        <span className=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={name}\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            className={cn(\"smwb-radio__input\", className)}\n            type=\"radio\"\n            data-testid={dataTestId}\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span className={cn(\"smwb-radio__btn\", { \"smwb-disabled\": disabled })} />\n          <span className={cn(\"smwb-radio__bg\", { \"smwb-disabled\": disabled })} />\n        </span>\n        {label && <span className=\"smwb-radio__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","label","disabled","readOnly","required","name","idProp","size","color","dataTestId","helperText","error","onChange","className","ariaDescribedBy","args","id","useId","helper","useHelperText","handleChange","e","forgetCancelledToggle","handleClick","_a","cancelToggle","jsx","TextFieldWrapper","jsxs","cn"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAAcC,EAAM,WAA+C,SAAqBC,GAAOC,GAAK;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,eAAeC,IAAa;AAAA,IAC5B,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB,GACEiB,IAAKC,EAAMX,CAAM,GACjBY,IAASC,EAAcT,GAAY,EAAE,aAAaI,GAAiB,GAEnEM,IAAe,CAACC,MAA2C;AAC/D,QAAIlB,GAAU;AACZ,MAAAmB,EAAsBD,GAAGtB,EAAM,OAAO;AACtC;AAAA,IACF;AACA,IAAAa,KAAA,QAAAA,EAAWS,GAAGtB,EAAM,UAAU,SAAYA,EAAM,QAAQsB,EAAE,OAAO,SAAStB;AAAA,EAC5E,GAEMwB,IAAc,CAACF,MAA0C;;AAC7D,KAAAG,IAAAzB,EAAM,YAAN,QAAAyB,EAAA,KAAAzB,GAAgBsB,IACZlB,KAAUsB,EAAaJ,GAAGtB,EAAM,OAAO;AAAA,EAC7C;AAEA,SACE,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAjB;AAAA,MACA,cAAcQ,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAS;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASZ;AAAA,UACT,WAAWa,EAAG,cAAc,mBAAmBtB,CAAI,IAAI,oBAAoBC,CAAK,IAAI;AAAA,YAClF,iBAAiBN;AAAA,YACjB,iBAAiBC;AAAA,UAAA,CAClB;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAyB,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,cAAA,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAAV;AAAA,kBACA,MAAAX;AAAA,kBACA,UAAAH;AAAA,kBACA,UAAAC;AAAA,kBACA,UAAAC;AAAA,kBACA,gBAAcO,KAAS;AAAA,kBACvB,iBAAeP,KAAY;AAAA,kBAC3B,oBAAkBc,EAAO;AAAA,kBACzB,WAAWW,EAAG,qBAAqBhB,CAAS;AAAA,kBAC5C,MAAK;AAAA,kBACL,eAAaJ;AAAA,kBACb,KAAAT;AAAA,kBACC,GAAGe;AAAA,kBACJ,UAAUK;AAAA,kBACV,SAASG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,gBAAAG,EAAC,UAAK,WAAWG,EAAG,mBAAmB,EAAE,iBAAiB3B,EAAA,CAAU,GAAG;AAAA,cACvE,gBAAAwB,EAAC,UAAK,WAAWG,EAAG,kBAAkB,EAAE,iBAAiB3B,EAAA,CAAU,EAAA,CAAG;AAAA,YAAA,GACxE;AAAA,YACCD,KAAS,gBAAAyB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAzB,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACvD;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -24,7 +24,15 @@ export interface RatingProps {
     error?: boolean;
     /** Supporting text shown below the control. */
     helperText?: ReactNode;
+    /** Id of the control: the slider, or the image of a read-only rating. */
     id?: string;
+    /**
+     * What is rated: the accessible name of the slider, "Rating" by default. A read-only rating is an image named by
+     * its value ("3 of 5"), after this label.
+     */
+    "aria-label"?: string;
+    /** Ids of more elements that describe the control, after its helper text. */
+    "aria-describedby"?: string;
     onChange?: (value: number) => void;
 }
 export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/rating/rating.js

@@ -1,85 +1,101 @@
-import { jsxs as N, jsx as i } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/rating/rating.entry.css';/* empty css                                                       */
-import { forwardRef as I, useState as v } from "react";
-import $ from "clsx";
-import { Icon as H } from "../../base/icon/icon.js";
-const Y = I(function({
-  className: L,
-  value: d,
-  defaultValue: j = 0,
-  max: o = 5,
-  precision: c = 1,
-  readOnly: g = !1,
-  disabled: y = !1,
-  size: f = 28,
-  icon: u,
-  emptyIcon: w,
-  name: h,
-  color: k = "primary",
-  error: D,
-  helperText: _,
-  id: E,
-  onChange: s
-}, K) {
-  const M = d !== void 0, [S, R] = v(j), [p, b] = v(null), n = d !== void 0 ? d : S, B = p != null ? p : n, l = !g && !y, A = (t, r) => {
-    if (c === 1)
+import { jsxs as H, jsx as s } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/rating/rating.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import { forwardRef as Q, useState as B } from "react";
+import j from "clsx";
+import { Icon as E } from "../../base/icon/icon.js";
+import { useHelperText as V, hasHelperText as W } from "../../../hooks/useHelperText.js";
+const at = Q(function({
+  className: K,
+  value: u,
+  defaultValue: S = 0,
+  max: n = 5,
+  precision: m = 1,
+  readOnly: i = !1,
+  disabled: w = !1,
+  size: d = 28,
+  icon: _,
+  emptyIcon: p,
+  name: k,
+  color: D = "primary",
+  error: M,
+  helperText: b,
+  id: T,
+  "aria-label": g,
+  "aria-describedby": x,
+  onChange: e
+}, F) {
+  const R = u !== void 0, [L, N] = B(S), [v, h] = B(null), l = u !== void 0 ? u : L, U = v != null ? v : l, a = !i && !w, $ = (t, r) => {
+    if (m === 1)
       return r + 1;
-    const { left: a, width: e } = t.currentTarget.getBoundingClientRect(), G = t.clientX - a < e / 2;
-    return r + (G ? 0.5 : 1);
-  }, F = (t, r) => {
-    if (!l)
+    const { left: o, width: c } = t.currentTarget.getBoundingClientRect(), P = t.clientX - o < c / 2;
+    return r + (P ? 0.5 : 1);
+  }, X = (t, r) => {
+    if (!a)
       return;
-    const a = A(t, r);
-    M || R(a), s == null || s(a);
-  }, U = u != null ? u : /* @__PURE__ */ i(H, { name: "star", fill: 1, size: f }), X = w != null ? w : /* @__PURE__ */ i(H, { name: "star", size: f }), m = (t) => {
-    const r = Math.max(0, Math.min(o, t));
-    M || R(r), s == null || s(r);
-  }, q = (t) => {
-    l && (t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), m(n + c)) : t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), m(n - c)) : t.key === "Home" ? (t.preventDefault(), m(0)) : t.key === "End" && (t.preventDefault(), m(o)));
-  };
-  return /* @__PURE__ */ N(
+    const o = $(t, r);
+    R || N(o), e == null || e(o);
+  }, q = _ != null ? _ : /* @__PURE__ */ s(E, { name: "star", fill: 1, size: d }), G = p != null ? p : /* @__PURE__ */ s(E, { name: "star", size: d }), f = (t) => {
+    const r = Math.max(0, Math.min(n, t));
+    R || N(r), e == null || e(r);
+  }, I = (t) => {
+    a && (t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), f(l + m)) : t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), f(l - m)) : t.key === "Home" ? (t.preventDefault(), f(0)) : t.key === "End" && (t.preventDefault(), f(n)));
+  }, A = V(b, { describedBy: x }), y = `${l} of ${n}`, J = i ? g ? `${g} ${y}` : y : g || "Rating";
+  return /* @__PURE__ */ H(
     "span",
     {
-      ref: K,
-      id: E,
-      className: $(
+      className: j(
         "smwb-rating",
-        { "smwb-rating_readonly": g, "smwb-rating_disabled": y, "smwb-rating_error": D },
-        k !== "primary" && `smwb-rating_color-${k}`,
-        L
+        { "smwb-rating_readonly": i, "smwb-rating_disabled": w, "smwb-rating_error": M },
+        D !== "primary" && `smwb-rating_color-${D}`,
+        K
       ),
-      "data-testid": "rating",
-      role: "img",
-      "aria-label": `${n} of ${o}`,
-      tabIndex: l ? 0 : void 0,
-      onKeyDown: l ? q : void 0,
       children: [
-        Array.from({ length: o }, (t, r) => {
-          const a = Math.max(0, Math.min(1, B - r));
-          return /* @__PURE__ */ N(
-            "span",
-            {
-              className: "smwb-rating__item",
-              style: { width: f, height: f, cursor: l ? "pointer" : "default" },
-              onClick: (e) => F(e, r),
-              onMouseMove: l && c === 0.5 ? (e) => b(A(e, r)) : l ? () => b(r + 1) : void 0,
-              onMouseLeave: l ? () => b(null) : void 0,
-              children: [
-                /* @__PURE__ */ i("span", { className: "smwb-rating__icon smwb-rating__icon_empty", children: X }),
-                /* @__PURE__ */ i("span", { className: "smwb-rating__icon smwb-rating__icon_filled", style: { width: `${a * 100}%` }, children: U })
-              ]
-            },
-            r
-          );
-        }),
-        h ? /* @__PURE__ */ i("input", { type: "hidden", name: h, value: n, readOnly: !0 }) : null,
-        _ != null && _ !== !1 ? /* @__PURE__ */ i("span", { className: $("smwb-rating__helper", D && "smwb-rating__helper_error"), children: _ }) : null
+        /* @__PURE__ */ s(
+          "span",
+          {
+            ref: F,
+            id: T,
+            className: "smwb-rating__control",
+            "data-testid": "rating",
+            role: i ? "img" : "slider",
+            "aria-label": J,
+            "aria-valuemin": i ? void 0 : 0,
+            "aria-valuemax": i ? void 0 : n,
+            "aria-valuenow": i ? void 0 : l,
+            "aria-valuetext": i ? void 0 : y,
+            "aria-disabled": !i && w ? !0 : void 0,
+            "aria-describedby": A.describedBy,
+            tabIndex: a ? 0 : void 0,
+            onKeyDown: a ? I : void 0,
+            children: Array.from({ length: n }, (t, r) => {
+              const o = Math.max(0, Math.min(1, U - r));
+              return /* @__PURE__ */ H(
+                "span",
+                {
+                  className: "smwb-rating__item",
+                  style: { width: d, height: d, cursor: a ? "pointer" : "default" },
+                  onClick: (c) => X(c, r),
+                  onMouseMove: a && m === 0.5 ? (c) => h($(c, r)) : a ? () => h(r + 1) : void 0,
+                  onMouseLeave: () => h(null),
+                  children: [
+                    /* @__PURE__ */ s("span", { className: "smwb-rating__icon smwb-rating__icon_empty", children: G }),
+                    /* @__PURE__ */ s("span", { className: "smwb-rating__icon smwb-rating__icon_filled", style: { width: `${o * 100}%` }, children: q })
+                  ]
+                },
+                r
+              );
+            })
+          }
+        ),
+        k ? /* @__PURE__ */ s("input", { type: "hidden", name: k, value: l, readOnly: !0 }) : null,
+        W(b) ? /* @__PURE__ */ s("span", { id: A.id, className: j("smwb-rating__helper", M && "smwb-rating__helper_error"), children: b }) : null
       ]
     }
   );
 });
 export {
-  Y as Rating,
-  Y as default
+  at as Rating,
+  at as default
 };
 //# sourceMappingURL=rating.js.map