@plitzi/sdk-elements 0.37.8 → 0.37.10

package/dist/elements/provider/Channel/declaration.d.ts

@@ -103,7 +103,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/provider/Channel/declaration.mjs

@@ -99,7 +99,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/provider/Channel/index.d.ts

@@ -102,7 +102,7 @@ declare const Channel: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/settings.mjs

@@ -17,23 +17,27 @@ import h from "./form/Form/Settings.mjs";
 import g from "./form/FormControl/Settings.mjs";
 import _ from "./internal/LayoutContainer/Settings.mjs";
 import v from "./internal/Page/Settings.mjs";
-import y from "./media/FontAwesome/Settings.mjs";
-import b from "./media/Image/Settings.mjs";
-import x from "./media/Video/Settings.mjs";
-import S from "./provider/ApiContainer/Settings.mjs";
-import C from "./provider/Channel/Settings.mjs";
-import w from "./structure/Container/Settings.mjs";
-import T from "./structure/DialogContainer/Settings.mjs";
-import E from "./structure/List/ListItem/Settings.mjs";
-import D from "./structure/List/Settings.mjs";
-import O from "./structure/ModalContainer/Settings.mjs";
-import k from "./structure/Pagination/Settings.mjs";
-import A from "./structure/TabContainer/Settings.mjs";
-import j from "./structure/TabContainer/TabContainerBody/Settings.mjs";
-import M from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
-import N from "./structure/TabContainer/TabContainerItem/Settings.mjs";
+import y from "./media/Embed/Settings.mjs";
+import b from "./media/FontAwesome/Settings.mjs";
+import x from "./media/Image/Settings.mjs";
+import S from "./media/Svg/Settings.mjs";
+import C from "./media/Video/Settings.mjs";
+import w from "./provider/ApiContainer/Settings.mjs";
+import T from "./provider/Channel/Settings.mjs";
+import E from "./structure/Carousel/CarouselTrack/Settings.mjs";
+import D from "./structure/Carousel/Settings.mjs";
+import O from "./structure/Container/Settings.mjs";
+import k from "./structure/DialogContainer/Settings.mjs";
+import A from "./structure/List/ListItem/Settings.mjs";
+import j from "./structure/List/Settings.mjs";
+import M from "./structure/ModalContainer/Settings.mjs";
+import N from "./structure/Pagination/Settings.mjs";
+import P from "./structure/TabContainer/Settings.mjs";
+import F from "./structure/TabContainer/TabContainerBody/Settings.mjs";
+import I from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
+import L from "./structure/TabContainer/TabContainerItem/Settings.mjs";
 //#region src/elements/settings.ts
