@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.10

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

@@ -1,40 +1,42 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as w } from "react";
-import { Button as L } from "../../buttons/button/button.es.js";
+import { forwardRef as L } from "react";
+import { Button as b } from "../../buttons/button/button.es.js";
 import { TextField as k } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const b = w(
+const j = L(
   ({
     placeholder: t,
-    isClearable: m = !0,
-    searchIcon: o = "search",
+    isClearable: o = !0,
+    searchIcon: m = "search",
     onSearch: s,
     onChange: d,
     button: e,
     ariaLabel: p,
     className: n,
+    input: f,
     ...r
-  }, f) => {
-    const { getLabel: i } = C(), h = (y) => {
-      y.key === "Enter" && (s == null || s(r.value));
+  }, h) => {
+    const { getLabel: i } = C(), u = (v) => {
+      v.key === "Enter" && (s == null || s(r.value));
     }, _ = () => {
       s == null || s(r.value);
-    }, u = {
+    }, x = {
       ...r,
-      ref: f,
+      ref: h,
       inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
-      isClearable: m,
-      onKeyDown: h,
+      isClearable: o,
+      onKeyDown: u,
       onChange: d,
-      ...e ? {} : { icon: o }
-    }, N = t || i("search"), x = p ?? N;
-    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
-      /* @__PURE__ */ c(k, { ...u }),
+      input: { ...f, role: "searchbox" },
+      ...e ? {} : { icon: m }
+    }, N = t || i("search"), y = p ?? N;
+    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
+      /* @__PURE__ */ c(k, { ...x }),
       e && /* @__PURE__ */ c(
-        L,
+        b,
         {
           ...e,
           onClick: _,
@@ -46,7 +48,7 @@ const b = w(
     ] });
   }
 );
-b.displayName = "Search";
+j.displayName = "Search";
 export {
-  b as Search
+  j as Search
 };

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

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

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

@@ -56,6 +56,15 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Disables the input and the picker. Equivalent of `<DateTimeField disabled>`
+     * — added so all three field siblings (`DateField`, `TimeField`,
+     * `DateTimeField`) share the same form-control idiom for "this field is
+     * fully unavailable". Forwards to the underlying `TextField`'s `disabled`
+     * attribute and short-circuits the picker open path.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Marks the input as required.
      */

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

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

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),v=require("../../../../../../../external/classnames/index.cjs.js"),N=require("../../../../base/icon/icon.cjs.js"),h=require("../../../../buttons/button/button.cjs.js"),q=require("../../../../buttons/floating-button/floating-button.cjs.js"),l=require("./mobile-nav-toggle.module.scss.cjs.js"),x=require("../../../../../providers/label-provider/use-labels.cjs.js"),n=({menuOpen:e,toggleMenu:i,referenceRef:c,getReferenceProps:d=()=>({}),variant:o="mobile",showLabel:m=!1,label:t,className:_})=>{const{getLabel:y}=x.useLabels(),u=t!==void 0?typeof t=="function"?t(e):t:y("header.toggle",e),g=o==="collapse"?e?"right_panel_open":"left_panel_open":e?"close":"menu",r=m&&o==="mobile",b=v.default(l.default["tedi-mobile-nav-toggle"],{[l.default["tedi-mobile-nav-toggle--open"]]:e,[l.default[`tedi-mobile-nav-toggle--${o}`]]:!0,[l.default["tedi-mobile-nav-toggle--with-label"]]:r},_),f=a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),i(!e))};if(r)return s.jsxs("button",{...d(),ref:c,type:"button","aria-expanded":e,className:b,onClick:()=>i(!e),onKeyDown:f,children:[s.jsx(N.Icon,{name:g,size:24,className:l.default["tedi-mobile-nav-toggle__icon"],color:"inherit"}),s.jsx("span",{className:l.default["tedi-mobile-nav-toggle__label"],children:u})]});const p=o==="collapse"?q.FloatingButton:h.Button;return s.jsx(p,{...d(),ref:c,icon:{name:g,className:l.default["tedi-mobile-nav-toggle__icon"],size:o==="collapse"?18:24},visualType:o==="collapse"?"secondary":"primary",className:b,onClick:()=>i(!e),onKeyDown:f,position:o==="collapse"?"absolute":"static",size:o==="collapse"?"small":"",children:u})},T=n;exports.MobileNavToggle=n;exports.SidenavToggle=T;exports.default=n;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { UnknownType } from '../../../../../types/commonTypes';
+export type MobileNavToggleVariant = 'mobile' | 'collapse';
+export type MobileNavToggleProps = {
+    /**
+     * Is the menu open (for mobile) or expanded (for collapse)
+     */
+    menuOpen: boolean;
+    /**
+     * Toggle open/collapse state
+     */
+    toggleMenu: (open: boolean) => void;
+    /**
+     * Optional ref to attach to button (for floating UI etc.)
+     */
+    referenceRef?: React.Ref<UnknownType>;
+    /**
+     * Optional props passed from floating UI
+     */
+    getReferenceProps?: () => UnknownType;
+    /**
+     * Variant of toggle (mobile overlay or collapse control)
+     */
+    variant?: MobileNavToggleVariant;
+    /**
+     * Show the open/close label visibly below the icon (mobile variant only).
+     * The label text comes from the `header.toggle` i18n key by default — pass
+     * `label` to override it. When `false` (default), the button renders
+     * icon-only and the label is still exposed as accessible text.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Override the toggle's label text. Accepts a static `ReactNode` (used for
+     * both states) or a function that returns a `ReactNode` for the current
+     * `menuOpen` state (e.g. `(open) => open ? 'Sulge' : 'Menüü'`). When
+     * omitted, the label falls back to the `header.toggle` i18n value.
+     */
+    label?: React.ReactNode | ((menuOpen: boolean) => React.ReactNode);
+    /**
+     * Add custom class to override styles
+     */
+    className?: string;
+};
+export declare const MobileNavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggle` — same component, vendor-neutral name. */
+export declare const SidenavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggleProps`. */
+export type SidenavToggleProps = MobileNavToggleProps;
+/** @deprecated Use `MobileNavToggleVariant`. */
+export type SidenavToggleVariant = MobileNavToggleVariant;
+export default MobileNavToggle;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.es.js

