@tedi-design-system/react 17.1.0-rc.1 → 17.1.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0-rc.1",
+  "version": "17.1.0-rc.2",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -43,7 +43,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "6.0.0",
+    "@tedi-design-system/core": "6.0.1",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
@@ -81,16 +81,11 @@
     "@storybook/addon-a11y": "8.4.2",
     "@storybook/addon-designs": "^8.2.1",
     "@storybook/addon-essentials": "8.4.2",
-    "@storybook/addon-mdx-gfm": "8.4.2",
     "@storybook/blocks": "8.4.2",
     "@storybook/builder-vite": "8.4.2",
     "@storybook/react": "8.4.2",
     "@storybook/react-vite": "8.4.2",
     "@storybook/theming": "8.6.14",
-    "@svgr/webpack": "8.1.0",
-    "@swc-node/register": "~1.11.1",
-    "@swc/core": "~1.14.0",
-    "@swc/helpers": "~0.5.19",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.6",
@@ -103,18 +98,15 @@
     "@types/node": "20.11.28",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
-    "@types/react-test-renderer": "^19.1.0",
     "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "baseline-browser-mapping": "^2.10.0",
     "chromatic": "^13.3.4",
-    "cross-env": "^7.0.3",
     "dompurify": "^3.3.0",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.4.6",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -143,18 +135,14 @@
     "stylelint-config-recess-order": "^4.2.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-declaration-strict-value": "^1.9.2",
-    "to-string-loader": "^1.2.0",
     "ts-jest": "29.1.2",
     "ts-node": "^10.9.2",
-    "tslib": "^2.3.0",
+    "tslib": "^2.8.1",
     "typescript": "5.9.2",
-    "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.4.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-static-copy": "^2.2.0",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite-plugin-static-copy": "^2.2.0"
   },
   "commitlint": {
     "extends": "@commitlint/config-conventional",

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),ne=require("../../overlays/tooltip/tooltip.cjs.js"),de=require("../../overlays/tooltip/tooltip-content.cjs.js"),oe=require("../../overlays/tooltip/tooltip-trigger.cjs.js"),ue=require("../feedback-text/feedback-text.cjs.js"),ce=require("../form-label/form-label.cjs.js"),t=require("./slider.module.scss.cjs.js"),fe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=e.forwardRef((h,M)=>{const{getCurrentBreakpointProps:V}=fe.useBreakpointProps(h.defaultServerBreakpoint),{id:E,name:P,label:x,hideLabel:R,required:_,min:l=0,max:d=100,step:D=1,value:c,defaultValue:$,onChange:o,disabled:s=!1,invalid:H=!1,minLabel:f,maxLabel:O,showCurrentValue:p=!1,valueFormatter:k,tooltip:U=!0,addonRight:j,helper:r,className:z,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J}=V(h),K=e.useId(),b=E??`tedi-slider-${K}`,w=r?r.id??`${b}-helper`:void 0,[Q,W]=e.useState($??l),u=Math.min(d,Math.max(l,c??Q)),[X,L]=e.useState(!1),[Y,N]=e.useState(!1),[i,C]=e.useState(!1),S=!!U&&!s,Z=S&&(X||Y||i),ee=e.useCallback(()=>L(!0),[]),ae=e.useCallback(()=>L(!1),[]),te=e.useCallback(()=>N(!0),[]),re=e.useCallback(()=>N(!1),[]),T=e.useRef(null),n=e.useCallback(()=>{T.current=null,C(!1)},[]);e.useEffect(()=>{if(i)return window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}},[i,n]);const le=e.useCallback(g=>{s||(T.current=g.pointerId,C(!0))},[s]),se=e.useCallback(g=>{const B=Number(g.target.value);c===void 0&&W(B),o==null||o(B)},[o,c]),q=H||(r==null?void 0:r.type)==="error",I=d===l?0:(u-l)/(d-l)*100,y=k?k(u):u,v=p?y:O,ie=m.default(t.default["tedi-slider"],{[t.default["tedi-slider--disabled"]]:s,[t.default["tedi-slider--invalid"]]:q,[t.default["tedi-slider--dragging"]]:i&&!s},z);return a.jsxs("div",{"data-name":"slider",className:ie,children:[x&&a.jsx(ce.FormLabel,{id:b,label:x,required:_,hideLabel:R}),a.jsxs("div",{className:t.default["tedi-slider__container"],children:[a.jsxs("div",{className:t.default["tedi-slider__track-row"],children:[f!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":"true",children:f}),a.jsxs("div",{className:t.default["tedi-slider__track"],style:{"--tedi-slider-progress":`${I}%`,"--tedi-slider-progress-ratio":`${I/100}`},children:[a.jsx("input",{ref:M,id:b,name:P,type:"range",min:l,max:d,step:D,value:u,disabled:s,required:_,"aria-invalid":q?"true":void 0,"aria-describedby":w,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J,onChange:se,onMouseEnter:ee,onMouseLeave:ae,onPointerDown:le,onFocus:te,onBlur:re,className:m.default(t.default["tedi-slider__input"],{[t.default["tedi-slider__input--dragging"]]:i})}),S&&a.jsxs(ne.Tooltip,{open:Z,onToggle:()=>{},focusManager:{returnFocus:!1,initialFocus:-1},placement:"top",trackReferencePosition:!0,children:[a.jsx(oe.TooltipTrigger,{children:a.jsx("span",{className:t.default["tedi-slider__thumb-anchor"],"aria-hidden":"true",tabIndex:-1})}),a.jsx(de.TooltipContent,{children:y})]})]}),v!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":p?void 0:"true","aria-live":p?"polite":void 0,children:v})]}),j&&a.jsx("div",{className:t.default["tedi-slider__addon"],children:j})]}),r&&a.jsx(ue.FeedbackText,{...r,id:w,className:m.default(t.default["tedi-slider__feedback"],r.className)})]})});F.displayName="Slider";exports.Slider=F;

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

