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

package/package.json

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),M=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),n=require("../input-group/input-group.cjs.js"),_=require("./field.module.scss.cjs.js"),m=e.forwardRef((l,p)=>{var d;const{id:k,name:v,value:i,type:x,defaultValue:I,onChange:a,onChangeEvent:r,disabled:q,readOnly:y,required:N,invalid:R,placeholder:V,className:g,onFocus:j,onBlur:F,isTextArea:P,inputProps:b,textareaProps:h,...O}=l,t=e.useRef(null),[S,T]=e.useState(i??I??""),w=i??S;e.useImperativeHandle(p,()=>t.current);const C=o=>{const c=o.currentTarget.value;T(c),a==null||a(c),r==null||r(o)},s=(d=n.useOptionalInputGroup)==null?void 0:d.call(n),A=e.useId(),B=l.id??(s==null?void 0:s.inputId)??A,H=M.default(_.default["tedi-field"],g),u={...O,id:B,name:v,value:w,placeholder:V,disabled:q,readOnly:y,required:N,"aria-invalid":R||void 0,onChange:C,onFocus:j,onBlur:F,className:H,ref:t};return P?f.jsx("textarea",{...h,...u,ref:t}):f.jsx("input",{...b,...u,type:x,ref:t})});m.displayName="Field";exports.Field=m;

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

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+export type FieldElement = HTMLInputElement | HTMLTextAreaElement;
+export interface FieldProps {
+    /**
+     * Unique identifier for the field element.
+     */
+    id?: string;
+    /**
+     * Name attribute used in forms and form submissions.
+     */
+    name?: string;
+    /**
+     * Controlled value of the field.
+     */
+    value?: string;
+    /**
+     * The type of the input element (e.g. 'text', 'email', 'password', 'number', 'tel', 'url', etc.).
+     *
+     * **Note**: This prop is ignored when `isTextArea={true}`.
+     * @default 'text'
+     */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    /**
+     * Default value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when value changes (returns string value only).
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Native change event callback (full event access).
+     */
+    onChangeEvent?: React.ChangeEventHandler<FieldElement>;
+    /**
+     * Disables the field and prevents user interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Makes the field read-only (user cannot edit but can focus/select).
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as required in form validation.
+     */
+    required?: boolean;
+    /**
+     * Marks the field visually and semantically as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Placeholder text displayed when the field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Custom CSS class for the input/textarea element.
+     */
+    className?: string;
+    /**
+     * ARIA description reference (used for helper/error text association).
+     */
+    'aria-describedby'?: string;
+    /**
+     * Accessible label for screen readers when no visible label exists.
+     */
+    'aria-label'?: string;
+    /**
+     * Focus event handler.
+     */
+    onFocus?: React.FocusEventHandler<FieldElement>;
+    /**
+     * Blur event handler.
+     */
+    onBlur?: React.FocusEventHandler<FieldElement>;
+    /**
+     * Renders a textarea instead of an input element.
+     */
+    isTextArea?: boolean;
+    /**
+     * Native input element props override (input only).
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Native textarea element props override (textarea only).
+     */
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<FieldElement>>;

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

@@ -0,0 +1,54 @@
+import { jsx as c } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import a, { forwardRef as H } from "react";
+import { useOptionalInputGroup as S } from "../input-group/input-group.es.js";
+import k from "./field.module.scss.es.js";
+const z = H((n, m) => {
+  var i;
+  const {
+    id: D,
+    name: f,
+    value: l,
+    type: p,
+    defaultValue: v,
+    onChange: r,
+    onChangeEvent: t,
+    disabled: I,
+    readOnly: x,
+    required: N,
+    invalid: V,
+    placeholder: y,
+    className: R,
+    onFocus: h,
+    onBlur: F,
+    isTextArea: P,
+    inputProps: g,
+    textareaProps: w,
+    ...C
+  } = n, e = a.useRef(null), [O, T] = a.useState(l ?? v ?? ""), _ = l ?? O;
+  a.useImperativeHandle(m, () => e.current);
+  const b = (d) => {
+    const u = d.currentTarget.value;
+    T(u), r == null || r(u), t == null || t(d);
+  }, s = (i = S) == null ? void 0 : i(), j = a.useId(), q = n.id ?? (s == null ? void 0 : s.inputId) ?? j, A = B(k["tedi-field"], R), o = {
+    ...C,
+    id: q,
+    name: f,
+    value: _,
+    placeholder: y,
+    disabled: I,
+    readOnly: x,
+    required: N,
+    "aria-invalid": V || void 0,
+    onChange: b,
+    onFocus: h,
+    onBlur: F,
+    className: A,
+    ref: e
+  };
+  return P ? /* @__PURE__ */ c("textarea", { ...w, ...o, ref: e }) : /* @__PURE__ */ c("input", { ...g, ...o, type: p, ref: e });
+});
+z.displayName = "Field";
+export {
+  z as Field
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-field":"tedi-field-df48ad86"};exports.default=e;

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

@@ -0,0 +1,6 @@
+const d = {
+  "tedi-field": "tedi-field-df48ad86"
+};
+export {
+  d as default
+};

package/src/tedi/components/form/file-upload/file-upload.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),D=require("react"),P=require("../../../helpers/hooks/use-file-upload.cjs.js"),W=require("../../base/typography/text/text.cjs.js"),v=require("../../buttons/button/button.cjs.js"),A=require("../../buttons/closing-button/closing-button.cjs.js"),E=require("../form-label/form-label.cjs.js"),G=require("../../misc/separator/separator.cjs.js"),J=require("../../tags/tag/tag.cjs.js"),y=require("../feedback-text/feedback-text.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),K=require("../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Q=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),X=L=>{const{getLabel:n}=K.useLabels(),{id:r,name:C,accept:g,multiple:b,onChange:m,className:N,defaultFiles:B,onDelete:k,hasClearButton:T=!0,files:u,readOnly:p,disabled:s=!1,maxSize:U,validateIndividually:$=!1,size:c="default",helper:i,...w}=L,{innerFiles:h,uploadErrorHelper:t,onFileChange:S,onFileRemove:R,handleClear:j,announcement:z}=P.useFileUpload({accept:g,maxSize:U,multiple:b,validateIndividually:$,defaultFiles:B,onChange:m,onDelete:k,files:u}),I=F.default(),M=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},N),x=i?(i==null?void 0:i.id)??`${r}-helper`:void 0,d=D.useMemo(()=>u&&m?u:h,[u,h,m]),V=(l,o)=>{const O=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(J.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>R(l):void 0,isLoading:l.isLoading,"aria-label":O,children:l.name})},o)},_=()=>{if(d.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:d.map((l,o)=>V(l,o))});if(d.length===1){const l=d[0],o=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx(W.Text,{"aria-label":o,className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate"]),children:l.name})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:e.jsx(E.FormLabel,{id:r,...w,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:z}),p?_():e.jsx("div",{className:f.default(a.default["tedi-file-upload__container"],{[a.default["tedi-file-upload--disabled"]]:s,[a.default["tedi-file-upload--error"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="error",[a.default["tedi-file-upload--valid"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="valid"},{[a.default[`tedi-file-upload__container--${c}`]]:c}),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(Q.Row,{children:[e.jsx(q.Col,{className:"display-flex",children:_()}),e.jsx(q.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:M,children:[e.jsx("input",{id:r,type:"file",name:C,accept:g,onChange:S,multiple:b,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":x}),T&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[F.isBreakpointBelow(I,"md")?e.jsx(v.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:j,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(A.ClosingButton,{onClick:j,iconSize:18,title:n("clear")}),e.jsx(G.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(v.Button,{visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=document.getElementById(r))==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:c,children:n("file-upload.add")})]})})]})})}),i?e.jsx(y.FeedbackText,{...i,id:x}):t?e.jsx(y.FeedbackText,{...t,id:x}):null]})};exports.FileUpload=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Y=require("../../../helpers/hooks/use-file-upload.cjs.js"),Z=require("../../base/typography/text/text.cjs.js"),k=require("../../buttons/button/button.cjs.js"),H=require("../../buttons/closing-button/closing-button.cjs.js"),G=require("../form-label/form-label.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),le=require("../../tags/tag/tag.cjs.js"),B=require("../feedback-text/feedback-text.cjs.js"),g=require("../input-group/input-group.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),ae=require("../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ie=require("../../layout/grid/row.cjs.js"),I=require("../../layout/grid/col.cjs.js"),te=j=>{var N;const{getLabel:n}=ae.useLabels(),{id:se,name:w,label:_,accept:v,multiple:q,onChange:m,className:R,wrapperClassName:U,defaultFiles:S,onDelete:z,hasClearButton:M=!0,files:u,readOnly:p,disabled:s=!1,maxSize:O,validateIndividually:V=!1,size:c="default",helper:i,...$}=j,{innerFiles:y,uploadErrorHelper:t,onFileChange:D,onFileRemove:P,handleClear:F,announcement:W}=Y.useFileUpload({accept:v,maxSize:O,multiple:q,validateIndividually:V,defaultFiles:S,onChange:m,onDelete:z,files:u}),A=T.default(),E=h.useId(),d=(N=g.useOptionalInputGroup)==null?void 0:N.call(g),J=d==null?void 0:d.hasExternalLabel,x=j.id??(d==null?void 0:d.inputId)??E,L=h.useRef(null),K=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},R),b=(i==null?void 0:i.id)??(i||t?`${x}-helper`:void 0),o=h.useMemo(()=>u&&m?u:y,[u,y,m]),Q=(l,r)=>{const X=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(le.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>P(l):void 0,isLoading:l.isLoading,"aria-label":X,children:l.name})},r)},C=()=>{if(o.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:o.map((l,r)=>Q(l,r))});if(o.length===1){const l=o[0],r=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx(Z.Text,{"aria-label":r,className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate"]),children:l.name})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:!J&&_&&e.jsx(G.FormLabel,{id:x,label:_??"",...$,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:W}),p?C():e.jsx("div",{className:f.default(a.default["tedi-file-upload__container"],{[a.default["tedi-file-upload--disabled"]]:s,[a.default["tedi-file-upload--error"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="error",[a.default["tedi-file-upload--valid"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="valid"},{[a.default[`tedi-file-upload__container--${c}`]]:c},U),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(ie.Row,{children:[e.jsx(I.Col,{className:"display-flex",children:C()}),e.jsx(I.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:K,children:[e.jsx("input",{ref:L,id:x,type:"file",name:w,accept:v,onChange:D,multiple:q,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":b}),M&&o.length>0&&!s&&e.jsxs(e.Fragment,{children:[T.isBreakpointBelow(A,"md")?e.jsx(k.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:F,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(H.ClosingButton,{onClick:F,iconSize:18,title:n("clear")}),e.jsx(ee.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(k.Button,{visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=L.current)==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:c,children:n("file-upload.add")})]})})]})})}),i?e.jsx(B.FeedbackText,{...i,id:b}):t?e.jsx(B.FeedbackText,{...t,id:b}):null]})};exports.FileUpload=te;

package/src/tedi/components/form/file-upload/file-upload.d.ts

@@ -1,11 +1,23 @@
 import { FileUploadFile } from '../../../helpers/hooks/use-file-upload';
 import { FormLabelProps } from '../../form/form-label/form-label';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
-export interface FileUploadProps extends FormLabelProps {
+export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
+    id?: string;
+    label?: string;
     /**
-     * Additional class names for styling the component.
+     * Additional class names appended to the inner dropzone element
+     * (`tedi-file-upload`) — the content area that holds the file list and the
+     * upload button. Use this to tweak the dropzone itself (border, padding,
+     * background) without affecting the surrounding container.
      */
     className?: string;
+    /**
+     * Additional class names appended to the outer container element
+     * (`tedi-file-upload__container`) that wraps the dropzone, file list, and
+     * helper/error states. Use this to tweak the component's outer shell
+     * (radius, outline, max-width) or to override size/state modifiers.
+     */
+    wrapperClassName?: string;
     /**
      * The name of the file input field, used for form submission and accessibility.
      */

package/src/tedi/components/form/file-upload/file-upload.es.js

@@ -1,152 +1,159 @@
-import { jsxs as p, Fragment as N, jsx as i } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import q from "react";
-import { useFileUpload as A } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Text as E } from "../../base/typography/text/text.es.js";
-import { Button as C } from "../../buttons/button/button.es.js";
+import { jsxs as u, Fragment as I, jsx as l } from "react/jsx-runtime";
+import p from "../../../../../external/classnames/index.es.js";
+import g from "react";
+import { useFileUpload as Y } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Text as Z } from "../../base/typography/text/text.es.js";
+import { Button as $ } from "../../buttons/button/button.es.js";
 import { ClosingButton as G } from "../../buttons/closing-button/closing-button.es.js";
-import { FormLabel as J } from "../form-label/form-label.es.js";
-import { Separator as K } from "../../misc/separator/separator.es.js";
-import { Tag as P } from "../../tags/tag/tag.es.js";
-import { FeedbackText as L } from "../feedback-text/feedback-text.es.js";
-import l from "./file-upload.module.scss.es.js";
-import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
-import X, { isBreakpointBelow as Y } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { Row as Z } from "../../layout/grid/row.es.js";
-import { Col as x } from "../../layout/grid/col.es.js";
-const he = (B) => {
-  const { getLabel: n } = Q(), {
-    id: s,
-    name: k,
-    accept: g,
-    multiple: b,
+import { FormLabel as H } from "../form-label/form-label.es.js";
+import { Separator as ee } from "../../misc/separator/separator.es.js";
+import { Tag as le } from "../../tags/tag/tag.es.js";
+import { FeedbackText as w } from "../feedback-text/feedback-text.es.js";
+import { useOptionalInputGroup as ie } from "../input-group/input-group.es.js";
+import i from "./file-upload.module.scss.es.js";
+import { useLabels as ae } from "../../../providers/label-provider/use-labels.es.js";
+import te, { isBreakpointBelow as oe } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { Row as ne } from "../../layout/grid/row.es.js";
+import { Col as R } from "../../layout/grid/col.es.js";
+const xe = (v) => {
+  var B;
+  const { getLabel: d } = ae(), {
+    id: de,
+    name: T,
+    label: y,
+    accept: N,
+    multiple: F,
     onChange: f,
-    className: $,
-    defaultFiles: T,
-    onDelete: w,
-    hasClearButton: z = !0,
+    className: z,
+    wrapperClassName: S,
+    defaultFiles: U,
+    onDelete: V,
+    hasClearButton: j = !0,
     files: c,
     readOnly: h,
     disabled: o = !1,
-    maxSize: I,
-    validateIndividually: R = !1,
+    maxSize: M,
+    validateIndividually: O = !1,
     size: m = "default",
     helper: a,
-    ...S
-  } = B, { innerFiles: v, uploadErrorHelper: t, onFileChange: U, onFileRemove: V, handleClear: y, announcement: j } = A({
-    accept: g,
-    maxSize: I,
-    multiple: b,
-    validateIndividually: R,
-    defaultFiles: T,
+    ...D
+  } = v, { innerFiles: L, uploadErrorHelper: t, onFileChange: W, onFileRemove: q, handleClear: C, announcement: A } = Y({
+    accept: N,
+    maxSize: M,
+    multiple: F,
+    validateIndividually: O,
+    defaultFiles: U,
     onChange: f,
-    onDelete: w,
+    onDelete: V,
     files: c
-  }), M = X(), D = u(l["tedi-file-upload"], { [l["tedi-file-upload--disabled"]]: o }, $), _ = a ? (a == null ? void 0 : a.id) ?? `${s}-helper` : void 0, d = q.useMemo(() => c && f ? c : v, [c, v, f]), O = (e, r) => {
-    const W = e.isValid === !1 ? `${e.name} (${n("file-upload.failed")})` : e.name;
-    return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-      P,
+  }), E = te(), J = g.useId(), n = (B = ie) == null ? void 0 : B(), K = n == null ? void 0 : n.hasExternalLabel, _ = v.id ?? (n == null ? void 0 : n.inputId) ?? J, x = g.useRef(null), P = p(i["tedi-file-upload"], { [i["tedi-file-upload--disabled"]]: o }, z), b = (a == null ? void 0 : a.id) ?? (a || t ? `${_}-helper` : void 0), r = g.useMemo(() => c && f ? c : L, [c, L, f]), Q = (e, s) => {
+    const X = e.isValid === !1 ? `${e.name} (${d("file-upload.failed")})` : e.name;
+    return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+      le,
       {
         color: e.isValid === !1 ? "danger" : "primary",
-        onClose: !e.isLoading && !o && !h ? () => V(e) : void 0,
+        onClose: !e.isLoading && !o && !h ? () => q(e) : void 0,
         isLoading: e.isLoading,
-        "aria-label": W,
+        "aria-label": X,
         children: e.name
       }
-    ) }, r);
-  }, F = () => {
-    if (d.length > 1)
-      return /* @__PURE__ */ i("ul", { className: u(l["tedi-file-upload__items"], l["tedi-file-upload__truncate-list"]), children: d.map((e, r) => O(e, r)) });
-    if (d.length === 1) {
-      const e = d[0], r = e.isValid === !1 ? `${e.name} (${n("file-upload.failed")})` : e.name;
-      return /* @__PURE__ */ i(
-        E,
+    ) }, s);
+  }, k = () => {
+    if (r.length > 1)
+      return /* @__PURE__ */ l("ul", { className: p(i["tedi-file-upload__items"], i["tedi-file-upload__truncate-list"]), children: r.map((e, s) => Q(e, s)) });
+    if (r.length === 1) {
+      const e = r[0], s = e.isValid === !1 ? `${e.name} (${d("file-upload.failed")})` : e.name;
+      return /* @__PURE__ */ l(
+        Z,
         {
-          "aria-label": r,
-          className: u(l["tedi-file-upload__items"], l["tedi-file-upload__truncate"]),
+          "aria-label": s,
+          className: p(i["tedi-file-upload__items"], i["tedi-file-upload__truncate"]),
           children: e.name
         }
       );
     }
     return null;
   };
-  return /* @__PURE__ */ p(N, { children: [
-    /* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: /* @__PURE__ */ i(
-      J,
+  return /* @__PURE__ */ u(I, { children: [
+    /* @__PURE__ */ l("div", { className: i["tedi-file-upload__label-wrapper"], children: !K && y && /* @__PURE__ */ l(
+      H,
       {
-        id: s,
-        ...S,
+        id: _,
+        label: y ?? "",
+        ...D,
         renderWithoutLabel: h,
-        className: l["tedi-file-upload__label"],
+        className: i["tedi-file-upload__label"],
         size: m
       }
     ) }),
-    /* @__PURE__ */ i("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: j }),
-    h ? F() : /* @__PURE__ */ i(
+    /* @__PURE__ */ l("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: A }),
+    h ? k() : /* @__PURE__ */ l(
       "div",
       {
-        className: u(
-          l["tedi-file-upload__container"],
+        className: p(
+          i["tedi-file-upload__container"],
           {
-            [l["tedi-file-upload--disabled"]]: o,
-            [l["tedi-file-upload--error"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "error",
-            [l["tedi-file-upload--valid"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "valid"
+            [i["tedi-file-upload--disabled"]]: o,
+            [i["tedi-file-upload--error"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "error",
+            [i["tedi-file-upload--valid"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "valid"
           },
-          { [l[`tedi-file-upload__container--${m}`]]: m }
+          { [i[`tedi-file-upload__container--${m}`]]: m },
+          S
         ),
-        children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ p(Z, { children: [
-          /* @__PURE__ */ i(x, { className: "display-flex", children: F() }),
-          /* @__PURE__ */ i(x, { xs: 12, md: "auto", children: /* @__PURE__ */ p("div", { className: D, children: [
-            /* @__PURE__ */ i(
+        children: /* @__PURE__ */ l("div", { className: i["tedi-file-upload__content"], children: /* @__PURE__ */ u(ne, { children: [
+          /* @__PURE__ */ l(R, { className: "display-flex", children: k() }),
+          /* @__PURE__ */ l(R, { xs: 12, md: "auto", children: /* @__PURE__ */ u("div", { className: P, children: [
+            /* @__PURE__ */ l(
               "input",
               {
-                id: s,
+                ref: x,
+                id: _,
                 type: "file",
-                name: k,
-                accept: g,
-                onChange: U,
-                multiple: b,
+                name: T,
+                accept: N,
+                onChange: W,
+                multiple: F,
                 disabled: o,
                 "aria-invalid": !!t && t.type === "error",
-                "aria-describedby": _
+                "aria-describedby": b
               }
             ),
-            z && d.length > 0 && !o && /* @__PURE__ */ p(N, { children: [
-              Y(M, "md") ? /* @__PURE__ */ i(
-                C,
+            j && r.length > 0 && !o && /* @__PURE__ */ u(I, { children: [
+              oe(E, "md") ? /* @__PURE__ */ l(
+                $,
                 {
                   visualType: "neutral",
                   iconLeft: "close",
                   disabled: o,
-                  onClick: y,
-                  className: l["tedi-file-upload__button"],
-                  children: n("clear")
+                  onClick: C,
+                  className: i["tedi-file-upload__button"],
+                  children: d("clear")
                 }
-              ) : /* @__PURE__ */ i(G, { onClick: y, iconSize: 18, title: n("clear") }),
-              /* @__PURE__ */ i(K, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
+              ) : /* @__PURE__ */ l(G, { onClick: C, iconSize: 18, title: d("clear") }),
+              /* @__PURE__ */ l(ee, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
             ] }),
-            /* @__PURE__ */ i(
-              C,
+            /* @__PURE__ */ l(
+              $,
               {
                 visualType: "neutral",
                 iconLeft: "file_upload",
                 disabled: o,
                 onClick: () => {
                   var e;
-                  return (e = document.getElementById(s)) == null ? void 0 : e.click();
+                  return (e = x.current) == null ? void 0 : e.click();
                 },
-                className: l["tedi-file-upload__button"],
+                className: i["tedi-file-upload__button"],
                 size: m,
-                children: n("file-upload.add")
+                children: d("file-upload.add")
               }
             )
           ] }) })
         ] }) })
       }
     ),
-    a ? /* @__PURE__ */ i(L, { ...a, id: _ }) : t ? /* @__PURE__ */ i(L, { ...t, id: _ }) : null
+    a ? /* @__PURE__ */ l(w, { ...a, id: b }) : t ? /* @__PURE__ */ l(w, { ...t, id: b }) : null
   ] });
 };
 export {
-  he as FileUpload
+  xe as FileUpload
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),s=require("../../input-group.module.scss.cjs.js"),n=({children:t})=>{const{disabled:u,inputId:r}=a.useInputGroup();if(!p.isValidElement(t))return t;const o=typeof t.type=="string",i={disabled:u||t.props.disabled,id:t.props.id??r,className:e.default(t.props.className,s.default["tedi-input-group__input"]),...!o&&{wrapperClassName:e.default(t.props.wrapperClassName,s.default["tedi-input-group__input"])}};return p.cloneElement(t,i)};exports.Input=n;

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

@@ -0,0 +1,19 @@
+import { default as React, ReactNode } from 'react';
+export interface InputProps {
+    /**
+     * The form control rendered inside the input slot — must be a single React
+     * element (e.g. `TextField`, `Select`, native `<input>`). The element is
+     * cloned with extra props from the surrounding `InputGroup`:
+     * - `disabled` is OR-ed with the group's disabled state
+     * - `id` falls back to the group's `inputId` so an external `Label` can
+     *   target it via `htmlFor`
+     * - `className` (or `wrapperClassName` for non-intrinsic components) is
+     *   merged with `tedi-input-group__input` to align borders/radii with
+     *   adjacent prefix/suffix slots
+     *
+     * Non-element children (text, fragments, `null`) are returned as-is and
+     * receive none of these props.
+     */
+    children: ReactNode;
+}
+export declare const Input: ({ children }: InputProps) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;

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

@@ -0,0 +1,20 @@
+import s from "../../../../../../../external/classnames/index.es.js";
+import t from "react";
+import { useInputGroup as m } from "../../input-group.es.js";
+import o from "../../input-group.module.scss.es.js";
+const f = ({ children: p }) => {
+  const { disabled: r, inputId: e } = m();
+  if (!t.isValidElement(p)) return p;
+  const a = typeof p.type == "string", i = {
+    disabled: r || p.props.disabled,
+    id: p.props.id ?? e,
+    className: s(p.props.className, o["tedi-input-group__input"]),
+    ...!a && {
+      wrapperClassName: s(p.props.wrapperClassName, o["tedi-input-group__input"])
+    }
+  };
+  return t.cloneElement(p, i);
+};
+export {
+  f as Input
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),d=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:u,...n})=>{const{registerPrefix:r,unregisterPrefix:t,disabled:s}=a.useInputGroup();d.useEffect(()=>(r(),()=>t()),[r,t]);const o=typeof e=="string"||typeof e=="number";return p.jsx("div",{...n,className:f.default(i.default["tedi-input-group__prefix"],{[i.default["tedi-input-group__prefix--no-inner-div"]]:o},u),"aria-disabled":s,children:e})};exports.Prefix=c;

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface PrefixProps {
+    /**
+     * Content rendered inside the prefix slot. Typically a short text label,
+     * an `Icon`, a `Button`, or any other inline element. When `children` is a
+     * plain string or number, the prefix automatically applies the
+     * `--no-inner-div` modifier so the wrapper itself receives the correct
+     * padding instead of relying on a child element.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name appended to the wrapper `div`. Useful for one-off
+     * tweaks; the default `tedi-input-group__prefix` BEM class is always
+     * applied.
+     */
+    className?: string;
+}
+export declare const Prefix: ({ children, className, ...props }: PrefixProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as m } from "react/jsx-runtime";
+import n from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as u } from "react";
+import { useInputGroup as a } from "../../input-group.es.js";
+import i from "../../input-group.module.scss.es.js";
+const b = ({ children: r, className: o, ...s }) => {
+  const { registerPrefix: e, unregisterPrefix: t, disabled: p } = a();
+  u(() => (e(), () => t()), [e, t]);
+  const f = typeof r == "string" || typeof r == "number";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ...s,
+      className: n(
+        i["tedi-input-group__prefix"],
+        { [i["tedi-input-group__prefix--no-inner-div"]]: f },
+        o
+      ),
+      "aria-disabled": p,
+      children: r
+    }
+  );
+};
+export {
+  b as Prefix
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:r,...s})=>{const{registerSuffix:t,unregisterSuffix:u,disabled:n}=a.useInputGroup();p.useEffect(()=>(t(),()=>u()),[t,u]);const o=typeof e=="string"||typeof e=="number";return f.jsx("div",{...s,className:d.default(i.default["tedi-input-group__suffix"],{[i.default["tedi-input-group__suffix--no-inner-div"]]:o},r),"aria-disabled":n,children:e})};exports.Suffix=c;

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface SuffixProps {
+    /**
+     * Content rendered inside the suffix slot. Typically a short text label,
+     * an `Icon`, a `Button`, or any other inline element. When `children` is a
+     * plain string or number, the suffix automatically applies the
+     * `--no-inner-div` modifier so the wrapper itself receives the correct
+     * padding instead of relying on a child element.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name appended to the wrapper `div`. Useful for one-off
+     * tweaks; the default `tedi-input-group__suffix` BEM class is always
+     * applied.
+     */
+    className?: string;
+}
+export declare const Suffix: ({ children, className, ...props }: SuffixProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as p } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as n } from "react";
+import { useInputGroup as a } from "../../input-group.es.js";
+import s from "../../input-group.module.scss.es.js";
+const b = ({ children: r, className: e, ...o }) => {
+  const { registerSuffix: t, unregisterSuffix: i, disabled: f } = a();
+  n(() => (t(), () => i()), [t, i]);
+  const u = typeof r == "string" || typeof r == "number";
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ...o,
+      className: m(
+        s["tedi-input-group__suffix"],
+        { [s["tedi-input-group__suffix--no-inner-div"]]: u },
+        e
+      ),
+      "aria-disabled": f,
+      children: r
+    }
+  );
+};
+export {
+  b as Suffix
+};

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

@@ -0,0 +1,4 @@
+export * from './input-group';
+export * from './components/prefix/prefix';
+export * from './components/suffix/suffix';
+export * from './components/input/input';