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

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

@@ -1,160 +1,166 @@
-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 { 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 { 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 _e } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as be } from "../../../providers/label-provider/use-labels.es.js";
-const ge = {
+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
-}, Ae = me((h, q) => {
-  var K;
-  const { getCurrentBreakpointProps: D } = _e(h.defaultServerBreakpoint), {
-    id: Ne,
-    label: _,
-    className: U,
-    inputClassName: J,
+}, Be = _e((I, J) => {
+  var O;
+  const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
+    id: we,
+    label: g,
+    className: W,
+    inputClassName: X,
     disabled: d,
-    required: B,
-    hideLabel: w,
+    required: w,
+    hideLabel: z,
     invalid: c,
     readOnly: F,
-    icon: a,
-    onIconClick: b,
+    icon: i,
+    onIconClick: v,
+    iconButtonProps: p,
     size: s = "default",
-    placeholder: Q,
-    isArrowsHidden: W = !0,
+    placeholder: Y,
+    isArrowsHidden: Z = !0,
     isClearable: R,
-    onClear: y,
+    onClear: x,
     onChange: o,
-    onChangeEvent: X,
-    onKeyUp: Y,
-    onKeyDown: Z,
-    onKeyPress: G,
+    onChangeEvent: G,
+    onKeyUp: ee,
+    onKeyDown: re,
+    onKeyPress: te,
     defaultValue: $,
-    value: g,
+    value: N,
     onFocus: A,
-    onBlur: N,
-    onClick: ee,
+    onBlur: k,
+    onClick: ie,
     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, () => ({
+    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 S.current;
+      return E.current;
     },
     get inner() {
-      return L.current;
+      return T.current;
     }
   }));
-  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(
+  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) => {
-      x || P(r), o == null || o(r);
+      h || P(r), o == null || o(r);
     },
-    [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,
+    [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"]
-    }, i = typeof a == "string" ? { ...r, name: a } : { ...r, ...a, className: k(r.className, a.className) };
-    return b ? /* @__PURE__ */ n(
+    }, q = typeof i == "string" ? { ...C, name: i } : { ...C, ...i, className: _(C.className, i.className) };
+    return v ? /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        className: t["tedi-textfield__icon-wrapper"],
-        onClick: d ? void 0 : b,
+        ...p,
+        className: _(t["tedi-textfield__icon-wrapper"], p == null ? void 0 : p.className),
+        onClick: d ? void 0 : v,
         disabled: d,
-        children: /* @__PURE__ */ n(M, { ...i })
+        children: /* @__PURE__ */ n(D, { ...q })
       }
-    ) : /* @__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,
+    ) : /* @__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: ge[s === "large" ? "large" : "default"],
-      onClick: d ? void 0 : j,
+      iconSize: Se[s === "large" ? "large" : "default"],
+      onClick: d ? void 0 : H,
       disabled: d,
-      title: z("clear"),
+      title: L("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(
+  ) : null, [f, s, d, H, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
+    M,
+    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"]]: a },
-    { [t["tedi-textfield--invalid"]]: V },
-    { [t["tedi-textfield--valid"]]: se },
+    { [t["tedi-textfield--with-icon"]]: i },
+    { [t["tedi-textfield--invalid"]]: j },
+    { [t["tedi-textfield--valid"]]: me },
     { [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(
+    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: t["tedi-textfield__inner"],
-        onKeyDown: Z,
-        onKeyUp: Y,
-        onKeyPress: G,
-        onClick: ee,
-        ref: L,
+        onKeyDown: re,
+        onKeyUp: ee,
+        onKeyPress: te,
+        onClick: ie,
+        ref: T,
         children: [
-          /* @__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
+          ne,
+          ve,
+          se,
+          (R || i) && ye
         ]
       }
     ),
-    ue()
+    he()
   ] });
 });
-Ae.displayName = "TextField";
+Be.displayName = "TextField";
 export {
-  Ae as TextField,
-  Ae 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;

package/src/tedi/components/form/time-field/time-field-helpers.d.ts

@@ -0,0 +1,51 @@
+export declare const ITEM_HEIGHT = 40;
+export declare const TIMEPICKER_OFFSET = 6;
+/**
+ * Generates an array of hours (00–23)
+ */
+export declare const generateHours: () => string[];
+/**
+ * Generates minute values based on a step (e.g. 5, 10, 15)
+ */
+export declare const generateMinutes: (stepMinutes: number) => string[];
+/**
+ * Finds the closest available minute to a target value
+ */
+export declare const findClosestMinute: (target: string, mins: string[]) => string;
+/**
+ * Parses HH:mm time string
+ */
+export declare const parseTime: (time: string) => {
+    hour: string;
+    minute: string;
+};
+/**
+ * Returns nearest wheel index from scroll position
+ */
+export declare const snapToNearestItem: (scrollTop: number, length: number) => number;
+/**
+ * Returns scrollTop position for index
+ */
+export declare const getScrollTopForIndex: (index: number) => number;
+/**
+ * Checks if scroll correction is needed
+ */
+export declare const needsScrollCorrection: (current: number, target: number, tolerance?: number) => boolean;
+/**
+ * Scrolls element to index
+ */
+export declare const scrollToIndex: (element: HTMLDivElement, index: number, behavior?: ScrollBehavior) => void;
+/**
+ * Clears scroll timeout safely
+ */
+export declare const clearScrollTimeout: (timeout?: NodeJS.Timeout) => void;
+export declare const isValidTime: (time: string) => boolean;
+/**
+ * Normalizes common typing patterns into HH:mm or returns null if impossible
+ * Examples:
+ *   "9:5"   → "09:05"
+ *   "14:5"  → "14:05"
+ *   "2359"  → "23:59"
+ *   "4:89"  → null
+ */
+export declare const normalizeTime: (input: string) => string | null;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),T=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),B=require("../textfield/textfield.cjs.js"),ne=require("../time-picker/time-picker.cjs.js"),s=require("./time-field.module.scss.cjs.js"),O=require("./time-field-helpers.cjs.js"),re=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),C=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),k=require("../../overlays/dropdown/dropdown.cjs.js"),E=v=>{const{getCurrentBreakpointProps:S}=oe.useBreakpointProps(v.defaultServerBreakpoint),{id:V,label:M,value:c,defaultValue:z,onChange:F,readOnly:u=!1,required:A,placeholder:H,inputProps:i,stepMinutes:K=1,className:I,availableTimes:l}=v,{useNativePicker:G=!1,timePickerTrigger:P="button",showPicker:a=!0,availableTimesVariant:q="grid-buttons"}=S(v),y=c!==void 0,[J,N]=m.useState(c??z??""),g=y?c:J,[_,b]=m.useState(!1),w=P==="input",r=G,L=d.useFloating({open:_,onOpenChange:b,placement:w?"bottom-start":"bottom-end",middleware:[C.offset(O.TIMEPICKER_OFFSET),C.flip(),C.shift()],whileElementsMounted:re.autoUpdate}),{refs:j,context:p,x:Q,y:W,strategy:X}=L,Y=d.useClick(p),Z=d.useDismiss(p),$=d.useRole(p,{role:"listbox"}),D=a&&w&&!u&&!r,R=d.useInteractions([...D?[Y]:[],Z,$]),x=e=>{const n=e.trim();y||N(n),F==null||F(n)},ee=e=>{var h;const n=e.target.value??"";(h=i==null?void 0:i.onBlur)==null||h.call(i,e);const o=O.normalizeTime(n);o!==null&&o!==n&&x(o)};m.useEffect(()=>{c!==void 0&&N(c)},[c]);const f=m.useRef(null);m.useEffect(()=>{var e;(e=f.current)!=null&&e.inner&&j.setReference(f.current.inner)},[j]);const te=()=>{var n;const e=(n=f.current)==null?void 0:n.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ie=()=>b(e=>!e),U={...i,id:V,label:M,value:g,placeholder:H,readOnly:u||!r&&w,icon:"schedule",isClearable:!0,required:A,onIconClick:()=>{u||!a||(r?te():P==="button"&&ie())},onChange:x,onBlur:ee,className:T.default(s.default["tedi-time-field__textfield"],{[s.default["tedi-time-field__icon--disabled"]]:!a||u},{[s.default["tedi-time-field__textfield--disabled"]]:i==null?void 0:i.disabled},{[s.default["tedi-time-field--native"]]:r}),input:{...i==null?void 0:i.input,...r&&{type:"time"}}};if(!r&&a&&!u&&q==="dropdown"&&!!(l!=null&&l.length)){const e=l.indexOf(g),n=e>=0?e:0;return t.jsxs(k.Dropdown,{width:"trigger",defaultActiveIndex:n,children:[t.jsx(k.Dropdown.Trigger,{children:t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I,{[s.default["tedi-time-field__container--native"]]:r}),children:t.jsx(B.TextField,{ref:f,...U})})}),t.jsx(k.Dropdown.Content,{children:l.map((o,h)=>t.jsx(k.Dropdown.Item,{index:h,active:o===g,onClick:()=>x(o),children:o},o))})]})}return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I),...D?R.getReferenceProps():{},"aria-haspopup":a?"listbox":void 0,tabIndex:-1,children:t.jsx(B.TextField,{ref:f,"aria-expanded":a?_:void 0,...U})}),!r&&a&&t.jsx(d.FloatingPortal,{children:_&&!u&&t.jsx(d.FloatingFocusManager,{context:p,modal:!1,initialFocus:-1,children:t.jsx("div",{ref:j.setFloating,...R.getFloatingProps({style:{position:X,top:W??0,left:Q??0}}),children:t.jsx(ne.TimePicker,{value:g,stepMinutes:K,availableTimes:l,onChange:e=>{x(e),l&&b(!1)},gridVariant:q==="grid-radio"?"radio":"button",className:s.default["tedi-time-field__picker-wrapper"]})})})})]})};E.displayName="TimeField";exports.TimeField=E;

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

