@tedi-design-system/react 18.0.0-rc.15 → 18.0.0-rc.17

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),C=require("../../../base/typography/heading/heading.cjs.js"),f=require("../../../buttons/button/button.cjs.js"),_=require("../../../buttons/closing-button/closing-button.cjs.js"),b=require("../../time-picker/time-picker.cjs.js"),s=require("./time-picker-modal.module.scss.cjs.js"),l=require("../../../overlays/modal/modal.cjs.js"),T=require("../../../overlays/modal/modal-context.cjs.js"),v=require("../../../../providers/label-provider/use-labels.cjs.js"),N=({title:o})=>{const{labelId:i,onOpenChange:t}=T.useModal();return e.jsxs("div",{className:s.default["tedi-time-picker-modal__header"],children:[e.jsx(C.Heading,{element:"h2",modifiers:"h4",id:i,className:s.default["tedi-time-picker-modal__title"],children:o}),e.jsx(_.ClosingButton,{size:"small",onClick:()=>t(!1)})]})},c=o=>{const{open:i,onOpenChange:t,value:n,onConfirm:h,stepMinutes:k,availableTimes:x,gridVariant:j,modalProps:a,title:M}=o,{getLabel:r}=v.useLabels(),g=M??r("time-field.modal-title"),[d,u]=m.useState(n??"");m.useEffect(()=>{i&&u(n??"")},[i,n]);const p=()=>{d&&h(d),t(!1)};return e.jsx(l.Modal,{open:i,onToggle:t,children:e.jsxs(l.Modal.Content,{size:"small",width:"xs",...a,className:q.default(s.default["tedi-time-picker-modal"],a==null?void 0:a.className),children:[e.jsx(l.Modal.Header,{children:e.jsx(N,{title:g})}),e.jsx(l.Modal.Body,{className:s.default["tedi-time-picker-modal__body"],children:e.jsx(b.TimePicker,{value:d,stepMinutes:k,availableTimes:x,gridVariant:j,onChange:u,bordered:!1,className:s.default["tedi-time-picker-modal__picker"]})}),e.jsxs(l.Modal.Footer,{children:[e.jsx(f.Button,{visualType:"secondary",onClick:()=>t(!1),children:r("time-field.cancel")}),e.jsx(f.Button,{onClick:p,children:r("time-field.confirm")})]})]})})};c.displayName="TimePickerModal";exports.TimePickerModal=c;exports.default=c;

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

