@tedi-design-system/react 19.0.0-rc.8 → 19.0.0

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),n=require("react"),t=require("../time-field/time-field-helpers.cjs.js"),H=require("./components/time-grid/time-grid.cjs.js"),x=require("./components/time-wheel/time-wheel.cjs.js"),T=({value:s,defaultValue:f="",onChange:r,stepMinutes:o=1,availableTimes:i,gridVariant:h="button",className:u,bordered:c=!0})=>{const[j,P]=n.useState(f),l=s!==void 0,m=l?s:j,d=e=>{l||P(e),r==null||r(e)},a=n.useMemo(t.generateHours,[]),q=n.useMemo(()=>t.generateMinutes(o),[o]),{hour:y,minute:S}=t.parseTime(m||"12:00"),g=a.includes(y)?y:"12",k=t.findClosestMinute(S,q);return Array.isArray(i)&&i.length>0?M.jsx(H.TimeGrid,{times:i,value:m,variant:h,onSelect:d,className:u,bordered:c}):M.jsx(x.TimeWheel,{hours:a,minutes:q,selectedHour:g,selectedMinute:k,onChange:(e,p)=>d(`${e}:${p}`),className:u,bordered:c})};T.displayName="TimePicker";exports.TimePicker=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),n=require("react"),t=require("../time-field/time-field-helpers.cjs.js"),H=require("./components/time-grid/time-grid.cjs.js"),x=require("./components/time-wheel/time-wheel.cjs.js"),T=({value:s,defaultValue:f="",onChange:r,stepMinutes:o=1,availableTimes:i,gridVariant:h="button",className:u,bordered:c=!0})=>{const[j,P]=n.useState(f),l=s!==void 0,m=l?s:j,d=e=>{l||P(e),r==null||r(e)},a=n.useMemo(()=>t.generateHours(),[]),q=n.useMemo(()=>t.generateMinutes(o),[o]),{hour:y,minute:S}=t.parseTime(m||"12:00"),g=a.includes(y)?y:"12",k=t.findClosestMinute(S,q);return Array.isArray(i)&&i.length>0?M.jsx(H.TimeGrid,{times:i,value:m,variant:h,onSelect:d,className:u,bordered:c}):M.jsx(x.TimeWheel,{hours:a,minutes:q,selectedHour:g,selectedMinute:k,onChange:(e,p)=>d(`${e}:${p}`),className:u,bordered:c})};T.displayName="TimePicker";exports.TimePicker=T;

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

@@ -15,7 +15,7 @@ const I = ({
 }) => {
   const [M, T] = S.useState(h), c = o !== void 0, m = c ? o : M, u = (t) => {
     c || T(t), e == null || e(t);
-  }, f = a(_, []), l = a(() => $(n), [n]), { hour: d, minute: k } = g(m || "12:00"), A = f.includes(d) ? d : "12", H = j(k, l);
+  }, f = a(() => _(), []), l = a(() => $(n), [n]), { hour: d, minute: k } = g(m || "12:00"), A = f.includes(d) ? d : "12", H = j(k, l);
   return Array.isArray(r) && r.length > 0 ? /* @__PURE__ */ p(
     x,
     {

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),m=require("./vertical-spacing.module.scss.cjs.js"),d=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=e=>{const{getCurrentBreakpointProps:r}=d.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:s="div",size:t=1,...c}=r(e),l=u.default(m.default["tedi-vertical-spacing__item"],n);return o.jsx(s,{"data-name":"vertical-spacing-item",...c,style:{"--vertical-spacing-internal":`${t}${t!==0?"em":""}`},className:l,children:a})};exports.VerticalSpacingItem=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),d=require("./vertical-spacing.module.scss.cjs.js"),p=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=e=>{const{getCurrentBreakpointProps:r}=p.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:s="div",size:t=1,style:c,...l}=r(e),o=m.default(d.default["tedi-vertical-spacing__item"],n);return u.jsx(s,{"data-name":"vertical-spacing-item",...l,style:{"--vertical-spacing-internal":`${t}${t!==0?"em":""}`,...c},className:o,children:a})};exports.VerticalSpacingItem=i;exports.default=i;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.d.ts

