@tedi-design-system/react 18.0.0-rc.14 → 18.0.0-rc.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.14",
+  "version": "18.0.0-rc.16",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/stepper/step.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepProps {
     /**
      * ID of step
@@ -32,5 +35,8 @@ export interface StepProps {
      */
     showCompletedIcon?: boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Step: (props: StepProps) => JSX.Element | null;
 export default Step;

package/src/community/components/stepper/stepper-nav.d.ts

@@ -22,6 +22,9 @@ export interface StepperNavItem {
      */
     showCompletedIcon?: boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepperNavProps {
     /**
      * Navigation items
@@ -42,5 +45,8 @@ export interface StepperNavProps {
      */
     notCompletedLabel?: string;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const StepperNav: (props: StepperNavProps) => JSX.Element;
 export default StepperNav;

package/src/community/components/stepper/stepper.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { CardProps } from '../card';
 import { StepProps } from './step';
 import { AllowStepLabelClick } from './stepper-context';
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepperProps {
     /**
      * The activeStep index that should be open by default (zero based index).
@@ -60,5 +63,8 @@ export interface StepperProps {
      */
     card?: CardProps | boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Stepper: (props: StepperProps) => JSX.Element;
 export default Stepper;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=40,u=6,d=()=>Array.from({length:24},(e,t)=>t.toString().padStart(2,"0")),m=e=>{const t=Math.max(1,e??1),r=[];for(let n=0;n<60;n+=t)r.push(n.toString().padStart(2,"0"));return r},T=(e,t)=>{if(!t.length)return"00";const r=Number(e);return isNaN(r)?t[0]:t.reduce((n,s)=>{const o=Math.abs(Number(s)-r),i=Math.abs(Number(n)-r);return o<i||o===i&&Number(s)>Number(n)?s:n},t[0])},p=e=>{if(!e.includes(":"))return{hour:"00",minute:"00"};const[t,r]=e.split(":");return{hour:t.padStart(2,"0"),minute:r.padStart(2,"0")}},f=(e,t)=>{const r=Math.round(e/c);return Math.max(0,Math.min(r,t-1))},l=e=>e*c,S=(e,t,r=1)=>Math.abs(e-t)>r,g=(e,t,r="auto")=>{e.scrollTo({top:l(t),behavior:r})},h=e=>{e&&clearTimeout(e)},a=e=>e?/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(e.trim()):!1,I=e=>{const t=e.trim();if(!t)return"";if(a(t))return t;const r=t.replace(/[^0-9]/g,"");if(r.length===3){const n=r.slice(0,1).padStart(2,"0"),s=r.slice(1),o=`${n}:${s}`;return a(o)?o:null}if(r.length===4){const n=r.slice(0,2),s=r.slice(2),o=`${n}:${s}`;return a(o)?o:null}if(t.includes(":")){const[n,s]=t.split(":"),o=parseInt(n,10),i=parseInt(s,10);if(!isNaN(o)&&!isNaN(i)&&o>=0&&o<=23&&i>=0&&i<=59)return`${o.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}return null};exports.ITEM_HEIGHT=c;exports.TIMEPICKER_OFFSET=u;exports.clearScrollTimeout=h;exports.findClosestMinute=T;exports.generateHours=d;exports.generateMinutes=m;exports.getScrollTopForIndex=l;exports.isValidTime=a;exports.needsScrollCorrection=S;exports.normalizeTime=I;exports.parseTime=p;exports.scrollToIndex=g;exports.snapToNearestItem=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=40,u=2,d=()=>Array.from({length:24},(e,t)=>t.toString().padStart(2,"0")),m=e=>{const t=Math.max(1,e??1),r=[];for(let n=0;n<60;n+=t)r.push(n.toString().padStart(2,"0"));return r},T=(e,t)=>{if(!t.length)return"00";const r=Number(e);return isNaN(r)?t[0]:t.reduce((n,s)=>{const o=Math.abs(Number(s)-r),i=Math.abs(Number(n)-r);return o<i||o===i&&Number(s)>Number(n)?s:n},t[0])},p=e=>{if(!e.includes(":"))return{hour:"00",minute:"00"};const[t,r]=e.split(":");return{hour:t.padStart(2,"0"),minute:r.padStart(2,"0")}},f=(e,t)=>{const r=Math.round(e/c);return Math.max(0,Math.min(r,t-1))},l=e=>e*c,S=(e,t,r=1)=>Math.abs(e-t)>r,g=(e,t,r="auto")=>{e.scrollTo({top:l(t),behavior:r})},h=e=>{e&&clearTimeout(e)},a=e=>e?/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(e.trim()):!1,I=e=>{const t=e.trim();if(!t)return"";if(a(t))return t;const r=t.replace(/[^0-9]/g,"");if(r.length===3){const n=r.slice(0,1).padStart(2,"0"),s=r.slice(1),o=`${n}:${s}`;return a(o)?o:null}if(r.length===4){const n=r.slice(0,2),s=r.slice(2),o=`${n}:${s}`;return a(o)?o:null}if(t.includes(":")){const[n,s]=t.split(":"),o=parseInt(n,10),i=parseInt(s,10);if(!isNaN(o)&&!isNaN(i)&&o>=0&&o<=23&&i>=0&&i<=59)return`${o.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}return null};exports.ITEM_HEIGHT=c;exports.TIMEPICKER_OFFSET=u;exports.clearScrollTimeout=h;exports.findClosestMinute=T;exports.generateHours=d;exports.generateMinutes=m;exports.getScrollTopForIndex=l;exports.isValidTime=a;exports.needsScrollCorrection=S;exports.normalizeTime=I;exports.parseTime=p;exports.scrollToIndex=g;exports.snapToNearestItem=f;

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

@@ -1,5 +1,5 @@
 export declare const ITEM_HEIGHT = 40;
-export declare const TIMEPICKER_OFFSET = 6;
+export declare const TIMEPICKER_OFFSET = 2;
 /**
  * Generates an array of hours (00–23)
  */

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

@@ -1,4 +1,4 @@
-const u = 40, l = 6, d = () => Array.from({ length: 24 }, (n, t) => t.toString().padStart(2, "0")), m = (n) => {
+const u = 40, l = 2, 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"));

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

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

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

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { BreakpointSupport } from '../../../helpers';
+import { Breakpoint, BreakpointSupport } from '../../../helpers';
+import { ModalContentProps } from '../../overlays/modal/modal-content/modal-content';
 import { TextFieldProps } from '../textfield/textfield';
+export type TimeFieldModal = boolean | Exclude<Breakpoint, 'xs'>;
 type TimeFieldBreakpointProps = {
     /**
      * If `true`, the field swaps the custom time-picker popover for the
@@ -91,6 +93,26 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * Array of available times to show in the picker or dropdown.
      */
     availableTimes?: string[];
+    /**
+     * Open the picker inside a modal instead of a floating popover. Useful on
+     * narrow viewports where a popover overlaps the input itself.
+     *
+     * - `true` always opens in a modal
+     * - `false` (default) always uses the popover
+     * - A breakpoint name (e.g. `'md'`) opens in a modal *below* that breakpoint
+     *   and falls back to the popover from that breakpoint up
+     *
+     * Ignored when `useNativePicker` resolves to `true`.
+     * @default false
+     */
+    modal?: TimeFieldModal;
+    /**
+     * Extra props forwarded to the picker modal's `Modal.Content` — e.g. `size`, `width`, `maxWidth`,
+     * `position`, `fullscreen`, and per-breakpoint overrides. Lets the consumer tune the modal beyond
+     * its `size="small"` / `width="xs"` (capped to 312px) defaults. `className` is merged with the component's own (so
+     * the internal padding reset is preserved). Only applies when the picker opens as a modal.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
 }
 export declare const TimeField: React.FC<TimeFieldProps>;
 export {};

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;