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

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

@@ -0,0 +1,18 @@
+const d = {
+  "tedi-slider": "tedi-slider-90e24e7d",
+  "tedi-slider__container": "tedi-slider__container-525c4b64",
+  "tedi-slider__track-row": "tedi-slider__track-row-95e9c2d5",
+  "tedi-slider__range-label": "tedi-slider__range-label-a2a6a43b",
+  "tedi-slider__track": "tedi-slider__track-a7afc8d6",
+  "tedi-slider__thumb-anchor": "tedi-slider__thumb-anchor-7e282370",
+  "tedi-slider__input": "tedi-slider__input-b2d1c042",
+  "tedi-slider__input--dragging": "tedi-slider__input--dragging-6a2f5f85",
+  "tedi-slider__addon": "tedi-slider__addon-6b259d81",
+  "tedi-slider__feedback": "tedi-slider__feedback-dad1545e",
+  "tedi-slider--disabled": "tedi-slider--disabled-d1da914a",
+  "tedi-slider--dragging": "tedi-slider--dragging-c82f4f25",
+  "tedi-slider--invalid": "tedi-slider--invalid-e5adda94"
+};
+export {
+  d as default
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),ce=require("../../base/icon/icon.cjs.js"),fe=require("../../buttons/closing-button/closing-button.cjs.js"),xe=require("../../misc/separator/separator.cjs.js"),U=require("../feedback-text/feedback-text.cjs.js"),pe=require("../form-label/form-label.cjs.js"),a=require("./textfield.module.scss.cjs.js"),me=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),be=require("../../../providers/label-provider/use-labels.cjs.js"),ye={large:24,default:18},C=r.forwardRef((f,G)=>{const{getCurrentBreakpointProps:J}=me.useBreakpointProps(f.defaultServerBreakpoint),{id:u,label:k,className:Q,inputClassName:q,disabled:l,required:A,hideLabel:h,invalid:o,readOnly:B,icon:c,onIconClick:m,size:n,placeholder:T,isArrowsHidden:M=!0,isClearable:R,onClear:b,onChange:d,onChangeEvent:y,onKeyUp:X,onKeyDown:Y,onKeyPress:ve,defaultValue:Z,value:j,onFocus:w,onBlur:F,onClick:ee,helper:t,input:P,name:S,isTextArea:v,...te}=J(f)||{},{getLabel:$}=be.useLabels(),x=r.useRef(null),z=r.useRef(null),[L,V]=r.useState(j??Z??""),_=r.useMemo(()=>{var e;if(t)return Array.isArray(t)?((e=t[0])==null?void 0:e.id)??`${u}-helper`:t.id??`${u}-helper`},[t,u]),N=r.useMemo(()=>j??L,[j,L]),g=R&&N;r.useImperativeHandle(G,()=>({get input(){return x.current},get inner(){return z.current}}));const I=r.useMemo(()=>Array.isArray(t)?o||t.some(e=>e.type==="error"):o||(t==null?void 0:t.type)==="error",[o,t]),re=r.useMemo(()=>!t||Array.isArray(t)&&t.length===0?!1:Array.isArray(t)?!o&&t.every(e=>e.type==="valid"):!o&&t.type==="valid",[o,t]),ae=n==="large"?"default":n,H=r.useCallback(e=>{const s={size:n==="large"?24:n==="small"?16:18,className:p.default(a.default["tedi-textfield__icon"])},de=typeof e=="string"?{...s,name:e}:{...s,...e,className:p.default(s.className,e==null?void 0:e.className)},ue=i.jsx(ce.Icon,{...de}),oe=m?"button":"div";return i.jsx(oe,{className:a.default["tedi-textfield__icon-wrapper"],type:m?"button":void 0,onClick:l?void 0:m,disabled:l,tabIndex:l?-1:0,children:ue})},[l,m,n]),K=r.useCallback(e=>{const s=e.currentTarget.value;V(s),d==null||d(s),y==null||y(e)},[d,y]),E=r.useCallback(()=>{V(""),d==null||d(""),b==null||b()},[d,b]),O=r.useCallback((e,s)=>!!v,[v]),W=r.useCallback((e,s)=>!v,[v]),le=r.useMemo(()=>{const e={...P,id:u,name:S,...h?{"aria-label":k}:{},"aria-describedby":_,"aria-disabled":l||void 0,className:p.default(a.default["tedi-textfield__input"],q,{[a.default["tedi-textfield__input--hidden-arrows"]]:M}),disabled:l,required:A,"aria-invalid":I||void 0,placeholder:T,readOnly:B,onChange:K,value:N,onBlur:F,onFocus:w};return O(f,x)?i.jsx("textarea",{...e,ref:x,tabIndex:l?-1:0}):W(f,x)?i.jsx("input",{...e,ref:x,tabIndex:l?-1:0}):null},[P,u,S,h,k,_,l,q,M,A,I,T,B,K,N,F,w,O,f,W]),D=r.useMemo(()=>{const e={iconSize:ye[n==="large"?"large":"default"],onClick:l?()=>{}:E,disabled:l,"aria-disabled":l||void 0,title:`${$("clear")}`,className:p.default(a.default["tedi-textfield__clear-button"])};return i.jsx(fe.ClosingButton,{...e})},[E,l,$,n]),ie=r.useMemo(()=>i.jsxs("div",{className:a.default["tedi-textfield__right-area"],children:[g&&D,g&&c?i.jsx(xe.Separator,{color:"primary",axis:"vertical",className:a.default["tedi-textfield__separator"]}):null,c&&H(c)]}),[H,c,D,g]),se=p.default(a.default["tedi-textfield"],{[a.default[`tedi-textfield--${n}`]]:n},{[a.default["tedi-textfield--with-icon"]]:c},{[a.default["tedi-textfield--invalid"]]:I},{[a.default["tedi-textfield--valid"]]:re},{[a.default["tedi-textfield--clearable"]]:g},Q),ne=()=>!t||Array.isArray(t)&&t.length===0?null:i.jsx("div",{className:a.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(t)?t.map((e,s)=>i.jsx(U.FeedbackText,{...e,id:`${_}-${s}`},s)):i.jsx(U.FeedbackText,{...t,id:_})});return i.jsxs("div",{"data-name":"textfield",...te,className:se,children:[i.jsx(pe.FormLabel,{id:u,label:k,required:A,hideLabel:h,size:ae}),i.jsxs("div",{className:a.default["tedi-textfield__inner"],onKeyDown:Y,onKeyUp:X,onClick:ee,ref:z,children:[le,R||c?ie:null]}),ne()]})});C.displayName="TextField";exports.TextField=C;exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),A=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),E=require("../../base/icon/icon.cjs.js"),fe=require("../../buttons/closing-button/closing-button.cjs.js"),xe=require("../../misc/separator/separator.cjs.js"),H=require("../feedback-text/feedback-text.cjs.js"),me=require("../field/field.cjs.js"),ye=require("../form-label/form-label.cjs.js"),k=require("../input-group/input-group.cjs.js"),r=require("./textfield.module.scss.cjs.js"),be=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),ve=require("../../../providers/label-provider/use-labels.cjs.js"),pe={large:24,default:18},N=i.forwardRef((v,K)=>{var V;const{getCurrentBreakpointProps:O}=be.useBreakpointProps(v.defaultServerBreakpoint),{id:_e,label:p,className:D,inputClassName:U,disabled:c,required:q,hideLabel:I,invalid:u,readOnly:C,icon:s,onIconClick:_,size:d="default",placeholder:J,isArrowsHidden:Q=!0,isClearable:B,onClear:y,onChange:o,onChangeEvent:W,onKeyUp:X,onKeyDown:Y,onKeyPress:Z,defaultValue:F,value:h,onFocus:g,onBlur:j,onClick:G,helper:e,input:n,name:ee,isTextArea:te,...re}=O(v)||{},{getLabel:T}=ve.useLabels(),w=i.useRef(null),L=i.useRef(null),[ae,R]=i.useState(h??F??""),S=h??ae,f=!!(B&&S&&!C),x=(V=k.useOptionalInputGroup)==null?void 0:V.call(k),le=i.useId(),ie=x==null?void 0:x.hasExternalLabel,m=v.id??(x==null?void 0:x.inputId)??le;i.useImperativeHandle(K,()=>({get input(){return L.current},get inner(){return w.current}}));const M=i.useMemo(()=>Array.isArray(e)?u||e.some(t=>t.type==="error"):u||(e==null?void 0:e.type)==="error",[u,e]),se=i.useMemo(()=>!e||Array.isArray(e)&&e.length===0?!1:Array.isArray(e)?!u&&e.every(t=>t.type==="valid"):!u&&e.type==="valid",[u,e]),ne=d==="large"?"default":d,b=h!==void 0,de=i.useCallback(t=>{b||R(t),o==null||o(t)},[b,o]),P=i.useCallback(()=>{b||R(""),o==null||o(""),y==null||y()},[b,o,y]),z=i.useCallback(()=>{if(!s)return null;const t={size:d==="large"?24:d==="small"?16:18,className:r.default["tedi-textfield__icon"]},l=typeof s=="string"?{...t,name:s}:{...t,...s,className:A.default(t.className,s.className)};return _?a.jsx("button",{type:"button",className:r.default["tedi-textfield__icon-wrapper"],onClick:c?void 0:_,disabled:c,children:a.jsx(E.Icon,{...l})}):a.jsx("div",{className:r.default["tedi-textfield__icon-wrapper"],"aria-hidden":"true",children:a.jsx(E.Icon,{...l})})},[s,d,_,c]),$=i.useMemo(()=>f?a.jsx(fe.ClosingButton,{iconSize:pe[d==="large"?"large":"default"],onClick:c?void 0:P,disabled:c,title:T("clear"),className:r.default["tedi-textfield__clear-button"]}):null,[f,d,c,P,T]),oe=i.useMemo(()=>!f&&!s?null:a.jsxs("div",{className:r.default["tedi-textfield__right-area"],children:[$,f&&s&&a.jsx(xe.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-textfield__separator"]}),s&&z()]}),[f,s,$,z]),ce=A.default(r.default["tedi-textfield"],{[r.default[`tedi-textfield--${d}`]]:d},{[r.default["tedi-textfield--with-icon"]]:s},{[r.default["tedi-textfield--invalid"]]:M},{[r.default["tedi-textfield--valid"]]:se},{[r.default["tedi-textfield--clearable"]]:f},D),ue=()=>!e||Array.isArray(e)&&e.length===0?null:a.jsx("div",{className:r.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(e)?e.map((t,l)=>a.jsx(H.FeedbackText,{...t,id:`${m}-helper-${l}`},l)):a.jsx(H.FeedbackText,{...e,id:`${m}-helper`})});return a.jsxs("div",{"data-name":"textfield",...re,className:ce,children:[!ie&&a.jsx(ye.FormLabel,{id:m,label:p,required:q,hideLabel:I,size:ne}),a.jsxs("div",{className:r.default["tedi-textfield__inner"],onKeyDown:Y,onKeyUp:X,onKeyPress:Z,onClick:G,ref:w,children:[a.jsx(me.Field,{...n,id:m,name:ee,value:S,defaultValue:F,onChange:de,onChangeEvent:W,disabled:c,readOnly:C,required:q,invalid:M,placeholder:J,className:A.default(r.default["tedi-textfield__input"],U,{[r.default["tedi-textfield__input--hidden-arrows"]]:Q}),onFocus:t=>{var l;(l=n==null?void 0:n.onFocus)==null||l.call(n,t),g==null||g(t)},onBlur:t=>{var l;(l=n==null?void 0:n.onBlur)==null||l.call(n,t),j==null||j(t)},isTextArea:te,"aria-describedby":!e||Array.isArray(e)&&e.length===0?void 0:Array.isArray(e)?e.map((t,l)=>`${m}-helper-${l}`).join(" "):`${m}-helper`,"aria-label":I&&typeof p=="string"?p:void 0,ref:L}),(B||s)&&oe]}),ue()]})});N.displayName="TextField";exports.TextField=N;exports.default=N;

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

@@ -2,114 +2,196 @@ import { default as React } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { IconWithoutBackgroundProps } from '../../base/icon/icon';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FieldElement } from '../field/field';
 import { FormLabelProps } from '../form-label/form-label';
 type TextFieldBreakpointProps = {
     /**
-     * Input field size
+     * Controls the visual size of the text field.
+     *
+     * - `'small'`  → Compact version (smaller height, padding, and font size)
+     * - `'default'` → Standard size (most commonly used)
+     * - `'large'`   → Larger touch target, bigger text and padding
+     *
      * @default 'default'
      */
     size?: 'default' | 'small' | 'large';
     /**
-     * Icon name or configuration for the input field.
+     * Icon displayed inside the text field on the right side.
+     *
+     * Accepts either:
+     * - A simple string (icon name) → e.g. `'search'`, `'user'`, `'calendar'`
+     * - A full `IconWithoutBackgroundProps` object for advanced configuration (size, color, className, etc.)
+     *
+     * When `onIconClick` is provided, the icon becomes a clickable button.
+     * Otherwise, it is rendered as a non-interactive decorative element.
      */
     icon?: string | IconWithoutBackgroundProps;
     /**
-     * Whether to render a textarea instead of an input.
+     * If `true`, renders a `<textarea>` instead of a regular `<input>`.
+     * Useful for multi-line text input (comments, descriptions, addresses, etc.).
+     *
+     * Note: When using `isTextArea`, the component still behaves like a text field
+     * (same styling, clear button, icon support, validation, etc.).
+     *
+     * @default false
      */
     isTextArea?: boolean;
     /**
-     * Placeholder text displayed inside the input.
+     * Placeholder text shown when the field is empty.
+     *
+     * Recommended to be short and descriptive. Avoid using placeholder as a label.
      */
     placeholder?: string;
     /**
-     * Whether the input includes a clear button.
+     * When `true`, displays a clear (×) button on the right side when the field has a value.
+     *
+     * Clicking the button clears the input and calls `onClear` (if provided).
+     *
+     * @default false
      */
     isClearable?: boolean;
     /**
-     * Custom CSS classes for the container.
+     * Additional CSS class name applied to the root container (`<div>`).
+     *
+     * Use this for layout adjustments, custom spacing, or theming the entire text field wrapper.
      */
     className?: string;
 };
-export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointProps>, Omit<FormLabelProps, 'size'> {
+export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointProps>, Omit<FormLabelProps, 'size' | 'id' | 'label'> {
     /**
-     * Unique identifier for the input field.
+     * Unique identifier for the text field.
+     *
+     * Required for accessibility (associates label, helper text, and input).
+     * Also used to generate `aria-describedby` and helper IDs automatically.
      */
-    id: string;
+    id?: string;
+    label?: React.ReactNode;
     /**
-     * Name attribute for the input element.
+     * Name attribute for the underlying input/textarea element.
+     *
+     * Important for form submission and integration with form libraries (React Hook Form, Formik, etc.).
      */
     name?: string;
     /**
-     * Custom CSS classes for the input element.
+     * Custom CSS class applied directly to the `<input>` or `<textarea>` element (via the internal `Field` component).
+     *
+     * Use this when you need to style the input itself (e.g. text alignment, font, custom focus styles).
+     *
+     * Note: The root container uses `className`.
      */
     inputClassName?: string;
     /**
-     * Callback triggered when the input value changes.
+     * Callback fired when the value changes. Receives the new value as a plain string.
+     *
+     * Preferred for most use cases (simpler than `onChangeEvent`).
+     *
+     * @param value - The current value of the field after change
      */
     onChange?: (value: string) => void;
     /**
-     * Callback triggered with the change event.
+     * Native `onChange` event handler.
+     *
+     * Gives you access to the full `ChangeEvent` object (useful if you need `event.target`, `event.preventDefault()`, etc.).
+     *
+     * Note: Both `onChange` and `onChangeEvent` are called when the value changes.
      */
-    onChangeEvent?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    onChangeEvent?: React.ChangeEventHandler<FieldElement>;
     /**
-     * Callback for keypress events.
+     * Keyboard event handlers attached to the inner wrapper `<div>`.
+     *
+     * Useful for handling Enter key submission, arrow key navigation, or custom keyboard shortcuts.
+     *
+     * Note: These are **not** attached to the input/textarea directly, but to the surrounding container.
      */
     onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * Callback for keydown events.
-     */
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * Callback for keyup events.
-     */
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
-     * Initial default value of the input.
+     * Default value for **uncontrolled** usage.
+     *
+     * Use this when you don't want to manage state yourself.
+     * The component will manage its internal state.
      */
     defaultValue?: string;
     /**
-     * Controlled value of the input field.
+     * Controlled value of the text field.
+     *
+     * When provided, the component becomes **fully controlled**.
+     * You must update this value via `onChange` to reflect user input.
      */
     value?: string;
     /**
-     * Callback for clicking the icon.
+     * Called when the user clicks on the icon (only works if `icon` is provided).
+     *
+     * The icon is automatically wrapped in a `<button>` when this prop is present.
+     *
+     * @param event - Mouse event from the icon wrapper
      */
     onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     /**
-     * Callback for input container clicks.
+     * Click handler for the entire inner container (the area around the input).
+     *
+     * Can be used to focus the input when clicking anywhere in the field area,
+     * or to trigger custom behavior.
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
-     * Whether the input is disabled.
+     * Disables the entire text field.
+     *
+     * When `true`:
+     * - Input becomes non-editable and non-focusable
+     * - Clear button and icon are disabled
+     * - Visual disabled styles are applied
      */
     disabled?: boolean;
     /**
-     * Whether the input is marked as invalid.
+     * Marks the field as invalid and triggers error styling.
+     *
+     * Also affects `aria-invalid` attribute.
+     *
+     * Note: The `helper` prop can override this if it contains items with `type: 'error'`.
      */
     invalid?: boolean;
     /**
-     * Whether the input is read-only.
+     * Makes the field read-only.
+     *
+     * User can focus and select text, but cannot modify the value.
+     * Useful for pre-filled data that should not be changed.
      */
     readOnly?: boolean;
     /**
-     * Helper text or feedback messages.
+     * Helper text, success message, or error message displayed below the field.
+     *
+     * Accepts either:
+     * - A single `FeedbackTextProps` object
+     * - An array of `FeedbackTextProps` (useful for multiple messages or mixed error/success states)
+     *
+     * The component automatically detects error states from helper items.
      */
     helper?: FeedbackTextProps | FeedbackTextProps[];
     /**
-     * Callback for input focus events.
+     * Fired when the input/textarea receives focus.
      */
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<FieldElement>;
     /**
-     * Callback for input blur events.
+     * Fired when the input/textarea loses focus.
      */
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<FieldElement>;
     /**
-     * Whether to hide arrows for number inputs.
+     * Hides the spinner/arrows for number inputs (`type="number"`).
+     *
+     * Only has effect when the underlying input has `type="number"`.
+     *
      * @default true
      */
     isArrowsHidden?: boolean;
     /**
-     * Callback triggered when the clear button is clicked.
+     * Callback fired when the clear button (×) is clicked.
+     *
+     * Useful if you need to perform additional actions besides clearing the value
+     * (e.g. analytics, resetting related fields, etc.).
+     *
+     * Note: The field value is automatically cleared regardless of this callback.
      */
     onClear?: () => void;
     /**
@@ -118,7 +200,7 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 }
 export interface TextFieldForwardRef {
-    input: HTMLInputElement | HTMLTextAreaElement | null;
+    input: FieldElement | null;
     inner: HTMLDivElement | null;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<TextFieldForwardRef>>;

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

@@ -1,198 +1,160 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import p from "../../../../../external/classnames/index.es.js";
-import t, { forwardRef as ue } from "react";
-import { Icon as ce } from "../../base/icon/icon.es.js";
-import { ClosingButton as fe } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as me } from "../../misc/separator/separator.es.js";
-import { FeedbackText as U } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as pe } from "../form-label/form-label.es.js";
-import a from "./textfield.module.scss.es.js";
-import { useBreakpointProps as xe } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { jsx as n, jsxs as I } from "react/jsx-runtime";
+import k from "../../../../../external/classnames/index.es.js";
+import p, { forwardRef as me, useMemo as v, useCallback as C } from "react";
+import { Icon as M } from "../../base/icon/icon.es.js";
+import { ClosingButton as pe } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as ye } from "../../misc/separator/separator.es.js";
+import { FeedbackText as O } from "../feedback-text/feedback-text.es.js";
+import { Field as xe } from "../field/field.es.js";
+import { FormLabel as ve } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as he } from "../input-group/input-group.es.js";
+import t from "./textfield.module.scss.es.js";
+import { useBreakpointProps as _e } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { useLabels as be } from "../../../providers/label-provider/use-labels.es.js";
-const ye = {
+const ge = {
   large: 24,
   default: 18
-}, ve = ue((f, G) => {
-  const { getCurrentBreakpointProps: J } = xe(f.defaultServerBreakpoint), {
-    id: d,
-    label: N,
-    className: Q,
-    inputClassName: B,
-    disabled: i,
-    required: g,
-    hideLabel: h,
-    invalid: u,
-    readOnly: R,
-    icon: c,
-    onIconClick: x,
-    size: s,
-    placeholder: M,
-    isArrowsHidden: F = !0,
-    isClearable: P,
-    onClear: b,
+}, Ae = me((h, q) => {
+  var K;
+  const { getCurrentBreakpointProps: D } = _e(h.defaultServerBreakpoint), {
+    id: Ne,
+    label: _,
+    className: U,
+    inputClassName: J,
+    disabled: d,
+    required: B,
+    hideLabel: w,
+    invalid: c,
+    readOnly: F,
+    icon: a,
+    onIconClick: b,
+    size: s = "default",
+    placeholder: Q,
+    isArrowsHidden: W = !0,
+    isClearable: R,
+    onClear: y,
     onChange: o,
-    onChangeEvent: y,
-    onKeyUp: X,
-    onKeyDown: Y,
-    onKeyPress: _e,
-    defaultValue: Z,
-    value: k,
-    onFocus: T,
-    onBlur: z,
+    onChangeEvent: X,
+    onKeyUp: Y,
+    onKeyDown: Z,
+    onKeyPress: G,
+    defaultValue: $,
+    value: g,
+    onFocus: A,
+    onBlur: N,
     onClick: ee,
-    helper: r,
-    input: S,
-    name: V,
-    isTextArea: v,
-    ...re
-  } = J(f) || {}, { getLabel: $ } = be(), m = t.useRef(null), L = t.useRef(null), [E, H] = t.useState(k ?? Z ?? ""), _ = t.useMemo(() => {
-    var e;
-    if (r)
-      return Array.isArray(r) ? ((e = r[0]) == null ? void 0 : e.id) ?? `${d}-helper` : r.id ?? `${d}-helper`;
-  }, [r, d]), I = t.useMemo(() => k ?? E, [k, E]), A = P && I;
-  t.useImperativeHandle(G, () => ({
+    helper: e,
+    input: l,
+    name: re,
+    isTextArea: te,
+    ...ie
+  } = D(h) || {}, { getLabel: z } = be(), L = p.useRef(null), S = p.useRef(null), [ae, P] = p.useState(g ?? $ ?? ""), T = g ?? ae, f = !!(R && T && !F), u = (K = he) == null ? void 0 : K(), le = p.useId(), ne = u == null ? void 0 : u.hasExternalLabel, m = h.id ?? (u == null ? void 0 : u.inputId) ?? le;
+  p.useImperativeHandle(q, () => ({
     get input() {
-      return m.current;
+      return S.current;
     },
     get inner() {
       return L.current;
     }
   }));
-  const C = t.useMemo(() => Array.isArray(r) ? u || r.some((e) => e.type === "error") : u || (r == null ? void 0 : r.type) === "error", [u, r]), te = t.useMemo(() => !r || Array.isArray(r) && r.length === 0 ? !1 : Array.isArray(r) ? !u && r.every((e) => e.type === "valid") : !u && r.type === "valid", [u, r]), ae = s === "large" ? "default" : s, K = t.useCallback(
-    (e) => {
-      const l = {
-        size: s === "large" ? 24 : s === "small" ? 16 : 18,
-        className: p(a["tedi-textfield__icon"])
-      }, oe = typeof e == "string" ? { ...l, name: e } : { ...l, ...e, className: p(l.className, e == null ? void 0 : e.className) }, de = /* @__PURE__ */ n(ce, { ...oe });
-      return /* @__PURE__ */ n(
-        x ? "button" : "div",
-        {
-          className: a["tedi-textfield__icon-wrapper"],
-          type: x ? "button" : void 0,
-          onClick: i ? void 0 : x,
-          disabled: i,
-          tabIndex: i ? -1 : 0,
-          children: de
-        }
-      );
+  const V = v(() => Array.isArray(e) ? c || e.some((r) => r.type === "error") : c || (e == null ? void 0 : e.type) === "error", [c, e]), se = v(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !c && e.every((r) => r.type === "valid") : !c && e.type === "valid", [c, e]), oe = s === "large" ? "default" : s, x = g !== void 0, de = C(
+    (r) => {
+      x || P(r), o == null || o(r);
     },
-    [i, x, s]
-  ), W = t.useCallback(
-    (e) => {
-      const l = e.currentTarget.value;
-      H(l), o == null || o(l), y == null || y(e);
-    },
-    [o, y]
-  ), j = t.useCallback(() => {
-    H(""), o == null || o(""), b == null || b();
-  }, [o, b]), q = t.useCallback(
-    (e, l) => !!v,
-    [v]
-  ), D = t.useCallback(
-    (e, l) => !v,
-    [v]
-  ), ie = t.useMemo(() => {
-    const e = {
-      ...S,
-      id: d,
-      name: V,
-      ...h ? { "aria-label": N } : {},
-      "aria-describedby": _,
-      "aria-disabled": i || void 0,
-      className: p(a["tedi-textfield__input"], B, {
-        [a["tedi-textfield__input--hidden-arrows"]]: F
-      }),
-      disabled: i,
-      required: g,
-      "aria-invalid": C || void 0,
-      placeholder: M,
-      readOnly: R,
-      onChange: W,
-      value: I,
-      onBlur: z,
-      onFocus: T
-    };
-    return q(f, m) ? /* @__PURE__ */ n(
-      "textarea",
-      {
-        ...e,
-        ref: m,
-        tabIndex: i ? -1 : 0
-      }
-    ) : D(f, m) ? /* @__PURE__ */ n(
-      "input",
+    [x, o]
+  ), j = C(() => {
+    x || P(""), o == null || o(""), y == null || y();
+  }, [x, o, y]), E = C(() => {
+    if (!a) return null;
+    const r = {
+      size: s === "large" ? 24 : s === "small" ? 16 : 18,
+      className: t["tedi-textfield__icon"]
+    }, i = typeof a == "string" ? { ...r, name: a } : { ...r, ...a, className: k(r.className, a.className) };
+    return b ? /* @__PURE__ */ n(
+      "button",
       {
-        ...e,
-        ref: m,
-        tabIndex: i ? -1 : 0
+        type: "button",
+        className: t["tedi-textfield__icon-wrapper"],
+        onClick: d ? void 0 : b,
+        disabled: d,
+        children: /* @__PURE__ */ n(M, { ...i })
       }
-    ) : null;
-  }, [
-    S,
-    d,
-    V,
-    h,
-    N,
-    _,
-    i,
-    B,
-    F,
-    g,
-    C,
-    M,
-    R,
-    W,
-    I,
-    z,
-    T,
-    q,
-    f,
-    D
-  ]), O = t.useMemo(() => {
-    const e = {
-      iconSize: ye[s === "large" ? "large" : "default"],
-      onClick: i ? () => {
-      } : j,
-      disabled: i,
-      "aria-disabled": i || void 0,
-      title: `${$("clear")}`,
-      className: p(a["tedi-textfield__clear-button"])
-    };
-    return /* @__PURE__ */ n(fe, { ...e });
-  }, [j, i, $, s]), le = t.useMemo(() => /* @__PURE__ */ w("div", { className: a["tedi-textfield__right-area"], children: [
-    A && O,
-    A && c ? /* @__PURE__ */ n(me, { color: "primary", axis: "vertical", className: a["tedi-textfield__separator"] }) : null,
-    c && K(c)
-  ] }), [K, c, O, A]), ne = p(
-    a["tedi-textfield"],
-    { [a[`tedi-textfield--${s}`]]: s },
-    { [a["tedi-textfield--with-icon"]]: c },
-    { [a["tedi-textfield--invalid"]]: C },
-    { [a["tedi-textfield--valid"]]: te },
-    { [a["tedi-textfield--clearable"]]: A },
-    Q
-  ), se = () => !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ n("div", { className: a["tedi-textfield__feedback-wrapper"], children: Array.isArray(r) ? r.map((e, l) => /* @__PURE__ */ n(U, { ...e, id: `${_}-${l}` }, l)) : /* @__PURE__ */ n(U, { ...r, id: _ }) });
-  return /* @__PURE__ */ w("div", { "data-name": "textfield", ...re, className: ne, children: [
-    /* @__PURE__ */ n(pe, { id: d, label: N, required: g, hideLabel: h, size: ae }),
-    /* @__PURE__ */ w(
+    ) : /* @__PURE__ */ n("div", { className: t["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(M, { ...i }) });
+  }, [a, s, b, d]), H = v(() => f ? /* @__PURE__ */ n(
+    pe,
+    {
+      iconSize: ge[s === "large" ? "large" : "default"],
+      onClick: d ? void 0 : j,
+      disabled: d,
+      title: z("clear"),
+      className: t["tedi-textfield__clear-button"]
+    }
+  ) : null, [f, s, d, j, z]), ce = v(() => !f && !a ? null : /* @__PURE__ */ I("div", { className: t["tedi-textfield__right-area"], children: [
+    H,
+    f && a && /* @__PURE__ */ n(ye, { color: "primary", axis: "vertical", className: t["tedi-textfield__separator"] }),
+    a && E()
+  ] }), [f, a, H, E]), fe = k(
+    t["tedi-textfield"],
+    { [t[`tedi-textfield--${s}`]]: s },
+    { [t["tedi-textfield--with-icon"]]: a },
+    { [t["tedi-textfield--invalid"]]: V },
+    { [t["tedi-textfield--valid"]]: se },
+    { [t["tedi-textfield--clearable"]]: f },
+    U
+  ), ue = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: t["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((r, i) => /* @__PURE__ */ n(O, { ...r, id: `${m}-helper-${i}` }, i)) : /* @__PURE__ */ n(O, { ...e, id: `${m}-helper` }) });
+  return /* @__PURE__ */ I("div", { "data-name": "textfield", ...ie, className: fe, children: [
+    !ne && /* @__PURE__ */ n(ve, { id: m, label: _, required: B, hideLabel: w, size: oe }),
+    /* @__PURE__ */ I(
       "div",
       {
-        className: a["tedi-textfield__inner"],
-        onKeyDown: Y,
-        onKeyUp: X,
+        className: t["tedi-textfield__inner"],
+        onKeyDown: Z,
+        onKeyUp: Y,
+        onKeyPress: G,
         onClick: ee,
         ref: L,
         children: [
-          ie,
-          P || c ? le : null
+          /* @__PURE__ */ n(
+            xe,
+            {
+              ...l,
+              id: m,
+              name: re,
+              value: T,
+              defaultValue: $,
+              onChange: de,
+              onChangeEvent: X,
+              disabled: d,
+              readOnly: F,
+              required: B,
+              invalid: V,
+              placeholder: Q,
+              className: k(t["tedi-textfield__input"], J, {
+                [t["tedi-textfield__input--hidden-arrows"]]: W
+              }),
+              onFocus: (r) => {
+                var i;
+                (i = l == null ? void 0 : l.onFocus) == null || i.call(l, r), A == null || A(r);
+              },
+              onBlur: (r) => {
+                var i;
+                (i = l == null ? void 0 : l.onBlur) == null || i.call(l, r), N == null || N(r);
+              },
+              isTextArea: te,
+              "aria-describedby": !e || Array.isArray(e) && e.length === 0 ? void 0 : Array.isArray(e) ? e.map((r, i) => `${m}-helper-${i}`).join(" ") : `${m}-helper`,
+              "aria-label": w && typeof _ == "string" ? _ : void 0,
+              ref: S
+            }
+          ),
+          (R || a) && ce
         ]
       }
     ),
-    se()
+    ue()
   ] });
 });
-ve.displayName = "TextField";
+Ae.displayName = "TextField";
 export {
-  ve as TextField,
-  ve as default
+  Ae as TextField,
+  Ae as default
 };