@tedi-design-system/react 17.0.0 → 17.1.0-rc.10

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

@@ -0,0 +1,87 @@
+import { default as React, ReactNode } from 'react';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FormLabelProps } from '../form-label/form-label';
+import { Input } from './components/input/input';
+import { Prefix } from './components/prefix/prefix';
+import { Suffix } from './components/suffix/suffix';
+export interface InputGroupProps extends FormLabelProps {
+    /**
+     * Additional class name(s) applied to the root element of the InputGroup.
+     * Useful for custom styling or layout overrides.
+     */
+    className?: string;
+    /**
+     * Enables merged styling between input and its prefix/suffix elements.
+     * When `true`, borders and radius are visually combined into a single control.
+     * Disable this when using non-standard addons (e.g. buttons) that should not visually merge.
+     *
+     * @default true
+     */
+    addons?: boolean;
+    /**
+     * Helper or feedback text displayed below the input group.
+     * Can be a single item or multiple messages (e.g. error + hint).
+     *
+     * Accepts the same props as `FeedbackText`.
+     */
+    helper?: FeedbackTextProps | FeedbackTextProps[];
+    /**
+     * InputGroup composition slots.
+     * Typically includes `InputGroup.Input` and optionally `InputGroup.Prefix` and/or `InputGroup.Suffix`.
+     */
+    children: ReactNode;
+    /**
+     * Disables the entire input group.
+     * Applies disabled styles to the group and propagates the disabled state
+     * to the input and any interactive prefix/suffix elements.
+     */
+    disabled?: boolean;
+}
+export interface InputGroupForwardRef {
+    root: HTMLDivElement | null;
+}
+export type InputGroupContextValue = {
+    /**
+     * Registers a prefix element within the InputGroup.
+     * Used internally to apply correct styling (e.g. border merging).
+     */
+    registerPrefix: () => void;
+    /**
+     * Unregisters the prefix element when it is removed.
+     */
+    unregisterPrefix: () => void;
+    /**
+     * Registers a suffix element within the InputGroup.
+     * Used internally to apply correct styling.
+     */
+    registerSuffix: () => void;
+    /**
+     * Unregisters the suffix element when it is removed.
+     */
+    unregisterSuffix: () => void;
+    /**
+     * Whether a prefix is currently present.
+     */
+    hasPrefix: boolean;
+    /**
+     * Whether a suffix is currently present.
+     */
+    hasSuffix: boolean;
+    /**
+     * Disabled state inherited from InputGroup.
+     * Consumers (Input, Prefix, Suffix) should use this to adjust
+     * behavior and styling.
+     */
+    disabled?: boolean;
+    hasExternalLabel?: boolean;
+    inputId?: string;
+};
+export declare const useInputGroup: () => InputGroupContextValue;
+export declare const useOptionalInputGroup: () => InputGroupContextValue | null;
+export declare const InputGroupBase: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<InputGroupForwardRef>>;
+declare const InputGroup: typeof InputGroupBase & {
+    Prefix: typeof Prefix;
+    Suffix: typeof Suffix;
+    Input: typeof Input;
+};
+export default InputGroup;

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

