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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0-rc.7",
+  "version": "17.1.0-rc.8",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),v=n=>{const{getCurrentBreakpointProps:_}=O.useBreakpointProps(n.defaultServerBreakpoint),{id:c,label:k,value:a,className:q,direction:m,disabled:d,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:I,helper:r,tooltip:B,type:u="radio",variant:s="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=_(n),{currentValue:l,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(l)?l.includes(a):a===l,M=l===void 0?n.defaultChecked:i,y=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],u&&e.default[`tedi-choice-group-item--${u}`],{[e.default["tedi-choice-group-item--disabled"]]:d},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=u==="radio"?H.Radio:S.Checkbox,F=o=>{var j;d||s!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,tabIndex:d?-1:0,onClick:F,role:u,"aria-checked":i,children:s==="default"||C?t.jsx(E,{id:c,label:k,value:a,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],q),disabled:d,checked:i,defaultChecked:M,onChange:y,hideLabel:I,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:d,checked:i,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:o=>{y(a,o.target.checked)},className:"visually-hidden",role:u==="radio"?"radio":void 0,"aria-checked":i,tabIndex:-1}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[k,r&&t.jsx(A.FeedbackText,{...r,id:c,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=v;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),A=require("../../../checkbox/checkbox.cjs.js"),H=require("../../../feedback-text/feedback-text.cjs.js"),L=require("../../../radio/radio.cjs.js"),O=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),V=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../../layout/grid/col.cjs.js"),_=n=>{const{getCurrentBreakpointProps:q}=V.useBreakpointProps(n.defaultServerBreakpoint),{id:a,label:C,value:d,className:N,direction:m,disabled:r,colProps:I=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:u,tooltip:$,type:o="radio",variant:s="default",color:G="primary",layout:P,showIndicator:x,justifyContent:b="start"}=q(n),{currentValue:l,name:v,onChange:f,inputType:M}=S.useContext(O.ChoiceGroupContext),i=Array.isArray(l)?l.includes(d):d===l,R=l===void 0?n.defaultChecked:i,y=(c,k)=>{f==null||f(c,k),p==null||p(c,k)},T=h.default(e.default[`tedi-choice-group-item--${P==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],x&&e.default["tedi-choice-group-item--indicator"],o&&e.default[`tedi-choice-group-item--${o}`],{[e.default["tedi-choice-group-item--disabled"]]:r},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${b}`]:b}),E=o==="radio"?L.Radio:A.Checkbox,F=c=>{var j;r||s!=="card"||c.target.closest("input, label")||(j=document.getElementById(a))==null||j.click()},g=o==="radio";return t.jsx(z.Col,{...I,className:T,children:t.jsx("div",{className:w,tabIndex:g||r?-1:0,onClick:F,role:g?void 0:o,"aria-checked":g?void 0:i,children:s==="default"||x?t.jsx(E,{id:a,label:C,value:d,name:v,className:h.default(e.default["tedi-choice-group-item__indicator"],N),disabled:r,checked:i,defaultChecked:R,onChange:y,hideLabel:B,helper:u?{...u,className:h.default(e.default["tedi-choice-group-item__feedback-text"],u.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:a,value:d,name:v,type:M,disabled:r,checked:i,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:c=>{y(d,c.target.checked)},className:"visually-hidden",role:o==="radio"?"radio":void 0,"aria-checked":i,tabIndex:-1}),t.jsxs("label",{htmlFor:a,className:e.default["tedi-choice-group-item__label"],children:[C,u&&t.jsx(H.FeedbackText,{...u,id:a,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=_;exports.default=_;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js

@@ -1,105 +1,105 @@
-import { jsx as l, jsxs as _, Fragment as M } from "react/jsx-runtime";
+import { jsx as s, jsxs as _, Fragment as H } from "react/jsx-runtime";
 import u from "../../../../../../../external/classnames/index.es.js";
-import R from "react";
-import { Checkbox as T } from "../../../checkbox/checkbox.es.js";
-import { FeedbackText as H } from "../../../feedback-text/feedback-text.es.js";
-import { Radio as L } from "../../../radio/radio.es.js";
-import { ChoiceGroupContext as S } from "../../choice-group-context.es.js";
+import L from "react";
+import { Checkbox as S } from "../../../checkbox/checkbox.es.js";
+import { FeedbackText as V } from "../../../feedback-text/feedback-text.es.js";
+import { Radio as q } from "../../../radio/radio.es.js";
+import { ChoiceGroupContext as z } from "../../choice-group-context.es.js";
 import e from "./choice-group-item.module.scss.es.js";
-import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
-import { Col as q } from "../../../../layout/grid/col.es.js";
-const te = (s) => {
-  const { getCurrentBreakpointProps: v } = V(s.defaultServerBreakpoint), {
-    id: i,
-    label: k,
-    value: c,
-    className: I,
+import { useBreakpointProps as D } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Col as J } from "../../../../layout/grid/col.es.js";
+const oe = (l) => {
+  const { getCurrentBreakpointProps: $ } = D(l.defaultServerBreakpoint), {
+    id: c,
+    label: C,
+    value: r,
+    className: B,
     direction: h,
-    disabled: r,
-    colProps: $ = h === "column" ? { width: 12 } : { width: "auto" },
+    disabled: a,
+    colProps: I = h === "column" ? { width: 12 } : { width: "auto" },
     onChange: p,
-    hideLabel: B,
-    helper: a,
-    tooltip: j,
-    type: d = "radio",
+    hideLabel: j,
+    helper: d,
+    tooltip: w,
+    type: o = "radio",
     variant: m = "default",
-    color: w = "primary",
-    layout: E,
-    showIndicator: C,
-    justifyContent: b = "start"
-  } = v(s), { currentValue: n, name: y, onChange: f, inputType: F } = R.useContext(S), t = Array.isArray(n) ? n.includes(c) : c === n, G = n === void 0 ? s.defaultChecked : t, x = (o, g) => {
-    f == null || f(o, g), p == null || p(o, g);
-  }, P = u(
-    e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
+    color: E = "primary",
+    layout: F,
+    showIndicator: b,
+    justifyContent: y = "start"
+  } = $(l), { currentValue: n, name: v, onChange: f, inputType: G } = L.useContext(z), t = Array.isArray(n) ? n.includes(r) : r === n, P = n === void 0 ? l.defaultChecked : t, x = (i, k) => {
+    f == null || f(i, k), p == null || p(i, k);
+  }, R = u(
+    e[`tedi-choice-group-item--${F === "separated" ? "separated" : "segmented"}`],
     h && e[`tedi-choice-group-item--${h}`]
   ), A = u(
     e["tedi-choice-group-item"],
     e[`tedi-choice-group-item--${m}`],
-    e[`tedi-choice-group-item--${m}-${w}`],
-    C && e["tedi-choice-group-item--indicator"],
-    d && e[`tedi-choice-group-item--${d}`],
-    { [e["tedi-choice-group-item--disabled"]]: r },
+    e[`tedi-choice-group-item--${m}-${E}`],
+    b && e["tedi-choice-group-item--indicator"],
+    o && e[`tedi-choice-group-item--${o}`],
+    { [e["tedi-choice-group-item--disabled"]]: a },
     { [e["tedi-choice-group-item--checked"]]: t },
-    { [`justify-content-${b}`]: b }
-  );
-  return /* @__PURE__ */ l(q, { ...$, className: P, children: /* @__PURE__ */ l(
+    { [`justify-content-${y}`]: y }
+  ), M = o === "radio" ? q : S, T = (i) => {
+    var N;
+    a || m !== "card" || i.target.closest("input, label") || (N = document.getElementById(c)) == null || N.click();
+  }, g = o === "radio";
+  return /* @__PURE__ */ s(J, { ...I, className: R, children: /* @__PURE__ */ s(
     "div",
     {
       className: A,
-      tabIndex: r ? -1 : 0,
-      onClick: (o) => {
-        var N;
-        r || m !== "card" || o.target.closest("input, label") || (N = document.getElementById(i)) == null || N.click();
-      },
-      role: d,
-      "aria-checked": t,
-      children: m === "default" || C ? /* @__PURE__ */ l(
-        d === "radio" ? L : T,
+      tabIndex: g || a ? -1 : 0,
+      onClick: T,
+      role: g ? void 0 : o,
+      "aria-checked": g ? void 0 : t,
+      children: m === "default" || b ? /* @__PURE__ */ s(
+        M,
         {
-          id: i,
-          label: k,
-          value: c,
-          name: y,
-          className: u(e["tedi-choice-group-item__indicator"], I),
-          disabled: r,
+          id: c,
+          label: C,
+          value: r,
+          name: v,
+          className: u(e["tedi-choice-group-item__indicator"], B),
+          disabled: a,
           checked: t,
-          defaultChecked: G,
+          defaultChecked: P,
           onChange: x,
-          hideLabel: B,
-          helper: a ? { ...a, className: u(e["tedi-choice-group-item__feedback-text"], a.className) } : void 0,
-          tooltip: j,
+          hideLabel: j,
+          helper: d ? { ...d, className: u(e["tedi-choice-group-item__feedback-text"], d.className) } : void 0,
+          tooltip: w,
           "data-testid": "choice-group-item-indicator",
           "aria-checked": t
         }
-      ) : /* @__PURE__ */ _(M, { children: [
-        /* @__PURE__ */ l(
+      ) : /* @__PURE__ */ _(H, { children: [
+        /* @__PURE__ */ s(
           "input",
           {
-            id: i,
-            value: c,
-            name: y,
-            type: F,
-            disabled: r,
+            id: c,
+            value: r,
+            name: v,
+            type: G,
+            disabled: a,
             checked: t,
-            defaultChecked: n === void 0 ? s.defaultChecked : void 0,
-            onChange: (o) => {
-              x(c, o.target.checked);
+            defaultChecked: n === void 0 ? l.defaultChecked : void 0,
+            onChange: (i) => {
+              x(r, i.target.checked);
             },
             className: "visually-hidden",
-            role: d === "radio" ? "radio" : void 0,
+            role: o === "radio" ? "radio" : void 0,
             "aria-checked": t,
             tabIndex: -1
           }
         ),
-        /* @__PURE__ */ _("label", { htmlFor: i, className: e["tedi-choice-group-item__label"], children: [
-          k,
-          a && /* @__PURE__ */ l(H, { ...a, id: i, className: e["tedi-choice-group-item__feedback-text"] })
+        /* @__PURE__ */ _("label", { htmlFor: c, className: e["tedi-choice-group-item__label"], children: [
+          C,
+          d && /* @__PURE__ */ s(V, { ...d, id: c, className: e["tedi-choice-group-item__feedback-text"] })
         ] })
       ] })
     }
   ) });
 };
 export {
-  te as ChoiceGroupItem,
-  te as default
+  oe as ChoiceGroupItem,
+  oe as default
 };

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

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

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

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

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

@@ -0,0 +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;

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

@@ -0,0 +1,51 @@
+export declare const ITEM_HEIGHT = 40;
+export declare const TIMEPICKER_OFFSET = 6;
+/**
+ * Generates an array of hours (00–23)
+ */
+export declare const generateHours: () => string[];
+/**
+ * Generates minute values based on a step (e.g. 5, 10, 15)
+ */
+export declare const generateMinutes: (stepMinutes: number) => string[];
+/**
+ * Finds the closest available minute to a target value
+ */
+export declare const findClosestMinute: (target: string, mins: string[]) => string;
+/**
+ * Parses HH:mm time string
+ */
+export declare const parseTime: (time: string) => {
+    hour: string;
+    minute: string;
+};
+/**
+ * Returns nearest wheel index from scroll position
+ */
+export declare const snapToNearestItem: (scrollTop: number, length: number) => number;
+/**
+ * Returns scrollTop position for index
+ */
+export declare const getScrollTopForIndex: (index: number) => number;
+/**
+ * Checks if scroll correction is needed
+ */
+export declare const needsScrollCorrection: (current: number, target: number, tolerance?: number) => boolean;
+/**
+ * Scrolls element to index
+ */
+export declare const scrollToIndex: (element: HTMLDivElement, index: number, behavior?: ScrollBehavior) => void;
+/**
+ * Clears scroll timeout safely
+ */
+export declare const clearScrollTimeout: (timeout?: NodeJS.Timeout) => void;
+export declare const isValidTime: (time: string) => boolean;
+/**
+ * Normalizes common typing patterns into HH:mm or returns null if impossible
+ * Examples:
+ *   "9:5"   → "09:05"
+ *   "14:5"  → "14:05"
+ *   "2359"  → "23:59"
+ *   "4:89"  → null
+ */
+export declare const normalizeTime: (input: string) => string | null;