@tedi-design-system/react 19.0.1-rc.2 → 19.1.0-rc.10

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

@@ -1,121 +1,129 @@
-import { jsxs as U, jsx as f } from "react/jsx-runtime";
-import { useFloatingNodeId as $, useFloating as H, useInteractions as q, useClick as z, useRole as G, useDismiss as J, useListNavigation as K, FloatingPortal as Q, FloatingFocusManager as V } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import X from "../../../../../external/classnames/index.es.js";
+import { jsxs as A, jsx as d } from "react/jsx-runtime";
+import { useFloatingNodeId as U, useFloating as q, useInteractions as z, useClick as G, useRole as J, useDismiss as K, useListNavigation as Q, FloatingPortal as V, FloatingFocusManager as X } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import Y from "../../../../../external/classnames/index.es.js";
 import e from "react";
-import x from "./dropdown.module.scss.es.js";
-import { DropdownContent as Y } from "./dropdown-content/dropdown-content.es.js";
-import { DropdownContext as Z } from "./dropdown-context.es.js";
-import { resolveDropdownWidth as ee } from "./dropdown-helpers.es.js";
-import { DropdownItem as te } from "./dropdown-item/dropdown-item.es.js";
-import { DropdownSeparator as oe } from "./dropdown-separator/dropdown-separator.es.js";
-import { DropdownTrigger as ne } from "./dropdown-trigger/dropdown-trigger.es.js";
-import { useBreakpointProps as re } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as ie } from "../../../providers/label-provider/use-labels.es.js";
-import { autoUpdate as se } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as ae, flip as le, shift as de } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const ce = 4, l = (p) => {
-  var I;
-  const { getCurrentBreakpointProps: C } = re(p.defaultServerBreakpoint), {
-    children: F,
-    modal: g = !1,
+import v from "./dropdown.module.scss.es.js";
+import { DropdownContent as Z } from "./dropdown-content/dropdown-content.es.js";
+import { DropdownContext as ee } from "./dropdown-context.es.js";
+import { resolveDropdownWidth as te } from "./dropdown-helpers.es.js";
+import { DropdownItem as oe } from "./dropdown-item/dropdown-item.es.js";
+import { DropdownSeparator as ne } from "./dropdown-separator/dropdown-separator.es.js";
+import { DropdownTrigger as re } from "./dropdown-trigger/dropdown-trigger.es.js";
+import { useBreakpointProps as ie } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as se } from "../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as ae } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as le, flip as de, shift as ce } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const me = 4, c = (h) => {
+  var O;
+  const { getCurrentBreakpointProps: F } = ie(h.defaultServerBreakpoint), {
+    children: N,
+    modal: w = !1,
     divided: R = !1,
-    width: N = "auto",
-    variant: d = "default",
-    open: c,
+    width: y = "auto",
+    variant: m = "default",
+    open: p,
     defaultOpen: P = !1,
     onOpenChange: s,
     defaultActiveIndex: o,
     placement: u = "bottom-start",
+    maxHeight: a,
     className: S
-  } = C(p), { getLabel: k } = ie(), y = $(), v = e.useRef([]), [a, m] = e.useState(o ?? null), [w, B] = e.useState(null), [b, W] = e.useState(P), t = c ?? b;
+  } = F(h), { getLabel: b } = se(), k = U(), x = e.useRef([]), [l, f] = e.useState(o ?? null), [g, B] = e.useState(null), [_, W] = e.useState(P), t = p ?? _;
   e.useEffect(() => {
-    t || m(o ?? null);
+    t || f(o ?? null);
   }, [t, o]);
