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

package/src/tedi/components/misc/empty-state/empty-state.module.scss.es.js

@@ -0,0 +1,15 @@
+const t = {
+  "tedi-empty-state": "tedi-empty-state-fa18a0c7",
+  "tedi-empty-state--small": "tedi-empty-state--small-cd55192d",
+  "tedi-empty-state--attached": "tedi-empty-state--attached-34f9494f",
+  "tedi-empty-state--inside": "tedi-empty-state--inside-59a35f4a",
+  "tedi-empty-state__text": "tedi-empty-state__text-3356405a",
+  "tedi-empty-state__icon": "tedi-empty-state__icon-b7c0b65c",
+  "tedi-empty-state__content": "tedi-empty-state__content-8f9e9b61",
+  "tedi-empty-state__heading": "tedi-empty-state__heading-a8adf6aa",
+  "tedi-empty-state__description": "tedi-empty-state__description-4c540947",
+  "tedi-empty-state__actions": "tedi-empty-state__actions-bff9b270"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './empty-state';

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as M } from "react/jsx-runtime";
 import y from "../../../../../external/classnames/index.es.js";
-import { useState as S, useRef as V, useEffect as w, isValidElement as x, cloneElement as I } from "react";
+import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement as I } from "react";
 import { useScroll as T } from "../../../helpers/hooks/use-scroll.es.js";
 import f from "./scroll-visibility.module.scss.es.js";
 const k = (H) => {
@@ -44,7 +44,7 @@ const k = (H) => {
     },
     v
   );
-  return x(t) ? I(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
+  return I(t) ? x(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
 };
 export {
   k as ScrollVisibility,

package/src/tedi/components/misc/stretch-content/stretch-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),d=require("./stretch-content.module.scss.cjs.js"),l=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),h=e=>{const{getCurrentBreakpointProps:t}=l.useBreakpointProps(e.defaultServerBreakpoint),{children:r,role:n,direction:o="both",className:s,...c}=t(e),i=a.default(d.default[`tedi-stretch-content--${o}`],s);return u.jsx("div",{className:i,role:n,...c,children:r})};exports.StretchContent=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),d=require("./stretch-content.module.scss.cjs.js"),h=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),t=e=>{const{getCurrentBreakpointProps:r}=h.useBreakpointProps(e.defaultServerBreakpoint),{children:n,role:o,direction:s="both",className:c,...u}=r(e),i=l.default(d.default[`tedi-stretch-content--${s}`],c);return a.jsx("div",{className:i,role:o,...u,children:n})};exports.StretchContent=t;exports.default=t;

package/src/tedi/components/misc/stretch-content/stretch-content.es.js

@@ -1,17 +1,18 @@
-import { jsx as m } from "react/jsx-runtime";
-import a from "../../../../../external/classnames/index.es.js";
-import p from "./stretch-content.module.scss.es.js";
-import { useBreakpointProps as l } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { jsx as i } from "react/jsx-runtime";
+import m from "../../../../../external/classnames/index.es.js";
+import l from "./stretch-content.module.scss.es.js";
+import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 const B = (t) => {
-  const { getCurrentBreakpointProps: e } = l(t.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: e } = p(t.defaultServerBreakpoint), {
     children: r,
     role: o,
     direction: s = "both",
     className: n,
     ...c
-  } = e(t), i = a(p[`tedi-stretch-content--${s}`], n);
-  return /* @__PURE__ */ m("div", { className: i, role: o, ...c, children: r });
+  } = e(t), a = m(l[`tedi-stretch-content--${s}`], n);
+  return /* @__PURE__ */ i("div", { className: a, role: o, ...c, children: r });
 };
 export {
-  B as StretchContent
+  B as StretchContent,
+  B as default
 };

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

@@ -1,5 +1,5 @@
 import { jsx as h } from "react/jsx-runtime";
-import { useRef as a, useEffect as l, isValidElement as d, cloneElement as u } from "react";
+import { useRef as a, useEffect as l, cloneElement as d, isValidElement as u } from "react";
 function m(n) {
   const e = n.getBoundingClientRect();
   return e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth);
