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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.2.0-rc.6",
+  "version": "19.2.0-rc.8",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/community/components/map-components/map-layer/map-layer.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),N=require("../../../../tedi/components/base/typography/text/text.cjs.js"),p=require("../../../../tedi/components/buttons/button/button.cjs.js"),j=require("../../../../tedi/components/form/checkbox/checkbox.cjs.js"),g=require("../map-select/map-select.cjs.js"),n=require("./map-layer.module.scss.cjs.js"),w=m=>{const{items:d,selectAllLabel:k="Kõik kihid"}=m,[h,u]=r.useState({}),[v,f]=r.useState({}),[_,C]=r.useState(!1);r.useEffect(()=>{const e={},a={},t=i=>{for(const l of i)l.type==="checkbox"&&(e[l.id]=l.defaultChecked??!1),l.type==="select"&&l.defaultValue&&(a[l.id]=l.defaultValue),l.children&&t(l.children)};t(d),u(e),f(a)},[d]),r.useEffect(()=>{const e=Object.values(h),a=e.length,t=e.filter(Boolean).length;C(t>0&&t<a)},[h]);const S=(e,a)=>{if(u(t=>({...t,[e]:a})),!a){const t=i=>{for(const l of i)if(l.id===e&&l.children)for(const s of l.children)s.type==="select"&&f(o=>({...o,[s.id]:void 0})),s.type==="checkbox"&&u(o=>({...o,[s.id]:!1})),s.children&&t([s]);else l.children&&t(l.children)};t(d)}},q=e=>{const a={},t=i=>{for(const l of i)l.type==="checkbox"&&(a[l.id]=e),l.children&&t(l.children)};t(d),u(a),e||f({})},x=(e,a=0)=>{var i,l;const t=h[e.id]??!1;return c.jsxs("div",{className:b.default(n.default["tedi-map-layer__item"],n.default[`tedi-map-layer__level-${a}`]),children:[c.jsxs("div",{className:n.default["tedi-map-layer__row"],children:[e.type==="checkbox"&&c.jsx(j.Checkbox,{id:e.id,label:e.label,name:e.id,checked:t,onChange:(s,o)=>S(e.id,o),value:""}),e.type==="select"&&c.jsx(g.MapSelect,{id:e.id,label:e.label,options:e.options??[],value:v[e.id],onChange:s=>f(o=>({...o,[e.id]:s}))}),e.type==="checkbox"&&c.jsxs("div",{className:n.default["tedi-map-layer__actions"],children:[c.jsx(p.Button,{visualType:"link",icon:"download",children:"Download"}),c.jsx(p.Button,{visualType:"link",icon:"edit",children:"Edit"}),c.jsx(p.Button,{visualType:"link",icon:"info",children:"Info"}),c.jsx(p.Button,{visualType:"link",icon:"more_horiz",children:"Show more actions"})]})]}),e.type==="label"&&c.jsxs("div",{className:n.default["tedi-map-layer__item"],children:[c.jsx("div",{className:n.default["tedi-map-layer__label"],children:e.label}),(i=e.children)==null?void 0:i.map(s=>x(s,a+1))]},e.id),(l=e.children)==null?void 0:l.map(s=>x(s,a+1))]},e.id)},y=e=>e.some(a=>a.type==="checkbox"?!0:a.children?y(a.children):!1);return c.jsxs("div",{className:n.default["tedi-map-layer"],children:[c.jsx("div",{className:n.default["tedi-map-layer__select-all"],children:y(d)?c.jsx(j.Checkbox,{id:"select-all",label:k,name:"select-all",value:"all",checked:Object.values(h).every(Boolean),indeterminate:_,onChange:(e,a)=>q(a)}):c.jsx(N.Text,{color:"primary",modifiers:["bold"],children:k})}),c.jsx("div",{className:b.default(n.default["tedi-map-layer"],!y(d)&&n.default["tedi-map-layer--no-checkboxes"]),children:d.map(e=>x(e,1))})]})};exports.MapLayer=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),N=require("../../../../tedi/components/base/typography/text/text.cjs.js"),p=require("../../../../tedi/components/buttons/button/button.cjs.js"),j=require("../../../../tedi/components/form/checkbox/index.cjs.js"),g=require("../map-select/map-select.cjs.js"),n=require("./map-layer.module.scss.cjs.js"),w=m=>{const{items:d,selectAllLabel:k="Kõik kihid"}=m,[u,h]=r.useState({}),[v,f]=r.useState({}),[_,C]=r.useState(!1);r.useEffect(()=>{const e={},a={},t=i=>{for(const l of i)l.type==="checkbox"&&(e[l.id]=l.defaultChecked??!1),l.type==="select"&&l.defaultValue&&(a[l.id]=l.defaultValue),l.children&&t(l.children)};t(d),h(e),f(a)},[d]),r.useEffect(()=>{const e=Object.values(u),a=e.length,t=e.filter(Boolean).length;C(t>0&&t<a)},[u]);const S=(e,a)=>{if(h(t=>({...t,[e]:a})),!a){const t=i=>{for(const l of i)if(l.id===e&&l.children)for(const s of l.children)s.type==="select"&&f(o=>({...o,[s.id]:void 0})),s.type==="checkbox"&&h(o=>({...o,[s.id]:!1})),s.children&&t([s]);else l.children&&t(l.children)};t(d)}},q=e=>{const a={},t=i=>{for(const l of i)l.type==="checkbox"&&(a[l.id]=e),l.children&&t(l.children)};t(d),h(a),e||f({})},x=(e,a=0)=>{var i,l;const t=u[e.id]??!1;return c.jsxs("div",{className:b.default(n.default["tedi-map-layer__item"],n.default[`tedi-map-layer__level-${a}`]),children:[c.jsxs("div",{className:n.default["tedi-map-layer__row"],children:[e.type==="checkbox"&&c.jsx(j.Checkbox,{id:e.id,label:e.label,name:e.id,checked:t,onChange:(s,o)=>S(e.id,o),value:""}),e.type==="select"&&c.jsx(g.MapSelect,{id:e.id,label:e.label,options:e.options??[],value:v[e.id],onChange:s=>f(o=>({...o,[e.id]:s}))}),e.type==="checkbox"&&c.jsxs("div",{className:n.default["tedi-map-layer__actions"],children:[c.jsx(p.Button,{visualType:"link",icon:"download",children:"Download"}),c.jsx(p.Button,{visualType:"link",icon:"edit",children:"Edit"}),c.jsx(p.Button,{visualType:"link",icon:"info",children:"Info"}),c.jsx(p.Button,{visualType:"link",icon:"more_horiz",children:"Show more actions"})]})]}),e.type==="label"&&c.jsxs("div",{className:n.default["tedi-map-layer__item"],children:[c.jsx("div",{className:n.default["tedi-map-layer__label"],children:e.label}),(i=e.children)==null?void 0:i.map(s=>x(s,a+1))]},e.id),(l=e.children)==null?void 0:l.map(s=>x(s,a+1))]},e.id)},y=e=>e.some(a=>a.type==="checkbox"?!0:a.children?y(a.children):!1);return c.jsxs("div",{className:n.default["tedi-map-layer"],children:[c.jsx("div",{className:n.default["tedi-map-layer__select-all"],children:y(d)?c.jsx(j.Checkbox,{id:"select-all",label:k,name:"select-all",value:"all",checked:Object.values(u).every(Boolean),indeterminate:_,onChange:(e,a)=>q(a)}):c.jsx(N.Text,{color:"primary",modifiers:["bold"],children:k})}),c.jsx("div",{className:b.default(n.default["tedi-map-layer"],!y(d)&&n.default["tedi-map-layer--no-checkboxes"]),children:d.map(e=>x(e,1))})]})};exports.MapLayer=w;

