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

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;

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

@@ -0,0 +1,10 @@
+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"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/time-picker/components/time-grid/time-grid.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("react"),h=require("../../../../../../../external/classnames/index.cjs.js"),R=require("../../../../buttons/button/button.cjs.js"),A=require("../../../choice-group/choice-group.cjs.js"),u=require("../../time-picker.module.scss.cjs.js"),C=require("../../../../../providers/label-provider/use-labels.cjs.js"),G=require("../../../../layout/grid/row.cjs.js"),I=require("../../../../layout/grid/col.cjs.js"),k=({times:m,value:o,onSelect:f,className:w,colWidth:a={xs:6,md:4},variant:p="button",bordered:x=!0})=>{const l=d.useId(),{getLabel:q}=C.useLabels(),s=d.useRef(null);d.useEffect(()=>{if(!o)return;const e=s.current;if(!e)return;const r=e.querySelector(`input[type="radio"][value="${o}"], button[data-time="${o}"]`);r==null||r.focus({preventScroll:!0})},[]);const _=e=>{var g;if(p!=="radio")return;const r=s.current;if(!r)return;const t=Array.from(r.querySelectorAll('input[type="radio"]:not([disabled])'));if(t.length===0)return;const i=t.findIndex(j=>j===document.activeElement);let n;switch(e.key){case"ArrowDown":case"ArrowRight":n=i<0||i===t.length-1?0:i+1;break;case"ArrowUp":case"ArrowLeft":n=i<=0?t.length-1:i-1;break;case"Home":n=0;break;case"End":n=t.length-1;break;default:return}e.preventDefault(),(g=t[n])==null||g.focus()},b=h.default(u.default["tedi-time-picker__grid"],{[u.default["tedi-time-picker__grid--borderless"]]:!x},w),y=typeof a=="object"?a:{width:a};return p==="radio"?c.jsx("div",{ref:s,className:b,onKeyDown:_,children:c.jsx(A.ChoiceGroup,{id:`time-picker-group-${l}`,label:q("timePicker.pickTime"),inputType:"radio",name:`time-grid-${l}`,value:o,onChange:e=>f(e),items:m.map(e=>({id:`time-${l}-${e}`,label:e,value:e,colProps:y})),direction:"row",variant:"card",showIndicator:!0,color:"secondary",hideLabel:!0})}):c.jsx("div",{ref:s,className:b,children:c.jsx(G.Row,{gutter:2,children:m.map(e=>d.createElement(I.Col,{...y,key:e},c.jsx(R.Button,{noStyle:!0,"data-time":e,className:h.default(u.default["tedi-time-picker__grid-item"],{[u.default["tedi-time-picker__grid-item--selected"]]:e===o}),onClick:()=>f(e),children:e})))})})};k.displayName="TimeGrid";exports.TimeGrid=k;

package/src/tedi/components/form/time-picker/components/time-grid/time-grid.d.ts