@@ -20,7 +20,7 @@ const p = (n) => {
     return r.current && (s(), r.current = !1), window.addEventListener("hashchange", s), () => {
       window.removeEventListener("hashchange", s);
     };
-  }, [t, i, e]), d(o) ? u(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
+  }, [t, i, e]), u(o) ? d(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
 };
 export {
   p as HashTrigger

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

@@ -0,0 +1,2 @@
+export * from './pagination';
+export * from './use-pagination';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),U=require("../../base/icon/icon.cjs.js"),y=require("../../base/typography/text/text.cjs.js"),N=require("../../buttons/button/button.cjs.js"),D=require("../../form/select/select.cjs.js"),a=require("./pagination.module.scss.cjs.js"),E=require("./use-pagination.cjs.js"),F=require("../../../providers/label-provider/use-labels.cjs.js"),m=s.forwardRef((S,j)=>{const{pageCount:u,page:f,defaultPage:z=1,onPageChange:d,totalItems:h,pageSize:b,pageSizeOptions:l,onPageSizeChange:c,boundaryCount:L=1,siblingCount:q=1,labels:v,className:A}=S,{getLabel:i}=F.useLabels(),n=s.useMemo(()=>({ariaLabel:i("pagination.title"),previous:i("pagination.prev-page"),next:i("pagination.next-page"),pageAriaLabel:e=>i("pagination.page",e,!1),currentPageAriaLabel:e=>i("pagination.page",e,!0),results:e=>i("pagination.results",e),pageSize:i("pagination.page-size"),...v}),[i,v]),[C,P]=s.useState(z),_=f??C,w=E.usePagination({page:_,pageCount:u,boundaryCount:L,siblingCount:q}),x=s.useCallback(e=>{e===_||e<1||e>u||(f===void 0&&P(e),d==null||d(e))},[_,d,f,u]),k=s.useId(),p=s.useMemo(()=>Array.isArray(l)?l.map(e=>({value:String(e),label:String(e)})):[],[l]),M=s.useMemo(()=>b===void 0?p[0]??null:p.find(e=>e.value===String(b))??null,[b,p]),I=s.useCallback(e=>{const r=Array.isArray(e)?e[0]:e;r&&"value"in r&&(c==null||c(Number(r.value)))},[c]),O=g.default(a.default["tedi-pagination"],A),R=h!==void 0,T=Array.isArray(l)&&l.length>0;return t.jsxs("div",{ref:j,className:O,"data-name":"tedi-pagination",children:[t.jsx("div",{className:a.default["tedi-pagination__slot-start"],children:R&&t.jsx(y.Text,{className:a.default["tedi-pagination__results"],color:"secondary",modifiers:"small",children:n.results(h)})}),t.jsx("div",{className:a.default["tedi-pagination__slot-center"],children:u>1&&t.jsx("nav",{"aria-label":n.ariaLabel,className:a.default["tedi-pagination__nav"],children:t.jsx("ul",{className:a.default["tedi-pagination__list"],children:w.map((e,r)=>{if(e.type==="ellipsis")return t.jsx("li",{className:g.default(a.default["tedi-pagination__item"],a.default["tedi-pagination__item--ellipsis"]),"aria-hidden":"true",children:"…"},`ellipsis-${r}`);if(e.type==="previous"||e.type==="next"){if(e.disabled)return null;const B=e.type==="previous"?n.previous:n.next,$=e.type==="previous"?"arrow_back":"arrow_forward";return t.jsx("li",{className:a.default["tedi-pagination__item"],children:t.jsx(N.Button,{type:"button",className:g.default(a.default["tedi-pagination__button"],a.default["tedi-pagination__button--nav"]),"aria-label":B,onClick:()=>e.page!==null&&x(e.page),noStyle:!0,children:t.jsx(U.Icon,{name:$,size:18,color:"brand"})})},e.type)}const o=e.page;return t.jsx("li",{className:a.default["tedi-pagination__item"],children:t.jsx(N.Button,{type:"button",className:g.default(a.default["tedi-pagination__button"],{[a.default["tedi-pagination__button--selected"]]:e.selected}),"aria-label":e.selected?n.currentPageAriaLabel(o):n.pageAriaLabel(o),"aria-current":e.selected?"page":void 0,onClick:()=>x(o),noStyle:!0,children:o})},o)})})})}),t.jsx("div",{className:a.default["tedi-pagination__slot-end"],children:T&&t.jsxs("div",{className:a.default["tedi-pagination__page-size"],children:[t.jsx(y.Text,{className:a.default["tedi-pagination__page-size-label"],color:"secondary",modifiers:"small",element:"span",children:n.pageSize}),t.jsx(D.Select,{id:`tedi-pagination-page-size-${k}`,className:a.default["tedi-pagination__select"],label:n.pageSize,hideLabel:!0,size:"small",options:p,value:M,onChange:I,isSearchable:!1,isClearable:!1})]})})]})});m.displayName="Pagination";exports.Pagination=m;exports.default=m;

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

