@tedi-design-system/react 17.0.0-rc.5 → 17.0.0-rc.6

package/package.json

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

package/src/community/components/tabs/tabs/tabs.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { PrintProps } from '../../../../tedi/components/misc/print/print';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsProps {
     /**
      * Tabs content. Children should be TabsItems
@@ -32,5 +35,8 @@ export interface TabsProps {
      */
     hideNavOnPrint?: PrintProps['visibility'];
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 export default Tabs;

package/src/community/components/tabs/tabs-item/tabs-item.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { CardContentProps } from '../../card';
 type TabsItemBreakpointProps = Pick<CardContentProps, 'padding' | 'background'>;
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsItemProps extends BreakpointSupport<TabsItemBreakpointProps> {
     /**
      * ID property.
@@ -20,5 +23,8 @@ export interface TabsItemProps extends BreakpointSupport<TabsItemBreakpointProps
      */
     className?: string;
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsItem: (props: TabsItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TabsItem;

package/src/community/components/tabs/tabs-nav/tabs-nav-item.d.ts

@@ -1,6 +1,12 @@
 import { default as React } from 'react';
 import { AnchorProps } from '../../anchor/anchor';
 import { TabsItemProps } from '../tabs-item/tabs-item';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export type TabsNavItemProps<C extends React.ElementType = 'a'> = AnchorProps<C> & Pick<TabsItemProps, 'id'>;
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsNavItem: <C extends React.ElementType = "a">(props: TabsNavItemProps<C>) => JSX.Element;
 export default TabsNavItem;

package/src/community/components/tabs/tabs-nav/tabs-nav.d.ts

@@ -1,4 +1,7 @@
 import { TabsNavItemProps } from './tabs-nav-item';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsNavProps {
     /**
      * Additional classes.
@@ -13,5 +16,8 @@ export interface TabsNavProps {
      */
     'aria-labelledby': string;
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsNav: (props: TabsNavProps) => JSX.Element;
 export default TabsNav;

package/src/tedi/components/misc/scroll-fade/scroll-fade.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),a=require("./scroll-fade.module.scss.cjs.js"),f=l.forwardRef((S,t)=>{const{children:g,className:_,scrollBar:x="custom",onScrollToBottom:o,onScrollToTop:s,fadeSize:n=20,fadePosition:c="both"}=S,[m,M]=l.useState({top:!1,bottom:!1}),d=l.useCallback((e,r,i)=>{const u=e===0,B=Math.abs(r-e-i)<=1;let b=!0,h=!0;u&&(b=!1,s==null||s()),B&&(h=!1,o==null||o()),M({top:b,bottom:h})},[s,o]),j=l.useCallback(e=>{const{scrollTop:r,scrollHeight:i,clientHeight:u}=e.target;d(r,i,u)},[d]),k=l.useCallback(e=>{typeof t=="function"?t(e):t&&(t.current=e),e&&d(e.scrollTop,e.scrollHeight,e.clientHeight)},[d,t]),q=F.default(a.default["tedi-scroll-fade"],{[a.default[`tedi-scroll-fade--top-${n}`]]:m.top&&(c==="both"||c==="top")},{[a.default[`tedi-scroll-fade--bottom-${n}`]]:m.bottom&&(c==="both"||c==="bottom")},_),v=F.default(a.default["tedi-scroll-fade__inner"],{[a.default["tedi-scroll-fade__inner--custom-scroll"]]:x==="custom"});return p.jsx("div",{"data-name":"scroll-fade",className:q,children:p.jsx("div",{ref:k,onScroll:j,className:v,tabIndex:0,children:g})})});f.displayName="ScrollFade";exports.ScrollFade=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),l=require("./scroll-fade.module.scss.cjs.js"),E=require("../../../helpers/hooks/use-scroll-fade.cjs.js"),c=n.forwardRef((i,e)=>{const{children:u,className:f,scrollBar:S="custom",onScrollToBottom:m,onScrollToTop:F,fadeSize:r=20,fadePosition:o="both"}=i,{scrollRef:a,canScrollStart:b,canScrollEnd:h,handleScroll:_}=E.useScrollFade({direction:"vertical",onScrollToStart:F,onScrollToEnd:m}),p=n.useCallback(t=>{a(t),typeof e=="function"?e(t):e&&(e.current=t)},[a,e]),T=b&&(o==="both"||o==="top"),q=h&&(o==="both"||o==="bottom"),v=s.default(l.default["tedi-scroll-fade"],{[l.default[`tedi-scroll-fade--top-${r}`]]:T},{[l.default[`tedi-scroll-fade--bottom-${r}`]]:q},f),x=s.default(l.default["tedi-scroll-fade__inner"],{[l.default["tedi-scroll-fade__inner--custom-scroll"]]:S==="custom"});return d.jsx("div",{"data-name":"scroll-fade",className:v,children:d.jsx("div",{ref:p,onScroll:_,className:x,tabIndex:0,children:u})})});c.displayName="ScrollFade";exports.ScrollFade=c;exports.default=c;

package/src/tedi/components/misc/scroll-fade/scroll-fade.es.js

@@ -1,48 +1,38 @@
-import { jsx as h } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import { forwardRef as k, useState as v, useCallback as f } from "react";
-import o from "./scroll-fade.module.scss.es.js";
-const E = k((F, e) => {
+import { jsx as a } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { forwardRef as B, useCallback as _ } from "react";
+import l from "./scroll-fade.module.scss.es.js";
+import { useScrollFade as v } from "../../../helpers/hooks/use-scroll-fade.es.js";
+const w = B((d, o) => {
   const {
-    children: g,
-    className: N,
-    scrollBar: S = "custom",
-    onScrollToBottom: l,
-    onScrollToTop: a,
-    fadeSize: m = 20,
-    fadePosition: s = "both"
-  } = F, [n, B] = v({ top: !1, bottom: !1 }), c = f(
-    (t, r, i) => {
-      const d = t === 0, M = Math.abs(r - t - i) <= 1;
-      let p = !0, b = !0;
-      d && (p = !1, a == null || a()), M && (b = !1, l == null || l()), B({ top: p, bottom: b });
+    children: n,
+    className: i,
+    scrollBar: m = "custom",
+    onScrollToBottom: f,
+    onScrollToTop: S,
+    fadeSize: c = 20,
+    fadePosition: t = "both"
+  } = d, { scrollRef: e, canScrollStart: p, canScrollEnd: u, handleScroll: h } = v({
+    direction: "vertical",
+    onScrollToStart: S,
+    onScrollToEnd: f
+  }), b = _(
+    (r) => {
+      e(r), typeof o == "function" ? o(r) : o && (o.current = r);
     },
-    [a, l]
-  ), H = f(
-    (t) => {
-      const { scrollTop: r, scrollHeight: i, clientHeight: d } = t.target;
-      c(r, i, d);
-    },
-    [c]
-  ), _ = f(
-    (t) => {
-      typeof e == "function" ? e(t) : e && (e.current = t), t && c(t.scrollTop, t.scrollHeight, t.clientHeight);
-    },
-    [c, e]
-  ), x = u(
-    o["tedi-scroll-fade"],
-    { [o[`tedi-scroll-fade--top-${m}`]]: n.top && (s === "both" || s === "top") },
-    {
-      [o[`tedi-scroll-fade--bottom-${m}`]]: n.bottom && (s === "both" || s === "bottom")
-    },
-    N
-  ), y = u(o["tedi-scroll-fade__inner"], {
-    [o["tedi-scroll-fade__inner--custom-scroll"]]: S === "custom"
+    [e, o]
+  ), F = p && (t === "both" || t === "top"), E = u && (t === "both" || t === "bottom"), N = s(
+    l["tedi-scroll-fade"],
+    { [l[`tedi-scroll-fade--top-${c}`]]: F },
+    { [l[`tedi-scroll-fade--bottom-${c}`]]: E },
+    i
+  ), T = s(l["tedi-scroll-fade__inner"], {
+    [l["tedi-scroll-fade__inner--custom-scroll"]]: m === "custom"
   });
-  return /* @__PURE__ */ h("div", { "data-name": "scroll-fade", className: x, children: /* @__PURE__ */ h("div", { ref: _, onScroll: H, className: y, tabIndex: 0, children: g }) });
+  return /* @__PURE__ */ a("div", { "data-name": "scroll-fade", className: N, children: /* @__PURE__ */ a("div", { ref: b, onScroll: h, className: T, tabIndex: 0, children: n }) });
 });
-E.displayName = "ScrollFade";
+w.displayName = "ScrollFade";
 export {
-  E as ScrollFade,
-  E as default
+  w as ScrollFade,
+  w as default
 };

package/src/tedi/components/navigation/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tabs';
+export * from './tabs-context';
+export * from './tabs-list/tabs-list';
+export * from './tabs-trigger/tabs-trigger';
+export * from './tabs-content/tabs-content';

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),l=require("../tabs.module.scss.cjs.js"),d=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=d.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:i.default(l.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface TabsContentProps {
+    /**
+     * Unique identifier matching the corresponding TabsTrigger id.
+     * When provided, content is only shown when this tab is active.
+     * When omitted, content is always rendered (useful for router outlets).
+     */
+    id?: string;
+    /**
+     * Tab panel content
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+}
+export declare const TabsContent: {
+    (props: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default TabsContent;

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.es.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import r from "../../../../../../external/classnames/index.es.js";
+import i from "../tabs.module.scss.es.js";
+import { useTabsContext as l } from "../tabs-context.es.js";
+const m = (a) => {
+  const { id: t, children: e, className: n } = a, { currentTab: o } = l();
+  return t && o !== t ? null : /* @__PURE__ */ s(
+    "div",
+    {
+      "data-name": "tabs-content",
+      id: t ? `${t}-panel` : void 0,
+      role: "tabpanel",
+      "aria-labelledby": t ?? void 0,
+      className: r(i["tedi-tabs__content"], n),
+      children: e
+    }
+  );
+};
+m.displayName = "TabsContent";
+export {
+  m as TabsContent
+};

package/src/tedi/components/navigation/tabs/tabs-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=e.createContext(null),o=()=>{const t=e.useContext(n);if(!t)throw new Error("Tabs components must be used within <Tabs />");return t};exports.TabsContext=n;exports.useTabsContext=o;

package/src/tedi/components/navigation/tabs/tabs-context.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type TabsContextValue = {
+    currentTab: string;
+    setCurrentTab: (id: string) => void;
+};
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+export declare const useTabsContext: () => TabsContextValue;

package/src/tedi/components/navigation/tabs/tabs-context.es.js

@@ -0,0 +1,11 @@
+import e, { useContext as o } from "react";
+const n = e.createContext(null), r = () => {
+  const t = o(n);
+  if (!t)
+    throw new Error("Tabs components must be used within <Tabs />");
+  return t;
+};
+export {
+  n as TabsContext,
+  r as useTabsContext
+};

package/src/tedi/components/navigation/tabs/tabs-helpers.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),t[r].scrollIntoView({block:"nearest",inline:"nearest"}),t[r]):null};exports.navigateTablist=o;

package/src/tedi/components/navigation/tabs/tabs-helpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Navigates to a sibling tab in the tablist using ArrowLeft/ArrowRight/Home/End keys.
+ * Returns the target tab element if navigation occurred, or null otherwise.
+ */
+export declare const navigateTablist: (e: React.KeyboardEvent<HTMLButtonElement>) => HTMLButtonElement | null;

package/src/tedi/components/navigation/tabs/tabs-helpers.es.js

@@ -0,0 +1,29 @@
+const o = (e) => {
+  if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
+    return null;
+  const l = e.currentTarget.closest('[role="tablist"]');
+  if (!l) return null;
+  const t = Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(
+    (a) => getComputedStyle(a).display !== "none"
+  ), n = t.indexOf(e.currentTarget);
+  if (t.length === 0 || n === -1) return null;
+  let r = -1;
+  switch (e.key) {
+    case "ArrowLeft":
+      r = n === 0 ? t.length - 1 : n - 1;
+      break;
+    case "ArrowRight":
+      r = n === t.length - 1 ? 0 : n + 1;
+      break;
+    case "Home":
+      r = 0;
+      break;
+    case "End":
+      r = t.length - 1;
+      break;
+  }
+  return r !== -1 ? (e.preventDefault(), t[r].focus(), t[r].scrollIntoView({ block: "nearest", inline: "nearest" }), t[r]) : null;
+};
+export {
+  o as navigateTablist
+};

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),t=require("react"),D=require("../../../base/icon/icon.cjs.js"),k=require("../../../misc/print/print.cjs.js"),o=require("../../../overlays/dropdown/dropdown.cjs.js"),i=require("../tabs.module.scss.cjs.js"),z=require("../tabs-context.cjs.js"),P=require("../../../../providers/label-provider/use-labels.cjs.js"),A=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),v=R=>{const{children:a,className:S,"aria-label":j,"aria-labelledby":y,printVisibility:L="show",overflowMode:r="dropdown"}=R,{getLabel:q}=P.useLabels(),{currentTab:W,setCurrentTab:T}=z.useTabsContext(),h=t.useRef(null),c=t.useRef(null),[d,u]=t.useState(!1),f=t.useRef(!1),b=t.useRef(0);f.current=d;const{scrollRef:w,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&w(e)},[r,w]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),m=t.useMemo(()=>{const e=[];return p.forEach(l=>{const n=l.props;e.push({id:n.id,label:n.children,disabled:n.disabled})}),e},[p]),_=r==="dropdown"&&d&&m.length>1,E=m.filter(e=>e.id!==W),I=e=>{e&&T(e)};return t.useLayoutEffect(()=>{if(r!=="dropdown")return;const e=c.current;!e||f.current||(b.current=e.scrollWidth,e.scrollWidth>e.clientWidth&&e.clientWidth>0&&u(!0))},[r,d,p]),t.useEffect(()=>{if(r!=="dropdown")return;const e=h.current,l=c.current;if(!e||!l)return;const n=()=>{f.current?b.current<=e.clientWidth&&u(!1):l.scrollWidth>l.clientWidth&&l.clientWidth>0&&(b.current=l.scrollWidth,u(!0))},x=new ResizeObserver(n);return x.observe(e),()=>x.disconnect()},[r]),s.jsx(k.Print,{visibility:L,children:s.jsxs("div",{ref:h,className:g.default(i.default["tedi-tabs__list-wrapper"],{[i.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:r==="scroll"&&C,[i.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:r==="scroll"&&M}),children:[s.jsx("div",{ref:O,"data-name":"tabs-list",role:"tablist","aria-label":j,"aria-labelledby":y,className:g.default(i.default["tedi-tabs__list"],{[i.default["tedi-tabs__list--overflow"]]:_},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),_&&s.jsx("div",{className:i.default["tedi-tabs__more-wrapper"],children:s.jsxs(o.Dropdown,{placement:"bottom-end",children:[s.jsx(o.Dropdown.Trigger,{children:s.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:i.default["tedi-tabs__more-btn"],children:[q("tabs.more"),s.jsx(D.Icon,{name:"expand_more",size:18})]})}),s.jsx(o.Dropdown.Content,{children:E.map((e,l)=>s.jsx(o.Dropdown.Item,{index:l,disabled:e.disabled,onClick:()=>I(e.id),children:e.label},e.id))})]})})]})})};v.displayName="TabsList";exports.TabsList=v;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { PrintProps } from '../../../misc/print/print';
+export interface TabsListProps {
+    /**
+     * Tab trigger elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+    /**
+     * Accessible label for the tablist
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element labelling the tablist
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Controls visibility when printing
+     * @default 'show'
+     */
+    printVisibility?: PrintProps['visibility'];
+    /**
+     * How to handle tab overflow when tabs don't fit in available space.
+     * - 'dropdown': Shows a dropdown button containing overflowing tabs (default)
+     * - 'scroll': Enables horizontal scrolling with a fade indicator
+     * @default 'dropdown'
+     */
+    overflowMode?: 'dropdown' | 'scroll';
+}
+export declare const TabsList: {
+    (props: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.es.js

@@ -0,0 +1,102 @@
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import R from "../../../../../../external/classnames/index.es.js";
+import i, { useRef as n, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
+import { Icon as D } from "../../../base/icon/icon.es.js";
+import { Print as F } from "../../../misc/print/print.es.js";
+import { Dropdown as a } from "../../../overlays/dropdown/dropdown.es.js";
+import l from "../tabs.module.scss.es.js";
+import { useTabsContext as q } from "../tabs-context.es.js";
+import { useLabels as G } from "../../../../providers/label-provider/use-labels.es.js";
+import { useScrollFade as H } from "../../../../helpers/hooks/use-scroll-fade.es.js";
+const J = (S) => {
+  const {
+    children: c,
+    className: W,
+    "aria-label": L,
+    "aria-labelledby": N,
+    printVisibility: C = "show",
+    overflowMode: r = "dropdown"
+  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = n(null), d = n(null), [f, b] = A(!1), m = n(!1), u = n(0);
+  m.current = f;
+  const {
+    scrollRef: _,
+    canScrollStart: I,
+    canScrollEnd: M,
+    handleScroll: O
+  } = H({ direction: "horizontal" }), k = P(
+    (e) => {
+      d.current = e, r === "scroll" && _(e);
+    },
+    [r, _]
+  ), p = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), v = i.useMemo(() => {
+    const e = [];
+    return p.forEach((t) => {
+      const o = t.props;
+      e.push({ id: o.id, label: o.children, disabled: o.disabled });
+    }), e;
+  }, [p]), g = r === "dropdown" && f && v.length > 1, z = v.filter((e) => e.id !== x), j = (e) => {
+    e && E(e);
+  };
+  return V(() => {
+    if (r !== "dropdown") return;
+    const e = d.current;
+    !e || m.current || (u.current = e.scrollWidth, e.scrollWidth > e.clientWidth && e.clientWidth > 0 && b(!0));
+  }, [r, f, p]), B(() => {
+    if (r !== "dropdown") return;
+    const e = w.current, t = d.current;
+    if (!e || !t) return;
+    const o = () => {
+      m.current ? u.current <= e.clientWidth && b(!1) : t.scrollWidth > t.clientWidth && t.clientWidth > 0 && (u.current = t.scrollWidth, b(!0));
+    }, y = new ResizeObserver(o);
+    return y.observe(e), () => y.disconnect();
+  }, [r]), /* @__PURE__ */ s(F, { visibility: C, children: /* @__PURE__ */ h(
+    "div",
+    {
+      ref: w,
+      className: R(l["tedi-tabs__list-wrapper"], {
+        [l["tedi-tabs__list-wrapper--scroll-fade-left"]]: r === "scroll" && I,
+        [l["tedi-tabs__list-wrapper--scroll-fade-right"]]: r === "scroll" && M
+      }),
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: k,
+            "data-name": "tabs-list",
+            role: "tablist",
+            "aria-label": L,
+            "aria-labelledby": N,
+            className: R(
+              l["tedi-tabs__list"],
+              { [l["tedi-tabs__list--overflow"]]: g },
+              { [l["tedi-tabs__list--scroll"]]: r === "scroll" },
+              W
+            ),
+            onScroll: r === "scroll" ? O : void 0,
+            children: c
+          }
+        ),
+        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(a, { placement: "bottom-end", children: [
+          /* @__PURE__ */ s(a.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
+            T("tabs.more"),
+            /* @__PURE__ */ s(D, { name: "expand_more", size: 18 })
+          ] }) }),
+          /* @__PURE__ */ s(a.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+            a.Item,
+            {
+              index: t,
+              disabled: e.disabled,
+              onClick: () => j(e.id),
+              children: e.label
+            },
+            e.id
+          )) })
+        ] }) })
+      ]
+    }
+  ) });
+};
+J.displayName = "TabsList";
+export {
+  J as TabsList
+};

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../base/icon/icon.cjs.js"),r=require("../tabs.module.scss.cjs.js"),_=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),c=l=>{const{id:e,children:d,icon:a,disabled:t=!1,className:b}=l,{currentTab:u,setCurrentTab:i}=_.useTabsContext(),s=u===e,g=()=>{t||i(e)},T=f=>{const n=q.navigateTablist(f);n&&i(n.id)};return o.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:m.default(r.default["tedi-tabs__trigger"],{[r.default["tedi-tabs__trigger--selected"]]:s},{[r.default["tedi-tabs__trigger--disabled"]]:t},b),onClick:g,onKeyDown:T,children:[a&&o.jsx(x.Icon,{name:a,size:18,color:"inherit"}),d]})};c.displayName="TabsTrigger";exports.TabsTrigger=c;

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { IconProps } from '../../../base/icon/icon';
+export interface TabsTriggerProps {
+    /**
+     * Unique identifier for this tab. Used as the element id and to link to the
+     * corresponding TabsContent panel (aria-controls="{id}-panel").
+     */
+    id: string;
+    /**
+     * Tab label text
+     */
+    children: React.ReactNode;
+    /**
+     * Icon displayed before the label
+     */
+    icon?: IconProps['name'];
+    /**
+     * Whether the tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+}
+export declare const TabsTrigger: {
+    (props: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsTrigger;

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.es.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
+import T from "../../../../../../external/classnames/index.es.js";
+import { Icon as u } from "../../../base/icon/icon.es.js";
+import s from "../tabs.module.scss.es.js";
+import { useTabsContext as _ } from "../tabs-context.es.js";
+import { navigateTablist as h } from "../tabs-helpers.es.js";
+const x = (n) => {
+  const { id: e, children: c, icon: a, disabled: t = !1, className: l } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
+    t || i(e);
+  }, b = (g) => {
+    const o = h(g);
+    o && i(o.id);
+  };
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      "data-name": "tabs-trigger",
+      id: e,
+      role: "tab",
+      type: "button",
+      "aria-selected": r,
+      "aria-controls": `${e}-panel`,
+      tabIndex: r ? 0 : -1,
+      disabled: t,
+      className: T(
+        s["tedi-tabs__trigger"],
+        { [s["tedi-tabs__trigger--selected"]]: r },
+        { [s["tedi-tabs__trigger--disabled"]]: t },
+        l
+      ),
+      onClick: m,
+      onKeyDown: b,
+      children: [
+        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
+        c
+      ]
+    }
+  );
+};
+x.displayName = "TabsTrigger";
+export {
+  x as TabsTrigger
+};

package/src/tedi/components/navigation/tabs/tabs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),g=require("./tabs.module.scss.cjs.js"),m=require("./tabs-content/tabs-content.cjs.js"),f=require("./tabs-context.cjs.js"),v=require("./tabs-list/tabs-list.cjs.js"),x=require("./tabs-trigger/tabs-trigger.cjs.js"),e=i=>{const{children:u,value:s,defaultValue:c,onChange:t,className:l}=i,[b,d]=o.useState(c||""),r=s??b,T=o.useCallback(a=>{a!==r&&(s===void 0&&d(a),t==null||t(a))},[s,r,t]);return n.jsx(f.TabsContext.Provider,{value:{currentTab:r,setCurrentTab:T},children:n.jsx("div",{"data-name":"tabs",className:q.default(g.default["tedi-tabs"],l),children:u})})};e.displayName="Tabs";e.List=v.TabsList;e.Trigger=x.TabsTrigger;e.Content=m.TabsContent;exports.Tabs=e;

package/src/tedi/components/navigation/tabs/tabs.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TabsProps {
+    /**
+     * Tabs content — should include Tabs.List and Tabs.Content elements
+     */
+    children: React.ReactNode;
+    /**
+     * Controlled active tab id. Use together with onChange.
+     */
+    value?: string;
+    /**
+     * Default active tab id for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the active tab changes
+     */
+    onChange?: (tabId: string) => void;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+}
+export declare const Tabs: {
+    (props: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    List: {
+        (props: import('./tabs-list/tabs-list').TabsListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: import('./tabs-trigger/tabs-trigger').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('./tabs-content/tabs-content').TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+};
+export default Tabs;

package/src/tedi/components/navigation/tabs/tabs.es.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
+import m from "react";
+import d from "./tabs.module.scss.es.js";
+import { TabsContent as p } from "./tabs-content/tabs-content.es.js";
+import { TabsContext as v } from "./tabs-context.es.js";
+import { TabsList as C } from "./tabs-list/tabs-list.es.js";
+import { TabsTrigger as N } from "./tabs-trigger/tabs-trigger.es.js";
+const r = (l) => {
+  const { children: n, value: e, defaultValue: i, onChange: t, className: c } = l, [b, T] = m.useState(i || ""), a = e ?? b, f = m.useCallback(
+    (o) => {
+      o !== a && (e === void 0 && T(o), t == null || t(o));
+    },
+    [e, a, t]
+  );
+  return /* @__PURE__ */ s(v.Provider, { value: { currentTab: a, setCurrentTab: f }, children: /* @__PURE__ */ s("div", { "data-name": "tabs", className: u(d["tedi-tabs"], c), children: n }) });
+};
+r.displayName = "Tabs";
+r.List = C;
+r.Trigger = N;
+r.Content = p;
+export {
+  r as Tabs
+};

package/src/tedi/components/navigation/tabs/tabs.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-tabs__list-wrapper":"tedi-tabs__list-wrapper-836dbadb","tedi-tabs__list-wrapper--scroll-fade-left":"tedi-tabs__list-wrapper--scroll-fade-left-0e5e3c75","tedi-tabs__list-wrapper--scroll-fade-right":"tedi-tabs__list-wrapper--scroll-fade-right-c29132bd","tedi-tabs__list":"tedi-tabs__list-59580c81","tedi-tabs__list--overflow":"tedi-tabs__list--overflow-31407fe9","tedi-tabs__trigger":"tedi-tabs__trigger-6d66998e","tedi-tabs__trigger--selected":"tedi-tabs__trigger--selected-e4ee99cf","tedi-tabs__list--scroll":"tedi-tabs__list--scroll-04ebd4e1","tedi-tabs__trigger--disabled":"tedi-tabs__trigger--disabled-d33c941d","tedi-tabs__content":"tedi-tabs__content-55f3ce06","tedi-tabs__more-wrapper":"tedi-tabs__more-wrapper-c6ff4efd","tedi-tabs__more-btn":"tedi-tabs__more-btn-bfea5f30"};exports.default=t;

package/src/tedi/components/navigation/tabs/tabs.module.scss.es.js

@@ -0,0 +1,17 @@
+const t = {
+  "tedi-tabs__list-wrapper": "tedi-tabs__list-wrapper-836dbadb",
+  "tedi-tabs__list-wrapper--scroll-fade-left": "tedi-tabs__list-wrapper--scroll-fade-left-0e5e3c75",
+  "tedi-tabs__list-wrapper--scroll-fade-right": "tedi-tabs__list-wrapper--scroll-fade-right-c29132bd",
+  "tedi-tabs__list": "tedi-tabs__list-59580c81",
+  "tedi-tabs__list--overflow": "tedi-tabs__list--overflow-31407fe9",
+  "tedi-tabs__trigger": "tedi-tabs__trigger-6d66998e",
+  "tedi-tabs__trigger--selected": "tedi-tabs__trigger--selected-e4ee99cf",
+  "tedi-tabs__list--scroll": "tedi-tabs__list--scroll-04ebd4e1",
+  "tedi-tabs__trigger--disabled": "tedi-tabs__trigger--disabled-d33c941d",
+  "tedi-tabs__content": "tedi-tabs__content-55f3ce06",
+  "tedi-tabs__more-wrapper": "tedi-tabs__more-wrapper-c6ff4efd",
+  "tedi-tabs__more-btn": "tedi-tabs__more-btn-bfea5f30"
+};
+export {
+  t as default
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),n=require("../dropdown-context.cjs.js"),c=({children:e})=>{const{refs:r,getReferenceProps:o}=n.useDropdownContext();return t.cloneElement(e,o({ref:r.setReference}))};exports.DropdownTrigger=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),c=require("react"),f=require("../dropdown-context.cjs.js"),g=({children:e})=>{const{refs:r,getReferenceProps:o}=f.useDropdownContext(),t=e.ref??null,n=s.useMergeRefs([r.setReference,t]);return c.cloneElement(e,o({...e.props,ref:n}))};exports.DropdownTrigger=g;