@@ -0,0 +1,116 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+type SliderBreakpointProps = {
+    /**
+     * Text/element rendered to the left of the track (e.g. the minimum value).
+     */
+    minLabel?: React.ReactNode;
+    /**
+     * Text/element rendered to the right of the track (e.g. the maximum value).
+     * Ignored when `showCurrentValue` is `true`.
+     */
+    maxLabel?: React.ReactNode;
+    /**
+     * When `true`, renders the current value to the right of the track instead of `maxLabel`.
+     * @default false
+     */
+    showCurrentValue?: boolean;
+    /**
+     * Formats the current value, used by both the thumb tooltip and the `showCurrentValue` label.
+     * @default (value) => value
+     */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /**
+     * Renders a tooltip above the thumb showing the current value. Shown only while the slider is
+     * hovered, focused, or being dragged. Value is formatted via `valueFormatter`.
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * Node rendered to the right of the slider, typically a NumberField used to edit the same value.
+     */
+    addonRight?: React.ReactNode;
+    /**
+     * Helper text rendered below the slider.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Additional class name(s) applied to the root element.
+     */
+    className?: string;
+};
+export interface SliderProps extends BreakpointSupport<SliderBreakpointProps> {
+    /**
+     * Unique identifier for the underlying input element.
+     * Generated automatically if not provided.
+     */
+    id?: string;
+    /**
+     * Name attribute of the underlying input element.
+     */
+    name?: string;
+    /**
+     * Label text rendered above the slider.
+     */
+    label?: React.ReactNode;
+    /**
+     * Controls the visibility of the label. Pass `true` to hide it visually while keeping it
+     * available to assistive technology, or `'keep-space'` to reserve the vertical space.
+     */
+    hideLabel?: boolean | 'keep-space';
+    /**
+     * Marks the field as required.
+     */
+    required?: boolean;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step size.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Controlled value. Use together with `onChange`.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Disables the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the slider as invalid for validation purposes.
+     */
+    invalid?: boolean;
+    /**
+     * Accessible label used when no visible `label` is provided.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the slider, used when no visible `label` is provided.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Human-readable text alternative of the current value.
+     */
+    'aria-valuetext'?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export default Slider;

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

@@ -0,0 +1,145 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { forwardRef as oe, useId as de, useState as m, useCallback as i, useRef as ce, useEffect as ue } from "react";
+import { Tooltip as me } from "../../overlays/tooltip/tooltip.es.js";
+import { TooltipContent as pe } from "../../overlays/tooltip/tooltip-content.es.js";
+import { TooltipTrigger as fe } from "../../overlays/tooltip/tooltip-trigger.es.js";
+import { FeedbackText as ve } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ge } from "../form-label/form-label.es.js";
+import e from "./slider.module.scss.es.js";
+import { useBreakpointProps as he } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const be = oe((N, S) => {
+  const { getCurrentBreakpointProps: D } = he(N.defaultServerBreakpoint), {
+    id: R,
+    name: $,
+    label: w,
+    hideLabel: j,
+    required: L,
+    min: t = 0,
+    max: d = 100,
+    step: H = 1,
+    value: p,
+    defaultValue: q,
+    onChange: c,
+    disabled: n = !1,
+    invalid: O = !1,
+    minLabel: f,
+    maxLabel: U,
+    showCurrentValue: v = !1,
+    valueFormatter: x,
+    tooltip: z = !0,
+    addonRight: I,
+    helper: a,
+    className: A,
+    "aria-label": G,
+    "aria-labelledby": J,
+    "aria-valuetext": K
+  } = D(N), Q = de(), g = R ?? `tedi-slider-${Q}`, k = a ? a.id ?? `${g}-helper` : void 0, [W, X] = m(q ?? t), u = Math.min(d, Math.max(t, p ?? W)), [Y, y] = m(!1), [Z, F] = m(!1), [l, T] = m(!1), V = !!z && !n, ee = V && (Y || Z || l), re = i(() => y(!0), []), ae = i(() => y(!1), []), ie = i(() => F(!0), []), te = i(() => F(!1), []), B = ce(null), s = i(() => {
+    B.current = null, T(!1);
+  }, []);
+  ue(() => {
+    if (l)
+      return window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), () => {
+        window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
+      };
+  }, [l, s]);
+  const ne = i(
+    (b) => {
+      n || (B.current = b.pointerId, T(!0));
+    },
+    [n]
+  ), le = i(
+    (b) => {
+      const P = Number(b.target.value);
+      p === void 0 && X(P), c == null || c(P);
+    },
+    [c, p]
+  ), E = O || (a == null ? void 0 : a.type) === "error", M = d === t ? 0 : (u - t) / (d - t) * 100, C = x ? x(u) : u, h = v ? C : U, se = _(
+    e["tedi-slider"],
+    {
+      [e["tedi-slider--disabled"]]: n,
+      [e["tedi-slider--invalid"]]: E,
+      [e["tedi-slider--dragging"]]: l && !n
+    },
+    A
+  );
+  return /* @__PURE__ */ o("div", { "data-name": "slider", className: se, children: [
+    w && /* @__PURE__ */ r(ge, { id: g, label: w, required: L, hideLabel: j }),
+    /* @__PURE__ */ o("div", { className: e["tedi-slider__container"], children: [
+      /* @__PURE__ */ o("div", { className: e["tedi-slider__track-row"], children: [
+        f != null && /* @__PURE__ */ r("span", { className: e["tedi-slider__range-label"], "aria-hidden": "true", children: f }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e["tedi-slider__track"],
+            style: {
+              "--tedi-slider-progress": `${M}%`,
+              "--tedi-slider-progress-ratio": `${M / 100}`
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  ref: S,
+                  id: g,
+                  name: $,
+                  type: "range",
+                  min: t,
+                  max: d,
+                  step: H,
+                  value: u,
+                  disabled: n,
+                  required: L,
+                  "aria-invalid": E ? "true" : void 0,
+                  "aria-describedby": k,
+                  "aria-label": G,
+                  "aria-labelledby": J,
+                  "aria-valuetext": K,
+                  onChange: le,
+                  onMouseEnter: re,
+                  onMouseLeave: ae,
+                  onPointerDown: ne,
+                  onFocus: ie,
+                  onBlur: te,
+                  className: _(e["tedi-slider__input"], {
+                    [e["tedi-slider__input--dragging"]]: l
+                  })
+                }
+              ),
+              V && /* @__PURE__ */ o(
+                me,
+                {
+                  open: ee,
+                  onToggle: () => {
+                  },
+                  focusManager: { returnFocus: !1, initialFocus: -1 },
+                  placement: "top",
+                  trackReferencePosition: !0,
+                  children: [
+                    /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
+                    /* @__PURE__ */ r(pe, { children: C })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        h != null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: e["tedi-slider__range-label"],
+            "aria-hidden": v ? void 0 : "true",
+            "aria-live": v ? "polite" : void 0,
+            children: h
+          }
+        )
+      ] }),
+      I && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: I })
+    ] }),
+    a && /* @__PURE__ */ r(ve, { ...a, id: k, className: _(e["tedi-slider__feedback"], a.className) })
+  ] });
+});
+be.displayName = "Slider";
+export {
+  be as Slider
+};

