@tedi-design-system/react 18.0.0-rc.8 → 18.0.0

package/src/tedi/components/content/carousel/carousel.es.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import m from "../../../../../external/classnames/index.es.js";
+import { forwardRef as i } from "react";
+import l from "./carousel.module.scss.es.js";
+import { CarouselContext as n } from "./carousel-context.es.js";
+import { CarouselContent as u } from "./components/carousel-content/carousel-content.es.js";
+import { CarouselFooter as f } from "./components/carousel-footer/carousel-footer.es.js";
+import { CarouselHeader as p } from "./components/carousel-header/carousel-header.es.js";
+import { CarouselIndicators as C } from "./components/carousel-indicators/carousel-indicators.es.js";
+import { CarouselNavigation as c } from "./components/carousel-navigation/carousel-navigation.es.js";
+import { useCarousel as d } from "./use-carousel.es.js";
+const r = i(({ children: e, className: t }, a) => {
+  const s = d();
+  return /* @__PURE__ */ o(n.Provider, { value: s, children: /* @__PURE__ */ o("div", { ref: a, className: m(l["tedi-carousel"], t), children: e }) });
+});
+r.displayName = "Carousel";
+const w = Object.assign(r, {
+  Header: p,
+  Content: u,
+  Footer: f,
+  Navigation: c,
+  Indicators: C
+});
+export {
+  w as Carousel
+};

package/src/tedi/components/content/carousel/carousel.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-carousel":"tedi-carousel-65c4a6a5","tedi-carousel__header":"tedi-carousel__header-ac518c48","tedi-carousel__footer":"tedi-carousel__footer-08a7d5fd","tedi-carousel__content":"tedi-carousel__content-88941157","tedi-carousel__content--fade-right":"tedi-carousel__content--fade-right-1450c350","tedi-carousel__content--fade-x":"tedi-carousel__content--fade-x-1e4b9158","tedi-carousel__track":"tedi-carousel__track-a2771afb","tedi-carousel__slide":"tedi-carousel__slide-a9448746","tedi-carousel__navigation":"tedi-carousel__navigation-d4b9aaf8","tedi-carousel__navigation--overlay":"tedi-carousel__navigation--overlay-fba1fe0a","tedi-carousel__indicators":"tedi-carousel__indicators-cd38b633","tedi-carousel__indicator":"tedi-carousel__indicator-eb4e5fbe","tedi-carousel__indicator--active":"tedi-carousel__indicator--active-939377fb"};exports.default=e;

package/src/tedi/components/content/carousel/carousel.module.scss.es.js