@@ -0,0 +1,102 @@
+export type PaginationItemType = 'page' | 'previous' | 'next' | 'ellipsis';
+export interface PaginationItem {
+    type: PaginationItemType;
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface PaginationLabels {
+    /**
+     * Accessible label for the nav wrapper.
+     * @default 'Pagination'
+     */
+    ariaLabel: string;
+    /**
+     * Previous button label (icon-only, used as aria-label).
+     * @default 'Previous page'
+     */
+    previous: string;
+    /**
+     * Next button label (icon-only, used as aria-label).
+     * @default 'Next page'
+     */
+    next: string;
+    /**
+     * Function that builds the aria-label for a numeric page button.
+     * @default (page) => `Go to page ${page}`
+     */
+    pageAriaLabel: (page: number) => string;
+    /**
+     * Function that builds the aria-label for the currently active page.
+     * @default (page) => `Current page, page ${page}`
+     */
+    currentPageAriaLabel: (page: number) => string;
+    /**
+     * Rendered to the left of the pagination nav when `totalItems` is set.
+     * @default (count) => `${count} results`
+     */
+    results: (count: number) => string;
+    /**
+     * Prefix label for the page-size select.
+     * @default 'Show per page'
+     */
+    pageSize: string;
+}
+export interface PaginationProps {
+    /**
+     * Total number of pages.
+     */
+    pageCount: number;
+    /**
+     * Controlled current page (1-based). Pair with `onPageChange`.
+     */
+    page?: number;
+    /**
+     * Initial page for uncontrolled mode (1-based).
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Fires whenever the user navigates to a different page.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items across all pages. Renders a "{count} results" label
+     * to the left of the nav when set.
+     */
+    totalItems?: number;
+    /**
+     * Current page size. Shown in the page-size select when
+     * `pageSizeOptions` is provided.
+     */
+    pageSize?: number;
+    /**
+     * Options for the page-size select. Omit to hide the select.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Fires when the user picks a different page size.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Number of pages always shown at the start and end of the range before
+     * ellipsis kicks in.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Number of sibling pages shown on either side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Override any of the default text labels / aria labels.
+     */
+    labels?: Partial<PaginationLabels>;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Pagination;

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

@@ -0,0 +1,132 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import { forwardRef as D, useMemo as b, useState as E, useCallback as y, useId as F } from "react";
+import { Icon as G } from "../../base/icon/icon.es.js";
+import { Text as S } from "../../base/typography/text/text.es.js";
+import { Button as z } from "../../buttons/button/button.es.js";
+import { Select as H } from "../../form/select/select.es.js";
+import a from "./pagination.module.scss.es.js";
+import { usePagination as J } from "./use-pagination.es.js";
+import { useLabels as K } from "../../../providers/label-provider/use-labels.es.js";
+const Q = D((A, L) => {
+  const {
+    pageCount: o,
+    page: u,
+    defaultPage: C = 1,
+    onPageChange: p,
+    totalItems: f,
+    pageSize: m,
+    pageSizeOptions: s,
+    onPageSizeChange: c,
+    boundaryCount: P = 1,
+    siblingCount: w = 1,
+    labels: h,
+    className: k
+  } = A, { getLabel: t } = K(), n = b(
+    () => ({
+      ariaLabel: t("pagination.title"),
+      previous: t("pagination.prev-page"),
+      next: t("pagination.next-page"),
+      pageAriaLabel: (e) => t("pagination.page", e, !1),
+      currentPageAriaLabel: (e) => t("pagination.page", e, !0),
+      results: (e) => t("pagination.results", e),
+      pageSize: t("pagination.page-size"),
+      ...h
+    }),
+    [t, h]
+  ), [x, I] = E(C), _ = u ?? x, O = J({ page: _, pageCount: o, boundaryCount: P, siblingCount: w }), N = y(
+    (e) => {
+      e === _ || e < 1 || e > o || (u === void 0 && I(e), p == null || p(e));
+    },
+    [_, p, u, o]
+  ), j = F(), d = b(
+    () => Array.isArray(s) ? s.map((e) => ({
+      value: String(e),
+      label: String(e)
+    })) : [],
+    [s]
+  ), R = b(() => m === void 0 ? d[0] ?? null : d.find((e) => e.value === String(m)) ?? null, [m, d]), $ = y(
+    (e) => {
+      const l = Array.isArray(e) ? e[0] : e;
+      l && "value" in l && (c == null || c(Number(l.value)));
+    },
+    [c]
+  ), B = g(a["tedi-pagination"], k), M = f !== void 0, T = Array.isArray(s) && s.length > 0;
+  return /* @__PURE__ */ v("div", { ref: L, className: B, "data-name": "tedi-pagination", children: [
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], children: M && /* @__PURE__ */ i(S, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: n.results(f) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: o > 1 && /* @__PURE__ */ i("nav", { "aria-label": n.ariaLabel, className: a["tedi-pagination__nav"], children: /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: O.map((e, l) => {
+      if (e.type === "ellipsis")
+        return /* @__PURE__ */ i(
+          "li",
+          {
+            className: g(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
+            "aria-hidden": "true",
+            children: "…"
+          },
+          `ellipsis-${l}`
+        );
+      if (e.type === "previous" || e.type === "next") {
+        if (e.disabled) return null;
+        const U = e.type === "previous" ? n.previous : n.next, q = e.type === "previous" ? "arrow_back" : "arrow_forward";
+        return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+          z,
+          {
+            type: "button",
+            className: g(a["tedi-pagination__button"], a["tedi-pagination__button--nav"]),
+            "aria-label": U,
+            onClick: () => e.page !== null && N(e.page),
+            noStyle: !0,
+            children: /* @__PURE__ */ i(G, { name: q, size: 18, color: "brand" })
+          }
+        ) }, e.type);
+      }
+      const r = e.page;
+      return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+        z,
+        {
+          type: "button",
+          className: g(a["tedi-pagination__button"], {
+            [a["tedi-pagination__button--selected"]]: e.selected
+          }),
+          "aria-label": e.selected ? n.currentPageAriaLabel(r) : n.pageAriaLabel(r),
+          "aria-current": e.selected ? "page" : void 0,
+          onClick: () => N(r),
+          noStyle: !0,
+          children: r
+        }
+      ) }, r);
+    }) }) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: T && /* @__PURE__ */ v("div", { className: a["tedi-pagination__page-size"], children: [
+      /* @__PURE__ */ i(
+        S,
+        {
+          className: a["tedi-pagination__page-size-label"],
+          color: "secondary",
+          modifiers: "small",
+          element: "span",
+          children: n.pageSize
+        }
+      ),
+      /* @__PURE__ */ i(
+        H,
+        {
+          id: `tedi-pagination-page-size-${j}`,
+          className: a["tedi-pagination__select"],
+          label: n.pageSize,
+          hideLabel: !0,
+          size: "small",
+          options: d,
+          value: R,
+          onChange: $,
+          isSearchable: !1,
+          isClearable: !1
+        }
+      )
+    ] }) })
+  ] });
+});
+Q.displayName = "Pagination";
+export {
+  Q as Pagination,
+  Q as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e"};exports.default=i;

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

@@ -0,0 +1,20 @@
+const i = {
+  "tedi-pagination": "tedi-pagination-96c6fc62",
+  "tedi-pagination__slot-start": "tedi-pagination__slot-start-846e7900",
+  "tedi-pagination__slot-center": "tedi-pagination__slot-center-e489623b",
+  "tedi-pagination__slot-end": "tedi-pagination__slot-end-3f4f5848",
+  "tedi-pagination__results": "tedi-pagination__results-29d9108c",
+  "tedi-pagination__nav": "tedi-pagination__nav-5f414114",
+  "tedi-pagination__list": "tedi-pagination__list-03467ce1",
+  "tedi-pagination__item": "tedi-pagination__item-46985c58",
+  "tedi-pagination__item--ellipsis": "tedi-pagination__item--ellipsis-85f798f5",
+  "tedi-pagination__button": "tedi-pagination__button-d06c27d4",
+  "tedi-pagination__button--selected": "tedi-pagination__button--selected-cb151c7f",
+  "tedi-pagination__button--nav": "tedi-pagination__button--nav-2f74eea2",
+  "tedi-pagination__page-size": "tedi-pagination__page-size-d1fa6f9d",
+  "tedi-pagination__page-size-label": "tedi-pagination__page-size-label-3dc2d141",
+  "tedi-pagination__select": "tedi-pagination__select-435e167e"
+};
+export {
+  i as default
+};

package/src/tedi/components/navigation/pagination/use-pagination.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(r,e)=>e<r?[]:Array.from({length:e-r+1},(c,n)=>r+n);function m({page:r,pageCount:e,boundaryCount:c=1,siblingCount:n=1}){if(e<=0)return[];const l=Math.max(0,c),t=Math.max(0,n),s=Math.max(1,Math.min(e,r)),f=l*2+t*2+3;let d;if(e<=f)d=i(1,e);else{const a=l+t*2+2,o=l+t+2,h=e-l-t-1;s<=o?d=[...i(1,a),"ellipsis",...i(e-l+1,e)]:s>=h?d=[...i(1,l),"ellipsis",...i(e-a+1,e)]:d=[...i(1,l),"ellipsis",...i(s-t,s+t),"ellipsis",...i(e-l+1,e)]}return[{type:"previous",page:s>1?s-1:null,selected:!1,disabled:s<=1},...d.map(a=>a==="ellipsis"?{type:"ellipsis",page:null,selected:!1,disabled:!0}:{type:"page",page:a,selected:a===s,disabled:!1}),{type:"next",page:s<e?s+1:null,selected:!1,disabled:s>=e}]}exports.usePagination=m;

package/src/tedi/components/navigation/pagination/use-pagination.d.ts

@@ -0,0 +1,28 @@
+import { PaginationItem } from './pagination';
+export interface UsePaginationArgs {
+    /** 1-based current page. */
+    page: number;
+    /** Total page count. */
+    pageCount: number;
+    /** Pages always shown at the very start and very end. */
+    boundaryCount?: number;
+    /** Pages shown on either side of the current page. */
+    siblingCount?: number;
+}
+/**
+ * Computes the ordered list of pagination items (previous, page-buttons,
+ * ellipsis, next).
+ *
+ * The algorithm targets a stable slot count: for any `pageCount` larger than
+ * the window size, the returned list always has the same number of page
+ * entries (`boundaryCount * 2 + siblingCount * 2 + 3`). As the current page
+ * moves toward a boundary, the corresponding ellipsis is swapped for an extra
+ * adjacent page number rather than collapsing the list — the visual row does
+ * not expand or contract as the user navigates.
+ *
+ * Edge cases:
+ * - `pageCount <= 0` → returns `[]`.
+ * - `page` is clamped to `[1, pageCount]` before computation.
+ * - `pageCount <= window size` → every page is rendered, no ellipsis.
+ */
+export declare function usePagination({ page, pageCount, boundaryCount, siblingCount, }: UsePaginationArgs): PaginationItem[];

package/src/tedi/components/navigation/pagination/use-pagination.es.js

@@ -0,0 +1,48 @@
+const i = (d, e) => e < d ? [] : Array.from({ length: e - d + 1 }, (n, c) => d + c);
+function o({
+  page: d,
+  pageCount: e,
+  boundaryCount: n = 1,
+  siblingCount: c = 1
+}) {
+  if (e <= 0) return [];
+  const l = Math.max(0, n), t = Math.max(0, c), s = Math.max(1, Math.min(e, d)), f = l * 2 + t * 2 + 3;
+  let r;
+  if (e <= f)
+    r = i(1, e);
+  else {
+    const a = l + t * 2 + 2, h = l + t + 2, m = e - l - t - 1;
+    s <= h ? r = [...i(1, a), "ellipsis", ...i(e - l + 1, e)] : s >= m ? r = [...i(1, l), "ellipsis", ...i(e - a + 1, e)] : r = [
+      ...i(1, l),
+      "ellipsis",
+      ...i(s - t, s + t),
+      "ellipsis",
+      ...i(e - l + 1, e)
+    ];
+  }
+  return [
+    {
+      type: "previous",
+      page: s > 1 ? s - 1 : null,
+      selected: !1,
+      disabled: s <= 1
+    },
+    ...r.map(
+      (a) => a === "ellipsis" ? { type: "ellipsis", page: null, selected: !1, disabled: !0 } : {
+        type: "page",
+        page: a,
+        selected: a === s,
+        disabled: !1
+      }
+    ),
+    {
+      type: "next",
+      page: s < e ? s + 1 : null,
+      selected: !1,
+      disabled: s >= e
+    }
+  ];
+}
+export {
+  o as usePagination
+};

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

@@ -1 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),i=require("../tabs.module.scss.cjs.js"),u=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=u.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:l.default(i.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;exports.default=t;

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

@@ -1,22 +1,23 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } 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";
+import l from "../tabs.module.scss.es.js";
+import { useTabsContext as i } 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(
+  const { id: t, children: e, className: s } = a, { currentTab: n } = i();
+  return t && n !== t ? null : /* @__PURE__ */ o(
     "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),
+      className: r(l["tedi-tabs__content"], s),
       children: e
     }
   );
 };
 m.displayName = "TabsContent";
 export {
-  m as TabsContent
+  m as TabsContent,
+  m as default
 };

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