@@ -0,0 +1,62 @@
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import F from "../../../../../external/classnames/index.es.js";
+import g, { forwardRef as H, useContext as G, createContext as j, useState as l, useImperativeHandle as E, useMemo as L } from "react";
+import { FeedbackText as I } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as b } from "../form-label/form-label.es.js";
+import { Input as B } from "./components/input/input.es.js";
+import { Prefix as M } from "./components/prefix/prefix.es.js";
+import { Suffix as O } from "./components/suffix/suffix.es.js";
+import t from "./input-group.module.scss.es.js";
+const a = j(null), U = () => {
+  const u = G(a);
+  if (!u) throw new Error("InputGroupContext missing");
+  return u;
+}, W = () => G(a), S = H(
+  ({ className: u, addons: P = !0, helper: r, label: o, children: h, disabled: s, id: y, ...v }, C) => {
+    const m = g.useRef(null), N = g.useId(), i = y ?? N, [n, d] = l(!1), [p, c] = l(!1);
+    E(C, () => ({
+      get root() {
+        return m.current;
+      }
+    }));
+    const w = L(
+      () => ({
+        hasPrefix: n,
+        hasSuffix: p,
+        disabled: s,
+        hasExternalLabel: !!o,
+        inputId: i,
+        registerPrefix: () => d(!0),
+        unregisterPrefix: () => d(!1),
+        registerSuffix: () => c(!0),
+        unregisterSuffix: () => c(!1)
+      }),
+      [i, n, p, s, o]
+    ), A = F(
+      t["tedi-input-group"],
+      {
+        [t["tedi-input-group--addons"]]: P,
+        [t["tedi-input-group--has-prefix"]]: n,
+        [t["tedi-input-group--has-suffix"]]: p,
+        [t["tedi-input-group--disabled"]]: s
+      },
+      u
+    ), R = () => !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ e("div", { className: t["tedi-input-group__feedback-wrapper"], children: Array.isArray(r) ? r.map((_, x) => /* @__PURE__ */ e(I, { ..._, id: `group-helper-${x}` }, x)) : /* @__PURE__ */ e(I, { ...r, id: "group-helper" }) });
+    return /* @__PURE__ */ k(a.Provider, { value: w, children: [
+      o && /* @__PURE__ */ e(b, { ...v, label: o, id: i }),
+      /* @__PURE__ */ e("div", { ref: m, className: A, "data-name": "tedi-input-group", "aria-disabled": s, children: h }),
+      R()
+    ] });
+  }
+);
+S.displayName = "InputGroup";
+const f = S;
+f.Prefix = M;
+f.Suffix = O;
+f.Input = B;
+export {
+  S as InputGroupBase,
+  f as default,
+  U as useInputGroup,
+  W as useOptionalInputGroup
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-input-group":"tedi-input-group-3de08ee1","tedi-input-group__prefix":"tedi-input-group__prefix-056c2ccf","tedi-input-group__suffix":"tedi-input-group__suffix-9c330042","tedi-input-group__input":"tedi-input-group__input-5454624d","tedi-input-group__prefix--no-inner-div":"tedi-input-group__prefix--no-inner-div-4bc9b815","tedi-input-group__suffix--no-inner-div":"tedi-input-group__suffix--no-inner-div-283ea370","tedi-input-group--addons":"tedi-input-group--addons-7bd99e72","tedi-input-group--disabled":"tedi-input-group--disabled-f5db06aa","tedi-input-group--has-prefix":"tedi-input-group--has-prefix-e845fcb0","tedi-input-group--has-suffix":"tedi-input-group--has-suffix-994ab888","tedi-input-group__feedback-wrapper":"tedi-input-group__feedback-wrapper-bfbe3cb2"};exports.default=i;

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

@@ -0,0 +1,16 @@
+const i = {
+  "tedi-input-group": "tedi-input-group-3de08ee1",
+  "tedi-input-group__prefix": "tedi-input-group__prefix-056c2ccf",
+  "tedi-input-group__suffix": "tedi-input-group__suffix-9c330042",
+  "tedi-input-group__input": "tedi-input-group__input-5454624d",
+  "tedi-input-group__prefix--no-inner-div": "tedi-input-group__prefix--no-inner-div-4bc9b815",
+  "tedi-input-group__suffix--no-inner-div": "tedi-input-group__suffix--no-inner-div-283ea370",
+  "tedi-input-group--addons": "tedi-input-group--addons-7bd99e72",
+  "tedi-input-group--disabled": "tedi-input-group--disabled-f5db06aa",
+  "tedi-input-group--has-prefix": "tedi-input-group--has-prefix-e845fcb0",
+  "tedi-input-group--has-suffix": "tedi-input-group--has-suffix-994ab888",
+  "tedi-input-group__feedback-wrapper": "tedi-input-group__feedback-wrapper-bfbe3cb2"
+};
+export {
+  i as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),j=require("../../base/icon/icon.cjs.js"),w=require("../../buttons/closing-button/closing-button.cjs.js"),k=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),R=require("../form-label/form-label.cjs.js"),i=require("./multi-value-field.module.scss.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),c=_.forwardRef((h,O)=>{const{id:b,label:d,name:m,values:f,onChange:n,tagColor:q="primary",className:N,icon:t,onIconClick:v,iconButtonProps:s,isClearable:V=!0,required:p,disabled:u}=h,{getLabel:y}=$.useLabels(),[C,S]=_.useState(f??[]),a=f??C,g=l=>{S(l),n==null||n(l)},F=l=>{const r=a.filter((T,M)=>M!==l);g(r)},o=!u&&V&&a.length>0,I=()=>{g([])},L=()=>{if(!t)return null;const l=typeof t=="string"?{name:t}:t;return v?e.jsx("button",{...s,className:x.default(i.default["tedi-multi-value-field__icon-wrapper"],s==null?void 0:s.className),onClick:v,type:"button",children:e.jsx(j.Icon,{...l,size:18})}):e.jsx("div",{className:i.default["tedi-multi-value-field__icon-wrapper"],children:e.jsx(j.Icon,{...l,size:18})})};return e.jsxs("div",{className:x.default(i.default["tedi-multi-value-field"],N),children:[d&&e.jsx(R.FormLabel,{id:b,label:d,required:p}),e.jsxs("div",{className:i.default["tedi-multi-value-field__inner"],children:[a.length>0&&e.jsx("div",{className:i.default["tedi-multi-value-field__tags"],children:a.map((l,r)=>e.jsx(z.Tag,{color:q,onClose:u?void 0:()=>F(r),children:l},`${l}-${r}`))}),(o||t)&&e.jsxs("div",{className:i.default["tedi-multi-value-field__right-area"],children:[o&&e.jsx(w.ClosingButton,{onClick:I,title:y("clear"),className:i.default["tedi-multi-value-field__clear-button"],iconSize:18}),o&&t&&e.jsx(k.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),t&&L()]})]}),m&&e.jsx("input",{type:"hidden",name:m,value:a.length?JSON.stringify(a):"",required:p,disabled:u})]})});c.displayName="MultiValueField";exports.MultiValueField=c;exports.default=c;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export interface MultiValueFieldProps {
+    /**
+     * Unique identifier for the field. Used to associate the label with the input.
+     */
+    id: string;
+    /**
+     * Optional label displayed above the field.
+     */
+    label?: string;
+    /**
+     * Name attribute for the hidden input. When provided, the field value
+     * will be submitted as a JSON string in forms.
+     */
+    name?: string;
+    /**
+     * List of values to display as tags.
+     * If provided, the component acts as a controlled component.
+     */
+    values?: string[];
+    /**
+     * Callback fired whenever the values change
+     * (e.g. removing a tag or clearing all values).
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Visual style of the tags.
+     * @default 'primary'
+     */
+    tagColor?: 'primary' | 'secondary' | 'danger';
+    /**
+     * Additional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional icon displayed on the right side.
+     * Can be a string (icon name) or full icon props.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Click handler for the icon.
+     * If provided, the icon will be rendered as a button.
+     */
+    onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Extra HTML attributes spread on the icon `<button>` element. Use this to
+     * wire ARIA state (e.g. `aria-expanded`, `aria-controls`) directly to the
+     * icon trigger when it opens a popover / dialog. Only applied when
+     * `onIconClick` is set.
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Whether the clear button should be shown when values exist.
+     * @default true
+     */
+    isClearable?: boolean;
+    /**
+     * Marks the field as required.
+     * Adds required indicator to label and applies native required validation to the hidden input.
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+}
+export interface MultiValueFieldRef {
+    input: HTMLInputElement | null;
+    wrapper: HTMLDivElement | null;
+}
+export declare const MultiValueField: React.ForwardRefExoticComponent<MultiValueFieldProps & React.RefAttributes<MultiValueFieldRef>>;
+export default MultiValueField;

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

@@ -0,0 +1,81 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { forwardRef as L, useState as j } from "react";
+import { Icon as g } from "../../base/icon/icon.es.js";
+import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as $ } from "../../misc/separator/separator.es.js";
+import { Tag as q } from "../../tags/tag/tag.es.js";
+import { FormLabel as A } from "../form-label/form-label.es.js";
+import t from "./multi-value-field.module.scss.es.js";
+import { useLabels as J } from "../../../providers/label-provider/use-labels.es.js";
+const O = L((N, R) => {
+  const {
+    id: b,
+    label: d,
+    name: u,
+    values: f,
+    onChange: o,
+    tagColor: y = "primary",
+    className: C,
+    icon: i,
+    onIconClick: p,
+    iconButtonProps: a,
+    isClearable: V = !0,
+    required: v,
+    disabled: n
+  } = N, { getLabel: w } = J(), [x, I] = j(f ?? []), r = f ?? x, h = (e) => {
+    I(e), o == null || o(e);
+  }, S = (e) => {
+    const s = r.filter((T, F) => F !== e);
+    h(s);
+  }, c = !n && V && r.length > 0, k = () => {
+    h([]);
+  }, z = () => {
+    if (!i) return null;
+    const e = typeof i == "string" ? { name: i } : i;
+    return p ? /* @__PURE__ */ l(
+      "button",
+      {
+        ...a,
+        className: _(t["tedi-multi-value-field__icon-wrapper"], a == null ? void 0 : a.className),
+        onClick: p,
+        type: "button",
+        children: /* @__PURE__ */ l(g, { ...e, size: 18 })
+      }
+    ) : /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ l(g, { ...e, size: 18 }) });
+  };
+  return /* @__PURE__ */ m("div", { className: _(t["tedi-multi-value-field"], C), children: [
+    d && /* @__PURE__ */ l(A, { id: b, label: d, required: v }),
+    /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__inner"], children: [
+      r.length > 0 && /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__tags"], children: r.map((e, s) => /* @__PURE__ */ l(q, { color: y, onClose: n ? void 0 : () => S(s), children: e }, `${e}-${s}`)) }),
+      (c || i) && /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__right-area"], children: [
+        c && /* @__PURE__ */ l(
+          M,
+          {
+            onClick: k,
+            title: w("clear"),
+            className: t["tedi-multi-value-field__clear-button"],
+            iconSize: 18
+          }
+        ),
+        c && i && /* @__PURE__ */ l($, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+        i && z()
+      ] })
+    ] }),
+    u && /* @__PURE__ */ l(
+      "input",
+      {
+        type: "hidden",
+        name: u,
+        value: r.length ? JSON.stringify(r) : "",
+        required: v,
+        disabled: n
+      }
+    )
+  ] });
+});
+O.displayName = "MultiValueField";
+export {
+  O as MultiValueField,
+  O as default
+};

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;

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

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-multi-value-field__inner": "tedi-multi-value-field__inner-d00be7fe",
+  "tedi-multi-value-field__tags": "tedi-multi-value-field__tags-4f52450e",
+  "tedi-multi-value-field__right-area": "tedi-multi-value-field__right-area-2d533551",
+  "tedi-multi-value-field__icon-wrapper": "tedi-multi-value-field__icon-wrapper-d73d0e44"
+};
+export {
+  e as default
+};

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

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

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