@@ -21,6 +21,11 @@ export interface VerticalSpacingItemProps extends BreakpointSupport<VerticalSpac
      * Additional class name(s) to apply to the element
      */
     className?: string;
+    /**
+     * Additional inline styles, merged with the internal spacing custom property
+     * (rather than replacing it).
+     */
+    style?: React.CSSProperties;
 }
 export declare const VerticalSpacingItem: (props: VerticalSpacingItemProps) => JSX.Element;
 export default VerticalSpacingItem;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.es.js

@@ -1,27 +1,28 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import o from "../../../../../external/classnames/index.es.js";
-import l from "./vertical-spacing.module.scss.es.js";
-import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const v = (e) => {
-  const { getCurrentBreakpointProps: r } = p(e.defaultServerBreakpoint), {
+import p from "./vertical-spacing.module.scss.es.js";
+import { useBreakpointProps as d } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const B = (e) => {
+  const { getCurrentBreakpointProps: r } = d(e.defaultServerBreakpoint), {
     children: a,
     className: i,
     element: s = "div",
     size: t = 1,
-    ...n
-  } = r(e), m = o(l["tedi-vertical-spacing__item"], i);
-  return /* @__PURE__ */ c(
+    style: n,
+    ...m
+  } = r(e), c = o(p["tedi-vertical-spacing__item"], i);
+  return /* @__PURE__ */ l(
     s,
     {
       "data-name": "vertical-spacing-item",
-      ...n,
-      style: { "--vertical-spacing-internal": `${t}${t !== 0 ? "em" : ""}` },
-      className: m,
+      ...m,
+      style: { "--vertical-spacing-internal": `${t}${t !== 0 ? "em" : ""}`, ...n },
+      className: c,
       children: a
     }
   );
 };
 export {
-  v as VerticalSpacingItem,
-  v as default
+  B as VerticalSpacingItem,
+  B as default
 };

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),g=require("./vertical-spacing-item.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,...s}=i(e),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0"},children:a})};r.Item=g.VerticalSpacingItem;exports.VerticalSpacing=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),g=require("./vertical-spacing.module.scss.cjs.js"),m=require("./vertical-spacing-item.cjs.js"),d=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=d.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,style:s,...l}=i(e),o=p.default(g.default["tedi-vertical-spacing"],n);return u.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...l,className:o,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0",...s},children:a})};r.Item=m.VerticalSpacingItem;exports.VerticalSpacing=r;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.d.ts

@@ -22,6 +22,11 @@ export interface VerticalSpacingProps extends BreakpointSupport<VerticalSpacingB
      * Additional class name(s) to apply to the element
      */
     className?: string;