@@ -0,0 +1,30 @@
+import { ModalContentProps } from '../../../overlays/modal';
+import { TimePickerProps } from '../../time-picker/time-picker';
+export interface TimePickerModalProps {
+    /** Whether the modal is open. Pair with `onOpenChange`. */
+    open: boolean;
+    /** Fires when the modal opens or closes (e.g. dismiss via backdrop or Escape). */
+    onOpenChange: (open: boolean) => void;
+    /** Current committed value (HH:mm). Used to seed the draft when the modal opens. */
+    value?: string;
+    /** Fires with the chosen value when the user clicks "Confirm". Cancel/dismiss do nothing. */
+    onConfirm: (value: string) => void;
+    /** Forwarded to the inner `TimePicker`. */
+    stepMinutes?: TimePickerProps['stepMinutes'];
+    /** Forwarded to the inner `TimePicker`. */
+    availableTimes?: TimePickerProps['availableTimes'];
+    /** Forwarded to the inner `TimePicker`. */
+    gridVariant?: TimePickerProps['gridVariant'];
+    /**
+     * Extra props spread onto `Modal.Content`, overriding the `size="small"` / `width="xs"` (capped to 312px)
+     * defaults (including `fullscreen`). `className` is merged, not replaced, so the internal padding reset survives.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
+    /** Modal title text. Falls back to the `time-field.modal-title` i18n key. */
+    title?: string;
+}
+export declare const TimePickerModal: {
+    (props: TimePickerModalProps): JSX.Element;
+    displayName: string;
+};
+export default TimePickerModal;

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

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import T from "../../../../../../external/classnames/index.es.js";
+import { useState as _, useEffect as b } from "react";
+import { Heading as v } from "../../../base/typography/heading/heading.es.js";
+import { Button as f } from "../../../buttons/button/button.es.js";
+import { ClosingButton as y } from "../../../buttons/closing-button/closing-button.es.js";
+import { TimePicker as M } from "../../time-picker/time-picker.es.js";
+import l from "./time-picker-modal.module.scss.es.js";
+import { Modal as t } from "../../../overlays/modal/modal.es.js";
+import { useModal as x } from "../../../overlays/modal/modal-context.es.js";
+import { useLabels as B } from "../../../../providers/label-provider/use-labels.es.js";
+const H = ({ title: a }) => {
+  const { labelId: i, onOpenChange: o } = x();
+  return /* @__PURE__ */ d("div", { className: l["tedi-time-picker-modal__header"], children: [
+    /* @__PURE__ */ e(v, { element: "h2", modifiers: "h4", id: i, className: l["tedi-time-picker-modal__title"], children: a }),
+    /* @__PURE__ */ e(y, { size: "small", onClick: () => o(!1) })
+  ] });
+}, P = (a) => {
+  const { open: i, onOpenChange: o, value: m, onConfirm: p, stepMinutes: h, availableTimes: k, gridVariant: u, modalProps: r, title: C } = a, { getLabel: s } = B(), g = C ?? s("time-field.modal-title"), [n, c] = _(m ?? "");
+  b(() => {
+    i && c(m ?? "");
+  }, [i, m]);
+  const N = () => {
+    n && p(n), o(!1);
+  };
+  return /* @__PURE__ */ e(t, { open: i, onToggle: o, children: /* @__PURE__ */ d(
+    t.Content,
+    {
+      size: "small",
+      width: "xs",
+      ...r,
+      className: T(l["tedi-time-picker-modal"], r == null ? void 0 : r.className),
+      children: [
+        /* @__PURE__ */ e(t.Header, { children: /* @__PURE__ */ e(H, { title: g }) }),
+        /* @__PURE__ */ e(t.Body, { className: l["tedi-time-picker-modal__body"], children: /* @__PURE__ */ e(
+          M,
+          {
+            value: n,
+            stepMinutes: h,
+            availableTimes: k,
+            gridVariant: u,
+            onChange: c,
+            bordered: !1,
+            className: l["tedi-time-picker-modal__picker"]
+          }
+        ) }),
+        /* @__PURE__ */ d(t.Footer, { children: [
+          /* @__PURE__ */ e(f, { visualType: "secondary", onClick: () => o(!1), children: s("time-field.cancel") }),
+          /* @__PURE__ */ e(f, { onClick: N, children: s("time-field.confirm") })
+        ] })
+      ]
+    }
+  ) });
+};
+P.displayName = "TimePickerModal";
+export {
+  P as TimePickerModal,
+  P as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker-modal":"tedi-time-picker-modal-10d7ab34","tedi-time-picker-modal__header":"tedi-time-picker-modal__header-8331c682","tedi-time-picker-modal__title":"tedi-time-picker-modal__title-2c759f1e","tedi-time-picker-modal__body":"tedi-time-picker-modal__body-6b342637","tedi-time-picker-modal__picker":"tedi-time-picker-modal__picker-c4de3136"};exports.default=e;

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

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-time-picker-modal": "tedi-time-picker-modal-10d7ab34",
+  "tedi-time-picker-modal__header": "tedi-time-picker-modal__header-8331c682",
+  "tedi-time-picker-modal__title": "tedi-time-picker-modal__title-2c759f1e",
+  "tedi-time-picker-modal__body": "tedi-time-picker-modal__body-6b342637",
+  "tedi-time-picker-modal__picker": "tedi-time-picker-modal__picker-c4de3136"
+};
+export {
+  e as default
+};

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

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

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

@@ -25,7 +25,11 @@ export interface TimeGridProps {
      */
     colWidth?: ColSize | Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>;
     /**
-     * Display mode
+     * Display mode. Both variants render the same `ChoiceGroup` card radio
+     * underneath — the only difference is the leading radio indicator:
+     *
+     * - `'button'` (default) — card with the label only, no dot.
+     * - `'radio'` — card with the radio dot before the label.
      */
     variant?: 'button' | 'radio';
     className?: string;

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

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

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

@@ -1 +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;
+"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:s,selectedMinute:a,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(s),e=l.indexOf(a);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,s,a]);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],a))};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(s,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,a),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(s,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:_?"instant":"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(s)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,s,r=>x(r,a)),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(s))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===s,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(a)}`,onKeyDown:D("minute",l,a,r=>x(s,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(a))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===a,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;

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

@@ -107,7 +107,7 @@ const Y = ({
     }
     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" });
+    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "instant" : "smooth" });
   };
   return j(() => () => {
     d(v.current), d(S.current);

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

@@ -1 +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;
+"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__slot-label":"tedi-time-picker__slot-label-87a1b0e8"};exports.default=e;

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

@@ -6,8 +6,7 @@ const e = {
   "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"
+  "tedi-time-picker__slot-label": "tedi-time-picker__slot-label-87a1b0e8"
 };
 export {
   e as default