@@ -0,0 +1,18 @@
+const e = {
+  "tedi-carousel": "tedi-carousel-65c4a6a5",
+  "tedi-carousel__header": "tedi-carousel__header-ac518c48",
+  "tedi-carousel__footer": "tedi-carousel__footer-08a7d5fd",
+  "tedi-carousel__content": "tedi-carousel__content-88941157",
+  "tedi-carousel__content--fade-right": "tedi-carousel__content--fade-right-1450c350",
+  "tedi-carousel__content--fade-x": "tedi-carousel__content--fade-x-1e4b9158",
+  "tedi-carousel__track": "tedi-carousel__track-a2771afb",
+  "tedi-carousel__slide": "tedi-carousel__slide-a9448746",
+  "tedi-carousel__navigation": "tedi-carousel__navigation-d4b9aaf8",
+  "tedi-carousel__navigation--overlay": "tedi-carousel__navigation--overlay-fba1fe0a",
+  "tedi-carousel__indicators": "tedi-carousel__indicators-cd38b633",
+  "tedi-carousel__indicator": "tedi-carousel__indicator-eb4e5fbe",
+  "tedi-carousel__indicator--active": "tedi-carousel__indicator--active-939377fb"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/carousel/components/carousel-content/carousel-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),S=require("../../../../../../../external/classnames/index.cjs.js"),r=require("react"),i=require("../../carousel.module.scss.cjs.js"),x=require("../../carousel-context.cjs.js"),h=require("../../carousel-utils.cjs.js"),m=r.forwardRef(({children:y,slidesPerView:c=1,gap:u=1,fade:d=!1,transitionMs:f=400,loop:p=!0,centered:v=!1,className:b},l)=>{const e=x.useCarouselContext(),a=r.Children.toArray(y),C=r.useRef([]),_=JSON.stringify({slidesPerView:c,gap:u,fade:d,transitionMs:f,loop:p,centered:v});r.useEffect(()=>{e.setConfig({slidesPerView:h.normalizeBreakpointInput(c),gap:h.normalizeBreakpointInput(u),fade:d,transitionMs:f,loop:p,centered:v})},[_]),r.useEffect(()=>{e.setSlidesCount(a.length)},[a.length,e]),r.useEffect(()=>{e.renderedIndices.forEach((o,t)=>{var n;(n=C.current[t])==null||n.toggleAttribute("inert",!e.isSlideVisible(t))})});const P=o=>{e.viewportRef.current=o,typeof l=="function"?l(o):l&&(l.current=o)};return s.jsxs("div",{ref:P,role:"region","aria-roledescription":"carousel","aria-label":e.regionLabel,"aria-live":"off",tabIndex:0,className:S.default(e.contentClassName(i.default["tedi-carousel__content"],i.default["tedi-carousel__content--fade-right"],i.default["tedi-carousel__content--fade-x"]),b),onScroll:e.onScroll,onWheel:e.onWheel,onKeyDown:e.onKeyDown,onPointerDown:e.onPointerDown,onPointerMove:e.onPointerMove,onPointerUp:e.onPointerUp,onPointerCancel:e.onPointerUp,onLostPointerCapture:e.onPointerUp,children:[s.jsx("div",{ref:e.trackRef,className:i.default["tedi-carousel__track"],style:e.trackStyle,onTransitionEnd:e.onTransitionEnd,children:e.renderedIndices.map((o,t)=>{const n=e.isSlideVisible(t);return s.jsx("div",{ref:g=>{C.current[t]=g,e.setSlideRef(t,g)},role:n?"group":"presentation","aria-roledescription":"slide","aria-label":e.slideLabel(o+1),"aria-current":t===e.renderedActiveIndex?"true":void 0,"aria-hidden":n?void 0:"true",tabIndex:n?-1:void 0,className:i.default["tedi-carousel__slide"],style:{flex:e.slideFlex},children:a[o]},t)})}),s.jsx("div",{"aria-live":"polite",className:"visually-hidden",children:e.announcement})]})});m.displayName="CarouselContent";exports.CarouselContent=m;

package/src/tedi/components/content/carousel/components/carousel-content/carousel-content.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { BreakpointInput } from '../../carousel-utils';
+import { CarouselFade } from '../../use-carousel';
+export interface CarouselContentProps {
+    /**
+     * Slides — each direct child is rendered as one slide.
+     */
+    children?: React.ReactNode;
+    /**
+     * Slides per view (minimum 1, can be fractional, e.g. `1.25` for peeking).
+     * Accepts a number or per-breakpoint object.
+     * @default 1
+     */
+    slidesPerView?: BreakpointInput<number>;
+    /**
+     * Gap between slides in rem. Accepts a number or per-breakpoint object.
+     * @default 1
+     */
+    gap?: BreakpointInput<number>;
+    /**
+     * Fade the edges:
+     * - `true` — fades the right edge with more than one slide per view, or both edges for a single slide.
+     * - `'right'` — always fade only the right edge.
+     * - `'both'` — always fade both edges, regardless of slide count.
+     * @default false
+     */
+    fade?: CarouselFade;
+    /**
+     * Transition duration in ms.
+     * @default 400
+     */
+    transitionMs?: number;
+    /**
+     * Whether the track loops infinitely. Set `false` for a finite, bounded
+     * carousel — navigation stops at the first / last slide and the prev / next
+     * controls disable at the bounds.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Center the active slide so an equal peek of the previous / next slide shows
+     * on both edges. Pair with a fractional `slidesPerView` (e.g. `1.4`) and keep
+     * `loop` on so there are neighbours to reveal on both sides.
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Additional class name applied to the viewport.
+     */
+    className?: string;
+}
+export declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
+export default CarouselContent;

