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

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;

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

@@ -1,14 +1,16 @@
-import { cloneElement as t } from "react";
-import { useDropdownContext as n } from "../dropdown-context.es.js";
-const s = ({ children: e }) => {
-  const { refs: r, getReferenceProps: o } = n();
-  return t(
+import { useMergeRefs as n } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { cloneElement as s } from "react";
+import { useDropdownContext as p } from "../dropdown-context.es.js";
+const R = ({ children: e }) => {
+  const { refs: r, getReferenceProps: o } = p(), t = e.ref ?? null, f = n([r.setReference, t]);
+  return s(
     e,
     o({
-      ref: r.setReference
+      ...e.props,
+      ref: f
     })
   );
 };
 export {
-  s as DropdownTrigger
+  R as DropdownTrigger
 };

package/src/tedi/components/tags/status-badge/status-badge.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),x=require("react"),S=require("../../base/icon/icon.cjs.js"),e=require("./status-badge.module.scss.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),n=x.forwardRef((r,l)=>{const{getCurrentBreakpointProps:c}=j.useBreakpointProps(r.defaultServerBreakpoint),{color:u="neutral",variant:g="filled",size:f="default",children:a,className:b,title:o,status:s,icon:i,id:m,role:t,...v}=c(r),p=o?"abbr":"div",B=q.default(e.default["tedi-status-badge"],e.default[`tedi-status-badge--variant-${g}`],e.default[`tedi-status-badge--color-${u}`],s&&e.default["tedi-status-badge--status"],s&&e.default[`tedi-status-badge--status-${s}`],f==="large"&&e.default["tedi-status-badge--large"],i&&!a&&e.default["tedi-status-badge__icon-only"],b),_=t==="alert"?"assertive":t==="status"?"polite":void 0;return d.jsxs(p,{ref:l,className:B,id:m,title:o,role:t,"aria-live":t?_:void 0,...v,children:[i&&d.jsx(S.Icon,{name:i,color:"inherit",size:16,className:e.default[`tedi-status-badge__icon-${u}`]}),a&&d.jsx("span",{className:e.default["tedi-status-badge__inner-text"],children:a})]})});n.displayName="StatusBadge";exports.StatusBadge=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),_=require("../../base/icon/icon.cjs.js"),j=require("../status-indicator/status-indicator.cjs.js"),e=require("./status-badge.module.scss.cjs.js"),h=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),l=S.forwardRef((i,c)=>{const{getCurrentBreakpointProps:g}=h.useBreakpointProps(i.defaultServerBreakpoint),{color:o="neutral",variant:f="filled",size:d="default",children:s,className:b,title:n,status:u,icon:r,id:p,role:t,...m}=g(i),v=n?"abbr":"div",B=x.default(e.default["tedi-status-badge"],e.default[`tedi-status-badge--variant-${f}`],e.default[`tedi-status-badge--color-${o}`],d==="large"&&e.default["tedi-status-badge--large"],r&&!s&&e.default["tedi-status-badge__icon-only"],b),q=t==="alert"?"assertive":t==="status"?"polite":void 0;return a.jsxs(v,{ref:c,className:B,id:p,title:n,role:t,"aria-live":t?q:void 0,...m,children:[u&&a.jsx(j.StatusIndicator,{type:u,size:d==="large"?"lg":"sm",hasBorder:!0,position:"top-right"}),r&&a.jsx(_.Icon,{name:r,color:"inherit",size:16,className:e.default[`tedi-status-badge__icon-${o}`]}),s&&a.jsx("span",{className:e.default["tedi-status-badge__inner-text"],children:s})]})});l.displayName="StatusBadge";exports.StatusBadge=l;

package/src/tedi/components/tags/status-badge/status-badge.es.js

@@ -1,50 +1,50 @@
-import { jsxs as B, jsx as l } from "react/jsx-runtime";
+import { jsxs as B, jsx as r } from "react/jsx-runtime";
 import N from "../../../../../external/classnames/index.es.js";
 import { forwardRef as _ } from "react";
-import { Icon as x } from "../../base/icon/icon.es.js";
+import { Icon as h } from "../../base/icon/icon.es.js";
+import { StatusIndicator as x } from "../status-indicator/status-indicator.es.js";
 import t from "./status-badge.module.scss.es.js";
-import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const h = _((r, n) => {
-  const { getCurrentBreakpointProps: u } = $(r.defaultServerBreakpoint), {
+import { useBreakpointProps as y } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const S = _((i, m) => {
+  const { getCurrentBreakpointProps: c } = y(i.defaultServerBreakpoint), {
     color: o = "neutral",
-    variant: c = "filled",
-    size: m = "default",
+    variant: u = "filled",
+    size: d = "default",
     children: a,
     className: g,
-    title: d,
-    status: s,
-    icon: i,
+    title: l,
+    status: n,
+    icon: s,
     id: p,
     role: e,
-    ...b
-  } = u(r), f = d ? "abbr" : "div", v = N(
+    ...f
+  } = c(i), b = l ? "abbr" : "div", v = N(
     t["tedi-status-badge"],
-    t[`tedi-status-badge--variant-${c}`],
+    t[`tedi-status-badge--variant-${u}`],
     t[`tedi-status-badge--color-${o}`],
-    s && t["tedi-status-badge--status"],
-    s && t[`tedi-status-badge--status-${s}`],
-    m === "large" && t["tedi-status-badge--large"],
-    i && !a && t["tedi-status-badge__icon-only"],
+    d === "large" && t["tedi-status-badge--large"],
+    s && !a && t["tedi-status-badge__icon-only"],
     g
   );
   return /* @__PURE__ */ B(
-    f,
+    b,
     {
-      ref: n,
+      ref: m,
       className: v,
       id: p,
-      title: d,
+      title: l,
       role: e,
       "aria-live": e ? e === "alert" ? "assertive" : e === "status" ? "polite" : void 0 : void 0,
-      ...b,
+      ...f,
       children: [
-        i && /* @__PURE__ */ l(x, { name: i, color: "inherit", size: 16, className: t[`tedi-status-badge__icon-${o}`] }),
-        a && /* @__PURE__ */ l("span", { className: t["tedi-status-badge__inner-text"], children: a })
+        n && /* @__PURE__ */ r(x, { type: n, size: d === "large" ? "lg" : "sm", hasBorder: !0, position: "top-right" }),
+        s && /* @__PURE__ */ r(h, { name: s, color: "inherit", size: 16, className: t[`tedi-status-badge__icon-${o}`] }),
+        a && /* @__PURE__ */ r("span", { className: t["tedi-status-badge__inner-text"], children: a })
       ]
     }
   );
 });
-h.displayName = "StatusBadge";
+S.displayName = "StatusBadge";
 export {
-  h as StatusBadge
+  S as StatusBadge
 };

package/src/tedi/components/tags/status-badge/status-badge.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-status-badge":"tedi-status-badge-4e27f642","tedi-status-badge__inner-text":"tedi-status-badge__inner-text-03b0bc82","tedi-status-badge--large":"tedi-status-badge--large-5f2dbfb5","tedi-status-badge--variant-filled":"tedi-status-badge--variant-filled-f4539af1","tedi-status-badge--color-neutral":"tedi-status-badge--color-neutral-d01344a8","tedi-status-badge--color-brand":"tedi-status-badge--color-brand-b771d71c","tedi-status-badge--color-accent":"tedi-status-badge--color-accent-c08bc9ef","tedi-status-badge--color-success":"tedi-status-badge--color-success-1fbe69c4","tedi-status-badge--color-danger":"tedi-status-badge--color-danger-5fce5f83","tedi-status-badge--color-warning":"tedi-status-badge--color-warning-fa9d7c9b","tedi-status-badge--color-transparent":"tedi-status-badge--color-transparent-e6953202","tedi-status-badge--variant-filled-bordered":"tedi-status-badge--variant-filled-bordered-2dd34026","tedi-status-badge--variant-bordered":"tedi-status-badge--variant-bordered-1a37eb74","tedi-status-badge--status":"tedi-status-badge--status-fc03170a","tedi-badge--large":"tedi-badge--large-9671d5cc","tedi-status-badge--status-inactive":"tedi-status-badge--status-inactive-63b8ced2","tedi-status-badge--status-success":"tedi-status-badge--status-success-5c659818","tedi-status-badge--status-danger":"tedi-status-badge--status-danger-f02c312f","tedi-status-badge--status-warning":"tedi-status-badge--status-warning-28e8b925","tedi-status-badge__icon-only":"tedi-status-badge__icon-only-40501cec"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-status-badge":"tedi-status-badge-4e27f642","tedi-status-badge__inner-text":"tedi-status-badge__inner-text-03b0bc82","tedi-status-badge--large":"tedi-status-badge--large-5f2dbfb5","tedi-status-badge--variant-filled":"tedi-status-badge--variant-filled-f4539af1","tedi-status-badge--color-neutral":"tedi-status-badge--color-neutral-d01344a8","tedi-status-badge--color-brand":"tedi-status-badge--color-brand-b771d71c","tedi-status-badge--color-accent":"tedi-status-badge--color-accent-c08bc9ef","tedi-status-badge--color-success":"tedi-status-badge--color-success-1fbe69c4","tedi-status-badge--color-danger":"tedi-status-badge--color-danger-5fce5f83","tedi-status-badge--color-warning":"tedi-status-badge--color-warning-fa9d7c9b","tedi-status-badge--color-transparent":"tedi-status-badge--color-transparent-e6953202","tedi-status-badge--variant-filled-bordered":"tedi-status-badge--variant-filled-bordered-2dd34026","tedi-status-badge--variant-bordered":"tedi-status-badge--variant-bordered-1a37eb74","tedi-status-badge__icon-only":"tedi-status-badge__icon-only-40501cec"};exports.default=t;

package/src/tedi/components/tags/status-badge/status-badge.module.scss.es.js

@@ -12,12 +12,6 @@ const t = {
   "tedi-status-badge--color-transparent": "tedi-status-badge--color-transparent-e6953202",
   "tedi-status-badge--variant-filled-bordered": "tedi-status-badge--variant-filled-bordered-2dd34026",
   "tedi-status-badge--variant-bordered": "tedi-status-badge--variant-bordered-1a37eb74",
-  "tedi-status-badge--status": "tedi-status-badge--status-fc03170a",
-  "tedi-badge--large": "tedi-badge--large-9671d5cc",
-  "tedi-status-badge--status-inactive": "tedi-status-badge--status-inactive-63b8ced2",
-  "tedi-status-badge--status-success": "tedi-status-badge--status-success-5c659818",
-  "tedi-status-badge--status-danger": "tedi-status-badge--status-danger-f02c312f",
-  "tedi-status-badge--status-warning": "tedi-status-badge--status-warning-28e8b925",
   "tedi-status-badge__icon-only": "tedi-status-badge__icon-only-40501cec"
 };
 export {

package/src/tedi/components/tags/status-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './status-indicator';

package/src/tedi/components/tags/status-indicator/status-indicator.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),t=require("./status-indicator.module.scss.cjs.js"),a=e=>{const{type:s="success",size:i="sm",hasBorder:d=!1,position:r="default",className:u}=e;return o.jsx("span",{"data-name":"status-indicator",className:n.default(t.default["tedi-status-indicator"],t.default[`tedi-status-indicator--${s}`],t.default[`tedi-status-indicator--${i}`],{[t.default["tedi-status-indicator--bordered"]]:d},{[t.default["tedi-status-indicator--top-right"]]:r==="top-right"},u),role:"img","aria-hidden":"true"})};a.displayName="StatusIndicator";exports.StatusIndicator=a;

package/src/tedi/components/tags/status-indicator/status-indicator.d.ts

@@ -0,0 +1,36 @@
+export type StatusIndicatorType = 'success' | 'danger' | 'warning' | 'inactive';
+export type StatusIndicatorSize = 'sm' | 'lg';
+export type StatusIndicatorPosition = 'default' | 'top-right';
+export interface StatusIndicatorProps {
+    /**
+     * The status type, which determines the indicator color.
+     * @default 'success'
+     */
+    type?: StatusIndicatorType;
+    /**
+     * The size of the indicator.
+     * @default 'sm'
+     */
+    size?: StatusIndicatorSize;
+    /**
+     * Whether the indicator has a white border ring.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Controls positioning of the indicator.
+     * - `'default'` — inline, no absolute positioning
+     * - `'top-right'` — absolutely positioned at the top-right corner of the parent
+     * @default 'default'
+     */
+    position?: StatusIndicatorPosition;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+}
+export declare const StatusIndicator: {
+    (props: StatusIndicatorProps): JSX.Element;
+    displayName: string;
+};
+export default StatusIndicator;

package/src/tedi/components/tags/status-indicator/status-indicator.es.js

@@ -0,0 +1,26 @@
+import { jsx as d } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import t from "./status-indicator.module.scss.es.js";
+const n = (s) => {
+  const { type: a = "success", size: i = "sm", hasBorder: r = !1, position: e = "default", className: o } = s;
+  return /* @__PURE__ */ d(
+    "span",
+    {
+      "data-name": "status-indicator",
+      className: c(
+        t["tedi-status-indicator"],
+        t[`tedi-status-indicator--${a}`],
+        t[`tedi-status-indicator--${i}`],
+        { [t["tedi-status-indicator--bordered"]]: r },
+        { [t["tedi-status-indicator--top-right"]]: e === "top-right" },
+        o
+      ),
+      role: "img",
+      "aria-hidden": "true"
+    }
+  );
+};
+n.displayName = "StatusIndicator";
+export {
+  n as StatusIndicator
+};

package/src/tedi/components/tags/status-indicator/status-indicator.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-status-indicator":"tedi-status-indicator-529cc6cb","tedi-status-indicator--top-right":"tedi-status-indicator--top-right-96ed4bd8","tedi-status-indicator--sm":"tedi-status-indicator--sm-d5cb39c6","tedi-status-indicator--lg":"tedi-status-indicator--lg-90afc96a","tedi-status-indicator--bordered":"tedi-status-indicator--bordered-31bab75a","tedi-status-indicator--success":"tedi-status-indicator--success-c27edb94","tedi-status-indicator--danger":"tedi-status-indicator--danger-d3709ad6","tedi-status-indicator--warning":"tedi-status-indicator--warning-fb364219","tedi-status-indicator--inactive":"tedi-status-indicator--inactive-258c6a4f"};exports.default=t;

package/src/tedi/components/tags/status-indicator/status-indicator.module.scss.es.js

@@ -0,0 +1,14 @@
+const t = {
+  "tedi-status-indicator": "tedi-status-indicator-529cc6cb",
+  "tedi-status-indicator--top-right": "tedi-status-indicator--top-right-96ed4bd8",
+  "tedi-status-indicator--sm": "tedi-status-indicator--sm-d5cb39c6",
+  "tedi-status-indicator--lg": "tedi-status-indicator--lg-90afc96a",
+  "tedi-status-indicator--bordered": "tedi-status-indicator--bordered-31bab75a",
+  "tedi-status-indicator--success": "tedi-status-indicator--success-c27edb94",
+  "tedi-status-indicator--danger": "tedi-status-indicator--danger-d3709ad6",
+  "tedi-status-indicator--warning": "tedi-status-indicator--warning-fb364219",
+  "tedi-status-indicator--inactive": "tedi-status-indicator--inactive-258c6a4f"
+};
+export {
+  t as default
+};

package/src/tedi/helpers/hooks/use-scroll-fade.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),p=(v={})=>{const{direction:f="vertical",onScrollToStart:S,onScrollToEnd:d}=v,[C,E]=t.useState(!1),[k,z]=t.useState(!1),w=t.useRef(null),r=t.useRef(null),s=t.useRef(S),n=t.useRef(d),R=t.useRef(!1),b=t.useRef(!1);s.current=S,n.current=d;const c=t.useCallback(e=>{var h,g;let l,o,u;f==="horizontal"?(l=e.scrollLeft,o=e.scrollWidth,u=e.clientWidth):(l=e.scrollTop,o=e.scrollHeight,u=e.clientHeight);const a=l<=1,i=Math.abs(o-l-u)<=1;E(!a),z(!i),a&&!R.current&&((h=s.current)==null||h.call(s)),i&&!b.current&&((g=n.current)==null||g.call(n)),R.current=a,b.current=i},[f]),F=t.useCallback(e=>{c(e.currentTarget)},[c]),T=t.useCallback(e=>{r.current&&(r.current.disconnect(),r.current=null),w.current=e,e&&(c(e),r.current=new ResizeObserver(()=>{c(e)}),r.current.observe(e))},[c]);return t.useEffect(()=>()=>{var e;(e=r.current)==null||e.disconnect()},[]),{scrollRef:T,canScrollStart:C,canScrollEnd:k,handleScroll:F}};exports.useScrollFade=p;

package/src/tedi/helpers/hooks/use-scroll-fade.d.ts

@@ -0,0 +1,35 @@
+export interface UseScrollFadeOptions {
+    /**
+     * Scroll direction to track
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Called when element is scrolled to start (top or left)
+     */
+    onScrollToStart?: () => void;
+    /**
+     * Called when element is scrolled to end (bottom or right)
+     */
+    onScrollToEnd?: () => void;
+}
+export interface UseScrollFadeReturn {
+    /**
+     * Callback ref to attach to the scrollable element.
+     * Sets up ResizeObserver and initial measurement.
+     */
+    scrollRef: React.RefCallback<HTMLElement>;
+    /**
+     * Whether content can be scrolled towards the start (top or left)
+     */
+    canScrollStart: boolean;
+    /**
+     * Whether content can be scrolled towards the end (bottom or right)
+     */
+    canScrollEnd: boolean;
+    /**
+     * Scroll event handler to attach to the scrollable element's onScroll
+     */
+    handleScroll: React.UIEventHandler<HTMLElement>;
+}
+export declare const useScrollFade: (options?: UseScrollFadeOptions) => UseScrollFadeReturn;

package/src/tedi/helpers/hooks/use-scroll-fade.es.js

@@ -0,0 +1,34 @@
+import { useState as z, useRef as c, useCallback as f, useEffect as H } from "react";
+const W = (g = {}) => {
+  const { direction: S = "vertical", onScrollToStart: d, onScrollToEnd: h } = g, [p, w] = z(!1), [C, k] = z(!1), m = c(null), r = c(null), n = c(d), s = c(h), b = c(!1), E = c(!1);
+  n.current = d, s.current = h;
+  const e = f(
+    (t) => {
+      var R, v;
+      let l, o, a;
+      S === "horizontal" ? (l = t.scrollLeft, o = t.scrollWidth, a = t.clientWidth) : (l = t.scrollTop, o = t.scrollHeight, a = t.clientHeight);
+      const u = l <= 1, i = Math.abs(o - l - a) <= 1;
+      w(!u), k(!i), u && !b.current && ((R = n.current) == null || R.call(n)), i && !E.current && ((v = s.current) == null || v.call(s)), b.current = u, E.current = i;
+    },
+    [S]
+  ), A = f(
+    (t) => {
+      e(t.currentTarget);
+    },
+    [e]
+  ), F = f(
+    (t) => {
+      r.current && (r.current.disconnect(), r.current = null), m.current = t, t && (e(t), r.current = new ResizeObserver(() => {
+        e(t);
+      }), r.current.observe(t));
+    },
+    [e]
+  );
+  return H(() => () => {
+    var t;
+    (t = r.current) == null || t.disconnect();
+  }, []), { scrollRef: F, canScrollStart: p, canScrollEnd: C, handleScroll: A };
+};
+export {
+  W as useScrollFade
+};

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

@@ -6,3 +6,4 @@ export * from './hooks/use-scroll';
 export * from './hooks/use-is-touch-device';
 export * from './hooks/use-file-upload';
 export * from './hooks/use-what-input';
+export * from './hooks/use-scroll-fade';

package/src/tedi/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/loaders/spinner/spinner';
 export * from './components/loaders/skeleton';
 export * from './components/tags/tag/tag';
 export * from './components/tags/status-badge/status-badge';
+export * from './components/tags/status-indicator/status-indicator';
 export * from './components/buttons/closing-button/closing-button';
 export * from './components/buttons/button/button';
 export * from './components/buttons/info-button/info-button';
@@ -24,6 +25,7 @@ export * from './components/notifications/toast/toast';
 export * from './components/cards/card';
 export * from './components/navigation/hash-trigger/hash-trigger';
 export * from './components/navigation/link/link';
+export * from './components/navigation/tabs';
 export * from './components/form/textfield/textfield';
 export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';