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

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;

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

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

package/src/tedi/components/overlays/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),S=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),A=require("./dropdown-context.cjs.js"),z=require("./dropdown-helpers.cjs.js"),G=require("./dropdown-item/dropdown-item.cjs.js"),J=require("./dropdown-separator/dropdown-separator.cjs.js"),K=require("./dropdown-trigger/dropdown-trigger.cjs.js"),Q=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),f=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),V=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),Y=4,s=g=>{var x;const{getCurrentBreakpointProps:F}=V.useBreakpointProps(g.defaultServerBreakpoint),{children:I,modal:w=!1,divided:O=!1,width:P="auto",variant:l="default",open:u,defaultOpen:R=!1,onOpenChange:i,placement:p="bottom-start",className:b}=F(g),{getLabel:j}=X.useLabels(),k=e.useFloatingNodeId(),m=t.useRef([]),[a,v]=t.useState(null),[q,y]=t.useState(null),[B,N]=t.useState(R),d=u??B,h=t.useCallback(r=>{u===void 0&&N(r),i==null||i(r)},[u,i]),T=e.useFloating({nodeId:k,open:d,placement:p,onOpenChange:h,middleware:[f.offset(Y),f.flip(),f.shift()],whileElementsMounted:Q.autoUpdate}),{context:o,refs:n,x:U,y:_,strategy:L}=T,D=e.useInteractions([e.useClick(o),e.useRole(o,{role:"menu"}),e.useDismiss(o),e.useListNavigation(o,{listRef:m,activeIndex:a,onNavigate:v,loop:!0})]),M={open:d,setOpen:h,refs:n,listItemsRef:m,activeIndex:a,setActiveIndex:v,placement:p,content:q,setContent:y,divided:O,variant:l,...D},W=(x=n.reference.current)==null?void 0:x.getBoundingClientRect().width,E=t.useMemo(()=>{const r=n.reference.current;if(!r)return;const C=r.offsetParent;if(C)return C.getBoundingClientRect().width},[n.reference.current]);return c.jsxs(A.DropdownContext.Provider,{value:M,children:[I,c.jsx(e.FloatingPortal,{children:d&&c.jsx(e.FloatingFocusManager,{context:o,modal:w,visuallyHiddenDismiss:w?j("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:n.setFloating,className:H.default(S.default["tedi-dropdown"],{[S.default[`tedi-dropdown--${l}`]]:l==="tree"},b),style:{position:L,left:U??0,top:_??0,width:z.resolveDropdownWidth(P,W,E)},role:"menu","aria-orientation":"vertical","aria-activedescendant":a!==null?`dropdown-item-${a}`:void 0}),"data-placement":p,"data-state":d?"open":"closed",children:q})})})]})};s.Trigger=K.DropdownTrigger;s.Content=$.DropdownContent;s.Item=G.DropdownItem;s.Separator=J.DropdownSeparator;exports.Dropdown=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),O=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),z=require("./dropdown-context.cjs.js"),G=require("./dropdown-helpers.cjs.js"),J=require("./dropdown-item/dropdown-item.cjs.js"),K=require("./dropdown-separator/dropdown-separator.cjs.js"),Q=require("./dropdown-trigger/dropdown-trigger.cjs.js"),V=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),m=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=4,d=w=>{var I;const{getCurrentBreakpointProps:S}=X.useBreakpointProps(w.defaultServerBreakpoint),{children:F,modal:v=!1,divided:P=!1,width:R="auto",variant:u="default",open:p,defaultOpen:b=!1,onOpenChange:a,defaultActiveIndex:o,placement:f="bottom-start",className:j}=S(w),{getLabel:k}=Y.useLabels(),y=e.useFloatingNodeId(),q=t.useRef([]),[l,g]=t.useState(o??null),[h,B]=t.useState(null),[N,T]=t.useState(b),n=p??N;t.useEffect(()=>{n||g(o??null)},[n,o]);const x=t.useCallback(i=>{p===void 0&&T(i),a==null||a(i)},[p,a]),U=e.useFloating({nodeId:y,open:n,placement:f,onOpenChange:x,middleware:[m.offset(Z),m.flip(),m.shift()],whileElementsMounted:V.autoUpdate}),{context:r,refs:s,x:_,y:L,strategy:M}=U,D=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:q,activeIndex:l,onNavigate:g,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto"})]),W={open:n,setOpen:x,refs:s,listItemsRef:q,activeIndex:l,setActiveIndex:g,placement:f,content:h,setContent:B,divided:P,variant:u,...D},E=(I=s.reference.current)==null?void 0:I.getBoundingClientRect().width,A=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const C=i.offsetParent;if(C)return C.getBoundingClientRect().width},[s.reference.current]);return c.jsxs(z.DropdownContext.Provider,{value:W,children:[F,c.jsx(e.FloatingPortal,{children:n&&c.jsx(e.FloatingFocusManager,{context:r,modal:v,visuallyHiddenDismiss:v?k("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:s.setFloating,className:H.default(O.default["tedi-dropdown"],{[O.default[`tedi-dropdown--${u}`]]:u==="tree"},j),style:{position:M,left:_??0,top:L??0,width:G.resolveDropdownWidth(R,E,A)},role:"menu","aria-orientation":"vertical","aria-activedescendant":l!==null?`dropdown-item-${l}`:void 0}),"data-placement":f,"data-state":n?"open":"closed",children:h})})})]})};d.Trigger=Q.DropdownTrigger;d.Content=$.DropdownContent;d.Item=J.DropdownItem;d.Separator=K.DropdownSeparator;exports.Dropdown=d;

package/src/tedi/components/overlays/dropdown/dropdown.d.ts

@@ -61,6 +61,15 @@ export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps
      * Change handler (fires for both modes)
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Index of the item that should be focused when the dropdown opens.
+     *
+     * Pass the index of the "current selection" so the user can arrow-key or
+     * Enter/Space to reconfirm without first pressing an arrow. Omit (or pass
+     * `undefined`) to keep the default behaviour — no item is pre-focused and
+     * the user has to press an arrow key to start navigating.
+     */
+    defaultActiveIndex?: number;
     className?: string;
 }
 export declare const Dropdown: {