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

package/src/tedi/components/form/checkbox/checkbox.es.js

@@ -1,125 +1,163 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import t from "../../../../../external/classnames/index.es.js";
-import n from "react";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import d from "../../../../../external/classnames/index.es.js";
+import r from "react";
 import { Icon as C } from "../../base/icon/icon.es.js";
-import { FeedbackText as H } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as M } from "../form-label/form-label.es.js";
-import e from "./checkbox.module.scss.es.js";
-import { Row as S } from "../../layout/grid/row.es.js";
-import { Col as R } from "../../layout/grid/col.es.js";
-const U = (y) => {
-  const {
-    id: o,
-    label: k,
-    value: b,
-    className: g,
-    disabled: h = !1,
-    onChange: a,
-    hideLabel: v = !1,
-    helper: d,
-    checked: m,
-    defaultChecked: z,
-    indeterminate: r,
-    hover: I,
-    name: j,
-    tooltip: _,
-    invalid: u,
-    size: l = "default",
-    required: p,
-    ...w
-  } = y, [L, $] = n.useState(z || !1), x = n.useRef(null), f = n.useRef(null), B = a && typeof m < "u" ? m : L;
-  n.useEffect(() => {
-    f.current && (f.current.indeterminate = !!r);
-  }, [r]);
-  const E = (c) => {
-    typeof m > "u" && $(c == null ? void 0 : c.target.checked), a == null || a(b, c == null ? void 0 : c.target.checked);
-  }, N = d ? d.id ?? `${o}-helper` : void 0, F = _ ? `${o}-tooltip` : void 0, q = t(e["tedi-checkbox__label"], { [e["tedi-checkbox--disabled"]]: h });
-  return /* @__PURE__ */ s(
+import { FeedbackText as E } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ae } from "../form-label/form-label.es.js";
+import c from "./checkbox.module.scss.es.js";
+import { CheckboxGroupContext as de } from "./checkbox-group/checkbox-group-context.es.js";
+import { useBreakpointProps as te } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Row as re } from "../../layout/grid/row.es.js";
+import { Col as D } from "../../layout/grid/col.es.js";
+const oe = (y) => {
+  const e = r.useContext(de), { getCurrentBreakpointProps: F } = te(y.defaultServerBreakpoint), {
+    id: G,
+    label: m,
+    value: n,
+    className: I,
+    onChange: s,
+    hideLabel: P = !1,
+    helper: t,
+    checked: k,
+    defaultChecked: M,
+    indeterminate: l,
+    hover: S,
+    name: T,
+    tooltip: z,
+    description: _,
+    icon: p,
+    labelProps: H,
+    size: U,
+    variant: A,
+    cardVariant: J,
+    disabled: K,
+    invalid: w,
+    required: O,
+    ...B
+  } = F(y), h = U ?? (e == null ? void 0 : e.size) ?? "default", $ = A ?? (e == null ? void 0 : e.variant) ?? "default", Q = J ?? (e == null ? void 0 : e.cardVariant) ?? "primary";
+  $ === "card" && z && console.warn('Checkbox: `tooltip` is not supported with `variant="card"` and will be ignored. Use `description`.');
+  const f = K ?? (e == null ? void 0 : e.disabled) ?? !1, W = w ?? (e == null ? void 0 : e.invalid), L = O, X = r.useId(), b = G ?? X, Y = T ?? (e == null ? void 0 : e.name), [R, Z] = r.useState(M || !1), u = r.useRef(null), N = e !== null, v = r.useMemo(() => l ? "mixed" : N ? !!(e != null && e.values.includes(n)) : s && typeof k < "u" ? k : R, [l, N, e, n, s, k, R]);
+  r.useEffect(() => {
+    u.current && (u.current.indeterminate = !!l);
+  }, [l, v]);
+  const g = (i) => {
+    N ? e == null || e.onToggle(n, i.target.checked) : typeof k > "u" && Z(i == null ? void 0 : i.target.checked), s == null || s(n, i == null ? void 0 : i.target.checked);
+  }, x = t ? t.id ?? `${b}-helper` : void 0, ee = x, V = /* @__PURE__ */ a(
+    "input",
+    {
+      ref: u,
+      id: b,
+      value: n,
+      name: Y,
+      type: "checkbox",
+      disabled: f,
+      checked: v !== "mixed" ? v : !1,
+      required: L,
+      "aria-invalid": w || void 0,
+      onChange: g,
+      className: c["tedi-checkbox__input"],
+      "aria-describedby": ee
+    }
+  ), j = (i) => /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: d(
+        c["tedi-checkbox__indicator"],
+        {
+          [c["tedi-checkbox__indicator--hover"]]: S,
+          [c["tedi-checkbox__indicator--indeterminate"]]: l,
+          [c[`tedi-checkbox__indicator--size-${h}`]]: h,
+          [c["tedi-checkbox__indicator--invalid"]]: W
+        },
+        i
+      ),
+      "data-testid": "checkbox-indicator",
+      children: [
+        /* @__PURE__ */ a(
+          C,
+          {
+            size: h === "default" ? 16 : 18,
+            name: "remove",
+            className: d(c["tedi-checkbox__icon"], c["tedi-checkbox__icon--indeterminate"])
+          }
+        ),
+        /* @__PURE__ */ a(
+          C,
+          {
+            size: h === "default" ? 16 : 18,
+            name: "check",
+            className: d(c["tedi-checkbox__icon"], c["tedi-checkbox__icon--check"])
+          }
+        )
+      ]
+    }
+  );
+  if ($ === "card") {
+    const i = `${b}-label`, q = _ ? `${b}-description` : void 0, ie = [q, x].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ o(
+      "label",
+      {
+        "data-name": "check",
+        className: d(
+          c["tedi-checkbox"],
+          c["tedi-checkbox--card"],
+          c[`tedi-checkbox--card-${Q}`],
+          { [c["tedi-checkbox--card-with-icon"]]: !!p },
+          { [c["tedi-checkbox--disabled"]]: f },
+          I
+        ),
+        ...B,
+        children: [
+          /* @__PURE__ */ o("span", { className: c["tedi-checkbox__card-control"], children: [
+            r.cloneElement(V, {
+              "aria-labelledby": m ? i : void 0,
+              "aria-describedby": ie
+            }),
+            j(),
+            p && /* @__PURE__ */ a(C, { name: p, size: h === "default" ? 18 : 24, className: c["tedi-checkbox__card-icon"] }),
+            /* @__PURE__ */ a("span", { id: i, className: d(c["tedi-checkbox__card-label"], { "sr-only": P }), children: m })
+          ] }),
+          _ && /* @__PURE__ */ a("span", { id: q, className: c["tedi-checkbox__card-description"], children: _ }),
+          t && /* @__PURE__ */ a(E, { id: x, ...t, className: d(c["tedi-checkbox__helper"], t.className) })
+        ]
+      }
+    );
+  }
+  const ce = d(c["tedi-checkbox__label"], { [c["tedi-checkbox--disabled"]]: f });
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: t(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: h }),
+      className: d(c["tedi-checkbox"], { [c["tedi-checkbox--disabled"]]: f }),
       "data-name": "check",