package/src/tedi/components/content/carousel/components/carousel-content/carousel-content.es.js

@@ -0,0 +1,102 @@
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import P from "../../../../../../../external/classnames/index.es.js";
+import N, { forwardRef as w, useRef as R, useEffect as a } from "react";
+import r from "../../carousel.module.scss.es.js";
+import { useCarouselContext as S } from "../../carousel-context.es.js";
+import { normalizeBreakpointInput as _ } from "../../carousel-utils.es.js";
+const k = w(
+  ({
+    children: y,
+    slidesPerView: c = 1,
+    gap: d = 1,
+    fade: u = !1,
+    transitionMs: f = 400,
+    loop: p = !0,
+    centered: m = !1,
+    className: C
+  }, n) => {
+    const e = S(), s = N.Children.toArray(y), v = R([]), g = JSON.stringify({ slidesPerView: c, gap: d, fade: u, transitionMs: f, loop: p, centered: m });
+    return a(() => {
+      e.setConfig({
+        slidesPerView: _(c),
+        gap: _(d),
+        fade: u,
+        transitionMs: f,
+        loop: p,
+        centered: m
+      });
+    }, [g]), a(() => {
+      e.setSlidesCount(s.length);
+    }, [s.length, e]), a(() => {
+      e.renderedIndices.forEach((t, o) => {
+        var i;
+        (i = v.current[o]) == null || i.toggleAttribute("inert", !e.isSlideVisible(o));
+      });
+    }), /* @__PURE__ */ b(
+      "div",
+      {
+        ref: (t) => {
+          e.viewportRef.current = t, typeof n == "function" ? n(t) : n && (n.current = t);
+        },
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": e.regionLabel,
+        "aria-live": "off",
+        tabIndex: 0,
+        className: P(
+          e.contentClassName(
+            r["tedi-carousel__content"],
+            r["tedi-carousel__content--fade-right"],
+            r["tedi-carousel__content--fade-x"]
+          ),
+          C
+        ),
+        onScroll: e.onScroll,
+        onWheel: e.onWheel,
+        onKeyDown: e.onKeyDown,
+        onPointerDown: e.onPointerDown,
+        onPointerMove: e.onPointerMove,
+        onPointerUp: e.onPointerUp,
+        onPointerCancel: e.onPointerUp,
+        onLostPointerCapture: e.onPointerUp,
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              ref: e.trackRef,
+              className: r["tedi-carousel__track"],
+              style: e.trackStyle,
+              onTransitionEnd: e.onTransitionEnd,
+              children: e.renderedIndices.map((t, o) => {
+                const i = e.isSlideVisible(o);
+                return /* @__PURE__ */ l(
+                  "div",
+                  {
+                    ref: (h) => {
+                      v.current[o] = h, e.setSlideRef(o, h);
+                    },
+                    role: i ? "group" : "presentation",
+                    "aria-roledescription": "slide",
+                    "aria-label": e.slideLabel(t + 1),
+                    "aria-current": o === e.renderedActiveIndex ? "true" : void 0,
+                    "aria-hidden": i ? void 0 : "true",
+                    tabIndex: i ? -1 : void 0,
+                    className: r["tedi-carousel__slide"],
+                    style: { flex: e.slideFlex },
+                    children: s[t]
+                  },
+                  o
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ l("div", { "aria-live": "polite", className: "visually-hidden", children: e.announcement })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "CarouselContent";
+export {
+  k as CarouselContent
+};

package/src/tedi/components/content/carousel/components/carousel-footer/carousel-footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("../../../../../../../external/classnames/index.cjs.js"),l=require("react"),i=require("../../carousel.module.scss.cjs.js"),e=l.forwardRef(({children:o,className:r,style:t},s)=>u.jsx("div",{ref:s,className:a.default(i.default["tedi-carousel__footer"],r),style:t,children:o}));e.displayName="CarouselFooter";exports.CarouselFooter=e;

package/src/tedi/components/content/carousel/components/carousel-footer/carousel-footer.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface CarouselFooterProps {
+    /**
+     * Footer content — typically `Carousel.Indicators` and/or `Carousel.Navigation`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Inline styles — e.g. to center the footer content.
+     */
+    style?: React.CSSProperties;
+}
+export declare const CarouselFooter: React.ForwardRefExoticComponent<CarouselFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default CarouselFooter;

package/src/tedi/components/content/carousel/components/carousel-footer/carousel-footer.es.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import t from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as a } from "react";
+import f from "../../carousel.module.scss.es.js";
+const i = a(({ children: o, className: r, style: e }, s) => /* @__PURE__ */ m("div", { ref: s, className: t(f["tedi-carousel__footer"], r), style: e, children: o }));
+i.displayName = "CarouselFooter";
+export {
+  i as CarouselFooter
+};

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),d=require("react"),l=require("../../carousel.module.scss.cjs.js"),e=d.forwardRef(({children:r,className:a,style:s},o)=>t.jsx("div",{ref:o,className:u.default(l.default["tedi-carousel__header"],a),style:s,children:r}));e.displayName="CarouselHeader";exports.CarouselHeader=e;

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface CarouselHeaderProps {
+    /**
+     * Header content — typically a title block and optionally `Carousel.Navigation`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+}
+export declare const CarouselHeader: React.ForwardRefExoticComponent<CarouselHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default CarouselHeader;

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.es.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as t } from "react";
+import d from "../../carousel.module.scss.es.js";
+const i = t(({ children: r, className: e, style: o }, a) => /* @__PURE__ */ s("div", { ref: a, className: m(d["tedi-carousel__header"], e), style: o, children: r }));
+i.displayName = "CarouselHeader";
+export {
+  i as CarouselHeader
+};

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),i=require("../../../../base/typography/text/text.cjs.js"),u=require("../../../../buttons/button/button.cjs.js"),l=require("../../carousel.module.scss.cjs.js"),v=require("../../carousel-context.cjs.js"),C=require("../../../../../providers/label-provider/use-labels.cjs.js"),d=m.forwardRef(({withArrows:c=!1,variant:b="dots",className:f},x)=>{const{getLabel:o}=C.useLabels(),r=v.useCarouselContext(),{slidesCount:s,slideIndex:a}=r;return e.jsxs("div",{ref:x,className:n.default(l.default["tedi-carousel__indicators"],f),children:[c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_back",disabled:!r.canPrev,onClick:r.prev,children:o("carousel.move-back")}),b==="dots"?Array.from({length:s},(_,t)=>e.jsx("button",{type:"button","aria-label":o("carousel.show-slide",t+1),"aria-current":t===a?"true":void 0,className:n.default(l.default["tedi-carousel__indicator"],{[l.default["tedi-carousel__indicator--active"]]:t===a}),onClick:()=>r.goToIndex(t,{focusSlide:!0})},t)):s>0&&e.jsxs("div",{children:[e.jsx(i.Text,{element:"span",modifiers:"bold",color:"brand",children:a+1}),e.jsx(i.Text,{element:"span",color:"tertiary",children:` / ${s}`})]}),c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_forward",disabled:!r.canNext,onClick:r.next,children:o("carousel.move-forward")})]})});d.displayName="CarouselIndicators";exports.CarouselIndicators=d;

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.d.ts

@@ -0,0 +1,20 @@
+export type CarouselIndicatorsVariant = 'dots' | 'numbers';
+export interface CarouselIndicatorsProps {
+    /**
+     * Show prev / next arrow buttons alongside the indicators. When set, do not
+     * also use `Carousel.Navigation`.
+     * @default false
+     */
+    withArrows?: boolean;
+    /**
+     * Indicator style — a row of dots or a `current / total` counter.
+     * @default dots
+     */
+    variant?: CarouselIndicatorsVariant;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const CarouselIndicators: import('react').ForwardRefExoticComponent<CarouselIndicatorsProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CarouselIndicators;

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.es.js

@@ -0,0 +1,37 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import n from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as b } from "react";
+import { Text as d } from "../../../../base/typography/text/text.es.js";
+import { Button as m } from "../../../../buttons/button/button.es.js";
+import l from "../../carousel.module.scss.es.js";
+import { useCarouselContext as v } from "../../carousel-context.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
+const C = b(
+  ({ withArrows: i = !1, variant: u = "dots", className: f }, p) => {
+    const { getLabel: a } = _(), r = v(), { slidesCount: t, slideIndex: s } = r;
+    return /* @__PURE__ */ c("div", { ref: p, className: n(l["tedi-carousel__indicators"], f), children: [
+      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_back", disabled: !r.canPrev, onClick: r.prev, children: a("carousel.move-back") }),
+      u === "dots" ? Array.from({ length: t }, (h, o) => /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": a("carousel.show-slide", o + 1),
+          "aria-current": o === s ? "true" : void 0,
+          className: n(l["tedi-carousel__indicator"], {
+            [l["tedi-carousel__indicator--active"]]: o === s
+          }),
+          onClick: () => r.goToIndex(o, { focusSlide: !0 })
+        },
+        o
+      )) : t > 0 && /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ e(d, { element: "span", modifiers: "bold", color: "brand", children: s + 1 }),
+        /* @__PURE__ */ e(d, { element: "span", color: "tertiary", children: ` / ${t}` })
+      ] }),
+      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_forward", disabled: !r.canNext, onClick: r.next, children: a("carousel.move-forward") })
+    ] });
+  }
+);
+C.displayName = "CarouselIndicators";
+export {
+  C as CarouselIndicators
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),l=require("react"),d=require("../../../../buttons/button/button.cjs.js"),t=require("../../carousel.module.scss.cjs.js"),v=require("../../carousel-context.cjs.js"),b=require("../../../../../providers/label-provider/use-labels.cjs.js"),f=({buttonProps:o})=>n.jsx(d.Button,{visualType:"secondary",...o}),s=l.forwardRef(({overlay:o=!1,className:i,renderButton:r=f},c)=>{const{getLabel:a}=b.useLabels(),e=v.useCarouselContext();return n.jsxs("div",{ref:c,className:u.default(t.default["tedi-carousel__navigation"],{[t.default["tedi-carousel__navigation--overlay"]]:o},i),children:[r({direction:"prev",buttonProps:{icon:"arrow_back",disabled:!e.canPrev,onClick:e.prev,children:a("carousel.move-back")}}),r({direction:"next",buttonProps:{icon:"arrow_forward",disabled:!e.canNext,onClick:e.next,children:a("carousel.move-forward")}})]})});s.displayName="CarouselNavigation";exports.CarouselNavigation=s;

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