-  const h = e.useCallback(
+  const D = e.useCallback(
     (i) => {
-      c === void 0 && W(i), s == null || s(i);
+      p === void 0 && W(i), s == null || s(i);
     },
-    [c, s]
-  ), E = H({
-    nodeId: y,
+    [p, s]
+  ), E = q({
+    nodeId: k,
     open: t,
     placement: u,
-    onOpenChange: h,
-    middleware: [ae(ce), le(), de()],
-    whileElementsMounted: se
-  }), { context: n, refs: r, x: L, y: M, strategy: T } = E, D = q([
-    z(n),
-    G(n, { role: "menu" }),
-    J(n),
-    K(n, {
-      listRef: v,
-      activeIndex: a,
-      onNavigate: m,
+    onOpenChange: D,
+    middleware: [le(me), de(), ce()],
+    whileElementsMounted: ae
+  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, I = z([
+    G(n),
+    J(n, { role: "menu" }),
+    K(n),
+    Q(n, {
+      listRef: x,
+      activeIndex: l,
+      onNavigate: f,
       loop: !0,
       selectedIndex: o ?? null,
       focusItemOnOpen: o !== null ? !0 : "auto"
     })
-  ]), _ = {
+  ]), T = {
     open: t,
-    setOpen: h,
+    setOpen: D,
     refs: r,
-    listItemsRef: v,
-    activeIndex: a,
-    setActiveIndex: m,
+    listItemsRef: x,
+    activeIndex: l,
+    setActiveIndex: f,
     placement: u,
-    content: w,
+    content: g,
     setContent: B,
     divided: R,
-    variant: d,
-    ...D
-  }, j = (I = r.reference.current) == null ? void 0 : I.getBoundingClientRect().width, A = e.useMemo(() => {
+    variant: m,
+    ...I
+  }, $ = (O = r.reference.current) == null ? void 0 : O.getBoundingClientRect().width, j = e.useMemo(() => {
     const i = r.reference.current;
     if (!i) return;
-    const O = i.offsetParent;
-    if (O)
-      return O.getBoundingClientRect().width;
+    const C = i.offsetParent;
+    if (C)
+      return C.getBoundingClientRect().width;
   }, [r.reference.current]);
-  return /* @__PURE__ */ U(Z.Provider, { value: _, children: [
-    F,
-    /* @__PURE__ */ f(Q, { children: t && /* @__PURE__ */ f(
-      V,
+  return /* @__PURE__ */ A(ee.Provider, { value: T, children: [
+    N,
+    /* @__PURE__ */ d(V, { children: t && /* @__PURE__ */ d(
+      X,
       {
         context: n,
-        modal: g,
-        visuallyHiddenDismiss: g ? k("close") : !1,
-        children: /* @__PURE__ */ f(
+        modal: w,
+        visuallyHiddenDismiss: w ? b("close") : !1,
+        children: /* @__PURE__ */ d(
           "div",
           {
-            ...D.getFloatingProps({
+            ...I.getFloatingProps({
               ref: r.setFloating,
-              className: X(
-                x["tedi-dropdown"],
-                { [x[`tedi-dropdown--${d}`]]: d === "tree" },
+              className: Y(
+                v["tedi-dropdown"],
+                { [v[`tedi-dropdown--${m}`]]: m === "tree" },
                 S
               ),
               style: {
-                position: T,
-                left: L ?? 0,
-                top: M ?? 0,
-                width: ee(N, j, A)
+                position: M,
+                left: H ?? 0,
+                top: L ?? 0,
+                width: te(y, $, j)
               },
               role: "menu",
               "aria-orientation": "vertical",
-              "aria-activedescendant": a !== null ? `dropdown-item-${a}` : void 0
+              "aria-activedescendant": l !== null ? `dropdown-item-${l}` : void 0
             }),
             "data-placement": u,
             "data-state": t ? "open" : "closed",
-            children: w
+            children: a !== void 0 ? /* @__PURE__ */ d(
+              "div",
+              {
+                className: v["tedi-dropdown__scroll"],
+                style: { maxHeight: typeof a == "number" ? `${a}px` : a },
+                children: g
+              }
+            ) : g
           }
         )
       }
     ) })
   ] });
 };
-l.Trigger = ne;
-l.Content = Y;
-l.Item = te;
-l.Separator = oe;
+c.Trigger = re;
+c.Content = Z;
+c.Item = oe;
+c.Separator = ne;
 export {
-  l as Dropdown
+  c as Dropdown
 };

package/src/tedi/components/overlays/dropdown/dropdown.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-dropdown":"tedi-dropdown-0246d37c","tedi-dropdown--tree":"tedi-dropdown--tree-c13f70ee","tedi-dropdown__item":"tedi-dropdown__item-fa7ee478"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-dropdown":"tedi-dropdown-0246d37c","tedi-dropdown__scroll":"tedi-dropdown__scroll-c7d1c849","tedi-dropdown--tree":"tedi-dropdown--tree-c13f70ee","tedi-dropdown__item":"tedi-dropdown__item-fa7ee478"};exports.default=e;

package/src/tedi/components/overlays/dropdown/dropdown.module.scss.es.js

@@ -1,5 +1,6 @@
 const d = {
   "tedi-dropdown": "tedi-dropdown-0246d37c",
+  "tedi-dropdown__scroll": "tedi-dropdown__scroll-c7d1c849",
   "tedi-dropdown--tree": "tedi-dropdown--tree-c13f70ee",
   "tedi-dropdown__item": "tedi-dropdown__item-fa7ee478"
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),m=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),p=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),q=require("../../../helpers/get-element-ref.cjs.js"),x=require("../../base/icon/icon.cjs.js"),_=require("./overlay.cjs.js"),r=require("./overlay.module.scss.cjs.js"),R=require("../../../providers/label-provider/use-labels.cjs.js"),E=l=>{const{children:e,className:s}=l,{getLabel:c}=R.useLabels(),{getReferenceProps:i,reference:a,openWith:d,open:u,role:g,ariaHidden:f,contentId:v}=t.useContext(_.OverlayContext),y=t.isValidElement(e)?q.getElementRef(e):void 0,o=m.useMergeRefs([a,y]),n=g==="tooltip"&&!f?{"aria-describedby":u?v:void 0}:{};return t.isValidElement(e)?t.cloneElement(e,i({tabIndex:0,...n,label:e.type===x.Icon?c("tooltip.icon-trigger"):void 0,...e.props,ref:o})):b.jsx("div",{...i({ref:o,tabIndex:0,className:p.default(r.default["tedi-overlay__trigger"],r.default["tedi-overlay__trigger--text"],{[r.default["tedi-overlay__trigger--click"]]:d==="click"},s),...n}),children:e})};exports.OverlayTrigger=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),m=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),q=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),x=require("../../../helpers/get-element-ref.cjs.js"),_=require("../../base/icon/icon.cjs.js"),R=require("./overlay.cjs.js"),o=require("./overlay.module.scss.cjs.js"),E=require("../../../providers/label-provider/use-labels.cjs.js"),I=c=>{const{children:e,className:a}=c,{getLabel:d}=E.useLabels(),{getReferenceProps:i,reference:u,openWith:g,open:f,role:r,ariaHidden:n,contentId:v}=t.useContext(R.OverlayContext),p=t.isValidElement(e)?x.getElementRef(e):void 0,l=m.useMergeRefs([u,p]),b=r!=="tooltip"&&r!=="label"&&!n,s=r==="tooltip"&&!n?{"aria-describedby":f?v:void 0}:{};return t.isValidElement(e)?t.cloneElement(e,i({tabIndex:0,...s,label:e.type===_.Icon?d("tooltip.icon-trigger"):void 0,...e.props,ref:l})):y.jsx("div",{...i({ref:l,tabIndex:0,role:b?"button":void 0,className:q.default(o.default["tedi-overlay__trigger"],o.default["tedi-overlay__trigger--text"],{[o.default["tedi-overlay__trigger--click"]]:g==="click"},a),...s}),children:e})};exports.OverlayTrigger=I;

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

@@ -1,45 +1,46 @@
 import { jsx as x } from "react/jsx-runtime";
 import { useMergeRefs as y } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import b from "../../../../../external/classnames/index.es.js";
-import { useContext as _, isValidElement as s, cloneElement as u } from "react";
-import { getElementRef as I } from "../../../helpers/get-element-ref.es.js";
-import { Icon as R } from "../../base/icon/icon.es.js";
-import { OverlayContext as h } from "./overlay.es.js";
+import u from "../../../../../external/classnames/index.es.js";
+import { useContext as _, isValidElement as l, cloneElement as I } from "react";
+import { getElementRef as R } from "../../../helpers/get-element-ref.es.js";
+import { Icon as h } from "../../base/icon/icon.es.js";
+import { OverlayContext as E } from "./overlay.es.js";
 import r from "./overlay.module.scss.es.js";
-import { useLabels as E } from "../../../providers/label-provider/use-labels.es.js";
-const T = (n) => {
-  const { children: e, className: l } = n, { getLabel: m } = E(), { getReferenceProps: t, reference: c, openWith: a, open: p, role: f, ariaHidden: d, contentId: g } = _(h), v = s(e) ? I(e) : void 0, o = y([c, v]), i = f === "tooltip" && !d ? {
-    "aria-describedby": p ? g : void 0
+import { useLabels as N } from "../../../providers/label-provider/use-labels.es.js";
+const V = (c) => {
+  const { children: e, className: a } = c, { getLabel: m } = N(), { getReferenceProps: o, reference: p, openWith: d, open: f, role: t, ariaHidden: i, contentId: g } = _(E), v = l(e) ? R(e) : void 0, n = y([p, v]), b = t !== "tooltip" && t !== "label" && !i, s = t === "tooltip" && !i ? {
+    "aria-describedby": f ? g : void 0
   } : {};
-  return s(e) ? u(
+  return l(e) ? I(
     e,
-    t({
+    o({
       tabIndex: 0,
-      ...i,
-      label: e.type === R ? m("tooltip.icon-trigger") : void 0,
+      ...s,
+      label: e.type === h ? m("tooltip.icon-trigger") : void 0,
       ...e.props,
-      ref: o
+      ref: n
     })
   ) : /* @__PURE__ */ x(
     "div",
     {
-      ...t({
-        ref: o,
+      ...o({
+        ref: n,
         tabIndex: 0,
-        className: b(
+        role: b ? "button" : void 0,
+        className: u(
           r["tedi-overlay__trigger"],
           r["tedi-overlay__trigger--text"],
           {
-            [r["tedi-overlay__trigger--click"]]: a === "click"
+            [r["tedi-overlay__trigger--click"]]: d === "click"
           },
-          l
+          a
         ),
-        ...i
+        ...s
       }),
       children: e
     }
   );
 };
 export {
-  T as OverlayTrigger
+  V as OverlayTrigger
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),b=require("../../base/typography/text/text.cjs.js"),f=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("../modal/modal.cjs.js"),d=require("./sheet.module.scss.cjs.js"),i=({open:r,onToggle:a,defaultOpen:n,title:s,header:l,closeButton:c=!0,ariaLabel:u,className:h,children:x})=>{const o=m.useId();return e.jsx(t.Modal,{open:r,onToggle:a,defaultOpen:n,children:e.jsxs(t.Modal.Content,{position:"bottom",fullscreen:"edge","aria-label":u,"aria-labelledby":!l&&s!==void 0&&s!==null?o:void 0,className:j.default(d.default["tedi-sheet"],h),children:[l?e.jsx(t.Modal.Header,{children:l}):e.jsx(t.Modal.Header,{children:e.jsxs("div",{className:d.default["tedi-sheet__header"],children:[e.jsx(b.Text,{id:o,modifiers:"bold",color:"secondary",className:d.default["tedi-sheet__title"],children:s}),c&&e.jsx(t.Modal.Closer,{children:e.jsx(f.ClosingButton,{size:"small"})})]})}),e.jsx(t.Modal.Body,{children:x})]})})};i.displayName="Sheet";exports.Sheet=i;

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+interface SheetBaseProps {
+    /** Controlled open state. Pair with `onToggle`; omit for uncontrolled use with `defaultOpen`. */
+    open?: boolean;
+    /** Called when the sheet opens or closes. */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Initial open state in uncontrolled mode. Ignored when `open` is provided.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the close button is shown next to the `title`. Only applies to the
+     * `title` layout — a custom `header` owns its own controls.
+     * @default true
+     */
+    closeButton?: boolean;
+    /** Extra class name applied to the sheet container. */
+    className?: string;
+    /** Sheet body content. */
+    children: ReactNode;
+}
+/**
+ * The dialog must always have an accessible name (WCAG 4.1.2). A plain `title` names it via
+ * `aria-labelledby`; when no title is rendered (a custom `header`, or no title at all) an explicit
+ * `ariaLabel` is required — the type enforces one of these.
+ */
+export type SheetProps = SheetBaseProps & ({
+    /**
+     * Plain header title, rendered as the sheet's bold heading (with a close button per
+     * `closeButton`) and wired to the dialog's `aria-labelledby`.
+     */
+    title: ReactNode;
+    header?: never;
+    /** Optional — the rendered `title` already names the dialog. */
+    ariaLabel?: string;
+} | {
+    /**
+     * Accessible name for the dialog. Required here because no plain `title` is rendered
+     * (a custom `header`, or no title).
+     */
+    ariaLabel: string;
+    /** Plain header title. Ignored when `header` is set. */
+    title?: ReactNode;
+    /**
+     * Full header override (custom controls, layout, …), rendered as `Modal.Header` children —
+     * replaces the default title/close-button layout, so the consumer owns any close control.
+     * Takes precedence over `title`.
+     */
+    header?: ReactNode;
+});
+/**
+ * ⚠️ Internal, temporary component — **not exported publicly**.
+ *
+ * A bottom-sheet overlay built on `Modal` (`position="bottom"` +
+ * `fullscreen="edge"`), so the sheet sits flush to the screen edges with no
+ * outer margin. It centralises that configuration for the mobile variants that
+ * need a sheet (e.g. `TableOfContents.Collapsible`, `CardStepper`) until a real
+ * `Sheet` component exists — at which point these usages migrate to it.
+ */
+export declare const Sheet: {
+    ({ open, onToggle, defaultOpen, title, header, closeButton, ariaLabel, className, children, }: SheetProps): JSX.Element;
+    displayName: string;
+};
+export default Sheet;

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

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import f from "../../../../../external/classnames/index.es.js";
+import { useId as u } from "react";
+import { Text as b } from "../../base/typography/text/text.es.js";
+import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { Modal as o } from "../modal/modal.es.js";
+import l from "./sheet.module.scss.es.js";
+const N = ({
+  open: d,
+  onToggle: m,
+  defaultOpen: a,
+  title: r,
+  header: i,
+  closeButton: n = !0,
+  ariaLabel: c,
+  className: h,
+  children: p
+}) => {
+  const s = u();
+  return /* @__PURE__ */ e(o, { open: d, onToggle: m, defaultOpen: a, children: /* @__PURE__ */ t(
+    o.Content,
+    {
+      position: "bottom",
+      fullscreen: "edge",
+      "aria-label": c,
+      "aria-labelledby": !i && r !== void 0 && r !== null ? s : void 0,
+      className: f(l["tedi-sheet"], h),
+      children: [
+        i ? /* @__PURE__ */ e(o.Header, { children: i }) : /* @__PURE__ */ e(o.Header, { children: /* @__PURE__ */ t("div", { className: l["tedi-sheet__header"], children: [
+          /* @__PURE__ */ e(b, { id: s, modifiers: "bold", color: "secondary", className: l["tedi-sheet__title"], children: r }),
+          n && /* @__PURE__ */ e(o.Closer, { children: /* @__PURE__ */ e(y, { size: "small" }) })
+        ] }) }),
+        /* @__PURE__ */ e(o.Body, { children: p })
+      ]
+    }
+  ) });
+};
+N.displayName = "Sheet";
+export {
+  N as Sheet
+};

package/src/tedi/components/overlays/sheet/sheet.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sheet":"tedi-sheet-3174d4b8","tedi-sheet__header":"tedi-sheet__header-39963c05","tedi-sheet__title":"tedi-sheet__title-d67212d8"};exports.default=e;

package/src/tedi/components/overlays/sheet/sheet.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = {
+  "tedi-sheet": "tedi-sheet-3174d4b8",
+  "tedi-sheet__header": "tedi-sheet__header-39963c05",
+  "tedi-sheet__title": "tedi-sheet__title-d67212d8"
+};
+export {
+  e as default
+};

package/src/tedi/helpers/hooks/use-safe-id.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),a=(e="tedi")=>`${e}-${t.useId()}`.replace(/[^a-zA-Z0-9_-]/g,"");exports.useSafeId=a;

package/src/tedi/helpers/hooks/use-safe-id.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Colon-free variant of React's `useId()`. `useId()` returns ids wrapped in colons
+ * (e.g. `:r8m:`) which are valid in the DOM but break CSS-selector resolution — so
+ * selector-based tooling (such as axe resolving an `aria-controls` idref) can't
+ * confirm the referenced element exists and reports it as inconclusive. Use this
+ * whenever the id is written to the DOM and referenced by an `id` / aria idref
+ * attribute (`aria-controls`, `aria-labelledby`, `htmlFor`, …).
+ *
+ * The whole result (prefix included) is stripped of any character that isn't a
+ * letter, digit, `-` or `_`, so a caller-supplied prefix such as `"nav:main"`
+ * can't reintroduce a colon and break the selector-safe contract.
+ *
+ * @param prefix Readable prefix prepended to the id. @default 'tedi'
+ * @returns A stable, unique, selector-safe id (e.g. `tedi-r8m`).
+ */
+export declare const useSafeId: (prefix?: string) => string;

package/src/tedi/helpers/hooks/use-safe-id.es.js

@@ -0,0 +1,5 @@
+import { useId as o } from "react";
+const t = (e = "tedi") => `${e}-${o()}`.replace(/[^a-zA-Z0-9_-]/g, "");
+export {
+  t as useSafeId
+};

package/src/tedi/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export * from './hooks/use-is-mounted';
+export * from './hooks/use-safe-id';
 export * from './hooks/use-breakpoint';
 export * from './hooks/use-breakpoint-props';
 export * from './hooks/use-element-size';

package/src/tedi/index.d.ts

@@ -40,6 +40,8 @@ export * from './components/navigation/link/link';
 export * from './components/navigation/pagination';
 export * from './components/navigation/table-of-contents';
 export * from './components/navigation/tabs';
+export * from './components/navigation/vertical-stepper';
+export * from './components/navigation/card-stepper';
 export * from './components/form/textfield/textfield';
 export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';