@@ -20,13 +20,13 @@ const ie = (y) => {
     decimalPlaces: F,
     min: r,
     max: a,
-    step: o = 1,
+    step: u = 1,
     defaultValue: z,
     value: h,
     onChange: i,
     suffix: B,
     fullWidth: S = !1,
-    disabled: u = !1,
+    disabled: o = !1,
     invalid: M = !1,
     helper: l,
     input: m
@@ -46,19 +46,19 @@ const ie = (y) => {
     }, 5e3);
   }, A = (e) => F !== void 0 ? parseFloat(e.toFixed(F)) : e, D = (e) => {
     let t = s;
-    e === "increment" && (t = t + o), e === "decrement" && (t = t - o), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
+    e === "increment" && (t = t + u), e === "decrement" && (t = t - u), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
   }, G = ({ currentTarget: { value: e } }) => {
     i == null || i(I(+e)), C(I(+e));
   }, E = (e) => {
     const t = e === "increment" ? a !== void 0 && s >= a : r !== void 0 && s <= r, f = b(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
-      [n["tedi-number-field__button--disabled"]]: t || u
-    }), p = V(`numberField.${e}`, o);
+      [n["tedi-number-field__button--disabled"]]: t || o
+    }), p = V(`numberField.${e}`, u);
     return /* @__PURE__ */ d(
       Y,
       {
         "aria-label": p,
         onClick: () => D(e),
-        disabled: t || u,
+        disabled: t || o,
         visualType: "secondary",
         className: f,
         icon: { name: e === "increment" ? "add" : "remove" },
@@ -88,8 +88,8 @@ const ie = (y) => {
           min: r,
           max: a,
           required: x,
-          step: o,
-          disabled: u,
+          step: u,
+          disabled: o,
           onChange: G,
           className: t,
           ...m
@@ -100,7 +100,7 @@ const ie = (y) => {
   }, J = b(
     n["tedi-number-field"],
     { [n["tedi-number-field--invalid"]]: g(s) },
-    { [n["tedi-number-field--disabled"]]: u },
+    { [n["tedi-number-field--disabled"]]: o },
     { [n["tedi-number-field--small"]]: _ === "small" },
     k
   );
@@ -117,5 +117,6 @@ const ie = (y) => {
 };
 ie.displayName = "NumberField";
 export {
-  ie as NumberField
+  ie as NumberField,
+  ie as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),y=require("react"),N=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),t=require("./search.module.scss.cjs.js"),v=require("../../../providers/label-provider/use-labels.cjs.js"),u=y.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,...s},h)=>{const{getLabel:l}=v.useLabels(),m=q=>{q.key==="Enter"&&(a==null||a(s.value))},_=()=>{a==null||a(s.value)},x={...s,ref:h,inputClassName:r.default(t.default["tedi-search__input"],e&&t.default["tedi-search__input--has-button"]),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},b=c||l("search"),p=f??b;return i.jsxs("div",{className:r.default(t.default["tedi-search__wrapper"],s.className),role:"search","aria-label":p,children:[i.jsx(j.TextField,{...x}),e&&i.jsx(N.Button,{...e,onClick:_,className:r.default(t.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),v=require("../../buttons/button/button.cjs.js"),L=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),N=require("../../../providers/label-provider/use-labels.cjs.js"),u=j.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,...t},_)=>{const{getLabel:l}=N.useLabels(),m=y=>{y.key==="Enter"&&(a==null||a(t.value))},x=()=>{a==null||a(t.value)},b={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},p=c||l("search"),q=f??p;return r.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":q,children:[r.jsx(L.TextField,{...b}),e&&r.jsx(v.Button,{...e,onClick:x,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;

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

@@ -1,34 +1,44 @@
-import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as v } from "react";
-import { Button as w } from "../../buttons/button/button.es.js";
-import { TextField as L } from "../textfield/textfield.es.js";
-import r from "./search.module.scss.es.js";
-import { useLabels as k } from "../../../providers/label-provider/use-labels.es.js";
-const C = v(
-  ({ placeholder: t, isClearable: m = !0, searchIcon: o = "search", onSearch: s, onChange: d, button: e, ariaLabel: p, ...a }, n) => {
-    const { getLabel: i } = k(), f = (x) => {
-      x.key === "Enter" && (s == null || s(a.value));
-    }, h = () => {
-      s == null || s(a.value);
-    }, _ = {
-      ...a,
-      ref: n,
-      inputClassName: l(r["tedi-search__input"], e && r["tedi-search__input--has-button"]),
+import { forwardRef as w } from "react";
+import { Button as L } from "../../buttons/button/button.es.js";
+import { TextField as k } from "../textfield/textfield.es.js";
+import a from "./search.module.scss.es.js";
+import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
+const b = w(
+  ({
+    placeholder: t,
+    isClearable: m = !0,
+    searchIcon: o = "search",
+    onSearch: s,
+    onChange: d,
+    button: e,
+    ariaLabel: p,
+    className: n,
+    ...r
+  }, f) => {
+    const { getLabel: i } = C(), h = (y) => {
+      y.key === "Enter" && (s == null || s(r.value));
+    }, _ = () => {
+      s == null || s(r.value);
+    }, u = {
+      ...r,
+      ref: f,
+      inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
       isClearable: m,
-      onKeyDown: f,
+      onKeyDown: h,
       onChange: d,
       ...e ? {} : { icon: o }
-    }, u = t || i("search"), N = p ?? u;
-    return /* @__PURE__ */ y("div", { className: l(r["tedi-search__wrapper"], a.className), role: "search", "aria-label": N, children: [
-      /* @__PURE__ */ c(L, { ..._ }),
+    }, N = t || i("search"), x = p ?? N;
+    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
+      /* @__PURE__ */ c(k, { ...u }),
       e && /* @__PURE__ */ c(
-        w,
+        L,
         {
           ...e,
-          onClick: h,
-          className: l(r["tedi-search__button"], e.className),
+          onClick: _,
+          className: l(a["tedi-search__button"], e.className),
           "aria-label": e.children ? void 0 : i("search"),
           children: e.children ?? i("search")
         }
@@ -36,7 +46,7 @@ const C = v(
     ] });
   }
 );
-C.displayName = "Search";
+b.displayName = "Search";
 export {
-  C as Search
+  b as Search
 };

package/src/tedi/components/form/select/components/select-bulk-helpers.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i="__tedi_select_all__",r="__tedi_select_group__:",u=e=>!!e&&typeof e.value=="string"&&e.value.startsWith(r),a=e=>{if(!e||e.length===0)return[];const t=[];for(const s of e)if(s&&typeof s=="object"&&Array.isArray(s.options))for(const n of s.options)n.isDisabled||t.push(n);else{const n=s;n&&!n.isDisabled&&t.push(n)}return t},f=e=>!e||!Array.isArray(e.options)?[]:e.options.filter(t=>!t.isDisabled),l=(e,t)=>t.length===0?!1:t.every(s=>e.some(n=>n.value===s.value)),c=(e,t)=>{if(t.length===0)return!1;const s=t.filter(n=>e.some(o=>o.value===n.value)).length;return s>0&&s<t.length},_=(e,t)=>{if(l(e,t))return e.filter(n=>!t.some(o=>o.value===n.value));const s=[...e];for(const n of t)s.some(o=>o.value===n.value)||s.push(n);return s};exports.GROUP_OPTION_PREFIX=r;exports.SELECT_ALL_VALUE=i;exports.areAllSelected=l;exports.getEnabledOptions=a;exports.getGroupEnabledOptions=f;exports.isGroupSentinel=u;exports.isIndeterminate=c;exports.toggleBulkSelection=_;

package/src/tedi/components/form/select/components/select-bulk-helpers.d.ts

@@ -0,0 +1,55 @@
+import { GroupBase, OptionsOrGroups } from 'react-select';
+import { ISelectOption } from '../select';
+/**
+ * Sentinel value used by the "Select all" option when it is injected into
+ * react-select's option list. The sentinel is stripped from the value before
+ * it is exposed to consumers via onChange — it never leaks outside the
+ * component.
+ */
+export declare const SELECT_ALL_VALUE = "__tedi_select_all__";
+export declare const isSelectAllSentinel: (option: {
+    value?: string;
+} | null | undefined) => boolean;
+/**
+ * Prefix for group sentinel options. When `selectableGroups + multiple` is on,
+ * each group is flattened into the option list with a sentinel option at the
+ * top of its run; toggling the sentinel toggles every enabled child of that
+ * group. The label after the prefix is the original group's label.
+ */
+export declare const GROUP_OPTION_PREFIX = "__tedi_select_group__:";
+export declare const isGroupSentinel: (option: {
+    value?: string;
+} | null | undefined) => boolean;
+/**
+ * Returns true when `options` is a grouped tree (i.e. each top-level entry
+ * has its own `options` array).
+ */
+export declare const isGroupedOptions: (options: OptionsOrGroups<ISelectOption, GroupBase<ISelectOption>>) => options is ReadonlyArray<GroupBase<ISelectOption>>;
+/**
+ * Flattens grouped/non-grouped options into a single list of enabled
+ * `ISelectOption`s. Used by Select All and group toggles to decide which
+ * options to flip on/off.
+ *
+ * Handles a mixed input where a flat option (e.g. the injected Select-all
+ * sentinel) sits alongside groups in the same top-level array, by checking
+ * each item individually rather than only inspecting `options[0]`.
+ */
+export declare const getEnabledOptions: (options: OptionsOrGroups<ISelectOption, GroupBase<ISelectOption>>) => ISelectOption[];
+/**
+ * Returns the enabled options of a specific group. Pass the group object
+ * directly (e.g. `GroupHeadingProps.data` from react-select) — looking groups
+ * up by label is unsafe because duplicate labels would always resolve to the
+ * first match, mutating the wrong group.
+ */
+export declare const getGroupEnabledOptions: (group: GroupBase<ISelectOption> | null | undefined) => ISelectOption[];
+/** True iff every enabled option is currently in the selection. */
+export declare const areAllSelected: (selected: ReadonlyArray<ISelectOption>, enabled: ReadonlyArray<ISelectOption>) => boolean;
+/** True when some — but not all — enabled options are selected. */
+export declare const isIndeterminate: (selected: ReadonlyArray<ISelectOption>, enabled: ReadonlyArray<ISelectOption>) => boolean;
+/**
+ * Toggle behaviour for both Select All and group toggle: when every enabled
+ * option in `target` is selected, remove them all; otherwise add the missing
+ * ones to the existing selection. Other selected values (e.g. options
+ * outside `target`) are preserved.
+ */
+export declare const toggleBulkSelection: (selected: ReadonlyArray<ISelectOption>, target: ReadonlyArray<ISelectOption>) => ISelectOption[];

package/src/tedi/components/form/select/components/select-bulk-helpers.es.js

@@ -0,0 +1,34 @@
+const i = "__tedi_select_all__", o = "__tedi_select_group__:", u = (t) => !!t && typeof t.value == "string" && t.value.startsWith(o), f = (t) => {
+  if (!t || t.length === 0) return [];
+  const e = [];
+  for (const n of t)
+    if (n && typeof n == "object" && Array.isArray(n.options))
+      for (const s of n.options)
+        s.isDisabled || e.push(s);
+    else {
+      const s = n;
+      s && !s.isDisabled && e.push(s);
+    }
+  return e;
+}, a = (t) => !t || !Array.isArray(t.options) ? [] : t.options.filter((e) => !e.isDisabled), l = (t, e) => e.length === 0 ? !1 : e.every((n) => t.some((s) => s.value === n.value)), c = (t, e) => {
+  if (e.length === 0) return !1;
+  const n = e.filter((s) => t.some((r) => r.value === s.value)).length;
+  return n > 0 && n < e.length;
+}, _ = (t, e) => {
+  if (l(t, e))
+    return t.filter((s) => !e.some((r) => r.value === s.value));
+  const n = [...t];
+  for (const s of e)
+    n.some((r) => r.value === s.value) || n.push(s);
+  return n;
+};
+export {
+  o as GROUP_OPTION_PREFIX,
+  i as SELECT_ALL_VALUE,
+  l as areAllSelected,
+  f as getEnabledOptions,
+  a as getGroupEnabledOptions,
+  u as isGroupSentinel,
+  c as isIndeterminate,
+  _ as toggleBulkSelection
+};

package/src/tedi/components/form/select/components/select-control.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),t=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),n=e=>{const o=l.default(t.default["tedi-select__control"],e.className,{[t.default["tedi-select__control--focused"]]:e.isFocused});return c.jsx(s.c.Control,{...e,className:o})};exports.SelectControl=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),t=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),n=e=>{const o=l.default(t.default["tedi-select__control"],{[t.default["tedi-select__control--focused"]]:e.isFocused},e.className);return c.jsx(s.c.Control,{...e,className:o})};exports.SelectControl=n;

package/src/tedi/components/form/select/components/select-control.es.js

@@ -3,9 +3,13 @@ import c from "../../../../../../external/classnames/index.es.js";
 import t from "../select.module.scss.es.js";
 import { c as r } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
 const i = (o) => {
-  const s = c(t["tedi-select__control"], o.className, {
-    [t["tedi-select__control--focused"]]: o.isFocused
-  });
+  const s = c(
+    t["tedi-select__control"],
+    {
+      [t["tedi-select__control--focused"]]: o.isFocused
+    },
+    o.className
+  );
   return /* @__PURE__ */ e(r.Control, { ...o, className: s });
 };
 export {