package/src/community/components/map-components/map-layer/map-layer.es.js

@@ -3,7 +3,7 @@ import v from "../../../../../external/classnames/index.es.js";
 import { useState as u, useEffect as _ } from "react";
 import { Text as j } from "../../../../tedi/components/base/typography/text/text.es.js";
 import { Button as m } from "../../../../tedi/components/buttons/button/button.es.js";
-import { Checkbox as x } from "../../../../tedi/components/form/checkbox/checkbox.es.js";
+import { Checkbox as x } from "../../../../tedi/components/form/checkbox/index.es.js";
 import { MapSelect as V } from "../map-select/map-select.es.js";
 import n from "./map-layer.module.scss.es.js";
 const D = (C) => {

package/src/tedi/components/content/label/label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),j=require("../../overlays/tooltip/info-tooltip.cjs.js"),e=require("./label.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=h.forwardRef((a,n)=>{const{getCurrentBreakpointProps:o}=x.useBreakpointProps(a.defaultServerBreakpoint),{as:d="label",children:u,className:c,isBold:b,isSmall:t,required:f,tooltip:r,...p}=o(a),m=q.default(e.default["tedi-label"],b&&e.default["tedi-label--bold"],t&&e.default["tedi-label--small"],c),s=l.jsxs(d,{ref:n,className:m,...p,children:[u,f&&l.jsx("span",{className:e.default["tedi-label__required"],"aria-hidden":"true",children:"*"})]});return r?l.jsxs("span",{className:e.default["tedi-label__wrapper"],children:[s,l.jsx("span",{className:e.default["tedi-label__info"],children:l.jsx(j.InfoTooltip,{isSmall:t,children:r})})]}):s});i.displayName="Label";exports.Label=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),B=require("../../overlays/tooltip/info-tooltip.cjs.js"),e=require("./label.module.scss.cjs.js"),N=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),o=_.forwardRef((r,d)=>{const{getCurrentBreakpointProps:u}=N.useBreakpointProps(r.defaultServerBreakpoint),{as:c="label",children:p,className:b,isBold:f,isSmall:s,modifiers:t,required:m,tooltip:i,...q}=u(r),a=typeof t=="string"?[t]:t,x=j.default(e.default["tedi-label"],f&&e.default["tedi-label--bold"],s&&e.default["tedi-label--small"],a==null?void 0:a.map(h=>`text-${h}`),b),n=l.jsxs(c,{ref:d,className:x,...q,children:[p,m&&l.jsx("span",{className:e.default["tedi-label__required"],"aria-hidden":"true",children:"*"})]});return i?l.jsxs("span",{className:e.default["tedi-label__wrapper"],children:[n,l.jsx("span",{className:e.default["tedi-label__info"],children:l.jsx(B.InfoTooltip,{isSmall:s,children:i})})]}):n});o.displayName="Label";exports.Label=o;

package/src/tedi/components/content/label/label.d.ts

@@ -1,5 +1,20 @@
 import { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
 import { BreakpointSupport } from '../../../helpers';
+import { TextModifiers } from '../../base/typography/text/text';
+/**
+ * Subset of {@link TextModifiers} that is meaningful for a label. `.tedi-label` is
+ * `display: inline`, so text-alignment (`center`/`left`/`right`) and `::first-letter`
+ * (`capitalize-first`) have no effect and are intentionally excluded — only wrapping,
+ * text-transform and italic controls that actually apply to inline text remain.
+ */
+export type LabelModifiers = Extract<TextModifiers, 'nowrap' | 'break-all' | 'break-word' | 'break-spaces' | 'italic' | 'uppercase' | 'lowercase' | 'capitalize'>;
+/**
+ * Breakpoint-aware `modifiers` for a label, so consumers can vary wrapping responsively
+ * (e.g. `{ modifiers: 'nowrap', sm: { modifiers: 'break-word' } }`).
+ */
+export type LabelModifierProps = BreakpointSupport<{
+    modifiers?: LabelModifiers[] | LabelModifiers;
+}>;
 type LabelBreakpointProps = {
     /**
      * If true, applies a bold font weight to the label text.
@@ -11,6 +26,13 @@ type LabelBreakpointProps = {
      * @default false
      */
     isSmall?: boolean;
+    /**
+     * Text modifiers that control how the label text is rendered, e.g. wrapping and
+     * line-breaking behavior (`'nowrap'`, `'break-word'`, `'break-all'`, `'break-spaces'`).
+     * Reuses the same modifiers as the `Text` component. Useful to prevent long labels
+     * from breaking across multiple lines and distorting form layouts.
+     */
+    modifiers?: LabelModifiers[] | LabelModifiers;
 };
 export interface LabelProps extends BreakpointSupport<LabelBreakpointProps>, LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
     /**

package/src/tedi/components/content/label/label.es.js

@@ -1,34 +1,36 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { forwardRef as N } from "react";
-import { InfoTooltip as _ } from "../../overlays/tooltip/info-tooltip.es.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import { forwardRef as x } from "react";
+import { InfoTooltip as k } from "../../overlays/tooltip/info-tooltip.es.js";
 import e from "./label.module.scss.es.js";
-import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const k = N((r, o) => {
-  const { getCurrentBreakpointProps: n } = B(r.defaultServerBreakpoint), {
-    as: m = "label",
-    children: d,
-    className: p,
-    isBold: c,
-    isSmall: a,
-    required: b,
-    tooltip: s,
-    ...f
-  } = n(r), u = h(
+import { useBreakpointProps as E } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const g = x((t, m) => {
+  const { getCurrentBreakpointProps: d } = E(t.defaultServerBreakpoint), {
+    as: p = "label",
+    children: c,
+    className: f,
+    isBold: b,
+    isSmall: s,
+    modifiers: l,
+    required: u,
+    tooltip: i,
+    ...h
+  } = d(t), r = typeof l == "string" ? [l] : l, N = B(
     e["tedi-label"],
-    c && e["tedi-label--bold"],
-    a && e["tedi-label--small"],
-    p
-  ), t = /* @__PURE__ */ i(m, { ref: o, className: u, ...f, children: [
-    d,
-    b && /* @__PURE__ */ l("span", { className: e["tedi-label__required"], "aria-hidden": "true", children: "*" })
+    b && e["tedi-label--bold"],
+    s && e["tedi-label--small"],
+    r == null ? void 0 : r.map((_) => `text-${_}`),
+    f
+  ), o = /* @__PURE__ */ n(p, { ref: m, className: N, ...h, children: [
+    c,
+    u && /* @__PURE__ */ a("span", { className: e["tedi-label__required"], "aria-hidden": "true", children: "*" })
   ] });
-  return s ? /* @__PURE__ */ i("span", { className: e["tedi-label__wrapper"], children: [
-    t,
-    /* @__PURE__ */ l("span", { className: e["tedi-label__info"], children: /* @__PURE__ */ l(_, { isSmall: a, children: s }) })
-  ] }) : t;
+  return i ? /* @__PURE__ */ n("span", { className: e["tedi-label__wrapper"], children: [
+    o,
+    /* @__PURE__ */ a("span", { className: e["tedi-label__info"], children: /* @__PURE__ */ a(k, { isSmall: s, children: i }) })
+  ] }) : o;
 });
-k.displayName = "Label";
+g.displayName = "Label";
 export {
-  k as Label
+  g as Label
 };

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

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

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { ChoiceInputCardVariant, ChoiceInputVariant } from '../../choice-input.types';
+export interface CheckboxGroupContextValue {
+    /** Shared `name` for all checkboxes in the group. */
+    name?: string;
+    /** Currently selected values. */
+    values: string[];
+    /** Called by a `Checkbox` when it is toggled. */
+    onToggle: (value: string, checked: boolean) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'default' | 'large';
+    variant?: ChoiceInputVariant;
+    cardVariant?: ChoiceInputCardVariant;
+}
+/**
+ * Provided by `Checkbox.Group`. When present, a `Checkbox` reads its checked
+ * state, `name`, and shared visual props from here.
+ */
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue | null>;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("../../../../../../external/classnames/index.cjs.js"),s=require("react"),U=require("../../feedback-text/feedback-text.cjs.js"),W=require("../checkbox.cjs.js"),o=require("./checkbox-group.module.scss.cjs.js"),X=require("./checkbox-group-context.cjs.js"),Y=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),Z=require("../../../../providers/label-provider/use-labels.cjs.js"),j=S=>{const{getCurrentBreakpointProps:T}=Y.useBreakpointProps(S.defaultServerBreakpoint),{getLabel:x}=Z.useLabels(),{id:I,name:_,label:y,hideLabel:M=!1,helper:d,className:B,value:k,defaultValue:w=[],onChange:i,disabled:f,invalid:m,required:$,size:g,variant:u="default",cardVariant:V="primary",direction:E=u==="card"?"row":"column",indeterminateCheck:r,selectAllLabel:F,removeAllLabel:R,indeterminateCheckProps:z,children:v}=T(S),O=s.useId(),L=I??O,b=k!==void 0,[N,D]=s.useState(w),l=s.useMemo(()=>b?k??[]:N,[b,k,N]),A=d?d.id??`${L}-helper`:void 0,p=s.useCallback(e=>{b||D(e),i==null||i(e)},[b,i]),G=s.useCallback((e,h)=>{p(h?[...l,e]:l.filter(C=>C!==e))},[l,p]),H=s.useMemo(()=>({name:_,values:l,onToggle:G,disabled:f,invalid:m,size:g,variant:u,cardVariant:V}),[_,l,G,f,m,g,u,V]),a=s.useMemo(()=>{const e=new Set,h=C=>{s.Children.forEach(C,n=>{s.isValidElement(n)&&(n.props.value!==void 0&&!n.props.disabled&&e.add(n.props.value),h(n.props.children))})};return h(v),[...e]},[v]),c=a.length>0&&a.every(e=>l.includes(e)),P=a.every(e=>!l.includes(e)),J=!c&&!P,K=typeof r=="string"?r:typeof r=="function"?r(c?"all":P?"none":"some"):c?R??x("checkbox-group.remove-all"):F??x("checkbox-group.select-all"),Q=s.useCallback(()=>{p(c?l.filter(e=>!a.includes(e)):[...new Set([...l,...a])])},[c,l,a,p]);return t.jsxs("fieldset",{className:q.default(o.default["tedi-checkbox-group"],o.default[`tedi-checkbox-group--${E}`],{[o.default["tedi-checkbox-group--card"]]:u==="card"},B),disabled:f,"aria-invalid":m||void 0,"aria-describedby":A,children:[y&&t.jsxs("legend",{className:q.default(o.default["tedi-checkbox-group__legend"],{"sr-only":M}),children:[y,$&&t.jsxs(t.Fragment,{children:[t.jsx("span",{"aria-hidden":"true",className:o.default["tedi-checkbox-group__required"],children:"*"}),t.jsxs("span",{className:"sr-only",children:[" ",x("required")]})]})]}),r&&t.jsx(W.Checkbox,{id:`${L}-select-all`,...z,value:"select-all",label:K,checked:c,indeterminate:J,onChange:Q,size:g}),t.jsx(X.CheckboxGroupContext.Provider,{value:H,children:t.jsx("div",{className:q.default(o.default["tedi-checkbox-group__items"],{[o.default["tedi-checkbox-group__items--indented"]]:!!r}),children:v})}),d&&t.jsx(U.FeedbackText,{id:A,...d})]})};j.displayName="Checkbox.Group";exports.CheckboxGroup=j;exports.default=j;

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

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+import { ChoiceInputCardVariant, ChoiceInputVariant } from '../../choice-input.types';
+import { FeedbackTextProps } from '../../feedback-text/feedback-text';
+import { CheckboxBaseProps } from '../checkbox';
+/** State of the select-all checkbox, passed to a custom `indeterminateCheck` label function. */
+export type CheckboxGroupSelectAllState = 'all' | 'some' | 'none';
+interface CheckboxGroupBreakpointProps {
+    /** Group id. When omitted a stable id is generated. */
+    id?: string;
+    /** Shared `name` for the checkboxes. */
+    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 values. Pair with `onChange`. */
+    value?: string[];
+    /** Uncontrolled initial selected values. */
+    defaultValue?: string[];
+    /** Fires with the full new list of selected values. */
+    onChange?: (value: string[]) => void;
+    /** Disables the whole group and every checkbox within it. */
+    disabled?: boolean;
+    /** Marks the group as invalid, forwarding the error state to each checkbox. */
+    invalid?: boolean;
+    /** Marks the group as required, adding a required indicator to the legend. */
+    required?: boolean;
+    /** Size forwarded to every checkbox. @default 'default' */
+    size?: 'default' | 'large';
+    /** Visual variant forwarded to every checkbox. @default 'default' */
+    variant?: ChoiceInputVariant;
+    /** Card colour variant forwarded to every checkbox (only applies to `variant="card"`). @default 'primary' */
+    cardVariant?: ChoiceInputCardVariant;
+    /** Layout direction of the checkboxes. Defaults to `row` for cards, `column` otherwise. */
+    direction?: 'row' | 'column';
+    /**
+     * Renders a "select all" checkbox above the children that reflects and controls
+     * them: checked when all are selected, indeterminate when some are, unchecked
+     * when none are. Toggling it selects or clears all (enabled) children.
+     * - `true` — use the localised default label ("Select all" / "Remove all").
+     * - `string` — a fixed label.
+     * - `(state) => string` — a label derived from the current `all` / `some` / `none` state.
+     */
+    indeterminateCheck?: boolean | string | ((state: CheckboxGroupSelectAllState) => string);
+    /**
+     * Overrides the localised label shown on the select-all checkbox when not all children are
+     * selected (the `some` / `none` states). Ignored when `indeterminateCheck` is a `string` or
+     * function, which control the label directly.
+     */
+    selectAllLabel?: string;
+    /**
+     * Overrides the localised label shown on the select-all checkbox when every child is selected
+     * (the `all` state). Ignored when `indeterminateCheck` is a `string` or function, which control
+     * the label directly.
+     */
+    removeAllLabel?: string;
+    /** Extra props forwarded to the select-all checkbox (its checked/indeterminate/value are managed). */
+    indeterminateCheckProps?: Partial<Omit<CheckboxBaseProps, 'value' | 'label' | 'checked' | 'indeterminate' | 'onChange'>>;
+    /** The `Checkbox` items that make up the group. */
+    children: React.ReactNode;
+}
+export type CheckboxGroupProps = BreakpointSupport<CheckboxGroupBreakpointProps>;
+export declare const CheckboxGroup: {
+    (props: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+export default CheckboxGroup;

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

@@ -0,0 +1,124 @@
+import { jsxs as h, Fragment as U, jsx as n } from "react/jsx-runtime";
+import _ from "../../../../../../external/classnames/index.es.js";
+import o from "react";
+import { FeedbackText as W } from "../../feedback-text/feedback-text.es.js";
+import { Checkbox as X } from "../checkbox.es.js";
+import r from "./checkbox-group.module.scss.es.js";
+import { CheckboxGroupContext as Y } from "./checkbox-group-context.es.js";
+import { useBreakpointProps as Z } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as ee } from "../../../../providers/label-provider/use-labels.es.js";
+const le = (S) => {
+  const { getCurrentBreakpointProps: w } = Z(S.defaultServerBreakpoint), { getLabel: f } = ee(), {
+    id: B,
+    name: N,
+    label: V,
+    hideLabel: G = !1,
+    helper: i,
+    className: M,
+    value: k,
+    defaultValue: $ = [],
+    onChange: d,
+    disabled: g,
+    invalid: v,
+    required: j,
+    size: x,
+    variant: u = "default",
+    cardVariant: A = "primary",
+    direction: E = u === "card" ? "row" : "column",
+    indeterminateCheck: t,
+    selectAllLabel: F,
+    removeAllLabel: z,
+    indeterminateCheckProps: R,
+    children: C
+  } = w(S), D = o.useId(), L = B ?? D, p = k !== void 0, [I, H] = o.useState($), l = o.useMemo(
+    () => p ? k ?? [] : I,
+    [p, k, I]
+  ), P = i ? i.id ?? `${L}-helper` : void 0, m = o.useCallback(
+    (e) => {
+      p || H(e), d == null || d(e);
+    },
+    [p, d]
+  ), T = o.useCallback(
+    (e, b) => {
+      m(b ? [...l, e] : l.filter((y) => y !== e));
+    },
+    [l, m]
+  ), J = o.useMemo(
+    () => ({
+      name: N,
+      values: l,
+      onToggle: T,
+      disabled: g,
+      invalid: v,
+      size: x,
+      variant: u,
+      cardVariant: A
+    }),
+    [N, l, T, g, v, x, u, A]
+  ), s = o.useMemo(() => {
+    const e = /* @__PURE__ */ new Set(), b = (y) => {
+      o.Children.forEach(y, (c) => {
+        o.isValidElement(c) && (c.props.value !== void 0 && !c.props.disabled && e.add(c.props.value), b(c.props.children));
+      });
+    };
+    return b(C), [...e];
+  }, [C]), a = s.length > 0 && s.every((e) => l.includes(e)), q = s.every((e) => !l.includes(e)), K = !a && !q, O = typeof t == "string" ? t : typeof t == "function" ? t(a ? "all" : q ? "none" : "some") : a ? z ?? f("checkbox-group.remove-all") : F ?? f("checkbox-group.select-all"), Q = o.useCallback(() => {
+    m(
+      a ? l.filter((e) => !s.includes(e)) : [.../* @__PURE__ */ new Set([...l, ...s])]
+    );
+  }, [a, l, s, m]);
+  return /* @__PURE__ */ h(
+    "fieldset",
+    {
+      className: _(
+        r["tedi-checkbox-group"],
+        r[`tedi-checkbox-group--${E}`],
+        { [r["tedi-checkbox-group--card"]]: u === "card" },
+        M
+      ),
+      disabled: g,
+      "aria-invalid": v || void 0,
+      "aria-describedby": P,
+      children: [
+        V && /* @__PURE__ */ h("legend", { className: _(r["tedi-checkbox-group__legend"], { "sr-only": G }), children: [
+          V,
+          j && /* @__PURE__ */ h(U, { children: [
+            /* @__PURE__ */ n("span", { "aria-hidden": "true", className: r["tedi-checkbox-group__required"], children: "*" }),
+            /* @__PURE__ */ h("span", { className: "sr-only", children: [
+              " ",
+              f("required")
+            ] })
+          ] })
+        ] }),
+        t && /* @__PURE__ */ n(
+          X,
+          {
+            id: `${L}-select-all`,
+            ...R,
+            value: "select-all",
+            label: O,
+            checked: a,
+            indeterminate: K,
+            onChange: Q,
+            size: x
+          }
+        ),
+        /* @__PURE__ */ n(Y.Provider, { value: J, children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: _(r["tedi-checkbox-group__items"], {
+              [r["tedi-checkbox-group__items--indented"]]: !!t
+            }),
+            children: C
+          }
+        ) }),
+        i && /* @__PURE__ */ n(W, { id: P, ...i })
+      ]
+    }
+  );
+};
+le.displayName = "Checkbox.Group";
+export {
+  le as CheckboxGroup,
+  le as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-checkbox-group":"tedi-checkbox-group-8c1eff4a","tedi-checkbox-group__legend":"tedi-checkbox-group__legend-78f7c383","tedi-checkbox-group__required":"tedi-checkbox-group__required-0ef1066e","tedi-checkbox-group__items":"tedi-checkbox-group__items-55131f62","tedi-checkbox-group--column":"tedi-checkbox-group--column-72f10a57","tedi-checkbox-group__items--indented":"tedi-checkbox-group__items--indented-47a5f592","tedi-checkbox-group--row":"tedi-checkbox-group--row-824f71cf","tedi-checkbox-group--card":"tedi-checkbox-group--card-e304e3dd"};exports.default=e;

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

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

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

@@ -1,10 +1,16 @@
+import { BreakpointSupport } from '../../../helpers';
 import { ChoiceInputProps } from '../choice-input.types';
-export interface CheckboxProps extends ChoiceInputProps {
+export type CheckboxBaseProps = ChoiceInputProps & {
     /**
      * If the check is in indeterminate state. (Not checked or unchecked)
      * When this is true then the checked prop is ignored
      */
     indeterminate?: boolean;
+};
+export type CheckboxProps = BreakpointSupport<CheckboxBaseProps>;
+interface CheckboxComponent {
+    (props: CheckboxProps): JSX.Element;
+    displayName?: string;
 }
-export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export declare const Checkbox: CheckboxComponent;
 export default Checkbox;