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

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

@@ -2,123 +2,221 @@ 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.
+     * Extra HTML attributes spread on the icon `<button>` element.
+     *
+     * Use this to wire ARIA state (e.g. `aria-expanded`, `aria-controls`,
+     * `aria-haspopup`) directly to the icon trigger, so screen readers announce
+     * disclosure state correctly when the icon opens a popover / dialog.
+     *
+     * Only applied when `onIconClick` is set (i.e. the icon is rendered as a
+     * `<button>`).
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * 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;
     /**
      * Additional attributes for the input element.
      */
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    startSlot?: React.ReactNode;
+    /**
+     * Optional end slot element to render inside the input container, after the input field.
+     */
+    endSlot?: React.ReactNode;
 }
 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,166 @@
-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 { jsx as n, jsxs as S } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import y, { forwardRef as _e, useMemo as b, useCallback as B } from "react";
+import { Icon as D } from "../../base/icon/icon.es.js";
+import { ClosingButton as be } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as Ie } 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 { useLabels as be } from "../../../providers/label-provider/use-labels.es.js";
-const ye = {
+import { Field as ge } from "../field/field.es.js";
+import { FormLabel as Ne } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as Ae } from "../input-group/input-group.es.js";
+import t from "./textfield.module.scss.es.js";
+import { useBreakpointProps as ke } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Ce } from "../../../providers/label-provider/use-labels.es.js";
+const Se = {
   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,
+}, Be = _e((I, J) => {
+  var O;
+  const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
+    id: we,
+    label: g,
+    className: W,
+    inputClassName: X,
+    disabled: d,
+    required: w,
+    hideLabel: z,
+    invalid: c,
+    readOnly: F,
+    icon: i,
+    onIconClick: v,
+    iconButtonProps: p,
+    size: s = "default",
+    placeholder: Y,
+    isArrowsHidden: Z = !0,
+    isClearable: R,
+    onClear: x,
     onChange: o,
-    onChangeEvent: y,
-    onKeyUp: X,
-    onKeyDown: Y,
-    onKeyPress: _e,
-    defaultValue: Z,
-    value: k,
-    onFocus: T,
-    onBlur: z,
-    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, () => ({
+    onChangeEvent: G,
+    onKeyUp: ee,
+    onKeyDown: re,
+    onKeyPress: te,
+    defaultValue: $,
+    value: N,
+    onFocus: A,
+    onBlur: k,
+    onClick: ie,
+    helper: e,
+    input: a,
+    name: ae,
+    isTextArea: le,
+    startSlot: ne,
+    endSlot: se,
+    ...oe
+  } = Q(I) || {}, { getLabel: L } = Ce(), T = y.useRef(null), E = y.useRef(null), [de, P] = y.useState(N ?? $ ?? ""), V = N ?? de, f = !!(R && V && !F), m = (O = Ae) == null ? void 0 : O(), ce = y.useId(), fe = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? ce;
+  y.useImperativeHandle(J, () => ({
     get input() {
-      return m.current;
+      return E.current;
     },
     get inner() {
-      return L.current;
+      return T.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 j = b(() => Array.isArray(e) ? c || e.some((r) => r.type === "error") : c || (e == null ? void 0 : e.type) === "error", [c, e]), me = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !c && e.every((r) => r.type === "valid") : !c && e.type === "valid", [c, e]), ue = s === "large" ? "default" : s, h = N !== void 0, pe = B(
+    (r) => {
+      h || 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",
+    [h, o]
+  ), H = B(() => {
+    h || P(""), o == null || o(""), x == null || x();
+  }, [h, o, x]), K = B(() => {
+    if (!i) return null;
+    const C = {
+      size: s === "large" ? 24 : s === "small" ? !!v ? 18 : 16 : 18,
+      className: t["tedi-textfield__icon"]
+    }, q = typeof i == "string" ? { ...C, name: i } : { ...C, ...i, className: _(C.className, i.className) };
+    return v ? /* @__PURE__ */ n(
+      "button",
       {
-        ...e,
-        ref: m,
-        tabIndex: i ? -1 : 0
+        type: "button",
+        ...p,
+        className: _(t["tedi-textfield__icon-wrapper"], p == null ? void 0 : p.className),
+        onClick: d ? void 0 : v,
+        disabled: d,
+        children: /* @__PURE__ */ n(D, { ...q })
       }
-    ) : null;
-  }, [
-    S,
-    d,
-    V,
-    h,
-    N,
-    _,
-    i,
-    B,
-    F,
-    g,
-    C,
+    ) : /* @__PURE__ */ n("div", { className: t["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(D, { ...q }) });
+  }, [i, s, v, p, d]), M = b(() => f ? /* @__PURE__ */ n(
+    be,
+    {
+      iconSize: Se[s === "large" ? "large" : "default"],
+      onClick: d ? void 0 : H,
+      disabled: d,
+      title: L("clear"),
+      className: t["tedi-textfield__clear-button"]
+    }
+  ) : null, [f, s, d, H, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
     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(
+    f && i && /* @__PURE__ */ n(Ie, { color: "primary", axis: "vertical", className: t["tedi-textfield__separator"] }),
+    i && K()
+  ] }), [f, i, M, K]), ve = /* @__PURE__ */ n(
+    ge,
+    {
+      ...a,
+      id: u,
+      name: ae,
+      value: V,
+      defaultValue: $,
+      onChange: pe,
+      onChangeEvent: G,
+      disabled: d,
+      readOnly: F,
+      required: w,
+      invalid: j,
+      placeholder: Y,
+      className: _(t["tedi-textfield__input"], X, {
+        [t["tedi-textfield__input--hidden-arrows"]]: Z
+      }),
+      onFocus: (r) => {
+        var l;
+        (l = a == null ? void 0 : a.onFocus) == null || l.call(a, r), A == null || A(r);
+      },
+      onBlur: (r) => {
+        var l;
+        (l = a == null ? void 0 : a.onBlur) == null || l.call(a, r), k == null || k(r);
+      },
+      isTextArea: le,
+      "aria-describedby": !e || Array.isArray(e) && e.length === 0 ? void 0 : Array.isArray(e) ? e.map((r, l) => `${u}-helper-${l}`).join(" ") : `${u}-helper`,
+      "aria-label": z && typeof g == "string" ? g : void 0,
+      ref: E
+    }
+  ), xe = _(
+    t["tedi-textfield"],
+    { [t[`tedi-textfield--${s}`]]: s },
+    { [t["tedi-textfield--with-icon"]]: i },
+    { [t["tedi-textfield--invalid"]]: j },
+    { [t["tedi-textfield--valid"]]: me },
+    { [t["tedi-textfield--clearable"]]: f },
+    W
+  ), he = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: t["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((r, l) => /* @__PURE__ */ n(U, { ...r, id: `${u}-helper-${l}` }, l)) : /* @__PURE__ */ n(U, { ...e, id: `${u}-helper` }) });
+  return /* @__PURE__ */ S("div", { "data-name": "textfield", ...oe, className: xe, children: [
+    !fe && /* @__PURE__ */ n(Ne, { id: u, label: g, required: w, hideLabel: z, size: ue }),
+    /* @__PURE__ */ S(
       "div",
       {
-        className: a["tedi-textfield__inner"],
-        onKeyDown: Y,
-        onKeyUp: X,
-        onClick: ee,
-        ref: L,
+        className: t["tedi-textfield__inner"],
+        onKeyDown: re,
+        onKeyUp: ee,
+        onKeyPress: te,
+        onClick: ie,
+        ref: T,
         children: [
-          ie,
-          P || c ? le : null
+          ne,
+          ve,
+          se,
+          (R || i) && ye
         ]
       }
     ),
-    se()
+    he()
   ] });
 });
-ve.displayName = "TextField";
+Be.displayName = "TextField";
 export {
-  ve as TextField,
-  ve as default
+  Be as TextField,
+  Be as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;

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

@@ -12,7 +12,8 @@ const e = {
   "tedi-textfield__icon-wrapper": "tedi-textfield__icon-wrapper-4935814e",
   "tedi-textfield--inline": "tedi-textfield--inline-7ed55c4e",
   "tedi-textfield__icon": "tedi-textfield__icon-05d4adc8",
-  "tedi-textfield__feedback-wrapper": "tedi-textfield__feedback-wrapper-9d47f9c6"
+  "tedi-textfield__feedback-wrapper": "tedi-textfield__feedback-wrapper-9d47f9c6",
+  "tedi-textfield__separator": "tedi-textfield__separator-63d1ba14"
 };
 export {
   e as default

package/src/tedi/components/form/time-field/time-field-helpers.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=40,u=6,d=()=>Array.from({length:24},(e,t)=>t.toString().padStart(2,"0")),m=e=>{const t=Math.max(1,e??1),r=[];for(let n=0;n<60;n+=t)r.push(n.toString().padStart(2,"0"));return r},T=(e,t)=>{if(!t.length)return"00";const r=Number(e);return isNaN(r)?t[0]:t.reduce((n,s)=>{const o=Math.abs(Number(s)-r),i=Math.abs(Number(n)-r);return o<i||o===i&&Number(s)>Number(n)?s:n},t[0])},p=e=>{if(!e.includes(":"))return{hour:"00",minute:"00"};const[t,r]=e.split(":");return{hour:t.padStart(2,"0"),minute:r.padStart(2,"0")}},f=(e,t)=>{const r=Math.round(e/c);return Math.max(0,Math.min(r,t-1))},l=e=>e*c,S=(e,t,r=1)=>Math.abs(e-t)>r,g=(e,t,r="auto")=>{e.scrollTo({top:l(t),behavior:r})},h=e=>{e&&clearTimeout(e)},a=e=>e?/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(e.trim()):!1,I=e=>{const t=e.trim();if(!t)return"";if(a(t))return t;const r=t.replace(/[^0-9]/g,"");if(r.length===3){const n=r.slice(0,1).padStart(2,"0"),s=r.slice(1),o=`${n}:${s}`;return a(o)?o:null}if(r.length===4){const n=r.slice(0,2),s=r.slice(2),o=`${n}:${s}`;return a(o)?o:null}if(t.includes(":")){const[n,s]=t.split(":"),o=parseInt(n,10),i=parseInt(s,10);if(!isNaN(o)&&!isNaN(i)&&o>=0&&o<=23&&i>=0&&i<=59)return`${o.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}return null};exports.ITEM_HEIGHT=c;exports.TIMEPICKER_OFFSET=u;exports.clearScrollTimeout=h;exports.findClosestMinute=T;exports.generateHours=d;exports.generateMinutes=m;exports.getScrollTopForIndex=l;exports.isValidTime=a;exports.needsScrollCorrection=S;exports.normalizeTime=I;exports.parseTime=p;exports.scrollToIndex=g;exports.snapToNearestItem=f;