@@ -1 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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"),h=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(),w=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:m,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&m(e)},[r,m]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),_=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]),v=r==="dropdown"&&d&&_.length>1,E=_.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=w.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:w,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"]]:v},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),v&&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))})]})})]})})};h.displayName="TabsList";exports.TabsList=h;exports.default=h;

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

@@ -1,9 +1,9 @@
 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 i, { useRef as a, 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 { Dropdown as n } 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";
@@ -16,7 +16,7 @@ const J = (S) => {
     "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);
+  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = a(null), d = a(null), [f, b] = A(!1), m = a(!1), u = a(0);
   m.current = f;
   const {
     scrollRef: _,
@@ -76,13 +76,13 @@ const J = (S) => {
             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: [
+        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(n, { placement: "bottom-end", children: [
+          /* @__PURE__ */ s(n.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,
+          /* @__PURE__ */ s(n.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+            n.Item,
             {
               index: t,
               disabled: e.disabled,
@@ -98,5 +98,6 @@ const J = (S) => {
 };
 J.displayName = "TabsList";
 export {
-  J as TabsList
+  J as TabsList,
+  J as default
 };

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

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

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

@@ -1,17 +1,17 @@
-import { jsxs as p, jsx as f } from "react/jsx-runtime";
+import { jsxs as f, jsx as p } 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 a 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 = () => {
+  const { id: e, children: l, icon: s, disabled: t = !1, className: c } = 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(
+  return /* @__PURE__ */ f(
     "button",
     {
       "data-name": "tabs-trigger",
@@ -23,21 +23,22 @@ const x = (n) => {
       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
+        a["tedi-tabs__trigger"],
+        { [a["tedi-tabs__trigger--selected"]]: r },
+        { [a["tedi-tabs__trigger--disabled"]]: t },
+        c
       ),
       onClick: m,
       onKeyDown: b,
       children: [
-        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
-        c
+        s && /* @__PURE__ */ p(u, { name: s, size: 18, color: "inherit" }),
+        l
       ]
     }
   );
 };
 x.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger
+  x as TabsTrigger,
+  x as default
 };

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

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