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

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;

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>;