@@ -0,0 +1,87 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { TextFieldProps } from '../textfield/textfield';
+type TimeFieldBreakpointProps = {
+    /**
+     * If `true`, the field swaps the custom time-picker popover for the
+     * browser's native time picker (`<input type="time">`). Works on both
+     * mobile and desktop — useful when the consumer wants to skip the custom
+     * UI entirely.
+     * Note: When using the native picker, the `availableTimes` prop is ignored.
+     * @default false
+     */
+    useNativePicker?: boolean;
+    /**
+     * Determines how the time picker is triggered:
+     * - 'button' (default) – only clicking the icon opens the picker
+     * - 'input' – clicking anywhere in the input opens the picker
+     */
+    timePickerTrigger?: 'input' | 'button';
+    /**
+     * Enables or disables the time picker popover.
+     * @default true
+     */
+    showPicker?: boolean;
+    /**
+     * Variant of the available times:
+     * - 'grid-buttons' – buttons grid
+     * - 'grid-radio' – radio buttons grid
+     * - 'dropdown' – dropdown list
+     */
+    availableTimesVariant?: 'grid-buttons' | 'grid-radio' | 'dropdown';
+};
+export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointProps> {
+    /**
+     * Unique identifier for the input field.
+     */
+    id: string;
+    /**
+     * Label for the input field. Used for accessibility.
+     */
+    label: string;
+    /**
+     * Current value of the time field (controlled).
+     */
+    value?: string;
+    /**
+     * Initial value of the time field (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the time value changes.
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Makes the input read-only. Picker can still be opened if showPicker is true.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the input as required.
+     */
+    required?: boolean;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Additional props to pass to the underlying TextField component,
+     * excluding `id`, `label`, `value`, and `onChange`.
+     */
+    inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>;
+    /**
+     * Step interval in minutes for the time picker.
+     * @default 1
+     */
+    stepMinutes?: number;
+    /**
+     * Additional CSS class for the container.
+     */
+    className?: string;
+    /**
+     * Array of available times to show in the picker or dropdown.
+     */
+    availableTimes?: string[];
+}
+export declare const TimeField: React.FC<TimeFieldProps>;
+export {};