@@ -0,0 +1,43 @@
+/**
+ * Props for a single navigation arrow, ready to spread onto a `Button` /
+ * `FloatingButton` (or any compatible control). `children` is the accessible label.
+ */
+export interface CarouselNavigationButtonProps {
+    icon: string;
+    disabled: boolean;
+    onClick: () => void;
+    children: string;
+}
+export interface CarouselNavigationProps {
+    /**
+     * Pin the arrows to the left / right edges, overlaying the slides (instead of
+     * a normal inline row). Use as a direct child of `Carousel` for a
+     * header/footer-less carousel; the arrows centre vertically over the content.
+     * @default false
+     */
+    overlay?: boolean;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Render each navigation arrow yourself — e.g. to use a `FloatingButton` or a
+     * customised `Button`. Receives the arrow `direction` and a `buttonProps` bag
+     * (icon / disabled / onClick / accessible-label `children`) to spread onto the
+     * control; the surrounding container still handles layout, incl. overlay edge
+     * placement, so the returned element only needs to render the button. Defaults
+     * to a secondary `Button`.
+     *
+     * @example
+     * <Carousel.Navigation
+     *   overlay
+     *   renderButton={({ buttonProps }) => <FloatingButton {...buttonProps} position="static" />}
+     * />
+     */
+    renderButton?: (props: {
+        direction: 'prev' | 'next';
+        buttonProps: CarouselNavigationButtonProps;
+    }) => React.ReactNode;
+}
+export declare const CarouselNavigation: import('react').ForwardRefExoticComponent<CarouselNavigationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CarouselNavigation;

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