-var P = /* @__PURE__ */ e({ defaultElementsSettings: () => F }), F = {
+var R = /* @__PURE__ */ e({ defaultElementsSettings: () => z }), z = {
 	dropdown: c,
 	plitziSdk: a,
 	custom: r,
@@ -41,32 +45,36 @@ var P = /* @__PURE__ */ e({ defaultElementsSettings: () => F }), F = {
 	blockHtml: t,
 	blockJsx: n,
 	page: v,
-	container: w,
+	container: O,
 	layoutContainer: _,
-	dialogContainer: T,
-	modalContainer: O,
-	tabContainer: A,
-	tabContainerBody: j,
-	tabContainerheader: M,
-	tabContainerItem: N,
+	dialogContainer: k,
+	modalContainer: M,
+	carousel: D,
+	carouselTrack: E,
+	tabContainer: P,
+	tabContainerBody: F,
+	tabContainerheader: I,
+	tabContainerItem: L,
 	heading: l,
-	image: b,
-	video: x,
-	fontAwesome: y,
+	image: x,
+	video: C,
+	embed: y,
+	svg: S,
+	fontAwesome: b,
 	button: s,
 	paragraph: f,
 	text: m,
 	markdown: d,
 	richText: p,
-	pagination: k,
+	pagination: N,
 	nodeHtml: i,
-	list: D,
-	listItem: E,
+	list: j,
+	listItem: A,
 	link: u,
 	form: h,
 	formControl: g,
-	apiContainer: S,
-	channel: C
+	apiContainer: w,
+	channel: T
 };
 //#endregion
-export { F as defaultElementsSettings, P as settings_exports };
+export { z as defaultElementsSettings, R as settings_exports };

package/dist/elements/structure/Carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { CarouselMode, CarouselTransition } from './CarouselContext';
+import { ReactNode, RefObject } from 'react';
+export type CarouselProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    /** What it shows, one slide each — its own, or bound from a source as a list's are. */
+    items?: unknown[];
+    /** `slide` shows one at a time; `marquee` scrolls them past for ever; `scroll` is a row a visitor swipes. */
+    mode?: CarouselMode;
+    /** Milliseconds between slides on its own; 0 is none. `slide` only. */
+    autoplay?: number;
+    /** Holds still under the pointer, for autoplay and a marquee alike. */
+    pauseOnHover?: boolean;
+    /** After the last slide the first, and before the first the last. */
+    loop?: boolean;
+    /** How a `slide` carousel changes slide; back enters from the left. */
+    transition?: CarouselTransition;
+    /** Pixels per second, for a marquee. */
+    speed?: number;
+    /** The field of each item that names it, as a list's `itemKey`. */
+    itemKey?: string;
+    /** What the carousel is, for a screen reader: "Featured products". */
+    label?: string;
+};
+declare const Carousel: ({ ref, className, children, items, mode, autoplay, pauseOnHover, loop, transition, speed, itemKey, label }: CarouselProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<CarouselProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Carousel };

package/dist/elements/structure/Carousel/Carousel.mjs

@@ -0,0 +1,183 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../dataSource/pathFields.mjs";
+import i from "./CarouselContext.mjs";
+import { clampIndex as a, directionOf as o, slideStep as s, stepIndex as c } from "./carouselIndex.mjs";
+import l from "./declaration.mjs";
+import u from "./useAutoplay.mjs";
+import { rowKeys as ee } from "../List/modes/ListControlled/rowKeys.mjs";
+import { use as te, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import ne from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as re } from "@plitzi/nexus/react";
+import { emptyObject as g } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as _ } from "react/jsx-runtime";
+import ie from "clsx";
+import ae from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import oe from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+//#region src/elements/structure/Carousel/Carousel.tsx
+var v = ({ ref: e, className: v = "", children: y, items: b = [], mode: x = "slide", autoplay: S = 0, pauseOnHover: C = !0, loop: w = !0, transition: T = "slide", speed: E = 30, itemKey: D, label: se = "" }) => {
+	let { id: O, definition: { label: k = "Carousel" } } = t(), A = ae(l.sourceType, O), { settings: { previewMode: ce }, contexts: { InteractionsContext: le } } = ne(), { interactionsManager: j } = te(le), M = p(() => Array.isArray(b) ? b : [], [b]), N = p(() => ee(M, D), [M, D]), P = M.length, F = !!ce, [I, L] = h(0), [R, z] = h("next"), [B, V] = h(!1), [H, U] = h(S > 0), ue = m(null), W = e ?? ue, G = m(null), K = a(I, P);
+	f(() => {
+		I !== K && L(K);
+	}, [I, K]);
+	let q = d((e, t) => {
+		P !== 0 && e !== K && (z(t), V(!0), L(e), j.interactionTrigger(O, "onChange", {
+			index: e,
+			item: M[e]
+		}));
+	}, [
+		P,
+		K,
+		O,
+		j,
+		M
+	]), J = d((e) => {
+		let t = G.current, n = t ? s(t) : 0;
+		t && n > 0 && t.scrollBy({
+			left: e * n,
+			behavior: "smooth"
+		});
+	}, []), Y = d(() => {
+		if (x === "scroll") {
+			J(1);
+			return;
+		}
+		q(c(K, P, 1, w), "next");
+	}, [
+		P,
+		K,
+		w,
+		x,
+		q,
+		J
+	]), X = d(() => {
+		if (x === "scroll") {
+			J(-1);
+			return;
+		}
+		q(c(K, P, -1, w), "previous");
+	}, [
+		P,
+		K,
+		w,
+		x,
+		q,
+		J
+	]), Z = d((e) => {
+		let t = a(e.index, P);
+		if (x === "scroll") {
+			J(t - K);
+			return;
+		}
+		q(t, o(K, t));
+	}, [
+		P,
+		K,
+		x,
+		q,
+		J
+	]), Q = d((e) => {
+		e !== K && q(e, o(K, e));
+	}, [K, q]);
+	u({
+		delay: x === "slide" ? S : 0,
+		active: F && H && P > 1,
+		rootRef: W,
+		pauseOnHover: C,
+		position: K,
+		onTick: Y
+	});
+	let de = p(() => ({
+		next: {
+			...l.callbacks.next,
+			callback: Y
+		},
+		previous: {
+			...l.callbacks.previous,
+			callback: X
+		},
+		goTo: {
+			...l.callbacks.goTo,
+			callback: Z
+		},
+		play: {
+			...l.callbacks.play,
+			callback: () => U(!0)
+		},
+		pause: {
+			...l.callbacks.pause,
+			callback: () => U(!1)
+		}
+	}), [
+		Z,
+		Y,
+		X
+	]), $ = p(() => ({
+		items: M,
+		count: P,
+		index: K,
+		item: M[K],
+		playing: H && S > 0
+	}), [
+		S,
+		P,
+		K,
+		M,
+		H
+	]), fe = d(() => r($), [$]);
+	oe({
+		id: O,
+		source: A,
+		name: k || `Carousel - ${O}`,
+		fields: fe
+	});
+	let pe = p(() => A ? { runtime: { sources: { [A]: $ } } } : g, [A, $]), me = p(() => ({
+		source: A,
+		items: M,
+		keys: N,
+		index: K,
+		direction: R,
+		moved: B,
+		mode: x,
+		transition: T,
+		speed: E,
+		pauseOnHover: C,
+		live: F,
+		scrollerRef: G,
+		onScrolledTo: Q
+	}), [
+		K,
+		R,
+		N,
+		M,
+		F,
+		x,
+		B,
+		Q,
+		C,
+		A,
+		E,
+		T
+	]);
+	return /* @__PURE__ */ _(n, {
+		ref: W,
+		className: ie("plitzi-component__carousel", `carousel--${x}`, v),
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": se || void 0,
+		interactionTriggers: l.triggers,
+		interactionCallbacks: de,
+		children: /* @__PURE__ */ _(re, {
+			inherit: "live",
+			name: `Carousel:${O}`,
+			value: pe,
+			children: /* @__PURE__ */ _(i, {
+				value: me,
+				children: y
+			})
+		})
+	});
+}, y = e(v);
+//#endregion
+export { v as Carousel, y as default };