@@ -0,0 +1,68 @@
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import h from "../../../../../../../external/classnames/index.es.js";
+import { Icon as N } from "../../../../base/icon/icon.es.js";
+import { Button as u } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as v } from "../../../../buttons/floating-button/floating-button.es.js";
+import l from "./mobile-nav-toggle.module.scss.es.js";
+import { useLabels as L } from "../../../../../providers/label-provider/use-labels.es.js";
+const k = ({
+  menuOpen: o,
+  toggleMenu: s,
+  referenceRef: c,
+  getReferenceProps: n = () => ({}),
+  variant: e = "mobile",
+  showLabel: b = !1,
+  label: t,
+  className: f
+}) => {
+  const { getLabel: y } = L(), m = t !== void 0 ? typeof t == "function" ? t(o) : t : y("header.toggle", o), r = e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu", g = b && e === "mobile", d = h(
+    l["tedi-mobile-nav-toggle"],
+    {
+      [l["tedi-mobile-nav-toggle--open"]]: o,
+      [l[`tedi-mobile-nav-toggle--${e}`]]: !0,
+      [l["tedi-mobile-nav-toggle--with-label"]]: g
+    },
+    f
+  ), p = (i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s(!o));
+  };
+  return g ? /* @__PURE__ */ _(
+    "button",
+    {
+      ...n(),
+      ref: c,
+      type: "button",
+      "aria-expanded": o,
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      children: [
+        /* @__PURE__ */ a(N, { name: r, size: 24, className: l["tedi-mobile-nav-toggle__icon"], color: "inherit" }),
+        /* @__PURE__ */ a("span", { className: l["tedi-mobile-nav-toggle__label"], children: m })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    e === "collapse" ? v : u,
+    {
+      ...n(),
+      ref: c,
+      icon: {
+        name: r,
+        className: l["tedi-mobile-nav-toggle__icon"],
+        size: e === "collapse" ? 18 : 24
+      },
+      visualType: e === "collapse" ? "secondary" : "primary",
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      position: e === "collapse" ? "absolute" : "static",
+      size: e === "collapse" ? "small" : "",
+      children: m
+    }
+  );
+}, j = k;
+export {
+  k as MobileNavToggle,
+  j as SidenavToggle,
+  k as default
+};

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-mobile-nav-toggle":"tedi-mobile-nav-toggle-923946d1","tedi-mobile-nav-toggle--collapse":"tedi-mobile-nav-toggle--collapse-4434a2d6","tedi-mobile-nav-toggle--with-label":"tedi-mobile-nav-toggle--with-label-703a307f","tedi-mobile-nav-toggle__label":"tedi-mobile-nav-toggle__label-9cd8a16e"};exports.default=e;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.es.js

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-mobile-nav-toggle": "tedi-mobile-nav-toggle-923946d1",
+  "tedi-mobile-nav-toggle--collapse": "tedi-mobile-nav-toggle--collapse-4434a2d6",
+  "tedi-mobile-nav-toggle--with-label": "tedi-mobile-nav-toggle--with-label-703a307f",
+  "tedi-mobile-nav-toggle__label": "tedi-mobile-nav-toggle__label-9cd8a16e"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/mobile-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mobile-nav';
+export * from './components/mobile-nav-toggle/mobile-nav-toggle';

package/src/tedi/components/layout/mobile-nav/mobile-nav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),d=require("../../base/icon/icon.cjs.js"),f=require("../../buttons/button/button.cjs.js"),M=require("../sidenav/components/sidenav-item/sidenav-item.cjs.js"),n=require("../sidenav/sidenav.module.scss.cjs.js"),D=require("../../../providers/label-provider/use-labels.cjs.js"),q=({navItems:h,ariaLabel:y,linkAs:v,isOpen:w,onClose:r,showOverlay:B=!0,id:G,className:P})=>{var k,g,p,I,S,C,L;const{getLabel:b}=D.useLabels(),[s,c]=m.useState([{items:h}]);m.useEffect(()=>{c([{items:h}])},[h]);const a=s[s.length-1],R=s.length===1,x=e=>{var _;const i=!!(e.subItems||e.subItemGroups),o=!!(e.href||e.to);if(!i){r();return}const u=((_=e.subItemGroups)==null?void 0:_.flatMap(H=>H.subItems))||e.subItems||[];c([...s,{items:u,parent:e,renderParentLink:o}])},T=()=>{c(s.slice(0,-1))},z=()=>{c([s[0]])},F=((g=(k=a.parent)==null?void 0:k.subItems)==null?void 0:g.length)??((I=(p=a.parent)==null?void 0:p.subItemGroups)==null?void 0:I.length),O=s.length>1&&!(a.renderParentLink&&F),N=(e,i)=>i===1?!(e.subItems||e.subItemGroups)?t.jsx(M.SideNavItem,{...e,as:v,level:i,onItemClick:r,className:l.default(n.default["tedi-sidenav__item--mobile"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"],n.default["tedi-sidenav__item--mobile"]),children:t.jsxs("button",{onClick:()=>x(e),className:n.default["tedi-sidenav__link"],children:[e.icon&&t.jsx(d.Icon,{name:typeof e.icon=="string"?e.icon:e.icon.name,color:"white",className:n.default["tedi-sidenav__icon"]}),t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]})]})}):E(e,i),E=(e,i)=>{const o=!!(e.href||e.to),u=!!(e.subItems||e.subItemGroups);return o?t.jsx(M.SideNavItem,{...e,as:v,level:i,icon:void 0,onItemClick:r,className:l.default(n.default["tedi-sidenav__sub-item"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"]),children:t.jsxs(f.Button,{noStyle:!0,onClick:()=>u?x(e):r(),className:n.default["tedi-sidenav__link"],children:[t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),u?t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]}):null]})})},j=t.jsxs("nav",{"data-name":"mobile-sidenav",className:l.default(n.default["tedi-sidenav"],n.default["tedi-sidenav--mobile"],P),"aria-label":y,id:G,children:[t.jsx("div",{className:n.default["tedi-sidenav__list"],children:!R&&t.jsxs("div",{className:n.default["tedi-sidenav__back-buttons"],children:[s.length>1&&t.jsxs(f.Button,{noStyle:!0,onClick:z,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:b("sidenav.backToMainMenu")})]}),s.length>2&&t.jsxs(f.Button,{noStyle:!0,onClick:T,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:((C=(S=s[s.length-1])==null?void 0:S.parent)==null?void 0:C.children)+" "+b("sidenav.backtoMenu")})]})]})}),O&&t.jsx("div",{className:l.default(n.default["tedi-sidenav__subheading"],n.default["tedi-sidenav__subheading--mobile"]),children:(L=a.parent)==null?void 0:L.children}),t.jsxs("ul",{className:n.default["tedi-sidenav__list"],role:"menubar",children:[a.renderParentLink&&a.parent&&t.jsx("li",{className:n.default["tedi-sidenav__list-item"],children:t.jsx("div",{className:l.default(n.default["tedi-sidenav__collapse"]),children:N(a.parent,s.length)})}),!a.renderParentLink&&a.items.map((e,i)=>t.jsx(m.Fragment,{children:N(e,s.length)},e.id||i))]})]});return w?B?t.jsx(U.FloatingOverlay,{style:{top:"0",position:"relative",height:"100%"},className:n.default["tedi-sidenav__overlay"],children:j}):j:null},J=q;exports.MobileNav=q;exports.SideNavMobile=J;

