@tedi-design-system/react 16.0.0-rc.2 → 16.0.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "16.0.0-rc.2",
+  "version": "16.0.0-rc.5",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/buttons/info-button/info-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),s=require("../button/button.cjs.js"),f=require("./info-button.module.scss.cjs.js"),t=r.forwardRef(({isSmall:e,children:n,...o},u)=>i.jsx(s.Button,{className:a.default(f.default["tedi-info-button"]),"data-name":"info-button",...o,type:"button",icon:{name:"info",size:e?16:18},visualType:"neutral",ref:u,children:n}));t.displayName="InfoButton";exports.InfoButton=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),d=require("react"),s=require("../button/button.cjs.js"),f=require("./info-button.module.scss.cjs.js"),e=d.forwardRef(({isSmall:n,children:o,color:t="default",...u},i)=>a.jsx(s.Button,{className:r.default(f.default["tedi-info-button"]),"data-variant":t==="inverted"?"inverted":void 0,"data-name":"info-button",...u,icon:{name:"info",size:n?16:18},visualType:"neutral",color:t,ref:i,children:o}));e.displayName="InfoButton";exports.InfoButton=e;exports.default=e;

package/src/tedi/components/buttons/info-button/info-button.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../button/button';
-export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children'> {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children' | 'color'> {
     /**
-     * If true, applies a small size to the InfoButton.
+     * If true, applies a small size to the InfoButton
      * @default false
      */
     isSmall?: boolean;
     /**
-     * Children elements to be rendered inside the InfoButton.
+     * Children elements to be rendered inside the InfoButton
      */
     children?: React.ReactNode;
+    color?: 'default' | 'inverted';
 }
 export declare const InfoButton: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default InfoButton;

package/src/tedi/components/buttons/info-button/info-button.es.js

@@ -1,25 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
+import { jsx as i } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
 import f from "react";