package/dist/elements/structure/Carousel/CarouselContext.d.ts

@@ -0,0 +1,29 @@
+import { CarouselDirection } from './carouselIndex';
+import { RefObject } from 'react';
+export type CarouselMode = 'slide' | 'marquee' | 'scroll';
+export type CarouselTransition = 'slide' | 'fade' | 'none';
+/** What a carousel hands the track inside it: the items, where it is, and how it moves. */
+export type CarouselContextValue = {
+    /** The source the carousel publishes — `carousel_<id>` — which each slide publishes its own item under too. */
+    source: string;
+    items: unknown[];
+    keys: readonly (string | number)[];
+    index: number;
+    direction: CarouselDirection;
+    /** Whether it has moved yet: the slide a page opens on does not animate in. */
+    moved: boolean;
+    mode: CarouselMode;
+    transition: CarouselTransition;
+    /** Pixels per second, for a marquee. */
+    speed: number;
+    pauseOnHover: boolean;
+    /** Whether it moves at all: never in the builder, which shows the first slide. */
+    live: boolean;
+    /** The box a `scroll` carousel scrolls, which `next` and `previous` move. */
+    scrollerRef: RefObject<HTMLDivElement | null>;
+    /** A `scroll` carousel reports the slide it scrolled to. */
+    onScrolledTo: (index: number) => void;
+};
+/** Absent outside a carousel: a track on its own renders its children as they are. */
+declare const CarouselContext: import('react').Context<CarouselContextValue | undefined>;
+export default CarouselContext;

package/dist/elements/structure/Carousel/CarouselContext.mjs

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+//#region src/elements/structure/Carousel/CarouselContext.ts
+var t = e(void 0);
+t.displayName = "CarouselContext";
+//#endregion
+export { t as default };

