@tedi-design-system/react 17.1.0-rc.6 → 17.1.0-rc.8

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-field__textfield":"tedi-time-field__textfield-73806efe","tedi-time-field__textfield--disabled":"tedi-time-field__textfield--disabled-86b8b11c","tedi-time-field__container":"tedi-time-field__container-45902dd9","tedi-time-field__icon--disabled":"tedi-time-field__icon--disabled-1c2b77ca","tedi-time-field__picker-wrapper":"tedi-time-field__picker-wrapper-6dd90739"};exports.default=e;