@tedi-design-system/react 19.2.0-rc.6 → 19.2.0-rc.8

package/src/tedi/components/form/multi-value-field/multi-value-field.es.js

@@ -1,36 +1,37 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import g from "../../../../../external/classnames/index.es.js";
-import { forwardRef as le, useState as C, useRef as R, useImperativeHandle as ie, useCallback as re, useEffect as T, useLayoutEffect as ne } from "react";
-import { Icon as F } from "../../base/icon/icon.es.js";
-import { ClosingButton as se } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as ae } from "../../misc/separator/separator.es.js";
-import { Tag as P } from "../../tags/tag/tag.es.js";
-import { FormLabel as oe } from "../form-label/form-label.es.js";
+import { forwardRef as ie, useState as C, useRef as R, useImperativeHandle as re, useCallback as ne, useEffect as P, useLayoutEffect as se } from "react";
+import { Icon as T } from "../../base/icon/icon.es.js";
+import { ClosingButton as ae } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as oe } from "../../misc/separator/separator.es.js";
+import { Tag as F } from "../../tags/tag/tag.es.js";
+import { FormLabel as ce } from "../form-label/form-label.es.js";
 import i from "./multi-value-field.module.scss.es.js";
-import { useLabels as ce } from "../../../providers/label-provider/use-labels.es.js";
-const y = 4, ue = 44, de = le((j, q) => {
+import { useLabels as ue } from "../../../providers/label-provider/use-labels.es.js";
+const y = 4, de = 44, fe = ie((j, q) => {
   const {
     id: G,
     label: V,
+    labelProps: X,
     name: W,
     values: E,
     onChange: _,
     tagColor: I = "primary",
-    tagsDirection: X = "stack",
-    className: $,
+    tagsDirection: $ = "stack",
+    className: D,
     icon: o,
     onIconClick: k,
     iconButtonProps: h,
-    isClearable: D = !0,
-    showClearOnInteraction: H,
+    isClearable: H = !0,
+    showClearOnInteraction: J,
     required: M,
     disabled: b
-  } = j, { getLabel: S } = ce(), [J, U] = C(E ?? []), x = R(null), z = R(null);
-  ie(q, () => ({ input: z.current, wrapper: x.current }), []);
-  const n = E ?? J, r = X === "row", [d, B] = C(null), K = re((e) => B(e), []), N = R(0), [u, p] = C(null);
-  T(() => {
+  } = j, { getLabel: S } = ue(), [U, B] = C(E ?? []), x = R(null), z = R(null);
+  re(q, () => ({ input: z.current, wrapper: x.current }), []);
+  const n = E ?? U, r = $ === "row", [d, K] = C(null), Q = ne((e) => K(e), []), N = R(0), [u, p] = C(null);
+  P(() => {
     r && p(null);
-  }, [n.length, r]), T(() => {
+  }, [n.length, r]), P(() => {
     if (!r || !d || typeof ResizeObserver > "u") return;
     const e = new ResizeObserver((t) => {
       var c;
@@ -38,7 +39,7 @@ const y = 4, ue = 44, de = le((j, q) => {
       l > 0 && l !== N.current && p(null);
     });
     return e.observe(d), () => e.disconnect();
-  }, [r, d]), ne(() => {
+  }, [r, d]), se(() => {
     if (!r || u !== null) return;
     const e = d;
     if (!e) return;
@@ -55,8 +56,8 @@ const y = 4, ue = 44, de = le((j, q) => {
     }
     let A = 0, f = 0;
     for (let s = 0; s < l.length; s++) {
-      const ee = l[s].offsetWidth, te = s < l.length - 1 ? ue + y : 0, L = A + ee + (f > 0 ? y : 0);
-      if (L + te <= t)
+      const te = l[s].offsetWidth, le = s < l.length - 1 ? de + y : 0, L = A + te + (f > 0 ? y : 0);
+      if (L + le <= t)
         A = L, f++;
       else
         break;
@@ -64,13 +65,13 @@ const y = 4, ue = 44, de = le((j, q) => {
     f === 0 && (f = 1), N.current = t, p(f);
   }, [r, u, n, d]);
   const O = (e) => {
-    U(e), _ == null || _(e);
-  }, Q = (e) => {
+    B(e), _ == null || _(e);
+  }, Y = (e) => {
     const t = n.filter((l, c) => c !== e);
     O(t);
-  }, v = !b && D && n.length > 0, Y = () => {
+  }, v = !b && H && n.length > 0, Z = () => {
     O([]);
-  }, w = r && u !== null ? Math.max(0, n.length - u) : 0, Z = () => {
+  }, w = r && u !== null ? Math.max(0, n.length - u) : 0, ee = () => {
     if (!o) return null;
     const e = typeof o == "string" ? { name: o } : o;
     return k ? /* @__PURE__ */ a(
@@ -80,18 +81,18 @@ const y = 4, ue = 44, de = le((j, q) => {
         className: g(i["tedi-multi-value-field__icon-wrapper"], h == null ? void 0 : h.className),
         onClick: k,
         type: "button",
-        children: /* @__PURE__ */ a(F, { ...e, size: 18 })
+        children: /* @__PURE__ */ a(T, { ...e, size: 18 })
       }
-    ) : /* @__PURE__ */ a("div", { className: i["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(F, { ...e, size: 18 }) });
+    ) : /* @__PURE__ */ a("div", { className: i["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(T, { ...e, size: 18 }) });
   };
   return /* @__PURE__ */ m(
     "div",
     {
-      className: g(i["tedi-multi-value-field"], $, {
-        [i["tedi-multi-value-field--clear-on-interaction"]]: v && H
+      className: g(i["tedi-multi-value-field"], D, {
+        [i["tedi-multi-value-field--clear-on-interaction"]]: v && J
       }),
       children: [
-        V && /* @__PURE__ */ a(oe, { id: G, label: V, required: M }),
+        V && /* @__PURE__ */ a(ce, { id: G, label: V, required: M, labelProps: X }),
         /* @__PURE__ */ m(
           "div",
           {
@@ -103,23 +104,23 @@ const y = 4, ue = 44, de = le((j, q) => {
               n.length > 0 && /* @__PURE__ */ m(
                 "div",
                 {
-                  ref: K,
+                  ref: Q,
                   className: g(i["tedi-multi-value-field__tags"], {
                     [i["tedi-multi-value-field__tags--row"]]: r
                   }),
                   children: [
                     n.map((e, t) => r && u !== null && t >= u ? null : /* @__PURE__ */ a(
-                      P,
+                      F,
                       {
                         color: I,
                         "data-tedi-tag-index": t,
-                        onClose: b ? void 0 : () => Q(t),
+                        onClose: b ? void 0 : () => Y(t),
                         children: e
                       },
                       `${e}-${t}`
                     )),
                     w > 0 && /* @__PURE__ */ m(
-                      P,
+                      F,
                       {
                         color: I,
                         className: i["tedi-multi-value-field__overflow-tag"],
@@ -135,16 +136,16 @@ const y = 4, ue = 44, de = le((j, q) => {
               ),
               (v || o) && /* @__PURE__ */ m("div", { className: i["tedi-multi-value-field__right-area"], children: [
                 v && /* @__PURE__ */ a(
-                  se,
+                  ae,
                   {
-                    onClick: Y,
+                    onClick: Z,
                     title: S("clear"),
                     className: i["tedi-multi-value-field__clear-button"],
                     iconSize: 18
                   }
                 ),
-                v && o && /* @__PURE__ */ a(ae, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
-                o && Z()
+                v && o && /* @__PURE__ */ a(oe, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+                o && ee()
               ] })
             ]
           }
@@ -164,8 +165,8 @@ const y = 4, ue = 44, de = le((j, q) => {
     }
   );
 });
-de.displayName = "MultiValueField";
+fe.displayName = "MultiValueField";
 export {
-  de as MultiValueField,
-  de as default
+  fe as MultiValueField,
+  fe as default
 };

package/src/tedi/components/form/number-field/number-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),T=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),ce=require("../../base/typography/text/text.cjs.js"),fe=require("../../buttons/button/button.cjs.js"),me=require("../feedback-text/feedback-text.cjs.js"),be=require("../form-label/form-label.cjs.js"),i=require("./number-field.module.scss.cjs.js"),pe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),ve=require("../../../providers/label-provider/use-labels.cjs.js"),U=g=>{const{getCurrentBreakpointProps:G}=pe.useBreakpointProps(g.defaultServerBreakpoint),{getLabel:h,locale:J}=ve.useLabels(),K=J==="en"?".":",",{id:Q,label:k,hideLabel:X,required:w,className:C,size:q,inputMode:Y,decimalPlaces:x,decimalSeparator:j=K,min:d,max:o,step:M=1,defaultValue:O,value:c,onChange:a,suffix:S,fullWidth:Z=!1,disabled:N=!1,invalid:R=!1,helper:u,input:_}=G(g),ee=r.useId(),E=Q??ee,te=Y??(x&&x>0||j===","?"decimal":"numeric"),m=r.useCallback(e=>e===void 0?"":j===","?String(e).replace(".",","):String(e),[j]),y=r.useRef(null),B=r.useRef(!1),[ne,L]=r.useState(""),[re,V]=r.useState(O),[ie,I]=r.useState(()=>m(c??O)),F=c!==void 0,n=F?c:re,b=r.useRef(),p=r.useRef(),P=r.useRef(n);r.useEffect(()=>{!B.current&&typeof c<"u"&&I(m(c))},[c,m]);const $=u?`${E}-helper`:void 0,z=r.useCallback(e=>{if(e===void 0)return R||(u==null?void 0:u.type)==="error";const t=d!==void 0&&e<d,l=o!==void 0&&e>o;return R||t||l||(u==null?void 0:u.type)==="error"},[R,u,o,d]),A=e=>Math.min(o??1/0,Math.max(d??-1/0,e)),D=r.useCallback(e=>{e&&(L(""),b.current&&clearTimeout(b.current),p.current&&clearTimeout(p.current),b.current=setTimeout(()=>{L(e),p.current=setTimeout(()=>L(""),5e3)},100))},[]);r.useEffect(()=>()=>{b.current&&clearTimeout(b.current),p.current&&clearTimeout(p.current)},[]),r.useEffect(()=>{P.current!==n&&(!B.current&&n!==void 0&&D(h("numberField.quantityUpdated",n)),P.current=n)},[n,D,h]);const W=e=>x!==void 0?parseFloat(e.toFixed(x)):e,ue=e=>{let t=n??0;e==="increment"&&(t=t+M),e==="decrement"&&(t=t-M),t=A(t),t=W(t),a==null||a(t),F||V(t),I(m(t))},ae=({currentTarget:{value:e}})=>{if(I(e),e===""){n!==void 0&&(a==null||a(void 0),F||V(void 0));return}const t=e.replace(",",".");if(!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))return;const l=parseFloat(t);if(Number.isNaN(l))return;const f=A(l),v=W(f);v!==n&&(a==null||a(v),F||V(v))},se=()=>{B.current=!0},le=()=>{B.current=!1,I(m(n))},H=e=>{const t=n!==void 0&&(e==="increment"?o!==void 0&&n>=o:d!==void 0&&n<=d),l=T.default(i.default["tedi-number-field__button"],i.default[`tedi-number-field__button--${e}`],{[i.default["tedi-number-field__button--disabled"]]:t||N}),f=typeof k=="string"?k:void 0,v=h(`numberField.${e}`,M,f);return s.jsx(fe.Button,{"aria-label":v,onClick:()=>ue(e),disabled:t||N,visualType:"secondary",className:l,icon:{name:e==="increment"?"add":"remove"},size:q==="small"?"small":void 0,children:e==="increment"?"+":"-"})},de=()=>{const e=T.default(i.default["tedi-number-field__input-wrapper"],{[i.default["tedi-number-field__input-wrapper--with-suffix"]]:S,[i.default["tedi-number-field__input-wrapper--full-width"]]:Z}),t=T.default(i.default["tedi-number-field__input"],_==null?void 0:_.className),l=()=>{var f;return(f=y==null?void 0:y.current)==null?void 0:f.focus()};return s.jsxs("div",{className:e,onClick:l,children:[s.jsx("input",{ref:y,id:E,role:"spinbutton","aria-valuemin":d,"aria-valuemax":o,"aria-valuenow":n,"aria-describedby":$,"aria-invalid":z(n)?"true":"false",type:"text",inputMode:te,value:ie,required:w,disabled:N,onChange:ae,onFocus:se,onBlur:le,className:t,..._}),S&&s.jsx(ce.Text,{element:"span",modifiers:"small",color:"tertiary",className:i.default["tedi-number-field__suffix"],children:S})]})},oe=T.default(i.default["tedi-number-field"],{[i.default["tedi-number-field--invalid"]]:z(n)},{[i.default["tedi-number-field--disabled"]]:N},{[i.default["tedi-number-field--small"]]:q==="small"},C);return s.jsxs("div",{"data-name":"number-field",className:C,children:[s.jsx(be.FormLabel,{id:E,label:k,required:w,hideLabel:X,size:q}),s.jsxs("div",{className:oe,children:[H("decrement"),de(),H("increment")]}),u&&s.jsx(me.FeedbackText,{className:i.default["tedi-number-field__feedback"],...u,id:$}),s.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:ne})]})};U.displayName="NumberField";exports.NumberField=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),T=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),fe=require("../../base/typography/text/text.cjs.js"),me=require("../../buttons/button/button.cjs.js"),be=require("../feedback-text/feedback-text.cjs.js"),pe=require("../form-label/form-label.cjs.js"),i=require("./number-field.module.scss.cjs.js"),ve=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),xe=require("../../../providers/label-provider/use-labels.cjs.js"),U=g=>{const{getCurrentBreakpointProps:G}=ve.useBreakpointProps(g.defaultServerBreakpoint),{getLabel:h,locale:J}=xe.useLabels(),K=J==="en"?".":",",{id:Q,label:k,hideLabel:X,labelProps:Y,required:w,className:P,size:q,inputMode:Z,decimalPlaces:x,decimalSeparator:j=K,min:d,max:o,step:M=1,defaultValue:C,value:c,onChange:a,suffix:S,fullWidth:ee=!1,disabled:N=!1,invalid:R=!1,helper:u,input:_}=G(g),te=r.useId(),E=Q??te,ne=Z??(x&&x>0||j===","?"decimal":"numeric"),m=r.useCallback(e=>e===void 0?"":j===","?String(e).replace(".",","):String(e),[j]),y=r.useRef(null),B=r.useRef(!1),[re,L]=r.useState(""),[ie,V]=r.useState(C),[ue,I]=r.useState(()=>m(c??C)),F=c!==void 0,n=F?c:ie,b=r.useRef(),p=r.useRef(),O=r.useRef(n);r.useEffect(()=>{!B.current&&typeof c<"u"&&I(m(c))},[c,m]);const $=u?`${E}-helper`:void 0,z=r.useCallback(e=>{if(e===void 0)return R||(u==null?void 0:u.type)==="error";const t=d!==void 0&&e<d,l=o!==void 0&&e>o;return R||t||l||(u==null?void 0:u.type)==="error"},[R,u,o,d]),A=e=>Math.min(o??1/0,Math.max(d??-1/0,e)),D=r.useCallback(e=>{e&&(L(""),b.current&&clearTimeout(b.current),p.current&&clearTimeout(p.current),b.current=setTimeout(()=>{L(e),p.current=setTimeout(()=>L(""),5e3)},100))},[]);r.useEffect(()=>()=>{b.current&&clearTimeout(b.current),p.current&&clearTimeout(p.current)},[]),r.useEffect(()=>{O.current!==n&&(!B.current&&n!==void 0&&D(h("numberField.quantityUpdated",n)),O.current=n)},[n,D,h]);const W=e=>x!==void 0?parseFloat(e.toFixed(x)):e,ae=e=>{let t=n??0;e==="increment"&&(t=t+M),e==="decrement"&&(t=t-M),t=A(t),t=W(t),a==null||a(t),F||V(t),I(m(t))},se=({currentTarget:{value:e}})=>{if(I(e),e===""){n!==void 0&&(a==null||a(void 0),F||V(void 0));return}const t=e.replace(",",".");if(!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))return;const l=parseFloat(t);if(Number.isNaN(l))return;const f=A(l),v=W(f);v!==n&&(a==null||a(v),F||V(v))},le=()=>{B.current=!0},de=()=>{B.current=!1,I(m(n))},H=e=>{const t=n!==void 0&&(e==="increment"?o!==void 0&&n>=o:d!==void 0&&n<=d),l=T.default(i.default["tedi-number-field__button"],i.default[`tedi-number-field__button--${e}`],{[i.default["tedi-number-field__button--disabled"]]:t||N}),f=typeof k=="string"?k:void 0,v=h(`numberField.${e}`,M,f);return s.jsx(me.Button,{"aria-label":v,onClick:()=>ae(e),disabled:t||N,visualType:"secondary",className:l,icon:{name:e==="increment"?"add":"remove"},size:q==="small"?"small":void 0,children:e==="increment"?"+":"-"})},oe=()=>{const e=T.default(i.default["tedi-number-field__input-wrapper"],{[i.default["tedi-number-field__input-wrapper--with-suffix"]]:S,[i.default["tedi-number-field__input-wrapper--full-width"]]:ee}),t=T.default(i.default["tedi-number-field__input"],_==null?void 0:_.className),l=()=>{var f;return(f=y==null?void 0:y.current)==null?void 0:f.focus()};return s.jsxs("div",{className:e,onClick:l,children:[s.jsx("input",{ref:y,id:E,role:"spinbutton","aria-valuemin":d,"aria-valuemax":o,"aria-valuenow":n,"aria-describedby":$,"aria-invalid":z(n)?"true":"false",type:"text",inputMode:ne,value:ue,required:w,disabled:N,onChange:se,onFocus:le,onBlur:de,className:t,..._}),S&&s.jsx(fe.Text,{element:"span",modifiers:"small",color:"tertiary",className:i.default["tedi-number-field__suffix"],children:S})]})},ce=T.default(i.default["tedi-number-field"],{[i.default["tedi-number-field--invalid"]]:z(n)},{[i.default["tedi-number-field--disabled"]]:N},{[i.default["tedi-number-field--small"]]:q==="small"},P);return s.jsxs("div",{"data-name":"number-field",className:P,children:[s.jsx(pe.FormLabel,{id:E,label:k,required:w,hideLabel:X,size:q,labelProps:Y}),s.jsxs("div",{className:ce,children:[H("decrement"),oe(),H("increment")]}),u&&s.jsx(be.FeedbackText,{className:i.default["tedi-number-field__feedback"],...u,id:$}),s.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:re})]})};U.displayName="NumberField";exports.NumberField=U;

package/src/tedi/components/form/number-field/number-field.es.js

@@ -1,22 +1,23 @@
-import { jsxs as $, jsx as c } from "react/jsx-runtime";
+import { jsxs as P, jsx as c } from "react/jsx-runtime";
 import F from "../../../../../external/classnames/index.es.js";
-import { useId as pe, useCallback as z, useRef as v, useState as C, useEffect as P } from "react";
-import { Text as be } from "../../base/typography/text/text.es.js";
-import { Button as ve } from "../../buttons/button/button.es.js";
-import { FeedbackText as Ne } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as _e } from "../form-label/form-label.es.js";
+import { useId as be, useCallback as $, useRef as v, useState as z, useEffect as C } from "react";
+import { Text as ve } from "../../base/typography/text/text.es.js";
+import { Button as Ne } from "../../buttons/button/button.es.js";
+import { FeedbackText as _e } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ye } from "../form-label/form-label.es.js";
 import n from "./number-field.module.scss.es.js";
-import { useBreakpointProps as ye } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Be } from "../../../providers/label-provider/use-labels.es.js";
-const Ie = (j) => {
-  const { getCurrentBreakpointProps: Q } = ye(j.defaultServerBreakpoint), { getLabel: T, locale: X } = Be(), Y = X === "en" ? "." : ",", {
+import { useBreakpointProps as Be } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Ie } from "../../../providers/label-provider/use-labels.es.js";
+const he = (j) => {
+  const { getCurrentBreakpointProps: Q } = Be(j.defaultServerBreakpoint), { getLabel: T, locale: X } = Ie(), Y = X === "en" ? "." : ",", {
     id: Z,
     label: M,
     hideLabel: ee,
+    labelProps: te,
     required: q,
     className: A,
     size: k,
-    inputMode: te,
+    inputMode: re,
     decimalPlaces: N,
     decimalSeparator: S = Y,
     min: a,
@@ -26,19 +27,19 @@ const Ie = (j) => {
     value: u,
     onChange: o,
     suffix: w,
-    fullWidth: re = !1,
+    fullWidth: ne = !1,
     disabled: _ = !1,
     invalid: E = !1,
     helper: i,
     input: y
-  } = Q(j), ne = pe(), L = Z ?? ne, ie = te ?? (N && N > 0 || S === "," ? "decimal" : "numeric"), m = z(
+  } = Q(j), ie = be(), L = Z ?? ie, oe = re ?? (N && N > 0 || S === "," ? "decimal" : "numeric"), m = $(
     (e) => e === void 0 ? "" : S === "," ? String(e).replace(".", ",") : String(e),
     [S]
-  ), B = v(null), I = v(!1), [oe, g] = C(""), [ae, O] = C(D), [le, h] = C(() => m(u ?? D)), x = u !== void 0, r = x ? u : ae, f = v(), p = v(), R = v(r);
-  P(() => {
+  ), B = v(null), I = v(!1), [ae, g] = z(""), [le, O] = z(D), [se, h] = z(() => m(u ?? D)), x = u !== void 0, r = x ? u : le, f = v(), p = v(), R = v(r);
+  C(() => {
     !I.current && typeof u < "u" && h(m(u));
   }, [u, m]);
-  const W = i ? `${L}-helper` : void 0, H = z(
+  const W = i ? `${L}-helper` : void 0, H = $(
     (e) => {
       if (e === void 0)
         return E || (i == null ? void 0 : i.type) === "error";
@@ -46,20 +47,20 @@ const Ie = (j) => {
       return E || t || s || (i == null ? void 0 : i.type) === "error";
     },
     [E, i, l, a]
-  ), U = (e) => Math.min(l ?? 1 / 0, Math.max(a ?? -1 / 0, e)), G = z((e) => {
+  ), U = (e) => Math.min(l ?? 1 / 0, Math.max(a ?? -1 / 0, e)), G = $((e) => {
     e && (g(""), f.current && clearTimeout(f.current), p.current && clearTimeout(p.current), f.current = setTimeout(() => {
       g(e), p.current = setTimeout(() => g(""), 5e3);
     }, 100));
   }, []);
-  P(() => () => {
+  C(() => () => {
     f.current && clearTimeout(f.current), p.current && clearTimeout(p.current);
-  }, []), P(() => {
+  }, []), C(() => {
     R.current !== r && (!I.current && r !== void 0 && G(T("numberField.quantityUpdated", r)), R.current = r);
   }, [r, G, T]);
-  const J = (e) => N !== void 0 ? parseFloat(e.toFixed(N)) : e, se = (e) => {
+  const J = (e) => N !== void 0 ? parseFloat(e.toFixed(N)) : e, ue = (e) => {
     let t = r ?? 0;
     e === "increment" && (t = t + V), e === "decrement" && (t = t - V), t = U(t), t = J(t), o == null || o(t), x || O(t), h(m(t));
-  }, ue = ({ currentTarget: { value: e } }) => {
+  }, de = ({ currentTarget: { value: e } }) => {
     if (h(e), e === "") {
       r !== void 0 && (o == null || o(void 0), x || O(void 0));
       return;
@@ -71,19 +72,19 @@ const Ie = (j) => {
     if (Number.isNaN(s)) return;
     const d = U(s), b = J(d);
     b !== r && (o == null || o(b), x || O(b));
-  }, de = () => {
-    I.current = !0;
   }, ce = () => {
+    I.current = !0;
+  }, me = () => {
     I.current = !1, h(m(r));
   }, K = (e) => {
     const t = r !== void 0 && (e === "increment" ? l !== void 0 && r >= l : a !== void 0 && r <= a), s = F(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
       [n["tedi-number-field__button--disabled"]]: t || _
     }), d = typeof M == "string" ? M : void 0, b = T(`numberField.${e}`, V, d);
     return /* @__PURE__ */ c(
-      ve,
+      Ne,
       {
         "aria-label": b,
-        onClick: () => se(e),
+        onClick: () => ue(e),
         disabled: t || _,
         visualType: "secondary",
         className: s,
@@ -92,12 +93,12 @@ const Ie = (j) => {
         children: e === "increment" ? "+" : "-"
       }
     );
-  }, me = () => {
+  }, fe = () => {
     const e = F(n["tedi-number-field__input-wrapper"], {
       [n["tedi-number-field__input-wrapper--with-suffix"]]: w,
-      [n["tedi-number-field__input-wrapper--full-width"]]: re
+      [n["tedi-number-field__input-wrapper--full-width"]]: ne
     }), t = F(n["tedi-number-field__input"], y == null ? void 0 : y.className);
-    return /* @__PURE__ */ $("div", { className: e, onClick: () => {
+    return /* @__PURE__ */ P("div", { className: e, onClick: () => {
       var d;
       return (d = B == null ? void 0 : B.current) == null ? void 0 : d.focus();
     }, children: [
@@ -113,38 +114,48 @@ const Ie = (j) => {
           "aria-describedby": W,
           "aria-invalid": H(r) ? "true" : "false",
           type: "text",
-          inputMode: ie,
-          value: le,
+          inputMode: oe,
+          value: se,
           required: q,
           disabled: _,
-          onChange: ue,
-          onFocus: de,
-          onBlur: ce,
+          onChange: de,
+          onFocus: ce,
+          onBlur: me,
           className: t,
           ...y
         }
       ),
-      w && /* @__PURE__ */ c(be, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: w })
+      w && /* @__PURE__ */ c(ve, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: w })
     ] });
-  }, fe = F(
+  }, pe = F(
     n["tedi-number-field"],
     { [n["tedi-number-field--invalid"]]: H(r) },
     { [n["tedi-number-field--disabled"]]: _ },
     { [n["tedi-number-field--small"]]: k === "small" },
     A
   );
-  return /* @__PURE__ */ $("div", { "data-name": "number-field", className: A, children: [
-    /* @__PURE__ */ c(_e, { id: L, label: M, required: q, hideLabel: ee, size: k }),
-    /* @__PURE__ */ $("div", { className: fe, children: [
+  return /* @__PURE__ */ P("div", { "data-name": "number-field", className: A, children: [
+    /* @__PURE__ */ c(
+      ye,
+      {
+        id: L,
+        label: M,
+        required: q,
+        hideLabel: ee,
+        size: k,
+        labelProps: te
+      }
+    ),
+    /* @__PURE__ */ P("div", { className: pe, children: [
       K("decrement"),
-      me(),
+      fe(),
       K("increment")
     ] }),
-    i && /* @__PURE__ */ c(Ne, { className: n["tedi-number-field__feedback"], ...i, id: W }),
-    /* @__PURE__ */ c("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: oe })
+    i && /* @__PURE__ */ c(_e, { className: n["tedi-number-field__feedback"], ...i, id: W }),
+    /* @__PURE__ */ c("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: ae })
   ] });
 };
-Ie.displayName = "NumberField";
+he.displayName = "NumberField";
 export {
-  Ie as NumberField
+  he as NumberField
 };

package/src/tedi/components/form/radio/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./radio.cjs.js"),o=require("./radio-group/radio-group.cjs.js"),i=Object.assign(r.Radio,{Group:o.RadioGroup});exports.RadioGroup=o.RadioGroup;exports.Radio=i;

package/src/tedi/components/form/radio/index.d.ts

@@ -0,0 +1,11 @@
+import { RadioProps } from './radio';
+import { default as RadioGroup } from './radio-group/radio-group';
+declare const Radio: {
+    (props: RadioProps): JSX.Element;
+    displayName?: string;
+    Group: typeof RadioGroup;
+};
+export { Radio, RadioGroup };
+export type { RadioProps } from './radio';
+export type { RadioGroupProps } from './radio-group/radio-group';
+export default Radio;

package/src/tedi/components/form/radio/index.es.js

@@ -0,0 +1,7 @@
+import { Radio as o } from "./radio.es.js";
+import { RadioGroup as i } from "./radio-group/radio-group.es.js";
+const p = Object.assign(o, { Group: i });
+export {
+  p as Radio,
+  i as RadioGroup
+};

package/src/tedi/components/form/radio/radio-group/radio-group-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.RadioGroupContext=e;

package/src/tedi/components/form/radio/radio-group/radio-group-context.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ChoiceInputCardVariant, ChoiceInputVariant } from '../../choice-input.types';
+export interface RadioGroupContextValue {
+    /** Shared `name` for all radios in the group. */
+    name: string;
+    /** Currently selected value (`null` when nothing is selected). */
+    value: string | null;
+    /** Called by a `Radio` when it is selected. */
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: 'default' | 'large';
+    variant?: ChoiceInputVariant;
+    cardVariant?: ChoiceInputCardVariant;
+}
+/**
+ * Provided by `Radio.Group`. When present, a `Radio` reads its selection,
+ * `name`, and shared visual props from here instead of managing its own state.
+ */
+export declare const RadioGroupContext: React.Context<RadioGroupContextValue | null>;

package/src/tedi/components/form/radio/radio-group/radio-group-context.es.js

@@ -0,0 +1,5 @@
+import t from "react";
+const e = t.createContext(null);
+export {
+  e as RadioGroupContext
+};

package/src/tedi/components/form/radio/radio-group/radio-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),V=require("../../../../../../external/classnames/index.cjs.js"),r=require("react"),z=require("../../feedback-text/feedback-text.cjs.js"),e=require("./radio-group.module.scss.cjs.js"),F=require("./radio-group-context.cjs.js"),L=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),c=p=>{const{getCurrentBreakpointProps:k}=L.useBreakpointProps(p.defaultServerBreakpoint),{id:I,name:C,label:l,hideLabel:G=!1,helper:d,className:R,value:g,defaultValue:P=null,onChange:t,disabled:u,invalid:s,required:i,size:m,variant:o="default",cardVariant:f="primary",direction:v=o==="card"?"row":"column",layout:b="separated",children:B}=k(p),S=r.useId(),h=I??S,M=r.useId(),x=C??M,n=g!==void 0,[T,$]=r.useState(P),q=n?g??null:T,_=d?d.id??`${h}-helper`:void 0,j=`${h}-legend`,y=r.useCallback(N=>{n||$(N),t==null||t(N)},[n,t]),w=r.useMemo(()=>({name:x,value:q,onValueChange:y,disabled:u,invalid:s,required:i,size:m,variant:o,cardVariant:f}),[x,q,y,u,s,i,m,o,f]);return a.jsxs("fieldset",{className:V.default(e.default["tedi-radio-group"],e.default[`tedi-radio-group--${v}`],{[e.default["tedi-radio-group--card"]]:o==="card"},{[e.default["tedi-radio-group--segmented"]]:b==="segmented"},R),role:"radiogroup","aria-labelledby":l?j:void 0,disabled:u,"aria-invalid":s||void 0,"aria-required":i||void 0,"aria-describedby":_,children:[l&&a.jsxs("legend",{id:j,className:V.default(e.default["tedi-radio-group__legend"],{"sr-only":G}),children:[l,i&&a.jsx("span",{"aria-hidden":"true",className:e.default["tedi-radio-group__required"],children:"*"})]}),a.jsx(F.RadioGroupContext.Provider,{value:w,children:a.jsx("div",{className:e.default["tedi-radio-group__items"],"data-layout":b,"data-direction":v,children:B})}),d&&a.jsx(z.FeedbackText,{id:_,...d})]})};c.displayName="Radio.Group";exports.RadioGroup=c;exports.default=c;

package/src/tedi/components/form/radio/radio-group/radio-group.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+import { ChoiceInputCardVariant, ChoiceInputVariant } from '../../choice-input.types';
+import { FeedbackTextProps } from '../../feedback-text/feedback-text';
+interface RadioGroupBreakpointProps {
+    /** Group id. When omitted a stable id is generated. */
+    id?: string;
+    /**
+     * Shared `name` for the radios. When omitted a stable name is generated so the
+     * group still behaves as a single native radio group.
+     */
+    name?: string;
+    /** Group label, rendered as the fieldset legend. */
+    label: React.ReactNode;
+    /** Visually hide the legend while keeping it available to screen readers. */
+    hideLabel?: boolean;
+    /** Helper / feedback text rendered below the group. */
+    helper?: FeedbackTextProps;
+    /** Additional class name(s) applied to the fieldset. */
+    className?: string;
+    /** Controlled selected value. Pair with `onChange`. */
+    value?: string | null;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string | null;
+    /** Fires with the newly selected value. */
+    onChange?: (value: string) => void;
+    /** Disables the whole group and every radio within it. */
+    disabled?: boolean;
+    /** Marks the group as invalid, forwarding the error state to each radio. */
+    invalid?: boolean;
+    /** Marks the group as required, adding a required indicator to the legend. */
+    required?: boolean;
+    /** Size forwarded to every radio. @default 'default' */
+    size?: 'default' | 'large';
+    /** Visual variant forwarded to every radio. @default 'default' */
+    variant?: ChoiceInputVariant;
+    /** Card colour variant forwarded to every radio (only applies to `variant="card"`). @default 'primary' */
+    cardVariant?: ChoiceInputCardVariant;
+    /** Layout direction of the radios. Defaults to `row` for cards, `column` otherwise. */
+    direction?: 'row' | 'column';
+    /**
+     * Card layout. `separated` = individual cards with a gap; `segmented` = joined
+     * cards with shared borders and only the group's outer corners rounded (a
+     * button-group style). Only applies to `variant="card"`.
+     * @default separated
+     */
+    layout?: 'separated' | 'segmented';
+    /** The `Radio` items that make up the group. */
+    children: React.ReactNode;
+}
+export type RadioGroupProps = BreakpointSupport<RadioGroupBreakpointProps>;
+export declare const RadioGroup: {
+    (props: RadioGroupProps): JSX.Element;
+    displayName: string;
+};
+export default RadioGroup;

package/src/tedi/components/form/radio/radio-group/radio-group.es.js

@@ -0,0 +1,78 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import x from "../../../../../../external/classnames/index.es.js";
+import a from "react";
+import { FeedbackText as L } from "../../feedback-text/feedback-text.es.js";
+import e from "./radio-group.module.scss.es.js";
+import { RadioGroupContext as M } from "./radio-group-context.es.js";
+import { useBreakpointProps as T } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+const A = (c) => {
+  const { getCurrentBreakpointProps: C } = T(c.defaultServerBreakpoint), {
+    id: R,
+    name: q,
+    label: l,
+    hideLabel: B = !1,
+    helper: r,
+    className: G,
+    value: m,
+    defaultValue: P = null,
+    onChange: d,
+    disabled: s,
+    invalid: n,
+    required: o,
+    size: p,
+    variant: i = "default",
+    cardVariant: g = "primary",
+    direction: v = i === "card" ? "row" : "column",
+    layout: f = "separated",
+    children: $
+  } = C(c), j = a.useId(), h = R ?? j, S = a.useId(), b = q ?? S, u = m !== void 0, [w, z] = a.useState(P), N = u ? m ?? null : w, y = r ? r.id ?? `${h}-helper` : void 0, V = `${h}-legend`, _ = a.useCallback(
+    (I) => {
+      u || z(I), d == null || d(I);
+    },
+    [u, d]
+  ), F = a.useMemo(
+    () => ({
+      name: b,
+      value: N,
+      onValueChange: _,
+      disabled: s,
+      invalid: n,
+      required: o,
+      size: p,
+      variant: i,
+      cardVariant: g
+    }),
+    [b, N, _, s, n, o, p, i, g]
+  );
+  return /* @__PURE__ */ k(
+    "fieldset",
+    {
+      className: x(
+        e["tedi-radio-group"],
+        e[`tedi-radio-group--${v}`],
+        { [e["tedi-radio-group--card"]]: i === "card" },
+        { [e["tedi-radio-group--segmented"]]: f === "segmented" },
+        G
+      ),
+      role: "radiogroup",
+      "aria-labelledby": l ? V : void 0,
+      disabled: s,
+      "aria-invalid": n || void 0,
+      "aria-required": o || void 0,
+      "aria-describedby": y,
+      children: [
+        l && /* @__PURE__ */ k("legend", { id: V, className: x(e["tedi-radio-group__legend"], { "sr-only": B }), children: [
+          l,
+          o && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: e["tedi-radio-group__required"], children: "*" })
+        ] }),
+        /* @__PURE__ */ t(M.Provider, { value: F, children: /* @__PURE__ */ t("div", { className: e["tedi-radio-group__items"], "data-layout": f, "data-direction": v, children: $ }) }),
+        r && /* @__PURE__ */ t(L, { id: y, ...r })
+      ]
+    }
+  );
+};
+A.displayName = "Radio.Group";
+export {
+  A as RadioGroup,
+  A as default
+};

package/src/tedi/components/form/radio/radio-group/radio-group.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d={"tedi-radio-group":"tedi-radio-group-9afc9d2d","tedi-radio-group__legend":"tedi-radio-group__legend-b05d4880","tedi-radio-group__required":"tedi-radio-group__required-d42646cf","tedi-radio-group__items":"tedi-radio-group__items-aa5bd239","tedi-radio-group--column":"tedi-radio-group--column-45aad530","tedi-radio-group--row":"tedi-radio-group--row-c3eb1dfe","tedi-radio-group--card":"tedi-radio-group--card-5828dd1c","tedi-radio-group--segmented":"tedi-radio-group--segmented-2b67e0c6"};exports.default=d;

package/src/tedi/components/form/radio/radio-group/radio-group.module.scss.es.js

@@ -0,0 +1,13 @@
+const d = {
+  "tedi-radio-group": "tedi-radio-group-9afc9d2d",
+  "tedi-radio-group__legend": "tedi-radio-group__legend-b05d4880",
+  "tedi-radio-group__required": "tedi-radio-group__required-d42646cf",
+  "tedi-radio-group__items": "tedi-radio-group__items-aa5bd239",
+  "tedi-radio-group--column": "tedi-radio-group--column-45aad530",
+  "tedi-radio-group--row": "tedi-radio-group--row-c3eb1dfe",
+  "tedi-radio-group--card": "tedi-radio-group--card-5828dd1c",
+  "tedi-radio-group--segmented": "tedi-radio-group--segmented-2b67e0c6"
+};
+export {
+  d as default
+};

package/src/tedi/components/form/radio/radio.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),j=k=>{const{id:r,label:u,value:n,className:q,disabled:s,onChange:i,hideLabel:C,helper:t,checked:o,defaultChecked:N,hover:g,name:R,tooltip:f,size:h="default",invalid:y,required:_,...w}=k,[b,L]=c.useState(N||!1),m=c.useRef(null),M=c.useMemo(()=>i&&typeof o<"u"?o:b,[i,b,o]),v=d=>{typeof o>"u"&&L(d==null?void 0:d.target.checked),i==null||i(n,d==null?void 0:d.target.checked)},p=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:l.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...w,children:[a.jsxs(z.Row,{gutter:0,children:[a.jsx(x.Col,{width:"auto",children:a.jsxs("div",{className:e.default["tedi-radio__outer-indicator-wrapper"],children:[a.jsx("input",{id:r,value:n,name:R,type:"radio",disabled:s,checked:M,onChange:v,className:e.default["tedi-radio__input"],"aria-describedby":[p,I].filter(Boolean).join(" "),required:_}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=m.current)==null?void 0:d.click()},className:l.default(e.default["tedi-radio__indicator"],{[e.default["tedi-radio__indicator--hover"]]:g},{[e.default[`tedi-radio__indicator--size-${h}`]]:h},{[e.default["tedi-radio__indicator--invalid"]]:y},q),"data-testid":"radio-indicator"})]})}),u&&a.jsx(x.Col,{children:a.jsx($.FormLabel,{ref:m,className:S,id:r,"data-testid":"radio-label",hideLabel:C,label:u,tooltip:f,required:_})})]}),t&&a.jsx(T.FeedbackText,{id:p,...t,className:l.default(e.default["tedi-radio__helper"],t.className)})]})};exports.Radio=j;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),ee=require("../../base/icon/icon.cjs.js"),R=require("../feedback-text/feedback-text.cjs.js"),ae=require("../form-label/form-label.cjs.js"),a=require("./radio.module.scss.cjs.js"),de=require("./radio-group/radio-group-context.cjs.js"),ie=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),te=require("../../layout/grid/row.cjs.js"),z=require("../../layout/grid/col.cjs.js"),N=j=>{const e=s.useContext(de.RadioGroupContext),{getCurrentBreakpointProps:$}=ie.useBreakpointProps(j.defaultServerBreakpoint),{id:L,label:c,value:o,className:q,onChange:l,hideLabel:v,helper:t,checked:u,defaultChecked:V,hover:M,name:S,tooltip:k,description:b,icon:h,labelProps:T,size:E,variant:F,cardVariant:G,disabled:D,invalid:H,required:y,...C}=$(j),p=E??(e==null?void 0:e.size)??"default",P=F??(e==null?void 0:e.variant)??"default",O=G??(e==null?void 0:e.cardVariant)??"primary",f=D??(e==null?void 0:e.disabled)??!1,U=H??(e==null?void 0:e.invalid),A=y??(e==null?void 0:e.required);P==="card"&&k&&console.warn('Radio: `tooltip` is not supported with `variant="card"` and will be ignored. Use `description`.');const J=s.useId(),n=L??J,K=S??(e==null?void 0:e.name),[w,Q]=s.useState(V||!1),_=e!==null,W=s.useMemo(()=>_?(e==null?void 0:e.value)===o:l&&typeof u<"u"?u:w,[_,e,o,l,u,w]),X=i=>{_?e==null||e.onValueChange(o):typeof u>"u"&&Q(i==null?void 0:i.target.checked),l==null||l(o,i==null?void 0:i.target.checked)},m=t?t.id??`${n}-helper`:void 0,Y=m,B=d.jsx("input",{id:n,value:o,name:K,type:"radio",disabled:f,checked:W,required:A,onChange:X,className:a.default["tedi-radio__input"],"aria-describedby":Y}),x=d.jsx("span",{"aria-hidden":"true",className:r.default(a.default["tedi-radio__indicator"],{[a.default["tedi-radio__indicator--hover"]]:M},{[a.default[`tedi-radio__indicator--size-${p}`]]:p},{[a.default["tedi-radio__indicator--invalid"]]:U}),"data-testid":"radio-indicator"});if(P==="card"){const i=`${n}-label`,I=b?`${n}-description`:void 0,g=[I,m].filter(Boolean).join(" ")||void 0;return d.jsxs("label",{"data-name":"radio",className:r.default(a.default["tedi-radio"],a.default["tedi-radio--card"],a.default[`tedi-radio--card-${O}`],{[a.default["tedi-radio--card-with-icon"]]:!!h},{[a.default["tedi-radio--disabled"]]:f},q),...C,children:[d.jsxs("span",{className:a.default["tedi-radio__card-control"],children:[s.cloneElement(B,{"aria-labelledby":c?i:void 0,"aria-describedby":g}),x,h&&d.jsx(ee.Icon,{name:h,size:p==="default"?18:24,className:a.default["tedi-radio__card-icon"]}),d.jsx("span",{id:i,className:r.default(a.default["tedi-radio__card-label"],{"sr-only":v}),children:c})]}),b&&d.jsx("span",{id:I,className:a.default["tedi-radio__card-description"],children:b}),t&&d.jsx(R.FeedbackText,{id:m,...t,className:r.default(a.default["tedi-radio__helper"],t.className)})]})}const Z=r.default(a.default["tedi-radio__label"],{[a.default["tedi-radio--disabled"]]:f});return d.jsxs("div",{className:r.default(a.default["tedi-radio"],{[a.default["tedi-radio--disabled"]]:f}),"data-name":"radio",...C,children:[d.jsxs(te.Row,{gutter:0,children:[d.jsx(z.Col,{width:"auto",children:d.jsxs("div",{className:a.default["tedi-radio__outer-indicator-wrapper"],children:[B,s.cloneElement(x,{className:r.default(x.props.className,q)})]})}),c&&d.jsx(z.Col,{children:d.jsx(ae.FormLabel,{className:Z,id:n,"data-testid":"radio-label",hideLabel:v,label:c,tooltip:k,required:y,labelProps:T})})]}),t&&d.jsx(R.FeedbackText,{id:m,...t,className:r.default(a.default["tedi-radio__helper"],t.className)})]})};N.displayName="Radio";exports.Radio=N;exports.default=N;