package/dist/elements/structure/Carousel/CarouselTrack/CarouselTrack.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from 'react';
+export type CarouselTrackProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    /** What one slide is: rendered once per item, reading the item as `carousel_<id>.item` — as a list row does. */
+    children?: ReactNode;
+};
+/** Where a carousel's slides are, inside it beside its controls: one at a time, a row, or a marquee. */
+declare const CarouselTrack: ({ ref, className, children }: CarouselTrackProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<CarouselTrackProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { CarouselTrack };

package/dist/elements/structure/Carousel/CarouselTrack/CarouselTrack.mjs

@@ -0,0 +1,51 @@
+import e from "../../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../../Element/RootElement.mjs";
+import n from "../CarouselContext.mjs";
+import r from "./components/CarouselSlide/CarouselSlide.mjs";
+import i from "./components/MarqueeTrack/MarqueeTrack.mjs";
+import a from "./components/ScrollTrack/ScrollTrack.mjs";
+import { use as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "clsx";
+//#region src/elements/structure/Carousel/CarouselTrack/CarouselTrack.tsx
+var u = ({ ref: e, className: u = "", children: d }) => {
+	let f = o(n), p = f?.items ?? [], m = f?.mode, h = p.length > 0;
+	return /* @__PURE__ */ c(t, {
+		ref: e,
+		className: l("plitzi-component__carousel-track", u),
+		children: [
+			!f && d,
+			f && !h && !f.live && /* @__PURE__ */ s("div", {
+				className: "carousel__slide--empty",
+				children: "This carousel has no items"
+			}),
+			f && h && m === "slide" && /* @__PURE__ */ s(r, {
+				source: f.source,
+				item: p[f.index],
+				position: f.index,
+				count: p.length,
+				className: l(f.live && f.moved && `carousel__slide--${f.transition}-${f.direction}`),
+				children: d
+			}, String(f.keys[f.index])),
+			f && h && m === "scroll" && /* @__PURE__ */ s(a, {
+				source: f.source,
+				items: p,
+				keys: f.keys,
+				scrollerRef: f.scrollerRef,
+				onScrolledTo: f.onScrolledTo,
+				children: d
+			}),
+			f && h && m === "marquee" && /* @__PURE__ */ s(i, {
+				source: f.source,
+				items: p,
+				keys: f.keys,
+				speed: f.speed,
+				pauseOnHover: f.pauseOnHover,
+				live: f.live,
+				children: d
+			})
+		]
+	});
+}, d = e(u);
+//#endregion
+export { u as CarouselTrack, d as default };

package/dist/elements/structure/Carousel/CarouselTrack/Settings.d.ts

@@ -0,0 +1,2 @@
+declare const Settings: () => import('react').JSX.Element;
+export default Settings;

package/dist/elements/structure/Carousel/CarouselTrack/Settings.mjs

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/elements/structure/Carousel/CarouselTrack/Settings.tsx
+var t = () => /* @__PURE__ */ e("div", {
+	className: "flex flex-col gap-4 py-2 text-xs",
+	children: "What is inside is one slide, rendered once per item."
+});
+//#endregion
+export { t as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/CarouselSlide/CarouselSlide.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type CarouselSlideProps = {
+    /** The source the slide publishes its item under: the carousel's own. */
+    source: string;
+    item: unknown;
+    position: number;
+    count: number;
+    /** A marquee's second copy: there to close the loop, not read twice. */
+    copy?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+/** One slide: a group a screen reader announces as "3 of 11", reading its item as a list row does. */
+declare const CarouselSlide: ({ source, item, position, count, copy, className, children }: CarouselSlideProps) => import('react').JSX.Element;
+export default CarouselSlide;

package/dist/elements/structure/Carousel/CarouselTrack/components/CarouselSlide/CarouselSlide.mjs

@@ -0,0 +1,28 @@
+import e from "../../../../List/modes/ListControlled/ListControlledItem.mjs";
+import { Children as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
+//#region src/elements/structure/Carousel/CarouselTrack/components/CarouselSlide/CarouselSlide.tsx
+var a = ({ source: a, item: o, position: s, count: c, copy: l = !1, className: u = "", children: d }) => {
+	let f = t.count(d) === 0;
+	return /* @__PURE__ */ r("div", {
+		className: i("carousel__slide", u),
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": `${String(s + 1)} of ${String(c)}`,
+		"aria-hidden": l || void 0,
+		inert: l || void 0,
+		children: [f && /* @__PURE__ */ n("div", {
+			className: "carousel__slide--empty",
+			children: `Slide ${String(s + 1)}`
+		}), !f && /* @__PURE__ */ n(e, {
+			index: s,
+			isTemplate: !1,
+			record: o,
+			source: a,
+			children: d
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/CarouselSlide/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CarouselSlide';
+export type { CarouselSlideProps } from './CarouselSlide';

package/dist/elements/structure/Carousel/CarouselTrack/components/CarouselSlide/index.mjs

@@ -0,0 +1,2 @@
+import e from "./CarouselSlide.mjs";
+export { e as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/MarqueeTrack/MarqueeTrack.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type MarqueeTrackProps = {
+    source: string;
+    items: unknown[];
+    keys: readonly (string | number)[];
+    /** Pixels per second. */
+    speed: number;
+    pauseOnHover: boolean;
+    /** In the builder it stands still, one copy of the items. */
+    live: boolean;
+    children?: ReactNode;
+};
+/**
+ * The items scrolling past for ever: drawn twice, the second copy out of reach of readers and the keyboard, so the
+ * track moves half its length and starts again with no jump.
+ */
+declare const MarqueeTrack: ({ source, items, keys, speed, pauseOnHover, live, children }: MarqueeTrackProps) => import('react').JSX.Element;
+export default MarqueeTrack;

package/dist/elements/structure/Carousel/CarouselTrack/components/MarqueeTrack/MarqueeTrack.mjs

@@ -0,0 +1,41 @@
+import e from "../CarouselSlide/CarouselSlide.mjs";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/elements/structure/Carousel/CarouselTrack/components/MarqueeTrack/MarqueeTrack.tsx
+var s = ({ source: s, items: c, keys: l, speed: u, pauseOnHover: d, live: f, children: p }) => {
+	let m = n(null), [h, g] = r(void 0);
+	t(() => {
+		let e = m.current;
+		if (!e || u <= 0) return;
+		let t = () => g(e.scrollWidth / 2 / u);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [u, c.length]);
+	let _ = { "--plitzi-marquee-duration": `${String(h ?? 0)}s` };
+	return /* @__PURE__ */ a("div", {
+		ref: m,
+		className: o("carousel__marquee", {
+			"carousel__marquee--running": f && h !== void 0,
+			"carousel__marquee--pause-on-hover": d
+		}),
+		style: _,
+		children: [c.map((t, n) => /* @__PURE__ */ i(e, {
+			source: s,
+			item: t,
+			position: n,
+			count: c.length,
+			children: p
+		}, String(l[n]))), f && c.map((t, n) => /* @__PURE__ */ i(e, {
+			source: s,
+			item: t,
+			position: n,
+			count: c.length,
+			copy: !0,
+			children: p
+		}, `copy:${String(l[n])}`))]
+	});
+};
+//#endregion
+export { s as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/MarqueeTrack/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MarqueeTrack';
+export type { MarqueeTrackProps } from './MarqueeTrack';

package/dist/elements/structure/Carousel/CarouselTrack/components/MarqueeTrack/index.mjs

@@ -0,0 +1,2 @@
+import e from "./MarqueeTrack.mjs";
+export { e as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/ScrollTrack/ScrollTrack.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, RefObject } from 'react';
+export type ScrollTrackProps = {
+    source: string;
+    items: unknown[];
+    keys: readonly (string | number)[];
+    scrollerRef: RefObject<HTMLDivElement | null>;
+    onScrolledTo: (index: number) => void;
+    children?: ReactNode;
+};
+/** A row a visitor swipes, snapping to each slide; it tells the carousel which slide it is showing. */
+declare const ScrollTrack: ({ source, items, keys, scrollerRef, onScrolledTo, children }: ScrollTrackProps) => import('react').JSX.Element;
+export default ScrollTrack;

package/dist/elements/structure/Carousel/CarouselTrack/components/ScrollTrack/ScrollTrack.mjs

@@ -0,0 +1,27 @@
+import { slideStep as e } from "../../../carouselIndex.mjs";
+import t from "../CarouselSlide/CarouselSlide.mjs";
+import { useCallback as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/elements/structure/Carousel/CarouselTrack/components/ScrollTrack/ScrollTrack.tsx
+var a = ({ source: a, items: o, keys: s, scrollerRef: c, onScrolledTo: l, children: u }) => {
+	let d = r(0), f = n(() => {
+		cancelAnimationFrame(d.current), d.current = requestAnimationFrame(() => {
+			let t = c.current, n = t ? e(t) : 0;
+			t && n > 0 && l(Math.round(t.scrollLeft / n));
+		});
+	}, [c, l]);
+	return /* @__PURE__ */ i("div", {
+		ref: c,
+		className: "carousel__scroller",
+		onScroll: f,
+		children: o.map((e, n) => /* @__PURE__ */ i(t, {
+			source: a,
+			item: e,
+			position: n,
+			count: o.length,
+			children: u
+		}, String(s[n])))
+	});
+};
+//#endregion
+export { a as default };

package/dist/elements/structure/Carousel/CarouselTrack/components/ScrollTrack/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ScrollTrack';
+export type { ScrollTrackProps } from './ScrollTrack';

package/dist/elements/structure/Carousel/CarouselTrack/components/ScrollTrack/index.mjs

@@ -0,0 +1,2 @@
+import e from "./ScrollTrack.mjs";
+export { e as default };