-import { Button as r } from "../button/button.es.js";
-import i from "./info-button.module.scss.es.js";
-const s = f.forwardRef(
-  ({ isSmall: t, children: o, ...a }, e) => /* @__PURE__ */ n(
-    r,
+import { Button as m } from "../button/button.es.js";
+import s from "./info-button.module.scss.es.js";
+const d = f.forwardRef(
+  ({ isSmall: o, children: a, color: t = "default", ...e }, n) => /* @__PURE__ */ i(
+    m,
     {
-      className: m(i["tedi-info-button"]),
+      className: r(s["tedi-info-button"]),
+      "data-variant": t === "inverted" ? "inverted" : void 0,
       "data-name": "info-button",
-      ...a,
-      type: "button",
-      icon: { name: "info", size: t ? 16 : 18 },
+      ...e,
+      icon: { name: "info", size: o ? 16 : 18 },
       visualType: "neutral",
-      ref: e,
-      children: o
+      color: t,
+      ref: n,
+      children: a
     }
   )
 );
-s.displayName = "InfoButton";
+d.displayName = "InfoButton";
 export {
-  s as InfoButton,
-  s as default
+  d as InfoButton,
+  d as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),o=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),j=require("../../base/icon/icon.cjs.js"),S=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),$=require("../../layout/grid/row.cjs.js"),C=require("../../layout/grid/col.cjs.js"),N=q=>{const{id:d,label:l,value:x,className:g,disabled:b=!1,onChange:i,hideLabel:y=!1,helper:a,checked:s,defaultChecked:I,indeterminate:n,hover:R,name:v,tooltip:k,invalid:w,size:r="default",...z}=q,[m,L]=f.useState(I||!1),u=f.useRef(null),h=f.useMemo(()=>n?"mixed":i&&typeof s<"u"?s:m,[n,i,s,m]),M=t=>{typeof s>"u"&&L(t==null?void 0:t.target.checked),i==null||i(x,t==null?void 0:t.target.checked)},_=a?a.id??`${d}-helper`:void 0,F=k?`${d}-tooltip`:void 0,p=o.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:b});return c.jsxs("div",{"data-name":"check",...z,children:[c.jsxs($.Row,{gutter:0,children:[c.jsx(C.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:d,value:x,name:v,type:"checkbox",disabled:b,checked:h!=="mixed"?h:!1,"aria-checked":h,onChange:M,className:e.default["tedi-checkbox__input"],"aria-describedby":[_,F].filter(Boolean).join(" ")}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=u.current)==null?void 0:t.click()},className:o.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:R,[e.default["tedi-checkbox__indicator--indeterminate"]]:n,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:w},g),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:r==="default"?16:18,name:"remove",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:r==="default"?16:18,name:"check",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),c.jsx(C.Col,{children:l&&typeof l=="string"?c.jsx(T.FormLabel,{ref:u,className:p,id:d,"data-testid":"checkbox-label",hideLabel:y,label:l,tooltip:k}):c.jsx("label",{ref:u,htmlFor:d,className:p,"data-testid":"checkbox-label",children:l})})]}),a&&c.jsx(S.FeedbackText,{id:_,...a,className:o.default(e.default["tedi-checkbox__helper"],a.className)})]})};exports.Checkbox=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),u=require("react"),p=require("../../base/icon/icon.cjs.js"),$=require("../feedback-text/feedback-text.cjs.js"),B=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),F=require("../../layout/grid/row.cjs.js"),j=require("../../layout/grid/col.cjs.js"),q=C=>{const{id:o,label:h,value:f,className:N,disabled:x=!1,onChange:d,hideLabel:g=!1,helper:i,checked:l,defaultChecked:y,indeterminate:s,hover:I,name:R,tooltip:b,invalid:v,size:r="default",required:w,...z}=C,[k,L]=u.useState(y||!1),_=u.useRef(null),n=u.useMemo(()=>s?"mixed":d&&typeof l<"u"?l:k,[s,d,l,k]),M=t=>{typeof l>"u"&&L(t==null?void 0:t.target.checked),d==null||d(f,t==null?void 0:t.target.checked)},m=i?i.id??`${o}-helper`:void 0,S=b?`${o}-tooltip`:void 0,T=a.default(e.default["tedi-checkbox__label"],{[e.default["tedi-checkbox--disabled"]]:x});return c.jsxs("div",{"data-name":"check",...z,children:[c.jsxs(F.Row,{gutter:0,children:[c.jsx(j.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:o,value:f,name:R,type:"checkbox",disabled:x,checked:n!=="mixed"?n:!1,"aria-checked":n,onChange:M,className:e.default["tedi-checkbox__input"],"aria-describedby":[m,S].filter(Boolean).join(" ")}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=_.current)==null?void 0:t.click()},className:a.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:I,[e.default["tedi-checkbox__indicator--indeterminate"]]:s,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:v},N),"data-testid":"checkbox-indicator",children:[c.jsx(p.Icon,{size:r==="default"?16:18,name:"remove",className:a.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(p.Icon,{size:r==="default"?16:18,name:"check",className:a.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),h&&c.jsx(j.Col,{children:c.jsx(B.FormLabel,{ref:_,className:T,id:o,"data-testid":"checkbox-label",hideLabel:g,label:h,tooltip:b,required:w})})]}),i&&c.jsx($.FeedbackText,{id:m,...i,className:a.default(e.default["tedi-checkbox__helper"],i.className)})]})};exports.Checkbox=q;exports.default=q;

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

@@ -1,84 +1,85 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
-import b from "react";
-import { Icon as C } from "../../base/icon/icon.es.js";
-import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
+import m from "react";
+import { Icon as N } from "../../base/icon/icon.es.js";
+import { FeedbackText as q } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as E } from "../form-label/form-label.es.js";
 import e from "./checkbox.module.scss.es.js";
 import { Row as H } from "../../layout/grid/row.es.js";