+    /**
+     * Additional inline styles, merged with the internal spacing custom property
+     * (rather than replacing it).
+     */
+    style?: React.CSSProperties;
 }
 export declare const VerticalSpacing: {
     (props: VerticalSpacingProps): JSX.Element;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.es.js

@@ -1,29 +1,30 @@
-import { jsx as c } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
-import l from "./vertical-spacing.module.scss.es.js";
-import { VerticalSpacingItem as p } from "./vertical-spacing-item.es.js";
-import { useBreakpointProps as g } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const f = (e) => {
-  const { getCurrentBreakpointProps: r } = g(e.defaultServerBreakpoint), {
+import { jsx as m } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import p from "./vertical-spacing.module.scss.es.js";
+import { VerticalSpacingItem as g } from "./vertical-spacing-item.es.js";
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const d = (e) => {
+  const { getCurrentBreakpointProps: r } = f(e.defaultServerBreakpoint), {
     children: a,
     className: i,
-    element: n = "div",
+    element: s = "div",
     size: t = 1,
-    ...s
-  } = r(e), o = m(l["tedi-vertical-spacing"], i);
-  return /* @__PURE__ */ c(
-    n,
+    style: n,
+    ...o
+  } = r(e), c = l(p["tedi-vertical-spacing"], i);
+  return /* @__PURE__ */ m(
+    s,
     {
       "data-name": "vertical-spacing",
       role: "presentation",
-      ...s,
-      className: o,
-      style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0" },
+      ...o,
+      className: c,
+      style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0", ...n },
       children: a
     }
   );
 };
-f.Item = p;
+d.Item = g;
 export {
-  f as VerticalSpacing
+  d as VerticalSpacing
 };

package/src/tedi/components/misc/ellipsis/ellipsis.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),a=require("../../overlays/popover/popover.cjs.js"),i=require("./ellipsis.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-element-size.cjs.js"),g=d=>{const{children:l,lineClamp:r=2,position:s="end",popover:p=!0,className:u,...m}=d,n=o.useRef(null),[f,h]=o.useState(!1),v=x.useElementSize(n);o.useEffect(()=>{const t=n.current;t&&h(s==="start"?t.scrollWidth>t.clientWidth:t.scrollHeight>t.clientHeight)},[v,s,r]);const c=e.jsx("div",{"data-name":"ellipsis",...m,ref:n,className:j.default(i.default["tedi-ellipsis"],{[i.default["tedi-ellipsis--start"]]:s==="start"},u),style:s==="end"?{lineClamp:r,WebkitLineClamp:r}:void 0,children:s==="start"?e.jsx("span",{className:i.default["tedi-ellipsis__inner"],children:l}):l});return f&&p?e.jsxs(a.Popover,{openWith:"hover",focusManager:{modal:!1},children:[e.jsx(a.Popover.Trigger,{children:c}),e.jsx(a.Popover.Content,{children:e.jsx("span",{className:i.default["tedi-ellipsis__overlay"],children:l})})]}):c};exports.Ellipsis=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),a=require("../../overlays/popover/popover.cjs.js"),i=require("./ellipsis.module.scss.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),E=p=>{const{children:l,lineClamp:r=2,position:s="end",popover:u=!0,className:m,...f}=p,n=o.useRef(null),[v,h]=o.useState(!1),j=g.useElementSize(n);o.useEffect(()=>{const t=n.current;t&&h(s==="start"?t.scrollWidth>t.clientWidth:t.scrollHeight>t.clientHeight)},[j,s,r]);const c=v&&u,d=e.jsx("div",{"data-name":"ellipsis",...f,ref:n,role:c?"button":void 0,className:x.default(i.default["tedi-ellipsis"],{[i.default["tedi-ellipsis--start"]]:s==="start"},m),style:s==="end"?{lineClamp:r,WebkitLineClamp:r}:void 0,children:s==="start"?e.jsx("span",{className:i.default["tedi-ellipsis__inner"],children:l}):l});return c?e.jsxs(a.Popover,{openWith:"hover",focusManager:{modal:!1},children:[e.jsx(a.Popover.Trigger,{children:d}),e.jsx(a.Popover.Content,{children:e.jsx("span",{className:i.default["tedi-ellipsis__overlay"],children:l})})]}):d};exports.Ellipsis=E;

package/src/tedi/components/misc/ellipsis/ellipsis.es.js

@@ -1,37 +1,38 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
-import g from "../../../../../external/classnames/index.es.js";
-import o from "react";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import E from "../../../../../external/classnames/index.es.js";
+import n from "react";
 import { Popover as a } from "../../overlays/popover/popover.es.js";
 import i from "./ellipsis.module.scss.es.js";
-import { useElementSize as E } from "../../../helpers/hooks/use-element-size.es.js";
-const S = (m) => {
-  const { children: l, lineClamp: r = 2, position: e = "end", popover: p = !0, className: d, ...f } = m, n = o.useRef(null), [h, u] = o.useState(!1), v = E(n);
-  o.useEffect(() => {
-    const s = n.current;
-    s && u(
+import { useElementSize as N } from "../../../helpers/hooks/use-element-size.es.js";
+const b = (m) => {
+  const { children: l, lineClamp: r = 2, position: e = "end", popover: d = !0, className: f, ...h } = m, o = n.useRef(null), [u, v] = n.useState(!1), _ = N(o);
+  n.useEffect(() => {
+    const s = o.current;
+    s && v(
       e === "start" ? s.scrollWidth > s.clientWidth : s.scrollHeight > s.clientHeight
     );
-  }, [v, e, r]);
-  const c = /* @__PURE__ */ t(
+  }, [_, e, r]);
+  const c = u && d, p = /* @__PURE__ */ t(
     "div",
     {
       "data-name": "ellipsis",
-      ...f,
-      ref: n,
-      className: g(
+      ...h,
+      ref: o,
+      role: c ? "button" : void 0,
+      className: E(
         i["tedi-ellipsis"],
         { [i["tedi-ellipsis--start"]]: e === "start" },
-        d
+        f
       ),
       style: e === "end" ? { lineClamp: r, WebkitLineClamp: r } : void 0,
       children: e === "start" ? /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__inner"], children: l }) : l
     }
   );
-  return h && p ? /* @__PURE__ */ _(a, { openWith: "hover", focusManager: { modal: !1 }, children: [
-    /* @__PURE__ */ t(a.Trigger, { children: c }),
+  return c ? /* @__PURE__ */ g(a, { openWith: "hover", focusManager: { modal: !1 }, children: [
+    /* @__PURE__ */ t(a.Trigger, { children: p }),
     /* @__PURE__ */ t(a.Content, { children: /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__overlay"], children: l }) })
-  ] }) : c;
+  ] }) : p;
 };
 export {
-  S as Ellipsis
+  b as Ellipsis
 };

package/src/tedi/components/misc/timeline/timeline.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),I=require("./components/timeline-description/timeline-description.cjs.js"),d=require("./components/timeline-item/timeline-item.cjs.js"),g=require("./components/timeline-title/timeline-title.cjs.js"),u=require("./timeline.module.scss.cjs.js"),c=e=>n.isValidElement(e)&&e.type===d.TimelineItem,j=(e,t)=>t===void 0?"future":e===t?"current":e<t?"past":"future",i=({children:e,activeIndex:t,variant:l="default",cardPadding:s,className:a})=>{const f=n.Children.toArray(e).filter(c).length;let m=-1;const T=n.Children.map(e,r=>{if(!c(r))return r;m+=1;const o=m;return n.cloneElement(r,{state:j(o,t),isLast:o===f-1})}),p=l==="card"&&s!==void 0?{"--tedi-timeline-card-padding":`${s}rem`}:void 0;return q.jsx("div",{className:y.default(u.default["tedi-timeline"],{[u.default["tedi-timeline--card"]]:l==="card"},a),style:p,children:T})};i.displayName="Timeline";i.Item=d.TimelineItem;i.Title=g.TimelineTitle;i.Description=I.TimelineDescription;exports.Timeline=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),D=require("./components/timeline-description/timeline-description.cjs.js"),p=require("./components/timeline-item/timeline-item.cjs.js"),E=require("./components/timeline-title/timeline-title.cjs.js"),a=require("./timeline.module.scss.cjs.js"),d=e=>s.isValidElement(e)&&e.type===p.TimelineItem,I=(e,i)=>i===void 0?"future":e===i?"current":e<i?"past":"future",r=({children:e,activeIndex:i,variant:l="default",cardPadding:o,className:f})=>{const m=s.Children.toArray(e),u=m.flatMap((t,n)=>d(t)?[n]:[]),T=u.length,y=new Map(u.map((t,n)=>[t,n])),q=m.map((t,n)=>{if(!d(t))return t;const c=y.get(n)??0;return s.cloneElement(t,{state:I(c,i),isLast:c===T-1})}),g=l==="card"&&o!==void 0?{"--tedi-timeline-card-padding":`${o}rem`}:void 0;return j.jsx("div",{className:v.default(a.default["tedi-timeline"],{[a.default["tedi-timeline--card"]]:l==="card"},f),style:g,children:q})};r.displayName="Timeline";r.Item=p.TimelineItem;r.Title=E.TimelineTitle;r.Description=D.TimelineDescription;exports.Timeline=r;

package/src/tedi/components/misc/timeline/timeline.es.js

@@ -1,38 +1,35 @@
-import { jsx as y } from "react/jsx-runtime";
-import E from "../../../../../external/classnames/index.es.js";
-import { Children as l, cloneElement as N, isValidElement as v } from "react";
-import { TimelineDescription as C } from "./components/timeline-description/timeline-description.es.js";
-import { TimelineItem as a } from "./components/timeline-item/timeline-item.es.js";
-import { TimelineTitle as D } from "./components/timeline-title/timeline-title.es.js";
+import { jsx as N } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import { Children as v, cloneElement as A, isValidElement as C } from "react";
+import { TimelineDescription as D } from "./components/timeline-description/timeline-description.es.js";
+import { TimelineItem as f } from "./components/timeline-item/timeline-item.es.js";
+import { TimelineTitle as M } from "./components/timeline-title/timeline-title.es.js";
 import p from "./timeline.module.scss.es.js";
-const f = (e) => v(e) && e.type === a, I = (e, t) => t === void 0 ? "future" : e === t ? "current" : e < t ? "past" : "future", i = ({
-  children: e,
-  activeIndex: t,
+const c = (t) => C(t) && t.type === f, h = (t, i) => i === void 0 ? "future" : t === i ? "current" : t < i ? "past" : "future", o = ({
+  children: t,
+  activeIndex: i,
   variant: m = "default",
-  cardPadding: o,
+  cardPadding: n,
   className: u
 }) => {
-  const c = l.toArray(e).filter(f).length;
-  let n = -1;
-  const d = l.map(e, (r) => {
-    if (!f(r)) return r;
-    n += 1;
-    const s = n;
-    return N(r, { state: I(s, t), isLast: s === c - 1 });
-  }), T = m === "card" && o !== void 0 ? { "--tedi-timeline-card-padding": `${o}rem` } : void 0;
-  return /* @__PURE__ */ y(
+  const s = v.toArray(t), l = s.flatMap((e, r) => c(e) ? [r] : []), d = l.length, y = new Map(l.map((e, r) => [e, r])), T = s.map((e, r) => {
+    if (!c(e)) return e;
+    const a = y.get(r) ?? 0;
+    return A(e, { state: h(a, i), isLast: a === d - 1 });
+  }), E = m === "card" && n !== void 0 ? { "--tedi-timeline-card-padding": `${n}rem` } : void 0;
+  return /* @__PURE__ */ N(
     "div",
     {
-      className: E(p["tedi-timeline"], { [p["tedi-timeline--card"]]: m === "card" }, u),
-      style: T,
-      children: d
+      className: g(p["tedi-timeline"], { [p["tedi-timeline--card"]]: m === "card" }, u),
+      style: E,
+      children: T
     }
   );
 };
-i.displayName = "Timeline";
-i.Item = a;
-i.Title = D;
-i.Description = C;
+o.displayName = "Timeline";
+o.Item = f;
+o.Title = M;
+o.Description = D;
 export {
-  i as Timeline
+  o as Timeline
 };

package/src/tedi/components/overlays/overlay/overlay-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),C=require("./overlay.cjs.js"),E=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:h}=u,{open:l,x:m,y:g,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:d,contentId:j,role:F,ariaHidden:q}=s.useContext(C.OverlayContext);if(s.useEffect(()=>{d&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,d]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-hidden":q||void 0,"aria-labelledby":f,"aria-describedby":h,style:{position:b,left:m,top:g},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:c=>x.current=c,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),C=require("./overlay.cjs.js"),E=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:h,contentStyle:m}=u,{open:l,x:g,y:b,strategy:v,focusManager:o,floating:x,arrowRef:w,getFloatingProps:p,placement:j,context:i,arrow:t,scrollLock:d,contentId:F,role:S,ariaHidden:q}=s.useContext(C.OverlayContext);if(s.useEffect(()=>{d&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,d]),!l)return null;const a=n.jsxs("div",{...p({ref:x,tabIndex:-1,id:F,"aria-hidden":q||void 0,"aria-labelledby":f,"aria-describedby":h,style:{position:v,left:g,top:b,...m},className:e==null?void 0:e.content}),"data-placement":j,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:c=>w.current=c,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:S==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=E;

package/src/tedi/components/overlays/overlay/overlay-content.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface OverlayContentProps {
     /**
      * Overlay content.
@@ -36,5 +36,10 @@ export interface OverlayContentProps {
      * Useful for longer explanations or supporting content that complements the title.
      */
     describedBy?: string;
+    /**
+     * Extra inline styles merged onto the floating content container (after the positioning styles).
+     * Used to pass through consumer-controlled values such as padding CSS variables.
+     */
+    contentStyle?: CSSProperties;
 }
 export declare const OverlayContent: (props: OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/tedi/components/overlays/overlay/overlay-content.es.js

@@ -1,52 +1,53 @@
-import { jsxs as E, jsx as n } from "react/jsx-runtime";
-import { FloatingArrow as C, FloatingPortal as H, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as H, FloatingPortal as S, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import { useContext as B, useEffect as I } from "react";
 import { OverlayContext as O } from "./overlay.es.js";
-const L = (c) => {
-  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
+const R = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f, contentStyle: y } = c, {
     open: l,
-    x: y,
-    y: h,
-    strategy: u,
+    x: h,
+    y: u,
+    strategy: g,
     focusManager: o,
-    floating: g,
-    arrowRef: p,
-    getFloatingProps: b,
-    placement: v,
+    floating: p,
+    arrowRef: b,
+    getFloatingProps: v,
+    placement: w,
     context: r,
     arrow: t,
     scrollLock: i,
-    contentId: w,
-    role: x,
-    ariaHidden: F
+    contentId: x,
+    role: F,
+    ariaHidden: E
   } = B(O);
   if (I(() => {
     i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
   }, [l, i]), !l) return null;
-  const d = /* @__PURE__ */ E(
+  const d = /* @__PURE__ */ C(
     "div",
     {
-      ...b({
-        ref: g,
+      ...v({
+        ref: p,
         tabIndex: -1,
-        id: w,
-        "aria-hidden": F || void 0,
+        id: x,
+        "aria-hidden": E || void 0,
         "aria-labelledby": m,
         "aria-describedby": f,
         style: {
-          position: u,
-          left: y,
-          top: h
+          position: g,
+          left: h,
+          top: u,
+          ...y
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": v,
+      "data-placement": w,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
-          C,
+          H,
           {
-            ref: (a) => p.current = a,
+            ref: (a) => b.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -58,8 +59,8 @@ const L = (c) => {
       ]
     }
   );
-  return /* @__PURE__ */ n(H, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
+  return /* @__PURE__ */ n(S, { children: F === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  L as OverlayContent
+  R as OverlayContent
 };

package/src/tedi/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Q=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),X=require("./overlay-content.cjs.js"),Y=require("./overlay-trigger.cjs.js"),Z=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),$=require("../../../helpers/hooks/use-is-mounted.cjs.js"),S=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),D=3,E=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=H=>{const L=Z.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:r,role:d="tooltip",ariaHidden:f=!1,arrowDimensions:e,offset:V=D+((e==null?void 0:e.height)??0),arrowPadding:z=4,focusManager:g,dismissible:O,scrollLock:M,trackReferencePosition:B=!1}=H,{order:m=["reference","content"],initialFocus:x,modal:p,...C}=g??{},F=x!==void 0?x:p?0:void 0,[P,R]=n.useState(G),h=n.useRef(null),b=$.useIsMounted(),v=n.useMemo(()=>r&&typeof a<"u"?a:P,[r,a,P]),y=n.useCallback(l=>{typeof a>"u"&&R(l),r==null||r(l)},[a,R,r]),{x:q,y:I,refs:c,strategy:w,context:o,middlewareData:k,placement:T}=t.useFloating({placement:A,open:v,onOpenChange:y,middleware:[i.offset(V),i.flip(),i.shift({padding:8}),i.arrow({element:h,padding:z})],whileElementsMounted:B?(l,K,N)=>S.autoUpdate(l,K,N,{animationFrame:!0}):S.autoUpdate}),{getReferenceProps:U,getFloatingProps:_}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:O}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d,enabled:!f}),t.useDismiss(o,{enabled:O,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),j=n.useId(),J=n.useMemo(()=>({open:v,onOpenChange:y,isMounted:b,openWith:s,focusManager:g?{order:m,modal:p,initialFocus:F,...C}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:h,x:q,y:I,strategy:w,getReferenceProps:U,getFloatingProps:_,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...k.arrow},context:o,placement:T,scrollLock:M,role:d,ariaHidden:f,contentId:j}),[v,y,b,s,g,c.setReference,c.setFloating,h,q,I,w,U,_,e==null?void 0:e.width,e==null?void 0:e.height,k.arrow,o,T,M,d,f,j,p,m,F,C]);return Q.jsx(E.Provider,{value:J,children:W})};u.Trigger=Y.OverlayTrigger;u.Content=X.OverlayContent;exports.Overlay=u;exports.OverlayContext=E;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Q=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),X=require("./overlay-content.cjs.js"),Y=require("./overlay-trigger.cjs.js"),Z=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),$=require("../../../helpers/hooks/use-is-mounted.cjs.js"),S=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),D=3,E=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=H=>{const L=Z.useIsTouchDevice(),{children:W,placement:A="top",openWith:r=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:s,role:d="tooltip",ariaHidden:f=!1,arrowDimensions:e,offset:V=D+((e==null?void 0:e.height)??0),arrowPadding:z=4,focusManager:g,dismissible:O,scrollLock:M,trackReferencePosition:B=!1}=H,{order:m=["reference","content"],initialFocus:x,modal:p,...C}=g??{},F=x!==void 0?x:p?0:void 0,[P,R]=n.useState(G),h=n.useRef(null),b=$.useIsMounted(),v=n.useMemo(()=>s&&typeof a<"u"?a:P,[s,a,P]),y=n.useCallback(l=>{typeof a>"u"&&R(l),s==null||s(l)},[a,R,s]),{x:q,y:I,refs:c,strategy:k,context:o,middlewareData:w,placement:T}=t.useFloating({placement:A,open:v,onOpenChange:y,middleware:[i.offset(V),i.flip(),i.shift({padding:8}),i.arrow({element:h,padding:z})],whileElementsMounted:B?(l,K,N)=>S.autoUpdate(l,K,N,{animationFrame:!0}):S.autoUpdate}),{getReferenceProps:U,getFloatingProps:_}=t.useInteractions([t.useHover(o,{enabled:r==="hover",handleClose:t.safePolygon()}),t.useClick(o,{enabled:r==="click",toggle:O}),t.useFocus(o,{enabled:r==="hover"}),t.useRole(o,{role:d,enabled:!f}),t.useDismiss(o,{enabled:O,outsidePressEvent:r==="click"?"mousedown":"pointerdown"})]),j=n.useId(),J=n.useMemo(()=>({open:v,onOpenChange:y,isMounted:b,openWith:r,focusManager:g?{order:m,modal:p,initialFocus:F,...C}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:h,x:q,y:I,strategy:k,getReferenceProps:U,getFloatingProps:_,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...w.arrow},context:o,placement:T,scrollLock:M,role:d,ariaHidden:f,contentId:j}),[v,y,b,r,g,c.setReference,c.setFloating,h,q,I,k,U,_,e==null?void 0:e.width,e==null?void 0:e.height,w.arrow,o,T,M,d,f,j,p,m,F,C]);return Q.jsx(E.Provider,{value:J,children:W})};u.Trigger=Y.OverlayTrigger;u.Content=X.OverlayContent;exports.Overlay=u;exports.OverlayContext=E;exports.default=u;