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

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.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/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;

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

@@ -10,7 +10,7 @@ import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakp
 import { Col as q } from "../../../../layout/grid/col.es.js";
 const te = (n) => {
   const { getCurrentBreakpointProps: x } = V(n.defaultServerBreakpoint), {
-    id: o,
+    id: t,
     label: C,
     value: c,
     className: $,
@@ -19,7 +19,7 @@ const te = (n) => {
     colProps: B = u === "column" ? { width: 12 } : { width: "auto" },
     onChange: p,
     hideLabel: I,
-    helper: t,
+    helper: i,
     tooltip: j,
     type: h = "radio",
     variant: l = "default",
@@ -27,8 +27,8 @@ const te = (n) => {
     layout: E,
     showIndicator: k,
     justifyContent: b = "start"
-  } = x(n), { currentValue: a, name: y, onChange: f, inputType: F } = R.useContext(S), s = Array.isArray(a) ? a.includes(c) : c === a, G = a === void 0 ? n.defaultChecked : s, N = (i, g) => {
-    f == null || f(i, g), p == null || p(i, g);
+  } = x(n), { currentValue: a, name: y, onChange: f, inputType: F } = R.useContext(S), s = Array.isArray(a) ? a.includes(c) : c === a, G = a === void 0 ? n.defaultChecked : s, N = (o, g) => {
+    f == null || f(o, g), p == null || p(o, g);
   }, P = m(
     e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
     u && e[`tedi-choice-group-item--${u}`]
@@ -42,13 +42,13 @@ const te = (n) => {
     { [e["tedi-choice-group-item--checked"]]: s },
     { [`justify-content-${b}`]: b }
   );
-  return /* @__PURE__ */ d(q, { ...B, className: P, children: /* @__PURE__ */ d("div", { className: A, onClick: (i) => {
+  return /* @__PURE__ */ d(q, { ...B, className: P, children: /* @__PURE__ */ d("div", { className: A, onClick: (o) => {
     var _;
-    r || l !== "card" || i.target.closest("input, label") || (_ = document.getElementById(o)) == null || _.click();
+    r || l !== "card" || o.target.closest("input, label") || t && ((_ = document.getElementById(t)) == null || _.click());
   }, "aria-disabled": r || void 0, children: l === "default" || k ? /* @__PURE__ */ d(
     h === "radio" ? L : T,
     {
-      id: o,
+      id: t,
       label: C,
       value: c,
       name: y,
@@ -58,7 +58,7 @@ const te = (n) => {
       defaultChecked: G,
       onChange: N,
       hideLabel: I,
-      helper: t ? { ...t, className: m(e["tedi-choice-group-item__feedback-text"], t.className) } : void 0,
+      helper: i ? { ...i, className: m(e["tedi-choice-group-item__feedback-text"], i.className) } : void 0,
       tooltip: j,
       "data-testid": "choice-group-item-indicator"
     }
@@ -66,26 +66,26 @@ const te = (n) => {
     /* @__PURE__ */ d(
       "input",
       {
-        id: o,
+        id: t,
         value: c,
         name: y,
         type: F,
         disabled: r,
         checked: s,
         defaultChecked: a === void 0 ? n.defaultChecked : void 0,
-        onChange: (i) => {
-          N(c, i.target.checked);
+        onChange: (o) => {
+          N(c, o.target.checked);
         },
         className: "visually-hidden"
       }
     ),
-    /* @__PURE__ */ v("label", { htmlFor: o, className: e["tedi-choice-group-item__label"], children: [
+    /* @__PURE__ */ v("label", { htmlFor: t, className: e["tedi-choice-group-item__label"], children: [
       C,
-      t && /* @__PURE__ */ d(
+      i && /* @__PURE__ */ d(
         H,
         {
-          ...t,
-          id: t.id ?? `${o}-helper`,
+          ...i,
+          id: i.id ?? `${t}-helper`,
           className: e["tedi-choice-group-item__feedback-text"]
         }
       )

package/src/tedi/components/form/choice-input.types.d.ts

@@ -1,10 +1,12 @@
 import { FeedbackTextProps } from './feedback-text/feedback-text';
 import { FormLabelProps } from './form-label/form-label';
-export interface ChoiceInputProps {
+export type ChoiceInputVariant = 'default' | 'card';
+export type ChoiceInputCardVariant = 'primary' | 'secondary';
+interface ChoiceInputBaseProps {
     /**
-     * ID property
+     * ID property. When omitted a stable id is generated (useful inside `Radio.Group` / `Checkbox.Group`).
      */
-    id: string;
+    id?: string;
     /**
      * Label text
      */
@@ -18,9 +20,22 @@ export interface ChoiceInputProps {
      */
     value: string;
     /**
-     * name of the input
+     * name of the input. Provided automatically when rendered inside `Radio.Group` / `Checkbox.Group`.
      */
-    name: string;
+    name?: string;
+    /**
+     * Card colour variant. Only applies when `variant="card"`.
+     * @default primary
+     */
+    cardVariant?: ChoiceInputCardVariant;
+    /**
+     * Secondary description text shown under the label. Primarily used with `variant="card"`.
+     */
+    description?: React.ReactNode;
+    /**
+     * Leading icon (Material icon name) shown before the label. Primarily used with `variant="card"`.
+     */
+    icon?: string;
     /**
      * is the label hidden
      */
@@ -49,11 +64,6 @@ export interface ChoiceInputProps {
      * If the item should be in hover state
      */
     hover?: boolean;
-    /**
-     * Provide content for tooltip. Accepts rich content (e.g. bold text, links),
-     * not just a plain string.
-     */
-    tooltip?: React.ReactNode;
     /**
      * Additional props forwarded to the underlying `Label` component.
      * Use `modifiers` to control how the label text wraps or breaks
@@ -73,3 +83,24 @@ export interface ChoiceInputProps {
      */
     required?: boolean;
 }
+export interface ChoiceInputProps extends ChoiceInputBaseProps {
+    /**
+     * Visual variant.
+     * - `default` — standard indicator + label.
+     * - `card` — the whole control renders as a selectable card (indicator, label, optional icon/description).
+     * @default default
+     */
+    variant?: ChoiceInputVariant;
+    /**
+     * Provide content for tooltip. Accepts rich content (e.g. bold text, links),
+     * not just a plain string.
+     *
+     * Mutually exclusive with `variant="card"` — the card carries supplementary
+     * content through its `description` slot instead. Passing both logs a dev-time
+     * warning and the tooltip is ignored. (This is enforced at runtime rather than
+     * in the types: a discriminated union would reject the dynamic prop-spreading
+     * that `Checkbox.Group` / `Radio.Group` / `Table` rely on.)
+     */
+    tooltip?: React.ReactNode;
+}
+export {};

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"),o=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),$=require("../feedback-text/feedback-text.cjs.js"),z=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),B=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:l,defaultChecked:N,hover:g,name:R,tooltip:f,labelProps:y,size:h="default",invalid:w,required:_,...L}=k,[b,M]=c.useState(N||!1),m=c.useRef(null),v=c.useMemo(()=>i&&typeof l<"u"?l:b,[i,b,l]),I=d=>{typeof l>"u"&&M(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,S=f?`${r}-tooltip`:void 0,T=o.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:o.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...L,children:[a.jsxs(B.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:v,onChange:I,className:e.default["tedi-radio__input"],"aria-describedby":[p,S].filter(Boolean).join(" "),required:_}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=m.current)==null?void 0:d.click()},className:o.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"]]:w},q),"data-testid":"radio-indicator"})]})}),u&&a.jsx(x.Col,{children:a.jsx(z.FormLabel,{ref:m,className:T,id:r,"data-testid":"radio-label",hideLabel:C,label:u,tooltip:f,required:_,labelProps:y})})]}),t&&a.jsx($.FeedbackText,{id:p,...t,className:o.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;

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

@@ -1,4 +1,9 @@
+import { BreakpointSupport } from '../../../helpers';
 import { ChoiceInputProps } from '../choice-input.types';
-export type RadioProps = ChoiceInputProps;
-export declare const Radio: (props: RadioProps) => JSX.Element;
+export type RadioProps = BreakpointSupport<ChoiceInputProps>;
+interface RadioComponent {
+    (props: RadioProps): JSX.Element;
+    displayName?: string;
+}
+export declare const Radio: RadioComponent;
 export default Radio;