-import { Col as g } from "../../layout/grid/col.es.js";
-const P = (y) => {
+import { Col as C } from "../../layout/grid/col.es.js";
+const Q = (g) => {
   const {
-    id: t,
-    label: r,
-    value: f,
-    className: z,
-    disabled: _ = !1,
-    onChange: o,
-    hideLabel: I = !1,
-    helper: a,
-    checked: l,
-    defaultChecked: R,
-    indeterminate: h,
-    hover: j,
-    name: w,
-    tooltip: p,
-    invalid: F,
-    size: s = "default",
-    ...L
-  } = y, [x, $] = b.useState(R || !1), m = b.useRef(null), k = b.useMemo(() => h ? "mixed" : o && typeof l < "u" ? l : x, [h, o, l, x]), v = (c) => {
-    typeof l > "u" && $(c == null ? void 0 : c.target.checked), o == null || o(f, c == null ? void 0 : c.target.checked);
-  }, u = a ? a.id ?? `${t}-helper` : void 0, B = p ? `${t}-tooltip` : void 0, N = d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: _ });
-  return /* @__PURE__ */ n("div", { "data-name": "check", ...L, children: [
-    /* @__PURE__ */ n(H, { gutter: 0, children: [
-      /* @__PURE__ */ i(g, { width: "auto", children: /* @__PURE__ */ n("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
+    id: a,
+    label: k,
+    value: b,
+    className: y,
+    disabled: f = !1,
+    onChange: t,
+    hideLabel: z = !1,
+    helper: o,
+    checked: r,
+    defaultChecked: I,
+    indeterminate: n,
+    hover: R,
+    name: j,
+    tooltip: _,
+    invalid: w,
+    size: l = "default",
+    required: L,
+    ...$
+  } = g, [p, v] = m.useState(I || !1), x = m.useRef(null), h = m.useMemo(() => n ? "mixed" : t && typeof r < "u" ? r : p, [n, t, r, p]), B = (c) => {
+    typeof r > "u" && v(c == null ? void 0 : c.target.checked), t == null || t(b, c == null ? void 0 : c.target.checked);
+  }, u = o ? o.id ?? `${a}-helper` : void 0, F = _ ? `${a}-tooltip` : void 0, M = d(e["tedi-checkbox__label"], { [e["tedi-checkbox--disabled"]]: f });
+  return /* @__PURE__ */ s("div", { "data-name": "check", ...$, children: [
+    /* @__PURE__ */ s(H, { gutter: 0, children: [
+      /* @__PURE__ */ i(C, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
         /* @__PURE__ */ i(
           "input",
           {
-            id: t,
-            value: f,
-            name: w,
+            id: a,
+            value: b,
+            name: j,
             type: "checkbox",
-            disabled: _,
-            checked: k !== "mixed" ? k : !1,
-            "aria-checked": k,
-            onChange: v,
+            disabled: f,
+            checked: h !== "mixed" ? h : !1,
+            "aria-checked": h,
+            onChange: B,
             className: e["tedi-checkbox__input"],
-            "aria-describedby": [u, B].filter(Boolean).join(" ")
+            "aria-describedby": [u, F].filter(Boolean).join(" ")
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
             onClick: () => {
               var c;
-              return (c = m.current) == null ? void 0 : c.click();
+              return (c = x.current) == null ? void 0 : c.click();
             },
             className: d(
               e["tedi-checkbox__indicator"],
               {
-                [e["tedi-checkbox__indicator--hover"]]: j,
-                [e["tedi-checkbox__indicator--indeterminate"]]: h,
-                [e[`tedi-checkbox__indicator--size-${s}`]]: s,
-                [e["tedi-checkbox__indicator--invalid"]]: F
+                [e["tedi-checkbox__indicator--hover"]]: R,
+                [e["tedi-checkbox__indicator--indeterminate"]]: n,
+                [e[`tedi-checkbox__indicator--size-${l}`]]: l,
+                [e["tedi-checkbox__indicator--invalid"]]: w
               },
-              z
+              y
             ),
             "data-testid": "checkbox-indicator",
             children: [
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "remove",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
                 }
               ),
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "check",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
                 }
@@ -87,23 +88,24 @@ const P = (y) => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ i(g, { children: r && typeof r == "string" ? /* @__PURE__ */ i(
+      k && /* @__PURE__ */ i(C, { children: /* @__PURE__ */ i(
         E,
         {
-          ref: m,
-          className: N,
-          id: t,
+          ref: x,
+          className: M,
+          id: a,
           "data-testid": "checkbox-label",
-          hideLabel: I,
-          label: r,
-          tooltip: p
+          hideLabel: z,
+          label: k,
+          tooltip: _,
+          required: L
         }
-      ) : /* @__PURE__ */ i("label", { ref: m, htmlFor: t, className: N, "data-testid": "checkbox-label", children: r }) })
+      ) })
     ] }),
-    a && /* @__PURE__ */ i(M, { id: u, ...a, className: d(e["tedi-checkbox__helper"], a.className) })
+    o && /* @__PURE__ */ i(q, { id: u, ...o, className: d(e["tedi-checkbox__helper"], o.className) })
   ] });
 };
 export {
-  P as Checkbox,
-  P as default
+  Q as Checkbox,
+  Q 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"),h=require("../../../../../../../external/classnames/index.cjs.js"),E=require("react"),F=require("../../../checkbox/checkbox.cjs.js"),L=require("../../../feedback-text/feedback-text.cjs.js"),R=require("../../../radio/radio.cjs.js"),S=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),H=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),O=require("../../../../layout/grid/col.cjs.js"),j=r=>{const{getCurrentBreakpointProps:q}=H.useBreakpointProps(r.defaultServerBreakpoint),{id:u,label:k,value:o,className:v,direction:m,disabled:l,colProps:y=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:N,helper:a,tooltip:B,type:s="radio",variant:n="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=q(r),{currentValue:d,name:b,onChange:f,inputType:I}=E.useContext(S.ChoiceGroupContext),i=Array.isArray(d)?d.includes(o):o===d,P=d===void 0?r.defaultChecked:i,g=(c,_)=>{f==null||f(c,_),p==null||p(c,_)},M=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),T=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${n}`],e.default[`tedi-choice-group-item--${n}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],s&&e.default[`tedi-choice-group-item--${s}`],{[e.default["tedi-choice-group-item--disabled"]]:l},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),w=s==="radio"?R.Radio:F.Checkbox,A=c=>{c.target.tagName!=="LABEL"&&!l&&n==="card"&&g(o,!i)};return t.jsx(O.Col,{...y,className:M,children:t.jsx("div",{className:T,onClick:A,children:n==="default"||C?t.jsx(w,{id:u,label:k,value:o,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:l,checked:i,defaultChecked:P,onChange:g,hideLabel:N,helper:a?{...a,className:h.default(e.default["tedi-choice-group-item__feedback-text"],a.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:u,value:o,name:b,type:I,disabled:l,checked:i,defaultChecked:d===void 0?r.defaultChecked:void 0,onChange:c=>g(o,c.target.checked),className:e.default["tedi-choice-group-item__input"],role:s==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:u,className:e.default["tedi-choice-group-item__label"],children:[k,a&&t.jsx(L.FeedbackText,{...a,id:u,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=j;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=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"),y=l=>{const{getCurrentBreakpointProps:q}=O.useBreakpointProps(l.defaultServerBreakpoint),{id:c,label:k,value:a,className:v,direction:m,disabled:n,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:r,tooltip:$,type:d="radio",variant:s="default",color:G="primary",layout:I,showIndicator:C,justifyContent:x="start"}=q(l),{currentValue:u,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(u)?u.includes(a):a===u,M=u===void 0?l.defaultChecked:i,_=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${I==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],C&&e.default["tedi-choice-group-item--indicator"],d&&e.default[`tedi-choice-group-item--${d}`],{[e.default["tedi-choice-group-item--disabled"]]:n},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=d==="radio"?H.Radio:S.Checkbox,F=o=>{var j;n||s!=="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,role:d,"aria-checked":i,children:s==="default"||C?t.jsx(E,{id:c,label:k,value:a,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:n,checked:i,defaultChecked:M,onChange:_,hideLabel:B,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:n,checked:i,defaultChecked:u===void 0?l.defaultChecked:void 0,onChange:o=>{_(a,o.target.checked)},className:e.default["tedi-choice-group-item__input"],role:d==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[k,r&&t.jsx(A.FeedbackText,{...r,id:c,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=y;exports.default=y;

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

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

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

@@ -7,7 +7,7 @@ export interface ChoiceInputProps {
     /**
      * Label text
      */
-    label: string | React.ReactNode;
+    label: React.ReactNode;
     /**
      * Additional classes.
      */
@@ -60,4 +60,8 @@ export interface ChoiceInputProps {
      * Whether the input is marked as invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the input is marked as required.
+     */
+    required?: boolean;
 }

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),I=require("../feedback-text/feedback-text.cjs.js"),S=require("../form-label/form-label.cjs.js"),a=require("./radio.module.scss.cjs.js"),T=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),j=k=>{const{id:i,label:o,value:u,className:g,disabled:f,onChange:t,hideLabel:q,helper:r,checked:l,defaultChecked:C,hover:N,name:R,tooltip:h,size:b="default",invalid:y,...w}=k,[m,L]=n.useState(C||!1),s=n.useRef(null),M=n.useMemo(()=>t&&typeof l<"u"?l:m,[t,m,l]),v=d=>{typeof l>"u"&&L(d==null?void 0:d.target.checked),t==null||t(u,d==null?void 0:d.target.checked)},_=r?r.id??`${i}-helper`:void 0,F=h?`${i}-tooltip`:void 0,p=c.default(a.default["tedi-radio"],{[a.default["tedi-radio--disabled"]]:f});return e.jsxs("div",{"data-name":"radio",...w,children:[e.jsxs(T.Row,{gutter:0,children:[e.jsx(x.Col,{width:"auto",children:e.jsxs("div",{className:a.default["tedi-radio__outer-indicator-wrapper"],children:[e.jsx("input",{id:i,value:u,name:R,type:"radio",disabled:f,checked:M,onChange:v,className:a.default["tedi-radio__input"],"aria-describedby":[_,F].filter(Boolean).join(" ")}),e.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=s.current)==null?void 0:d.click()},className:c.default(a.default["tedi-radio__indicator"],{[a.default["tedi-radio__indicator--hover"]]:N},{[a.default[`tedi-radio__indicator--size-${b}`]]:b},{[a.default["tedi-radio__indicator--invalid"]]:y},g),"data-testid":"radio-indicator"})]})}),e.jsx(x.Col,{children:o&&typeof o=="string"?e.jsx(S.FormLabel,{ref:s,className:p,id:i,"data-testid":"radio-label",hideLabel:q,label:o,tooltip:h}):e.jsx("label",{ref:s,htmlFor:i,className:p,"data-testid":"radio-label",children:o})})]}),r&&e.jsx(I.FeedbackText,{id:_,...r,className:c.default(a.default["tedi-radio__helper"],r.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"),l=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),i=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),p=require("../../layout/grid/col.cjs.js"),x=j=>{const{id:r,label:c,value:n,className:k,disabled:u,onChange:a,hideLabel:q,helper:t,checked:o,defaultChecked:C,hover:g,name:N,tooltip:f,size:h="default",invalid:R,required:y,...w}=j,[_,L]=s.useState(C||!1),b=s.useRef(null),M=s.useMemo(()=>a&&typeof o<"u"?o:_,[a,_,o]),v=e=>{typeof o>"u"&&L(e==null?void 0:e.target.checked),a==null||a(n,e==null?void 0:e.target.checked)},m=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(i.default["tedi-radio__label"],{[i.default["tedi-radio--disabled"]]:u});return d.jsxs("div",{"data-name":"radio",...w,children:[d.jsxs(z.Row,{gutter:0,children:[d.jsx(p.Col,{width:"auto",children:d.jsxs("div",{className:i.default["tedi-radio__outer-indicator-wrapper"],children:[d.jsx("input",{id:r,value:n,name:N,type:"radio",disabled:u,checked:M,onChange:v,className:i.default["tedi-radio__input"],"aria-describedby":[m,I].filter(Boolean).join(" ")}),d.jsx("div",{"aria-hidden":"true",onClick:()=>{var e;return(e=b.current)==null?void 0:e.click()},className:l.default(i.default["tedi-radio__indicator"],{[i.default["tedi-radio__indicator--hover"]]:g},{[i.default[`tedi-radio__indicator--size-${h}`]]:h},{[i.default["tedi-radio__indicator--invalid"]]:R},k),"data-testid":"radio-indicator"})]})}),c&&d.jsx(p.Col,{children:d.jsx($.FormLabel,{ref:b,className:S,id:r,"data-testid":"radio-label",hideLabel:q,label:c,tooltip:f,required:y})})]}),t&&d.jsx(T.FeedbackText,{id:m,...t,className:l.default(i.default["tedi-radio__helper"],t.className)})]})};exports.Radio=x;exports.default=x;