@tedi-design-system/react 19.2.0-rc.5 → 19.2.0-rc.7

package/src/tedi/components/form/textfield/textfield.es.js

@@ -1,73 +1,74 @@
 import { jsx as n, jsxs as S } from "react/jsx-runtime";
 import _ from "../../../../../external/classnames/index.es.js";
-import y, { forwardRef as be, useMemo as b, useCallback as w } from "react";
+import y, { forwardRef as Ie, useMemo as b, useCallback as w } from "react";
 import { Icon as D } from "../../base/icon/icon.es.js";
-import { ClosingButton as Ie } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as ge } from "../../misc/separator/separator.es.js";
+import { ClosingButton as ge } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as Ne } from "../../misc/separator/separator.es.js";
 import { FeedbackText as U } from "../feedback-text/feedback-text.es.js";
-import { Field as Ne } from "../field/field.es.js";
-import { FormLabel as Ae } from "../form-label/form-label.es.js";
-import { useOptionalInputGroup as Ce } from "../input-group/input-group.es.js";
+import { Field as Ae } from "../field/field.es.js";
+import { FormLabel as Ce } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as ke } from "../input-group/input-group.es.js";
 import r from "./textfield.module.scss.es.js";
-import { useBreakpointProps as ke } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Se } from "../../../providers/label-provider/use-labels.es.js";
-const we = {
+import { useBreakpointProps as Se } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as we } from "../../../providers/label-provider/use-labels.es.js";
+const Be = {
   large: 24,
   default: 18
-}, Be = be((I, J) => {
+}, ze = Ie((I, J) => {
   var M;
-  const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
-    id: ze,
+  const { getCurrentBreakpointProps: Q } = Se(I.defaultServerBreakpoint), {
+    id: Fe,
     label: g,
     className: W,
     inputClassName: X,
     disabled: d,
     required: B,
     hideLabel: z,
+    labelProps: Y,
     invalid: f,
     readOnly: F,
     icon: i,
     onIconClick: x,
     iconButtonProps: p,
     size: s = "default",
-    placeholder: Y,
-    isArrowsHidden: Z = !0,
+    placeholder: Z,
+    isArrowsHidden: G = !0,
     isClearable: R,
-    showClearOnInteraction: G,
+    showClearOnInteraction: ee,
     onClear: v,
     onChange: o,
-    onChangeEvent: ee,
-    onKeyUp: re,
-    onKeyDown: te,
-    onKeyPress: ae,
+    onChangeEvent: re,
+    onKeyUp: te,
+    onKeyDown: ae,
+    onKeyPress: ie,
     defaultValue: $,
     value: N,
     onFocus: A,
     onBlur: C,
-    onClick: ie,
+    onClick: le,
     helper: e,
     input: a,
-    name: le,
-    isTextArea: ne,
-    startSlot: se,
-    endSlot: oe,
-    ...de
-  } = Q(I) || {}, { getLabel: L } = Se(), O = y.useRef(null), T = y.useRef(null), [ce, E] = y.useState(N ?? $ ?? ""), P = N ?? ce, c = !!(R && P && !F), m = (M = Ce) == null ? void 0 : M(), fe = y.useId(), me = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? fe;
+    name: ne,
+    isTextArea: se,
+    startSlot: oe,
+    endSlot: de,
+    ...ce
+  } = Q(I) || {}, { getLabel: L } = we(), O = y.useRef(null), P = y.useRef(null), [fe, T] = y.useState(N ?? $ ?? ""), E = N ?? fe, c = !!(R && E && !F), m = (M = ke) == null ? void 0 : M(), me = y.useId(), ue = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? me;
   y.useImperativeHandle(J, () => ({
     get input() {
-      return T.current;
+      return P.current;
     },
     get inner() {
       return O.current;
     }
   }));
-  const V = b(() => Array.isArray(e) ? f || e.some((t) => t.type === "error") : f || (e == null ? void 0 : e.type) === "error", [f, e]), ue = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !f && e.every((t) => t.type === "valid") : !f && e.type === "valid", [f, e]), pe = s === "large" ? "default" : s, h = N !== void 0, ye = w(
+  const V = b(() => Array.isArray(e) ? f || e.some((t) => t.type === "error") : f || (e == null ? void 0 : e.type) === "error", [f, e]), pe = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !f && e.every((t) => t.type === "valid") : !f && e.type === "valid", [f, e]), ye = s === "large" ? "default" : s, h = N !== void 0, xe = w(
     (t) => {
-      h || E(t), o == null || o(t);
+      h || T(t), o == null || o(t);
     },
     [h, o]
   ), j = w(() => {
-    h || E(""), o == null || o(""), v == null || v();
+    h || T(""), o == null || o(""), v == null || v();
   }, [h, o, v]), H = w(() => {
     if (!i) return null;
     const k = {
@@ -86,35 +87,35 @@ const we = {
       }
     ) : /* @__PURE__ */ n("div", { className: r["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(D, { ...q }) });
   }, [i, s, x, p, d]), K = b(() => c ? /* @__PURE__ */ n(
-    Ie,
+    ge,
     {
-      iconSize: we[s === "large" ? "large" : "default"],
+      iconSize: Be[s === "large" ? "large" : "default"],
       onClick: d ? void 0 : j,
       disabled: d,
       title: L("clear"),
       className: r["tedi-textfield__clear-button"]
     }
-  ) : null, [c, s, d, j, L]), xe = b(() => !c && !i ? null : /* @__PURE__ */ S("div", { className: r["tedi-textfield__right-area"], children: [
+  ) : null, [c, s, d, j, L]), ve = b(() => !c && !i ? null : /* @__PURE__ */ S("div", { className: r["tedi-textfield__right-area"], children: [
     K,
-    c && i && /* @__PURE__ */ n(ge, { color: "primary", axis: "vertical", className: r["tedi-textfield__separator"] }),
+    c && i && /* @__PURE__ */ n(Ne, { color: "primary", axis: "vertical", className: r["tedi-textfield__separator"] }),
     i && H()
-  ] }), [c, i, K, H]), ve = /* @__PURE__ */ n(
-    Ne,
+  ] }), [c, i, K, H]), he = /* @__PURE__ */ n(
+    Ae,
     {
       ...a,
       id: u,
-      name: le,
-      value: P,
+      name: ne,
+      value: E,
       defaultValue: $,
-      onChange: ye,
-      onChangeEvent: ee,
+      onChange: xe,
+      onChangeEvent: re,
       disabled: d,
       readOnly: F || (a == null ? void 0 : a.readOnly),
       required: B,
       invalid: V,
-      placeholder: Y,
+      placeholder: Z,
       className: _(r["tedi-textfield__input"], X, {
-        [r["tedi-textfield__input--hidden-arrows"]]: Z
+        [r["tedi-textfield__input--hidden-arrows"]]: G
       }),
       onFocus: (t) => {
         var l;
@@ -124,45 +125,55 @@ const we = {
         var l;
         (l = a == null ? void 0 : a.onBlur) == null || l.call(a, t), C == null || C(t);
       },
-      isTextArea: ne,
+      isTextArea: se,
       "aria-describedby": !e || Array.isArray(e) && e.length === 0 ? void 0 : Array.isArray(e) ? e.map((t, l) => `${u}-helper-${l}`).join(" ") : `${u}-helper`,
       "aria-label": z && typeof g == "string" ? g : void 0,
-      ref: T
+      ref: P
     }
-  ), he = _(
+  ), _e = _(
     r["tedi-textfield"],
     { [r[`tedi-textfield--${s}`]]: s },
     { [r["tedi-textfield--with-icon"]]: i },
     { [r["tedi-textfield--invalid"]]: V },
-    { [r["tedi-textfield--valid"]]: ue },
+    { [r["tedi-textfield--valid"]]: pe },
     { [r["tedi-textfield--clearable"]]: c },
-    { [r["tedi-textfield--clear-on-interaction"]]: c && G },
+    { [r["tedi-textfield--clear-on-interaction"]]: c && ee },
     W
-  ), _e = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: r["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((t, l) => /* @__PURE__ */ n(U, { ...t, id: `${u}-helper-${l}` }, l)) : /* @__PURE__ */ n(U, { ...e, id: `${u}-helper` }) });
-  return /* @__PURE__ */ S("div", { "data-name": "textfield", ...de, className: he, children: [
-    !me && /* @__PURE__ */ n(Ae, { id: u, label: g, required: B, hideLabel: z, size: pe }),
+  ), be = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: r["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((t, l) => /* @__PURE__ */ n(U, { ...t, id: `${u}-helper-${l}` }, l)) : /* @__PURE__ */ n(U, { ...e, id: `${u}-helper` }) });
+  return /* @__PURE__ */ S("div", { "data-name": "textfield", ...ce, className: _e, children: [
+    !ue && /* @__PURE__ */ n(
+      Ce,
+      {
+        id: u,
+        label: g,
+        required: B,
+        hideLabel: z,
+        size: ye,
+        labelProps: Y
+      }
+    ),
     /* @__PURE__ */ S(
       "div",
       {
         className: r["tedi-textfield__inner"],
-        onKeyDown: te,
-        onKeyUp: re,
-        onKeyPress: ae,
-        onClick: ie,
+        onKeyDown: ae,
+        onKeyUp: te,
+        onKeyPress: ie,
+        onClick: le,
         ref: O,
         children: [
-          se,
-          ve,
           oe,
-          (R || i) && xe
+          he,
+          de,
+          (R || i) && ve
         ]
       }
     ),
-    _e()
+    be()
   ] });
 });
-Be.displayName = "TextField";
+ze.displayName = "TextField";
 export {
-  Be as TextField,
-  Be as default
+  ze as TextField,
+  ze as default
 };

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

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

@@ -47,6 +47,11 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * Label for the input field. Used for accessibility.
      */
     label: string;
+    /**
+     * Props forwarded to the field's label (e.g. `{ modifiers: 'nowrap' }` to control
+     * how a long label wraps). Breakpoint keys are supported for responsive wrapping.
+     */
+    labelProps?: TextFieldProps['labelProps'];
     /**
      * Current value of the time field (controlled).
      */

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

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

package/src/tedi/components/form/toggle/toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),P=require("../feedback-text/feedback-text.cjs.js"),M=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:o,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,...$}=k,h=a?`${o}-helper`:void 0,[z,S]=m.useState(g??!1),i=typeof n<"u",c=i?n:z,p=C||(u?"large":"default"),L=b=>{s||(i||S(b.target.checked),d==null||d(b.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(M.FormLabel,{id:o,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:o,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:i?c:void 0,defaultChecked:i?void 0:g,disabled:f||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(P.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),M=require("../feedback-text/feedback-text.cjs.js"),O=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:i,label:t,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,labelProps:$,...z}=k,h=a?`${i}-helper`:void 0,[S,L]=m.useState(g??!1),o=typeof n<"u",c=o?n:S,p=C||(u?"large":"default"),F=b=>{s||(o||L(b.target.checked),d==null||d(b.target.checked))},I=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),P=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:P,children:[t&&l.jsx(O.FormLabel,{id:i,className:e.default["tedi-toggle__label"],hideLabel:j,label:t,tooltip:T,labelProps:$}),l.jsxs("div",{className:I,children:[l.jsx("input",{...z,ref:x,id:i,type:"checkbox",role:"switch","aria-label":typeof t=="string"?t:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:o?c:void 0,defaultChecked:o?void 0:g,disabled:f||s,onChange:F}),l.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?l.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?l.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&l.jsx(M.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;

package/src/tedi/components/form/toggle/toggle.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FormLabelProps } from '../form-label/form-label';
 export interface ToggleProps {
     /**
      * Unique identifier for the toggle input.
@@ -87,6 +88,12 @@ export interface ToggleProps {
      * Useful for providing extra explanation without cluttering the UI.
      */
     tooltip?: string;
+    /**
+     * Additional props forwarded to the underlying `Label` component.
+     * Use `modifiers` to control how the label text wraps or breaks
+     * (e.g. `{ modifiers: 'nowrap' }`).
+     */
+    labelProps?: FormLabelProps['labelProps'];
 }
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
 export default Toggle;