package/src/tedi/components/layout/mobile-nav/mobile-nav.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SideNavItemProps } from '../sidenav/components/sidenav-item/sidenav-item';
+export type MobileNavProps<C extends React.ElementType = 'a'> = {
+    navItems: SideNavItemProps<C>[];
+    ariaLabel: string;
+    linkAs?: C;
+    isOpen: boolean;
+    onClose: () => void;
+    showOverlay?: boolean;
+    id?: string;
+    className?: string;
+};
+export declare const MobileNav: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Use `MobileNav` (same component, vendor-neutral name). Kept for
+ * backward compatibility with the `SideNav.Mobile` sub-component alias.
+ */
+export declare const SideNavMobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/** @deprecated Use `MobileNavProps`. */
+export type SideNavMobileProps<C extends React.ElementType = 'a'> = MobileNavProps<C>;

package/src/tedi/components/layout/{sidenav/components/sidenav-mobile/sidenav-mobile.es.js → mobile-nav/mobile-nav.es.js}

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { FloatingOverlay as q } from "../../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import l from "../../../../../../../external/classnames/index.es.js";
+import { FloatingOverlay as q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import l from "../../../../../external/classnames/index.es.js";
 import D, { useState as J, useEffect as K } from "react";
-import { Icon as d } from "../../../../base/icon/icon.es.js";
-import { Button as v } from "../../../../buttons/button/button.es.js";
-import n from "../../sidenav.module.scss.es.js";
-import { SideNavItem as M } from "../sidenav-item/sidenav-item.es.js";
-import { useLabels as Q } from "../../../../../providers/label-provider/use-labels.es.js";
-const ne = ({
+import { Icon as d } from "../../base/icon/icon.es.js";
+import { Button as v } from "../../buttons/button/button.es.js";
+import { SideNavItem as w } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
+import n from "../sidenav/sidenav.module.scss.es.js";
+import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+const U = ({
   navItems: _,
   ariaLabel: x,
   linkAs: b,
@@ -17,12 +17,12 @@ const ne = ({
   id: R,
   className: B
 }) => {
-  var f, I, C, L, S, y, w;
+  var f, I, C, L, S, y, M;
   const { getLabel: p } = Q(), [s, c] = J([{ items: _ }]);
   K(() => {
     c([{ items: _ }]);
   }, [_]);
-  const t = s[s.length - 1], j = s.length === 1, k = (e) => {
+  const t = s[s.length - 1], j = s.length === 1, N = (e) => {
     var u;
     const a = !!(e.subItems || e.subItemGroups), m = !!(e.href || e.to);
     if (!a) {
@@ -42,8 +42,8 @@ const ne = ({
     c(s.slice(0, -1));
   }, F = () => {
     c([s[0]]);
-  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), N = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
-    M,
+  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), k = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
+    w,
     {
       ...e,
       as: b,
@@ -51,7 +51,7 @@ const ne = ({
       onItemClick: o,
       className: l(n["tedi-sidenav__item--mobile"], e.className)
     }
-  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => k(e), className: n["tedi-sidenav__link"], children: [
+  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => N(e), className: n["tedi-sidenav__link"], children: [
     e.icon && /* @__PURE__ */ i(
       d,
       {
@@ -65,7 +65,7 @@ const ne = ({
   ] }) }) : H(e, a), H = (e, a) => {
     const m = !!(e.href || e.to), h = !!(e.subItems || e.subItemGroups);
     return m ? /* @__PURE__ */ i(
-      M,
+      w,
       {
         ...e,
         as: b,
@@ -78,7 +78,7 @@ const ne = ({
       v,
       {
         noStyle: !0,
-        onClick: () => h ? k(e) : o(),
+        onClick: () => h ? N(e) : o(),
         className: n["tedi-sidenav__link"],
         children: [
           /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
@@ -120,10 +120,10 @@ const ne = ({
             }
           )
         ] }) }),
-        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (w = t.parent) == null ? void 0 : w.children }),
+        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (M = t.parent) == null ? void 0 : M.children }),
         /* @__PURE__ */ r("ul", { className: n["tedi-sidenav__list"], role: "menubar", children: [
-          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: N(t.parent, s.length) }) }),
-          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: N(e, s.length) }, e.id || a))
+          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: k(t.parent, s.length) }) }),
+          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: k(e, s.length) }, e.id || a))
         ] })
       ]
     }
@@ -140,7 +140,8 @@ const ne = ({
       children: g
     }
   ) : g : null;
-};
+}, ie = U;
 export {
-  ne as SideNavMobile
+  U as MobileNav,
+  ie as SideNavMobile
 };