package/src/tedi/components/form/slider/slider.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider__feedback":"tedi-slider__feedback-dad1545e","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25","tedi-slider--invalid":"tedi-slider--invalid-e5adda94"};exports.default=e;

package/src/tedi/components/form/slider/slider.module.scss.es.js

@@ -0,0 +1,18 @@
+const d = {
+  "tedi-slider": "tedi-slider-90e24e7d",
+  "tedi-slider__container": "tedi-slider__container-525c4b64",
+  "tedi-slider__track-row": "tedi-slider__track-row-95e9c2d5",
+  "tedi-slider__range-label": "tedi-slider__range-label-a2a6a43b",
+  "tedi-slider__track": "tedi-slider__track-a7afc8d6",
+  "tedi-slider__thumb-anchor": "tedi-slider__thumb-anchor-7e282370",
+  "tedi-slider__input": "tedi-slider__input-b2d1c042",
+  "tedi-slider__input--dragging": "tedi-slider__input--dragging-6a2f5f85",
+  "tedi-slider__addon": "tedi-slider__addon-6b259d81",
+  "tedi-slider__feedback": "tedi-slider__feedback-dad1545e",
+  "tedi-slider--disabled": "tedi-slider--disabled-d1da914a",
+  "tedi-slider--dragging": "tedi-slider--dragging-c82f4f25",
+  "tedi-slider--invalid": "tedi-slider--invalid-e5adda94"
+};
+export {
+  d as default
+};

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

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

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

@@ -63,6 +63,18 @@ export interface OverlayProps {
      * @default GAP + arrow height
      */
     offset?: OffsetOptions;
+    /**
+     * Re-measure the floating element every animation frame while mounted.
+     *
+     * Enable this when the trigger/reference element's position can change without a
+     * DOM-observable event (e.g. position driven by an inherited CSS custom property on an
+     * ancestor). The default `autoUpdate` only reacts to scroll, resize, and element-size
+     * changes, so position-only movement goes unnoticed and the overlay lags behind.
+     *
+     * Opt-in because animation-frame tracking is more expensive than the default.
+     * @default false
+     */
+    trackReferencePosition?: boolean;
 }
 export interface OverlayContextType {
     open: boolean;

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

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

package/src/tedi/index.d.ts

@@ -38,6 +38,7 @@ export * from './components/form/file-upload/file-upload';
 export * from './components/form/file-dropzone/file-dropzone';
 export * from './components/form/select/select';
 export * from './components/form/checkbox/checkbox';
+export * from './components/form/slider/slider';
 export * from './components/form/input-group';
 export * from './components/form/field/field';
 export * from './components/overlays/tooltip';