-      ...w,
+      ...B,
       children: [
-        /* @__PURE__ */ s(S, { gutter: 0, children: [
-          /* @__PURE__ */ i(R, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
-            /* @__PURE__ */ i(
-              "input",
-              {
-                ref: f,
-                id: o,
-                value: b,
-                name: j,
-                type: "checkbox",
-                disabled: h,
-                checked: r ? !1 : B,
-                onChange: E,
-                className: e["tedi-checkbox__input"],
-                "aria-describedby": [N, F].filter(Boolean).join(" "),
-                required: p,
-                "aria-invalid": u || void 0
-              }
-            ),
-            /* @__PURE__ */ s(
-              "div",
-              {
-                "aria-hidden": "true",
-                onClick: () => {
-                  var c;
-                  return (c = x.current) == null ? void 0 : c.click();
-                },
-                className: t(
-                  e["tedi-checkbox__indicator"],
-                  {
-                    [e["tedi-checkbox__indicator--hover"]]: I,
-                    [e["tedi-checkbox__indicator--indeterminate"]]: r,
-                    [e[`tedi-checkbox__indicator--size-${l}`]]: l,
-                    [e["tedi-checkbox__indicator--invalid"]]: u
-                  },
-                  g
-                ),
-                "data-testid": "checkbox-indicator",
-                children: [
-                  /* @__PURE__ */ i(
-                    C,
-                    {
-                      size: l === "default" ? 16 : 18,
-                      name: "remove",
-                      className: t(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
-                    }
-                  ),
-                  /* @__PURE__ */ i(
-                    C,
-                    {
-                      size: l === "default" ? 16 : 18,
-                      name: "check",
-                      className: t(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
-                    }
-                  )
-                ]
-              }
-            )
+        /* @__PURE__ */ o(re, { gutter: 0, children: [
+          /* @__PURE__ */ a(D, { width: "auto", children: /* @__PURE__ */ o("div", { className: c["tedi-checkbox__outer-indicator-wrapper"], children: [
+            V,
+            j(I)
           ] }) }),
-          k && /* @__PURE__ */ i(R, { children: /* @__PURE__ */ i(
-            M,
+          m && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(
+            ae,
             {
-              ref: x,
-              className: q,
-              id: o,
+              className: ce,
+              id: b,
               "data-testid": "checkbox-label",
-              hideLabel: v,
-              label: k,
-              tooltip: _,
-              required: p
+              hideLabel: P,
+              label: m,
+              tooltip: z,
+              required: L,
+              labelProps: H
             }
           ) })
         ] }),
-        d && /* @__PURE__ */ i(H, { id: N, ...d, className: t(e["tedi-checkbox__helper"], d.className) })
+        t && /* @__PURE__ */ a(E, { id: x, ...t, className: d(c["tedi-checkbox__helper"], t.className) })
       ]
     }
   );
 };
+oe.displayName = "Checkbox";
 export {
-  U as Checkbox,
-  U as default
+  oe as Checkbox,
+  oe as default
 };

package/src/tedi/components/form/checkbox/checkbox.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-checkbox":"tedi-checkbox-0294a114","tedi-checkbox--disabled":"tedi-checkbox--disabled-e22bbaf4","tedi-checkbox__input":"tedi-checkbox__input-2ecab369","tedi-checkbox__outer-indicator-wrapper":"tedi-checkbox__outer-indicator-wrapper-5c85e0ab","tedi-checkbox__helper":"tedi-checkbox__helper-ab2b492c","tedi-checkbox__icon":"tedi-checkbox__icon-281ccd2f","tedi-checkbox__indicator":"tedi-checkbox__indicator-3ae3e79f","tedi-checkbox__icon--check":"tedi-checkbox__icon--check-048f3d53","tedi-checkbox__indicator--indeterminate":"tedi-checkbox__indicator--indeterminate-909c7897","tedi-checkbox__icon--indeterminate":"tedi-checkbox__icon--indeterminate-3e893b59","tedi-checkbox__tooltip-icon":"tedi-checkbox__tooltip-icon-46223bb7","tedi-checkbox__indicator--size-default":"tedi-checkbox__indicator--size-default-00511279","tedi-checkbox__indicator--size-large":"tedi-checkbox__indicator--size-large-b64ce54c","tedi-checkbox__indicator--hover":"tedi-checkbox__indicator--hover-436b8cb1","tedi-checkbox__indicator--invalid":"tedi-checkbox__indicator--invalid-019a355d"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c={"tedi-checkbox":"tedi-checkbox-0294a114","tedi-checkbox--disabled":"tedi-checkbox--disabled-e22bbaf4","tedi-checkbox__input":"tedi-checkbox__input-2ecab369","tedi-checkbox__outer-indicator-wrapper":"tedi-checkbox__outer-indicator-wrapper-5c85e0ab","tedi-checkbox__helper":"tedi-checkbox__helper-ab2b492c","tedi-checkbox__icon":"tedi-checkbox__icon-281ccd2f","tedi-checkbox__indicator":"tedi-checkbox__indicator-3ae3e79f","tedi-checkbox__icon--check":"tedi-checkbox__icon--check-048f3d53","tedi-checkbox__indicator--indeterminate":"tedi-checkbox__indicator--indeterminate-909c7897","tedi-checkbox__icon--indeterminate":"tedi-checkbox__icon--indeterminate-3e893b59","tedi-checkbox__tooltip-icon":"tedi-checkbox__tooltip-icon-46223bb7","tedi-checkbox__indicator--size-default":"tedi-checkbox__indicator--size-default-00511279","tedi-checkbox__indicator--size-large":"tedi-checkbox__indicator--size-large-b64ce54c","tedi-checkbox__indicator--invalid":"tedi-checkbox__indicator--invalid-019a355d","tedi-checkbox__indicator--hover":"tedi-checkbox__indicator--hover-436b8cb1","tedi-checkbox--card":"tedi-checkbox--card-d1faeb0e","tedi-checkbox__card-control":"tedi-checkbox__card-control-ea88c4f4","tedi-checkbox__card-label":"tedi-checkbox__card-label-4c136337","tedi-checkbox__card-icon":"tedi-checkbox__card-icon-a4d72e5a","tedi-checkbox__card-description":"tedi-checkbox__card-description-fa672631","tedi-checkbox--card-with-icon":"tedi-checkbox--card-with-icon-2636b953","tedi-checkbox--card-primary":"tedi-checkbox--card-primary-b7da557f","tedi-checkbox--card-secondary":"tedi-checkbox--card-secondary-179169ca"};exports.default=c;

package/src/tedi/components/form/checkbox/checkbox.module.scss.es.js

@@ -1,4 +1,4 @@
-const e = {
+const c = {
   "tedi-checkbox": "tedi-checkbox-0294a114",
   "tedi-checkbox--disabled": "tedi-checkbox--disabled-e22bbaf4",
   "tedi-checkbox__input": "tedi-checkbox__input-2ecab369",
@@ -12,9 +12,17 @@ const e = {
   "tedi-checkbox__tooltip-icon": "tedi-checkbox__tooltip-icon-46223bb7",
   "tedi-checkbox__indicator--size-default": "tedi-checkbox__indicator--size-default-00511279",
   "tedi-checkbox__indicator--size-large": "tedi-checkbox__indicator--size-large-b64ce54c",
+  "tedi-checkbox__indicator--invalid": "tedi-checkbox__indicator--invalid-019a355d",
   "tedi-checkbox__indicator--hover": "tedi-checkbox__indicator--hover-436b8cb1",
-  "tedi-checkbox__indicator--invalid": "tedi-checkbox__indicator--invalid-019a355d"
+  "tedi-checkbox--card": "tedi-checkbox--card-d1faeb0e",
+  "tedi-checkbox__card-control": "tedi-checkbox__card-control-ea88c4f4",
+  "tedi-checkbox__card-label": "tedi-checkbox__card-label-4c136337",
+  "tedi-checkbox__card-icon": "tedi-checkbox__card-icon-a4d72e5a",
+  "tedi-checkbox__card-description": "tedi-checkbox__card-description-fa672631",
+  "tedi-checkbox--card-with-icon": "tedi-checkbox--card-with-icon-2636b953",
+  "tedi-checkbox--card-primary": "tedi-checkbox--card-primary-b7da557f",
+  "tedi-checkbox--card-secondary": "tedi-checkbox--card-secondary-179169ca"
 };
 export {
-  e as default
+  c as default
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./checkbox.cjs.js"),e=require("./checkbox-group/checkbox-group.cjs.js"),c=Object.assign(o.Checkbox,{Group:e.CheckboxGroup});exports.CheckboxGroup=e.CheckboxGroup;exports.Checkbox=c;

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

@@ -0,0 +1,11 @@
+import { CheckboxProps } from './checkbox';
+import { default as CheckboxGroup } from './checkbox-group/checkbox-group';
+declare const Checkbox: {
+    (props: CheckboxProps): JSX.Element;
+    displayName?: string;
+    Group: typeof CheckboxGroup;
+};
+export { Checkbox, CheckboxGroup };
+export type { CheckboxBaseProps, CheckboxProps } from './checkbox';
+export type { CheckboxGroupProps } from './checkbox-group/checkbox-group';
+export default Checkbox;

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

@@ -0,0 +1,7 @@
+import { Checkbox as o } from "./checkbox.es.js";
+import { CheckboxGroup as r } from "./checkbox-group/checkbox-group.es.js";
+const b = Object.assign(o, { Group: r });
+export {
+  b as Checkbox,
+  r as CheckboxGroup
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),Z=require("../feedback-text/feedback-text.cjs.js"),ee=require("../form-label/form-label.cjs.js"),te=require("../checkbox/checkbox.cjs.js"),j=require("./choice-group.module.scss.cjs.js"),re=require("./choice-group-context.cjs.js"),R=require("./components/choice-group-item/choice-group-item.cjs.js"),oe=require("../../../providers/label-provider/use-labels.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ne=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),N=require("../../layout/grid/row.cjs.js"),ie=require("../../layout/grid/col.cjs.js"),I=h=>{const{getLabel:m}=oe.useLabels(),S=B.default(h.defaultServerBreakpoint),{getCurrentBreakpointProps:T}=ne.useBreakpointProps(h.defaultServerBreakpoint),{id:c,className:H,label:p,required:G,helper:a,items:o,variant:k="default",direction:v=k==="default"||B.isBreakpointBelow(S,"md")?"column":"row",rowProps:b,name:w,inputType:i="radio",value:L,defaultValue:M,onChange:d,hideLabel:P,indeterminateCheck:s,indeterminateCheckProps:x={},color:E,layout:y="separated",showIndicator:$,...O}=T(h),{...W}=x,X=(x==null?void 0:x.indented)??!0,C=(a==null?void 0:a.id)??`${c}-helper`,A=s&&i==="checkbox",[Y,_]=f.useState(()=>{if(M)return M;if(i==="radio"){const e=o.find(l=>l.defaultChecked);return e?e.value:null}return i==="checkbox"?o.filter(e=>e.defaultChecked).map(e=>e.value):null}),q=(e=h.value)=>!!d&&typeof e<"u",r=q(L)?L:Y,g=f.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),u=f.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=o==null?void 0:o.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,o]),z=f.useMemo(()=>!g&&!u,[u,g]),D=f.useMemo(()=>{const e=u?"all":g?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,u,g]),J={name:w,inputType:i,onChange:(e,l)=>{let t=r;i==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(V=>V!==e):t:t=e,q()||_(Array.isArray(t)?[...t]:t),d==null||d(t)},currentValue:r},K=F.default(j.default["tedi-choice-group"],H),Q=F.default(j.default["tedi-choice-group__inner"],b==null?void 0:b.className,{[j.default["tedi-choice-group__inner--indented"]]:A&&X}),U=()=>{var l;const e=u?[]:(l=o==null?void 0:o.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);q()||_([...e]),d==null||d(e)};return n.jsx(re.ChoiceGroupContext.Provider,{value:J,children:n.jsxs("fieldset",{...O,className:K,id:c,name:w,"aria-describedby":a&&i!=="radio"?C:void 0,children:[p&&typeof p=="string"?n.jsx(ee.FormLabel,{id:c,label:p,required:G,hideLabel:P,renderWithoutLabel:!0}):n.jsx("label",{htmlFor:c,children:p}),n.jsx(N.Row,{children:n.jsx(ie.Col,{children:o!=null&&o.length?n.jsxs(n.Fragment,{children:[A&&n.jsx(te.Checkbox,{id:`${c}-indeterminate`,value:"indeterminate",name:"indeterminate",...W,label:D,indeterminate:z,checked:u,onChange:U}),n.jsx(N.Row,{direction:v,gutterX:y==="segmented"?0:2,gutterY:y==="segmented"?0:1,gap:k==="default"&&(B.isBreakpointBelow(S,"md")||v==="row")?1:0,...b,className:Q,role:i==="radio"?"radiogroup":void 0,"aria-labelledby":i==="radio"?c:void 0,"aria-describedby":i==="radio"&&a?C:void 0,"aria-required":i==="radio"&&G?!0:void 0,"aria-invalid":i==="radio"&&(a==null?void 0:a.type)==="error"?!0:void 0,children:o.map(e=>n.jsx(R.ChoiceGroupItem,{...e,color:E,variant:k,type:i,layout:y,showIndicator:$,direction:v},e.id))})]}):n.jsx("p",{children:m("table.filter.no-options")})})}),a&&n.jsx(Z.FeedbackText,{...a,id:C})]})})};I.Item=R.ChoiceGroupItem;exports.ChoiceGroup=I;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),ee=require("../feedback-text/feedback-text.cjs.js"),te=require("../form-label/form-label.cjs.js"),re=require("../checkbox/checkbox.cjs.js"),q=require("./choice-group.module.scss.cjs.js"),oe=require("./choice-group-context.cjs.js"),P=require("./components/choice-group-item/choice-group-item.cjs.js"),ne=require("../../../providers/label-provider/use-labels.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ie=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=require("../../layout/grid/row.cjs.js"),ae=require("../../layout/grid/col.cjs.js"),B=h=>{const{getLabel:m}=ne.useLabels(),I=j.default(h.defaultServerBreakpoint),{getCurrentBreakpointProps:R}=ie.useBreakpointProps(h.defaultServerBreakpoint),{id:u,className:T,label:S,required:G,helper:a,items:o,variant:g="default",direction:k=g==="default"||j.isBreakpointBelow(I,"md")?"column":"row",rowProps:p,name:w,inputType:n="radio",value:L,defaultValue:M,onChange:d,hideLabel:H,labelProps:E,indeterminateCheck:s,indeterminateCheckProps:b={},color:$,layout:v="separated",showIndicator:O,...W}=R(h),{...X}=b,Y=(b==null?void 0:b.indented)??!0,y=(a==null?void 0:a.id)??`${u}-helper`,A=s&&n==="checkbox",[z,_]=f.useState(()=>{if(M)return M;if(n==="radio"){const e=o.find(l=>l.defaultChecked);return e?e.value:null}return n==="checkbox"?o.filter(e=>e.defaultChecked).map(e=>e.value):null}),C=(e=h.value)=>!!d&&typeof e<"u",r=C(L)?L:z,x=f.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),c=f.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=o==null?void 0:o.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,o]),D=f.useMemo(()=>!x&&!c,[c,x]),J=f.useMemo(()=>{const e=c?"all":x?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,c,x]),K={name:w,inputType:n,onChange:(e,l)=>{let t=r;n==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(Z=>Z!==e):t:t=e,C()||_(Array.isArray(t)?[...t]:t),d==null||d(t)},currentValue:r},Q=N.default(q.default["tedi-choice-group"],T),U=N.default(q.default["tedi-choice-group__inner"],p==null?void 0:p.className,{[q.default["tedi-choice-group__inner--indented"]]:A&&Y}),V=()=>{var l;const e=c?[]:(l=o==null?void 0:o.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);C()||_([...e]),d==null||d(e)};return i.jsx(oe.ChoiceGroupContext.Provider,{value:K,children:i.jsxs("fieldset",{...W,className:Q,id:u,name:w,"aria-describedby":a&&n!=="radio"?y:void 0,children:[S&&i.jsx(te.FormLabel,{id:u,label:S,required:G,hideLabel:H,renderWithoutLabel:!0,labelProps:E}),i.jsx(F.Row,{children:i.jsx(ae.Col,{children:o!=null&&o.length?i.jsxs(i.Fragment,{children:[A&&i.jsx(re.Checkbox,{id:`${u}-indeterminate`,value:"indeterminate",name:"indeterminate",...X,label:J,indeterminate:D,checked:c,onChange:V}),i.jsx(F.Row,{direction:k,gutterX:v==="segmented"?0:2,gutterY:v==="segmented"?0:1,gap:g==="default"&&(j.isBreakpointBelow(I,"md")||k==="row")?1:0,...p,className:U,role:n==="radio"?"radiogroup":void 0,"aria-labelledby":n==="radio"?u:void 0,"aria-describedby":n==="radio"&&a?y:void 0,"aria-required":n==="radio"&&G?!0:void 0,"aria-invalid":n==="radio"&&(a==null?void 0:a.type)==="error"?!0:void 0,children:o.map(e=>i.jsx(P.ChoiceGroupItem,{...e,color:$,variant:g,type:n,layout:v,showIndicator:O,direction:k},e.id))})]}):i.jsx("p",{children:m("table.filter.no-options")})})}),a&&i.jsx(ee.FeedbackText,{...a,id:y})]})})};B.Item=P.ChoiceGroupItem;exports.ChoiceGroup=B;exports.default=B;

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

@@ -28,8 +28,19 @@ interface ChoiceGroupAllProps extends Omit<FormLabelProps, 'id' | 'label'> {
         indented?: boolean;
     } & Partial<Omit<CheckboxProps, 'indeterminate' | 'checked' | 'onChange' | 'defaultChecked' | 'label'>>;
 }
+/**
+ * @deprecated Use the compound `Radio.Group` / `Checkbox.Group` (with composable
+ * `Radio` / `Checkbox` children, including `variant="card"`) instead. `ChoiceGroup`
+ * remains for backwards compatibility and will be removed in a future major version.
+ */
 export interface ChoiceGroupProps extends BreakpointSupport<ChoiceGroupAllProps> {
 }
+/**
+ * @deprecated Use the compound `Radio.Group` / `Checkbox.Group` instead — e.g.
+ * `<Radio.Group label="…"><Radio value="a" label="A" /></Radio.Group>`, with
+ * `variant="card"` for the card layout. `ChoiceGroup` stays for backwards
+ * compatibility and will be removed in a future major version.
+ */
 export declare const ChoiceGroup: {
     (props: ChoiceGroupProps): React.ReactElement;
     Item: (props: ExtendedChoiceGroupItemProps) => React.ReactElement;

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

@@ -1,107 +1,118 @@
-import { jsx as a, jsxs as F, Fragment as Z } from "react/jsx-runtime";
+import { jsx as a, jsxs as F, Fragment as ee } from "react/jsx-runtime";
 import G from "../../../../../external/classnames/index.es.js";
-import y, { useState as ee } from "react";
-import { FeedbackText as te } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as re } from "../form-label/form-label.es.js";
-import { Checkbox as oe } from "../checkbox/checkbox.es.js";
-import B from "./choice-group.module.scss.es.js";
-import { ChoiceGroupContext as ie } from "./choice-group-context.es.js";
+import g, { useState as te } from "react";
+import { FeedbackText as re } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as oe } from "../form-label/form-label.es.js";
+import { Checkbox as ie } from "../checkbox/checkbox.es.js";
+import I from "./choice-group.module.scss.es.js";
+import { ChoiceGroupContext as ne } from "./choice-group-context.es.js";
 import { ChoiceGroupItem as q } from "./components/choice-group-item/choice-group-item.es.js";
-import { useLabels as ne } from "../../../providers/label-provider/use-labels.es.js";
-import ae, { isBreakpointBelow as H } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useLabels as ae } from "../../../providers/label-provider/use-labels.es.js";
+import de, { isBreakpointBelow as H } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { useBreakpointProps as le } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { Row as j } from "../../layout/grid/row.es.js";
-import { Col as de } from "../../layout/grid/col.es.js";
-const se = (u) => {
-  const { getLabel: f } = ne(), S = ae(u.defaultServerBreakpoint), { getCurrentBreakpointProps: E } = le(u.defaultServerBreakpoint), {
-    id: c,
-    className: R,
-    label: p,
+import { Col as se } from "../../layout/grid/col.es.js";
+const ce = (u) => {
+  const { getLabel: f } = ae(), B = de(u.defaultServerBreakpoint), { getCurrentBreakpointProps: E } = le(u.defaultServerBreakpoint), {
+    id: m,
+    className: P,
+    label: S,
     required: A,
     helper: n,
     items: o,
-    variant: k = "default",
-    direction: v = k === "default" || H(S, "md") ? "column" : "row",
-    rowProps: h,
+    variant: y = "default",
+    direction: k = y === "default" || H(B, "md") ? "column" : "row",
+    rowProps: p,
     name: L,
     inputType: i = "radio",
     value: M,
     defaultValue: N,
-    onChange: d,
-    hideLabel: T,
+    onChange: l,
+    hideLabel: R,
+    labelProps: T,
     indeterminateCheck: s,
-    indeterminateCheckProps: b = {},
+    indeterminateCheckProps: h = {},
     color: $,
-    layout: C = "separated",
-    showIndicator: P,
-    ...W
-  } = E(u), { ...X } = b, Y = (b == null ? void 0 : b.indented) ?? !0, x = (n == null ? void 0 : n.id) ?? `${c}-helper`, _ = s && i === "checkbox", [z, w] = ee(() => {
+    layout: v = "separated",
+    showIndicator: W,
+    ...X
+  } = E(u), { ...Y } = h, z = (h == null ? void 0 : h.indented) ?? !0, C = (n == null ? void 0 : n.id) ?? `${m}-helper`, _ = s && i === "checkbox", [D, w] = te(() => {
     if (N) return N;
     if (i === "radio") {
-      const e = o.find((l) => l.defaultChecked);
+      const e = o.find((d) => d.defaultChecked);
       return e ? e.value : null;
     }
     return i === "checkbox" ? o.filter((e) => e.defaultChecked).map((e) => e.value) : null;
-  }), I = (e = u.value) => !!d && typeof e < "u", r = I(M) ? M : z, g = y.useMemo(() => (r == null ? void 0 : r.length) === 0, [r == null ? void 0 : r.length]), m = y.useMemo(
+  }), x = (e = u.value) => !!l && typeof e < "u", r = x(M) ? M : D, b = g.useMemo(() => (r == null ? void 0 : r.length) === 0, [r == null ? void 0 : r.length]), c = g.useMemo(
     () => {
       var e;
-      return (r == null ? void 0 : r.length) === ((e = o == null ? void 0 : o.filter((l) => !l.disabled)) == null ? void 0 : e.length);
+      return (r == null ? void 0 : r.length) === ((e = o == null ? void 0 : o.filter((d) => !d.disabled)) == null ? void 0 : e.length);
     },
     [r == null ? void 0 : r.length, o]
-  ), D = y.useMemo(() => !g && !m, [m, g]), J = y.useMemo(() => {
-    const e = m ? "all" : g ? "none" : "some";
+  ), J = g.useMemo(() => !b && !c, [c, b]), K = g.useMemo(() => {
+    const e = c ? "all" : b ? "none" : "some";
     return typeof s == "string" ? s : typeof s == "function" ? s(e) : s ? f(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
-  }, [f, s, m, g]), K = {
+  }, [f, s, c, b]), O = {
     name: L,
     inputType: i,
-    onChange: (e, l) => {
+    onChange: (e, d) => {
       let t = r;
-      i === "checkbox" && t ? t = l ? Array.isArray(t) ? [...t, e] : [e] : Array.isArray(t) ? t.filter((V) => V !== e) : t : t = e, I() || w(Array.isArray(t) ? [...t] : t), d == null || d(t);
+      i === "checkbox" && t ? t = d ? Array.isArray(t) ? [...t, e] : [e] : Array.isArray(t) ? t.filter((Z) => Z !== e) : t : t = e, x() || w(Array.isArray(t) ? [...t] : t), l == null || l(t);
     },
     currentValue: r
-  }, O = G(B["tedi-choice-group"], R), Q = G(B["tedi-choice-group__inner"], h == null ? void 0 : h.className, {
-    [B["tedi-choice-group__inner--indented"]]: _ && Y
-  }), U = () => {
-    var l;
-    const e = m ? [] : (l = o == null ? void 0 : o.filter((t) => !t.disabled)) == null ? void 0 : l.map((t) => t.value);
-    I() || w([...e]), d == null || d(e);
+  }, Q = G(I["tedi-choice-group"], P), U = G(I["tedi-choice-group__inner"], p == null ? void 0 : p.className, {
+    [I["tedi-choice-group__inner--indented"]]: _ && z
+  }), V = () => {
+    var d;
+    const e = c ? [] : (d = o == null ? void 0 : o.filter((t) => !t.disabled)) == null ? void 0 : d.map((t) => t.value);
+    x() || w([...e]), l == null || l(e);
   };
-  return /* @__PURE__ */ a(ie.Provider, { value: K, children: /* @__PURE__ */ F(
+  return /* @__PURE__ */ a(ne.Provider, { value: O, children: /* @__PURE__ */ F(
     "fieldset",
     {
-      ...W,
-      className: O,
-      id: c,
+      ...X,
+      className: Q,
+      id: m,
       name: L,
-      "aria-describedby": n && i !== "radio" ? x : void 0,
+      "aria-describedby": n && i !== "radio" ? C : void 0,
       children: [
-        p && typeof p == "string" ? /* @__PURE__ */ a(re, { id: c, label: p, required: A, hideLabel: T, renderWithoutLabel: !0 }) : /* @__PURE__ */ a("label", { htmlFor: c, children: p }),
-        /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(de, { children: o != null && o.length ? /* @__PURE__ */ F(Z, { children: [
+        S && /* @__PURE__ */ a(
+          oe,
+          {
+            id: m,
+            label: S,
+            required: A,
+            hideLabel: R,
+            renderWithoutLabel: !0,
+            labelProps: T
+          }
+        ),
+        /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(se, { children: o != null && o.length ? /* @__PURE__ */ F(ee, { children: [
           _ && /* @__PURE__ */ a(
-            oe,
+            ie,
             {
-              id: `${c}-indeterminate`,
+              id: `${m}-indeterminate`,
               value: "indeterminate",
               name: "indeterminate",
-              ...X,
-              label: J,
-              indeterminate: D,
-              checked: m,
-              onChange: U
+              ...Y,
+              label: K,
+              indeterminate: J,
+              checked: c,
+              onChange: V
             }
           ),
           /* @__PURE__ */ a(
             j,
             {
-              direction: v,
-              gutterX: C === "segmented" ? 0 : 2,
-              gutterY: C === "segmented" ? 0 : 1,
-              gap: k === "default" && (H(S, "md") || v === "row") ? 1 : 0,
-              ...h,
-              className: Q,
+              direction: k,
+              gutterX: v === "segmented" ? 0 : 2,
+              gutterY: v === "segmented" ? 0 : 1,
+              gap: y === "default" && (H(B, "md") || k === "row") ? 1 : 0,
+              ...p,
+              className: U,
               role: i === "radio" ? "radiogroup" : void 0,
-              "aria-labelledby": i === "radio" ? c : void 0,
-              "aria-describedby": i === "radio" && n ? x : void 0,
+              "aria-labelledby": i === "radio" ? m : void 0,
+              "aria-describedby": i === "radio" && n ? C : void 0,
               "aria-required": i === "radio" && A ? !0 : void 0,
               "aria-invalid": i === "radio" && (n == null ? void 0 : n.type) === "error" ? !0 : void 0,
               children: o.map((e) => /* @__PURE__ */ a(
@@ -109,24 +120,24 @@ const se = (u) => {
                 {
                   ...e,
                   color: $,
-                  variant: k,
+                  variant: y,
                   type: i,
-                  layout: C,
-                  showIndicator: P,
-                  direction: v
+                  layout: v,
+                  showIndicator: W,
+                  direction: k
                 },
                 e.id
               ))
             }
           )
         ] }) : /* @__PURE__ */ a("p", { children: f("table.filter.no-options") }) }) }),
-        n && /* @__PURE__ */ a(te, { ...n, id: x })
+        n && /* @__PURE__ */ a(re, { ...n, id: C })
       ]
     }
   ) });
 };
-se.Item = q;
+ce.Item = q;
 export {
-  se as ChoiceGroup,
-  se as default
+  ce as ChoiceGroup,
+  ce as default
 };

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),v=u=>{const{getCurrentBreakpointProps:_}=O.useBreakpointProps(u.defaultServerBreakpoint),{id:c,label:C,value:a,className:q,direction:h,disabled:d,colProps:N=h==="column"?{width:12}:{width:"auto"},onChange:m,hideLabel:$,helper:i,tooltip:B,type:p="radio",variant:l="default",color:G="primary",layout:I,showIndicator:k,justifyContent:x="start"}=_(u),{currentValue:r,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),s=Array.isArray(r)?r.includes(a):a===r,M=r===void 0?u.defaultChecked:s,y=(o,g)=>{f==null||f(o,g),m==null||m(o,g)},T=n.default(e.default[`tedi-choice-group-item--${I==="separated"?"separated":"segmented"}`],h&&e.default[`tedi-choice-group-item--${h}`]),w=n.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${l}`],e.default[`tedi-choice-group-item--${l}-${G}`],k&&e.default["tedi-choice-group-item--indicator"],p&&e.default[`tedi-choice-group-item--${p}`],{[e.default["tedi-choice-group-item--disabled"]]:d},{[e.default["tedi-choice-group-item--checked"]]:s},{[`justify-content-${x}`]:x}),E=p==="radio"?H.Radio:S.Checkbox,F=o=>{var j;d||l!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,onClick:F,"aria-disabled":d||void 0,children:l==="default"||k?t.jsx(E,{id:c,label:C,value:a,name:b,className:n.default(e.default["tedi-choice-group-item__indicator"],q),disabled:d,checked:s,defaultChecked:M,onChange:y,hideLabel:$,helper:i?{...i,className:n.default(e.default["tedi-choice-group-item__feedback-text"],i.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator"}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:d,checked:s,defaultChecked:r===void 0?u.defaultChecked:void 0,onChange:o=>{y(a,o.target.checked)},className:"visually-hidden"}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[C,i&&t.jsx(A.FeedbackText,{...i,id:i.id??`${c}-helper`,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=v;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),v=u=>{const{getCurrentBreakpointProps:_}=O.useBreakpointProps(u.defaultServerBreakpoint),{id:i,label:C,value:a,className:q,direction:h,disabled:d,colProps:N=h==="column"?{width:12}:{width:"auto"},onChange:m,hideLabel:$,helper:o,tooltip:B,type:p="radio",variant:l="default",color:G="primary",layout:I,showIndicator:k,justifyContent:x="start"}=_(u),{currentValue:r,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),s=Array.isArray(r)?r.includes(a):a===r,M=r===void 0?u.defaultChecked:s,y=(c,g)=>{f==null||f(c,g),m==null||m(c,g)},T=n.default(e.default[`tedi-choice-group-item--${I==="separated"?"separated":"segmented"}`],h&&e.default[`tedi-choice-group-item--${h}`]),w=n.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${l}`],e.default[`tedi-choice-group-item--${l}-${G}`],k&&e.default["tedi-choice-group-item--indicator"],p&&e.default[`tedi-choice-group-item--${p}`],{[e.default["tedi-choice-group-item--disabled"]]:d},{[e.default["tedi-choice-group-item--checked"]]:s},{[`justify-content-${x}`]:x}),E=p==="radio"?H.Radio:S.Checkbox,F=c=>{var j;d||l!=="card"||c.target.closest("input, label")||i&&((j=document.getElementById(i))==null||j.click())};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,onClick:F,"aria-disabled":d||void 0,children:l==="default"||k?t.jsx(E,{id:i,label:C,value:a,name:b,className:n.default(e.default["tedi-choice-group-item__indicator"],q),disabled:d,checked:s,defaultChecked:M,onChange:y,hideLabel:$,helper:o?{...o,className:n.default(e.default["tedi-choice-group-item__feedback-text"],o.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator"}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:i,value:a,name:b,type:P,disabled:d,checked:s,defaultChecked:r===void 0?u.defaultChecked:void 0,onChange:c=>{y(a,c.target.checked)},className:"visually-hidden"}),t.jsxs("label",{htmlFor:i,className:e.default["tedi-choice-group-item__label"],children:[C,o&&t.jsx(A.FeedbackText,{...o,id:o.id??`${i}-helper`,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=v;exports.default=v;