@@ -0,0 +1,38 @@
+import { ColProps, ColSize } from '../../../../layout/grid';
+export interface TimeGridProps {
+    /**
+     * Times in HH:mm format
+     */
+    times: string[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Selection handler
+     */
+    onSelect: (time: string) => void;
+    /**
+     * Grid column width per time slot. Accepts either:
+     *
+     * - a single `ColSize` (1–12 or `'auto'`) applied at every breakpoint, or
+     * - a breakpoint object (`{ xs?, sm?, md?, lg?, xl?, xxl? }`) for responsive
+     *   layouts.
+     *
+     * Default is `{ xs: 6, md: 4 }` — 2 slots per row on phones (where 33%
+     * is too narrow for the radio card's intrinsic content width and would
+     * otherwise wrap one-per-row), 3 slots per row from `md` up.
+     */
+    colWidth?: ColSize | Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>;
+    /**
+     * Display mode
+     */
+    variant?: 'button' | 'radio';
+    className?: string;
+    /**
+     * Whether to render the surrounding card chrome (border, background, radius).
+     * @default true
+     */
+    bordered?: boolean;
+}
+export declare const TimeGrid: React.FC<TimeGridProps>;

package/src/tedi/components/form/time-picker/components/time-grid/time-grid.es.js

@@ -0,0 +1,101 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useId as A, useRef as C, useEffect as I, createElement as N } from "react";
+import h from "../../../../../../../external/classnames/index.es.js";
+import { Button as $ } from "../../../../buttons/button/button.es.js";
+import { ChoiceGroup as R } from "../../../choice-group/choice-group.es.js";
+import d from "../../time-picker.module.scss.es.js";
+import { useLabels as D } from "../../../../../providers/label-provider/use-labels.es.js";
+import { Row as E } from "../../../../layout/grid/row.es.js";
+import { Col as G } from "../../../../layout/grid/col.es.js";
+const L = ({
+  times: l,
+  value: o,
+  onSelect: u,
+  className: k,
+  colWidth: a = { xs: 6, md: 4 },
+  variant: p = "button",
+  bordered: g = !0
+}) => {
+  const m = A(), { getLabel: w } = D(), s = C(null);
+  I(() => {
+    if (!o) return;
+    const e = s.current;
+    if (!e) return;
+    const r = e.querySelector(
+      `input[type="radio"][value="${o}"], button[data-time="${o}"]`
+    );
+    r == null || r.focus({ preventScroll: !0 });
+  }, []);
+  const _ = (e) => {
+    var b;
+    if (p !== "radio") return;
+    const r = s.current;
+    if (!r) return;
+    const t = Array.from(r.querySelectorAll('input[type="radio"]:not([disabled])'));
+    if (t.length === 0) return;
+    const i = t.findIndex((x) => x === document.activeElement);
+    let n;
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        n = i < 0 || i === t.length - 1 ? 0 : i + 1;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        n = i <= 0 ? t.length - 1 : i - 1;
+        break;
+      case "Home":
+        n = 0;
+        break;
+      case "End":
+        n = t.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), (b = t[n]) == null || b.focus();
+  }, f = h(
+    d["tedi-time-picker__grid"],
+    {
+      [d["tedi-time-picker__grid--borderless"]]: !g
+    },
+    k
+  ), y = typeof a == "object" ? a : { width: a };
+  return p === "radio" ? /* @__PURE__ */ c("div", { ref: s, className: f, onKeyDown: _, children: /* @__PURE__ */ c(
+    R,
+    {
+      id: `time-picker-group-${m}`,
+      label: w("timePicker.pickTime"),
+      inputType: "radio",
+      name: `time-grid-${m}`,
+      value: o,
+      onChange: (e) => u(e),
+      items: l.map((e) => ({
+        id: `time-${m}-${e}`,
+        label: e,
+        value: e,
+        colProps: y
+      })),
+      direction: "row",
+      variant: "card",
+      showIndicator: !0,
+      color: "secondary",
+      hideLabel: !0
+    }
+  ) }) : /* @__PURE__ */ c("div", { ref: s, className: f, children: /* @__PURE__ */ c(E, { gutter: 2, children: l.map((e) => /* @__PURE__ */ N(G, { ...y, key: e }, /* @__PURE__ */ c(
+    $,
+    {
+      noStyle: !0,
+      "data-time": e,
+      className: h(d["tedi-time-picker__grid-item"], {
+        [d["tedi-time-picker__grid-item--selected"]]: e === o
+      }),
+      onClick: () => u(e),
+      children: e
+    }
+  ))) }) });
+};
+L.displayName = "TimeGrid";
+export {
+  L as TimeGrid
+};

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),t=require("../../../time-field/time-field-helpers.cjs.js"),p=require("../../time-picker.module.scss.cjs.js"),F=({hours:c,minutes:l,selectedHour:a,selectedMinute:s,onChange:x,className:P,bordered:L=!0})=>{const I=n.useId(),i=n.useRef(null),d=n.useRef(null),f=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),k=n.useRef(),v=n.useRef(-1),b=n.useRef(-1),[M,R]=n.useState(null),[C,$]=n.useState(null),N=(r,e)=>Math.max(0,Math.min(e-1,r)),A=(r,e,o)=>{const T=r.current;if(!T||e<0)return;const w=t.getScrollTopForIndex(e);o?f.current=!0:m.current=!0,T.scrollTo({top:w,behavior:"instant"}),requestAnimationFrame(()=>{o?f.current=!1:m.current=!1})};n.useLayoutEffect(()=>{const r=c.indexOf(a),e=l.indexOf(s);r!==v.current&&(v.current=r,A(i,r,!0)),e!==b.current&&(b.current=e,A(d,e,!1)),R(r),$(e)},[c,l,a,s]);const q=n.useRef(()=>{});q.current=()=>{const r=i.current;if(!r||f.current)return;t.clearScrollTimeout(g.current);const e=N(t.snapToNearestItem(r.scrollTop,c.length),c.length);R(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(f.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{f.current=!1})),e!==v.current&&(v.current=e,x(c[e],s))};const y=n.useRef(()=>{});y.current=()=>{const r=d.current;if(!r||m.current)return;t.clearScrollTimeout(k.current);const e=N(t.snapToNearestItem(r.scrollTop,l.length),l.length);$(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(m.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{m.current=!1})),e!==b.current&&(b.current=e,x(a,l[e]))},n.useEffect(()=>{const r=i.current,e=d.current;if(!r||!e)return;const o=()=>q.current(),T=()=>y.current();return r.addEventListener("scrollend",o),e.addEventListener("scrollend",T),()=>{r.removeEventListener("scrollend",o),e.removeEventListener("scrollend",T)}},[]);const H=()=>{if(!i.current||f.current)return;const r=N(t.snapToNearestItem(i.current.scrollTop,c.length),c.length);R(r),t.clearScrollTimeout(g.current),g.current=setTimeout(()=>q.current(),150)},K=()=>{if(!d.current||m.current)return;const r=N(t.snapToNearestItem(d.current.scrollTop,l.length),l.length);$(r),t.clearScrollTimeout(k.current),k.current=setTimeout(()=>y.current(),150)},W=r=>{const e=c[r];!e||!i.current||(t.clearScrollTimeout(g.current),v.current=r,R(r),x(e,s),f.current=!0,t.scrollToIndex(i.current,r,"smooth"),setTimeout(()=>{f.current=!1},300))},U=r=>{const e=l[r];!e||!d.current||(t.clearScrollTimeout(k.current),b.current=r,$(r),x(a,e),m.current=!0,t.scrollToIndex(d.current,r,"smooth"),setTimeout(()=>{m.current=!1},300))},D=(r,e,o,T)=>w=>{const u=e.indexOf(o);if(u===-1)return;let h=-1,_=!1;switch(w.key){case"ArrowDown":h=(u+1)%e.length,_=u===e.length-1;break;case"ArrowUp":h=(u-1+e.length)%e.length,_=u===0;break;case"Home":h=0;break;case"End":h=e.length-1;break;case"PageDown":h=(u+5)%e.length,_=u+5>=e.length;break;case"PageUp":h=(u-5+e.length)%e.length,_=u-5<0;break;case"Enter":case" ":w.preventDefault(),T(e[u]);return;default:return}w.preventDefault();const O=r==="hour"?i.current:d.current,S=O==null?void 0:O.querySelector(`#${CSS.escape(`${I}-${r}-${h}`)}`);S==null||S.focus(),S==null||S.scrollIntoView({block:"center",behavior:_?"auto":"smooth"})};return n.useEffect(()=>()=>{t.clearScrollTimeout(g.current),t.clearScrollTimeout(k.current)},[]),E.jsxs("div",{className:j.default(p.default["tedi-time-picker__wheel"],{[p.default["tedi-time-picker__wheel--borderless"]]:!L},P),children:[E.jsx("div",{ref:i,role:"listbox","aria-label":"Hours",tabIndex:0,"aria-activedescendant":`${I}-hour-${c.indexOf(a)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,a,r=>x(r,s)),children:c.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(M??c.indexOf(a))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===a,children:r},r))}),E.jsx("div",{ref:d,role:"listbox",className:p.default["tedi-time-picker__wheel-column"],onScroll:K,"aria-label":"Minutes",tabIndex:0,"aria-activedescendant":`${I}-minute-${l.indexOf(s)}`,onKeyDown:D("minute",l,s,r=>x(a,r)),children:l.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(C??l.indexOf(s))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===s,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TimeWheelProps {
+    /**
+     * Array of all available hours (normally ["00", "01", ..., "23"]).
+     */
+    hours: string[];
+    /**
+     * Array of available minutes based on the `stepMinutes` value
+     * (e.g. ["00", "05", "10", ..., "55"] when step is 5).
+     */
+    minutes: string[];
+    /**
+     * The currently selected hour ("00" to "23").
+     * Used to control the scroll position of the hour wheel.
+     */
+    selectedHour: string;
+    /**
+     * The currently selected minute.
+     * Must exist in the `minutes` array.
+     * Used to control the scroll position of the minute wheel.
+     */
+    selectedMinute: string;
+    /**
+     * Callback fired when the user changes either the hour or minute via scrolling or clicking.
+     *
+     * @param hour - Selected hour in "HH" format
+     * @param minute - Selected minute in "mm" format
+     */
+    onChange: (hour: string, minute: string) => void;
+    /**
+     * Additional CSS class name to apply to the root wheel container.
+     */
+    className?: string;
+    /**
+     * Whether to render the surrounding card chrome (border, background, radius).
+     * @default true
+     */
+    bordered?: boolean;
+}
+export declare const TimeWheel: React.FC<TimeWheelProps>;

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.es.js

@@ -0,0 +1,184 @@
+import { jsxs as Q, jsx as y } from "react/jsx-runtime";
+import F from "../../../../../../../external/classnames/index.es.js";
+import M, { useRef as l, useLayoutEffect as X, useEffect as j } from "react";
+import { clearScrollTimeout as d, snapToNearestItem as A, needsScrollCorrection as C, scrollToIndex as D, getScrollTopForIndex as P } from "../../../time-field/time-field-helpers.es.js";
+import p from "../../time-picker.module.scss.es.js";
+const Y = ({
+  hours: t,
+  minutes: n,
+  selectedHour: u,
+  selectedMinute: i,
+  onChange: k,
+  className: H,
+  bordered: U = !0
+}) => {
+  const g = M.useId(), a = l(null), s = l(null), m = l(!1), f = l(!1), v = l(), S = l(), w = l(-1), _ = l(-1), [W, E] = M.useState(null), [V, $] = M.useState(null), N = (r, e) => Math.max(0, Math.min(e - 1, r)), R = (r, e, c) => {
+    const h = r.current;
+    if (!h || e < 0) return;
+    const I = P(e);
+    c ? m.current = !0 : f.current = !0, h.scrollTo({ top: I, behavior: "instant" }), requestAnimationFrame(() => {
+      c ? m.current = !1 : f.current = !1;
+    });
+  };
+  X(() => {
+    const r = t.indexOf(u), e = n.indexOf(i);
+    r !== w.current && (w.current = r, R(a, r, !0)), e !== _.current && (_.current = e, R(s, e, !1)), E(r), $(e);
+  }, [t, n, u, i]);
+  const O = l(() => {
+  });
+  O.current = () => {
+    const r = a.current;
+    if (!r || m.current) return;
+    d(v.current);
+    const e = N(A(r.scrollTop, t.length), t.length);
+    E(e);
+    const c = P(e);
+    C(r.scrollTop, c, 8) && (m.current = !0, D(r, e, "instant"), requestAnimationFrame(() => {
+      m.current = !1;
+    })), e !== w.current && (w.current = e, k(t[e], i));
+  };
+  const L = l(() => {
+  });
+  L.current = () => {
+    const r = s.current;
+    if (!r || f.current) return;
+    d(S.current);
+    const e = N(A(r.scrollTop, n.length), n.length);
+    $(e);
+    const c = P(e);
+    C(r.scrollTop, c, 8) && (f.current = !0, D(r, e, "instant"), requestAnimationFrame(() => {
+      f.current = !1;
+    })), e !== _.current && (_.current = e, k(u, n[e]));
+  }, j(() => {
+    const r = a.current, e = s.current;
+    if (!r || !e) return;
+    const c = () => O.current(), h = () => L.current();
+    return r.addEventListener("scrollend", c), e.addEventListener("scrollend", h), () => {
+      r.removeEventListener("scrollend", c), e.removeEventListener("scrollend", h);
+    };
+  }, []);
+  const z = () => {
+    if (!a.current || m.current) return;
+    const r = N(A(a.current.scrollTop, t.length), t.length);
+    E(r), d(v.current), v.current = setTimeout(() => O.current(), 150);
+  }, B = () => {
+    if (!s.current || f.current) return;
+    const r = N(A(s.current.scrollTop, n.length), n.length);
+    $(r), d(S.current), S.current = setTimeout(() => L.current(), 150);
+  }, G = (r) => {
+    const e = t[r];
+    !e || !a.current || (d(v.current), w.current = r, E(r), k(e, i), m.current = !0, D(a.current, r, "smooth"), setTimeout(() => {
+      m.current = !1;
+    }, 300));
+  }, J = (r) => {
+    const e = n[r];
+    !e || !s.current || (d(S.current), _.current = r, $(r), k(u, e), f.current = !0, D(s.current, r, "smooth"), setTimeout(() => {
+      f.current = !1;
+    }, 300));
+  }, K = (r, e, c, h) => (I) => {
+    const o = e.indexOf(c);
+    if (o === -1) return;
+    let x = -1, b = !1;
+    switch (I.key) {
+      case "ArrowDown":
+        x = (o + 1) % e.length, b = o === e.length - 1;
+        break;
+      case "ArrowUp":
+        x = (o - 1 + e.length) % e.length, b = o === 0;
+        break;
+      case "Home":
+        x = 0;
+        break;
+      case "End":
+        x = e.length - 1;
+        break;
+      case "PageDown":
+        x = (o + 5) % e.length, b = o + 5 >= e.length;
+        break;
+      case "PageUp":
+        x = (o - 5 + e.length) % e.length, b = o - 5 < 0;
+        break;
+      case "Enter":
+      case " ":
+        I.preventDefault(), h(e[o]);
+        return;
+      default:
+        return;
+    }
+    I.preventDefault();
+    const q = r === "hour" ? a.current : s.current, T = q == null ? void 0 : q.querySelector(`#${CSS.escape(`${g}-${r}-${x}`)}`);
+    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "auto" : "smooth" });
+  };
+  return j(() => () => {
+    d(v.current), d(S.current);
+  }, []), /* @__PURE__ */ Q(
+    "div",
+    {
+      className: F(
+        p["tedi-time-picker__wheel"],
+        { [p["tedi-time-picker__wheel--borderless"]]: !U },
+        H
+      ),
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            ref: a,
+            role: "listbox",
+            "aria-label": "Hours",
+            tabIndex: 0,
+            "aria-activedescendant": `${g}-hour-${t.indexOf(u)}`,
+            className: p["tedi-time-picker__wheel-column"],
+            onScroll: z,
+            onKeyDown: K("hour", t, u, (r) => k(r, i)),
+            children: t.map((r, e) => /* @__PURE__ */ y(
+              "div",
+              {
+                className: F(p["tedi-time-picker__wheel-item"], {
+                  [p["tedi-time-picker__wheel-item--selected"]]: e === (W ?? t.indexOf(u))
+                }),
+                onClick: () => G(e),
+                id: `${g}-hour-${e}`,
+                role: "option",
+                "aria-selected": r === u,
+                children: r
+              },
+              r
+            ))
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            ref: s,
+            role: "listbox",
+            className: p["tedi-time-picker__wheel-column"],
+            onScroll: B,
+            "aria-label": "Minutes",
+            tabIndex: 0,
+            "aria-activedescendant": `${g}-minute-${n.indexOf(i)}`,
+            onKeyDown: K("minute", n, i, (r) => k(u, r)),
+            children: n.map((r, e) => /* @__PURE__ */ y(
+              "div",
+              {
+                className: F(p["tedi-time-picker__wheel-item"], {
+                  [p["tedi-time-picker__wheel-item--selected"]]: e === (V ?? n.indexOf(i))
+                }),
+                onClick: () => J(e),
+                id: `${g}-minute-${e}`,
+                role: "option",
+                "aria-selected": r === i,
+                children: r
+              },
+              r
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+Y.displayName = "TimeWheel";
+export {
+  Y as TimeWheel
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),n=require("react"),t=require("../time-field/time-field-helpers.cjs.js"),H=require("./components/time-grid/time-grid.cjs.js"),x=require("./components/time-wheel/time-wheel.cjs.js"),T=({value:s,defaultValue:f="",onChange:r,stepMinutes:o=1,availableTimes:i,gridVariant:h="button",className:u,bordered:c=!0})=>{const[j,P]=n.useState(f),l=s!==void 0,m=l?s:j,d=e=>{l||P(e),r==null||r(e)},a=n.useMemo(t.generateHours,[]),q=n.useMemo(()=>t.generateMinutes(o),[o]),{hour:y,minute:S}=t.parseTime(m||"12:00"),g=a.includes(y)?y:"12",k=t.findClosestMinute(S,q);return Array.isArray(i)&&i.length>0?M.jsx(H.TimeGrid,{times:i,value:m,variant:h,onSelect:d,className:u,bordered:c}):M.jsx(x.TimeWheel,{hours:a,minutes:q,selectedHour:g,selectedMinute:k,onChange:(e,p)=>d(`${e}:${p}`),className:u,bordered:c})};T.displayName="TimePicker";exports.TimePicker=T;

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

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface TimePickerProps {
+    /**
+     * Currently selected time in "HH:mm" format (24-hour).
+     *
+     * @example "14:30"
+     * @default ""
+     */
+    value?: string;
+    /**
+     * Initial time value for uncontrolled mode. Should be in "HH:mm" format.
+     * @example "09:00"
+     * @default ""
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the user selects a new time.
+     * Returns the selected time in "HH:mm" format.
+     *
+     * @param time - Selected time as "HH:mm" string
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Minute step interval for the minute wheel.
+     * Determines which minute values are shown (e.g. 00, 05, 10, ..., 55).
+     *
+     * @default 1
+     */
+    stepMinutes?: number;
+    /**
+     * When provided, the component switches from wheel mode to grid mode.
+     * Displays a list/grid of predefined time slots instead of scrollable wheels.
+     *
+     * Each string must be in "HH:mm" format.
+     *
+     * @example ["09:00", "09:30", "10:00", "14:00", "15:30"]
+     */
+    availableTimes?: string[];
+    /**
+     * Variant of the grid rendered when `availableTimes` is provided:
+     * - 'buttons' – buttons grid
+     * - 'radio' – radio buttons grid
+     * @default button
+     */
+    gridVariant?: 'button' | 'radio';
+    /**
+     * Additional CSS class name to apply to the root element.
+     * Useful for custom styling and layout overrides.
+     */
+    className?: string;
+    /**
+     * Whether to render the surrounding card (border, background, radius).
+     * Set to `false` when embedding inside a parent that already provides
+     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
+     * The inner gradient masks and column separators are preserved either way.
+     * @default true
+     */
+    bordered?: boolean;
+}
+export declare const TimePicker: React.FC<TimePickerProps>;

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

@@ -0,0 +1,45 @@
+import { jsx as p } from "react/jsx-runtime";
+import S, { useMemo as a } from "react";
+import { generateHours as _, generateMinutes as $, parseTime as g, findClosestMinute as j } from "../time-field/time-field-helpers.es.js";
+import { TimeGrid as x } from "./components/time-grid/time-grid.es.js";
+import { TimeWheel as G } from "./components/time-wheel/time-wheel.es.js";
+const I = ({
+  value: o,
+  defaultValue: h = "",
+  onChange: e,
+  stepMinutes: n = 1,
+  availableTimes: r,
+  gridVariant: y = "button",
+  className: i,
+  bordered: s = !0
+}) => {
+  const [M, T] = S.useState(h), c = o !== void 0, m = c ? o : M, u = (t) => {
+    c || T(t), e == null || e(t);
+  }, f = a(_, []), l = a(() => $(n), [n]), { hour: d, minute: k } = g(m || "12:00"), A = f.includes(d) ? d : "12", H = j(k, l);
+  return Array.isArray(r) && r.length > 0 ? /* @__PURE__ */ p(
+    x,
+    {
+      times: r,
+      value: m,
+      variant: y,
+      onSelect: u,
+      className: i,
+      bordered: s
+    }
+  ) : /* @__PURE__ */ p(
+    G,
+    {
+      hours: f,
+      minutes: l,
+      selectedHour: A,
+      selectedMinute: H,
+      onChange: (t, P) => u(`${t}:${P}`),
+      className: i,
+      bordered: s
+    }
+  );
+};
+I.displayName = "TimePicker";
+export {
+  I as TimePicker
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__grid-item":"tedi-time-picker__grid-item-53c9d41d","tedi-time-picker__grid-item--selected":"tedi-time-picker__grid-item--selected-32fb5e5d"};exports.default=e;