@@ -0,0 +1,47 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import l from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as m } from "react";
+import { Button as d } from "../../../../buttons/button/button.es.js";
+import t from "../../carousel.module.scss.es.js";
+import { useCarouselContext as u } from "../../carousel-context.es.js";
+import { useLabels as p } from "../../../../../providers/label-provider/use-labels.es.js";
+const f = ({ buttonProps: r }) => /* @__PURE__ */ c(d, { visualType: "secondary", ...r }), v = m(
+  ({ overlay: r = !1, className: i, renderButton: e = f }, s) => {
+    const { getLabel: a } = p(), o = u();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        className: l(
+          t["tedi-carousel__navigation"],
+          { [t["tedi-carousel__navigation--overlay"]]: r },
+          i
+        ),
+        children: [
+          e({
+            direction: "prev",
+            buttonProps: {
+              icon: "arrow_back",
+              disabled: !o.canPrev,
+              onClick: o.prev,
+              children: a("carousel.move-back")
+            }
+          }),
+          e({
+            direction: "next",
+            buttonProps: {
+              icon: "arrow_forward",
+              disabled: !o.canNext,
+              onClick: o.next,
+              children: a("carousel.move-forward")
+            }
+          })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "CarouselNavigation";
+export {
+  v as CarouselNavigation
+};

package/src/tedi/components/content/carousel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './carousel';
+export * from './components/carousel-content/carousel-content';
+export * from './components/carousel-footer/carousel-footer';
+export * from './components/carousel-header/carousel-header';
+export * from './components/carousel-indicators/carousel-indicators';
+export * from './components/carousel-navigation/carousel-navigation';
+export * from './carousel-utils';

package/src/tedi/components/content/carousel/use-carousel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),Le=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=require("./carousel-utils.cjs.js"),ye=require("../../../providers/label-provider/use-labels.cjs.js"),De={slidesPerView:{xs:1},gap:{xs:1},fade:!1,transitionMs:400,loop:!0,centered:!1},V=(S,p)=>(S%p+p)%p,Ve=()=>{const{getLabel:S}=ye.useLabels(),p=Le.default(),[u,ne]=t.useState(De),[r,se]=t.useState(0),[l,b]=t.useState(0),[m,U]=t.useState(0),[Y,R]=t.useState(!1),[g,ce]=t.useState(0),[j,oe]=t.useState(16),[ae,ue]=t.useState(""),E=t.useRef(null),H=t.useRef(null),J=t.useRef([]),P=t.useRef(!1),L=t.useRef(!1),B=t.useRef(!1),$=t.useRef(0),y=t.useRef(0),Q=t.useRef(0),O=t.useRef(0),_=t.useRef(0),q=t.useRef(),A=t.useRef(0),Z=t.useRef(!0),i=t.useRef(l),ee=t.useRef(m);t.useEffect(()=>{i.current=l},[l]),t.useEffect(()=>{ee.current=m},[m]);const o=t.useMemo(()=>re.resolveBreakpointValue(u.slidesPerView,p),[u.slidesPerView,p]),C=t.useMemo(()=>re.resolveBreakpointValue(u.gap,p),[u.gap,p]),w=t.useMemo(()=>C*j,[C,j]),s=u.loop,M=t.useMemo(()=>Math.max(0,r-Math.ceil(o)),[r,o]),k=t.useCallback(e=>s?e:Math.min(Math.max(e,0),M),[s,M]),d=s?r:0,le=t.useMemo(()=>r===0?0:s?V(Math.floor(l),r):Math.min(Math.max(Math.round(l),0),r-1),[l,r,s]),F=s?l-m+d:l,ie=s||l>.001,fe=s||l<M-.001,de=t.useMemo(()=>{if(!r)return[];if(!s)return Array.from({length:r},(c,a)=>a);const e=2*d+Math.ceil(o),n=m-d;return Array.from({length:e},(c,a)=>V(n+a,r))},[r,d,o,m,s]),me=t.useMemo(()=>`0 0 calc((100% - ${(o-1)*C}rem) / ${o})`,[o,C]),he=t.useMemo(()=>{if(!g)return{gap:`${C}rem`,transform:"translate3d(0,0,0)",transition:"none"};const e=w*(o-1),n=(g-e)/o,c=s?l-m+d:l,a=u.centered?(g-n)/2:0,f=-c*(n+w)+a;return{gap:`${C}rem`,transform:`translate3d(${f}px, 0, 0)`,transition:Y?`transform ${u.transitionMs}ms ease`:"none"}},[g,C,w,o,l,m,d,Y,u.transitionMs,u.centered,s]),Me=t.useCallback(e=>{const n=Math.ceil(o);return e>=F&&e<F+n},[o,F]),pe=t.useCallback((e,n,c)=>{const a=[e];if(u.fade){const f=u.fade==="both"||u.fade!=="right"&&o<=1;a.push(f?c:n)}return a.join(" ")},[u.fade,o]),be=t.useCallback((e,n)=>{J.current[e]=n},[]),I=t.useCallback(()=>{setTimeout(()=>{if(!Z.current||!r)return;const e=s?V(Math.floor(i.current),r):Math.min(Math.max(Math.round(i.current),0),r-1);ue(S("carousel.slide",e+1,r))},100)},[S,r,s]),X=t.useCallback(()=>{P.current=!0,setTimeout(()=>{P.current=!1},u.transitionMs)},[u.transitionMs]),te=t.useCallback(()=>{setTimeout(()=>{var n;const e=i.current-ee.current+d;(n=J.current[e])==null||n.focus({preventScroll:!0})})},[d]),G=t.useCallback(()=>{!r||P.current||!s&&i.current>=M-.001||(R(!0),b(e=>k(e+1)),X(),I())},[r,s,M,k,X,I]),K=t.useCallback(()=>{!r||P.current||!s&&i.current<=.001||(R(!0),b(e=>k(e-1)),X(),I())},[r,s,k,X,I]),N=t.useCallback((e,n)=>{if(!(!r||P.current)){if(R(!0),s){const c=V(Math.floor(i.current),r),f=V(e,r)-c;b(h=>h+f)}else b(k(e));n!=null&&n.focusSlide?B.current=!0:I()}},[r,s,k,I]),Re=t.useCallback(e=>{e.target!==H.current||e.propertyName!=="transform"||L.current||(R(!1),U(Math.floor(i.current)),B.current&&(B.current=!1,te()))},[te]),ke=t.useCallback(()=>{const e=E.current;e&&(e.scrollLeft=0,e.scrollTop=0)},[]),T=t.useCallback(()=>(g-w*(o-1))/o+w,[g,w,o]),Ce=t.useCallback(e=>{if(!r)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.shiftKey?e.deltaY:0;if(!n)return;const c=T();if(!c)return;const a=n/c;A.current+=a;const f=d*.9,h=s?m-f:0,x=s?m+f:M,W=i.current+a,v=Math.min(Math.max(W,h),x),Ie=v!==W;R(!1),b(v),clearTimeout(q.current),q.current=setTimeout(()=>{R(!0);const Te=Math.sign(A.current),D=i.current;let z=Math.round(D);Math.abs(A.current)>.3&&(z=Te>0?Math.ceil(D):Math.floor(D)),Ie&&(D<=h&&(z=Math.ceil(h)),D>=x&&(z=Math.floor(x)));const Pe=Math.min(Math.max(z,h),x);b(Pe),A.current=0},120)},[r,T,d,m,s,M]),xe=t.useCallback(e=>{switch(e.key){case"ArrowRight":case"PageDown":e.preventDefault(),G();break;case"ArrowLeft":case"PageUp":e.preventDefault(),K();break;case"Home":e.preventDefault(),N(0);break;case"End":e.preventDefault(),N(r-1);break}},[G,K,N,r]),Se=t.useCallback(e=>{var n;r&&((n=E.current)==null||n.setPointerCapture(e.pointerId),L.current=!0,R(!1),$.current=e.clientX,y.current=i.current,Q.current=e.timeStamp,O.current=e.clientX,_.current=e.timeStamp,s&&U(Math.floor(i.current)))},[r,s]),ge=t.useCallback(e=>{if(!L.current)return;const n=T();if(!n)return;const c=e.clientX-$.current;if(Number.isNaN(c))return;O.current=e.clientX,_.current=e.timeStamp;const a=c/n,f=y.current-a,h=d*.9,x=Math.floor(y.current),W=s?x-h:0,v=s?x+h:M;b(Math.min(Math.max(f,W),v))},[T,d,s,M]),we=t.useCallback(()=>{if(!L.current)return;L.current=!1,R(!0);const e=T(),n=Math.round(i.current);let c=n;const a=_.current-Q.current,f=a>0&&e?-(O.current-$.current)/e/a:0;Math.abs(f)>.0015&&n===Math.round(y.current)&&(c=Math.round(y.current)+(f>0?1:-1)),b(k(c))},[T,k]);return t.useEffect(()=>{const e=E.current;if(!e)return;const n=()=>{ce(e.clientWidth),oe(parseFloat(getComputedStyle(document.documentElement).fontSize)||16)};n();const c=new ResizeObserver(n);return c.observe(e),()=>c.disconnect()},[]),t.useEffect(()=>()=>{Z.current=!1,clearTimeout(q.current)},[]),{viewportRef:E,trackRef:H,setSlideRef:be,setConfig:ne,setSlidesCount:se,slidesCount:r,slideIndex:le,canPrev:ie,canNext:fe,renderedIndices:de,renderedActiveIndex:F,slideFlex:me,trackStyle:he,contentClassName:pe,isSlideVisible:Me,announcement:ae,regionLabel:S("carousel"),slideLabel:e=>S("carousel.slide",e,r),next:G,prev:K,goToIndex:N,onTransitionEnd:Re,onScroll:ke,onWheel:Ce,onKeyDown:xe,onPointerDown:Se,onPointerMove:ge,onPointerUp:we}};exports.useCarousel=Ve;

package/src/tedi/components/content/carousel/use-carousel.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from 'react';
+import { BreakpointObject } from './carousel-utils';
+/**
+ * Edge-fade behaviour:
+ * - `false` — no fade.
+ * - `true` — fades the trailing edge with more than one slide per view, or both edges for a single slide.
+ * - `'right'` — always fade only the trailing edge.
+ * - `'both'` — always fade both edges, regardless of slide count.
+ */
+export type CarouselFade = boolean | 'right' | 'both';
+export interface CarouselConfig {
+    slidesPerView: BreakpointObject<number>;
+    gap: BreakpointObject<number>;
+    fade: CarouselFade;
+    transitionMs: number;
+    loop: boolean;
+    centered: boolean;
+}
+export interface CarouselApi {
+    viewportRef: React.RefObject<HTMLDivElement>;
+    trackRef: React.RefObject<HTMLDivElement>;
+    setSlideRef: (renderedIndex: number, element: HTMLDivElement | null) => void;
+    setConfig: (config: CarouselConfig) => void;
+    setSlidesCount: (count: number) => void;
+    slidesCount: number;
+    slideIndex: number;
+    canPrev: boolean;
+    canNext: boolean;
+    renderedIndices: number[];
+    renderedActiveIndex: number;
+    slideFlex: string;
+    trackStyle: CSSProperties;
+    contentClassName: (base: string, fadeModifier: string, fadeXModifier: string) => string;
+    isSlideVisible: (renderedIndex: number) => boolean;
+    announcement: string;
+    regionLabel: string;
+    slideLabel: (slide: number) => string;
+    next: () => void;
+    prev: () => void;
+    goToIndex: (index: number, options?: {
+        focusSlide?: boolean;
+    }) => void;
+    onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => void;
+    onScroll: () => void;
+    onWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: () => void;
+}
+/**
+ * The carousel engine. Holds the infinite-loop track state and exposes the
+ * imperative API consumed by `Carousel.Content`, `Carousel.Navigation` and
+ * `Carousel.Indicators`. Ported from the Angular `tedi-carousel-content`.
+ */
+export declare const useCarousel: () => CarouselApi;