@plitzi/sdk-elements 0.37.9 → 0.37.10

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 };

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

@@ -0,0 +1,53 @@
+import { CarouselTrackProps } from './CarouselTrack';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type CarouselTrackAttributes = AuthorableAttributes<CarouselTrackProps>;
+declare const declaration: {
+    readonly type: "carouselTrack";
+    readonly ancestorType: "carousel";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Carousel Track";
+            readonly type: "carouselTrack";
+            readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: false;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "structure";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-film";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel Track";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+export default declaration;

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

@@ -0,0 +1,44 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/Carousel/CarouselTrack/declaration.ts
+var t = e()({
+	type: "carouselTrack",
+	ancestorType: "carousel",
+	content: {
+		attributes: {},
+		definition: {
+			label: "Carousel Track",
+			type: "carouselTrack",
+			description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-film"
+		},
+		defaultStyle: {
+			name: "Carousel Track",
+			displayMode: "desktop",
+			style: { base: { default: {} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

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

@@ -0,0 +1,52 @@
+declare const CarouselTrack: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./CarouselTrack').CarouselTrackProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "carouselTrack";
+    readonly ancestorType: "carousel";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Carousel Track";
+            readonly type: "carouselTrack";
+            readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: false;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "structure";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-film";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel Track";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+export default CarouselTrack;

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

@@ -0,0 +1,6 @@
+import e from "./CarouselTrack.mjs";
+import t from "./declaration.mjs";
+//#region src/elements/structure/Carousel/CarouselTrack/index.ts
+var n = Object.assign(e, t);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,14 @@
+import { CarouselMode, CarouselTransition } from './CarouselContext';
+type SettingsProps = {
+    mode?: CarouselMode;
+    autoplay?: number;
+    pauseOnHover?: boolean;
+    loop?: boolean;
+    transition?: CarouselTransition;
+    speed?: number;
+    itemKey?: string;
+    label?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ mode, autoplay, pauseOnHover, loop, transition, speed, itemKey, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;

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

@@ -0,0 +1,97 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/structure/Carousel/Settings.tsx
+var o = ({ mode: o = "slide", autoplay: s = 0, pauseOnHover: c = !0, loop: l = !0, transition: u = "slide", speed: d = 30, itemKey: f = "", label: p = "", onUpdate: m }) => {
+	let h = e((e) => (t) => m?.(e, t), [m]), g = e((e) => (t) => m?.(e, Math.max(0, Math.round(Number(t) || 0))), [m]), _ = e((e) => (t) => m?.(e, t.target.checked), [m]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ t(i, {
+				label: "Label",
+				size: "xs",
+				placeholder: "Featured products",
+				value: p,
+				onChange: h("label")
+			}),
+			/* @__PURE__ */ n(a, {
+				label: "Mode",
+				value: o,
+				onChange: h("mode"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "slide",
+						children: "One slide at a time"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "marquee",
+						children: "Marquee"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "scroll",
+						children: "Scrolling row"
+					})
+				]
+			}),
+			o === "slide" && /* @__PURE__ */ n(a, {
+				label: "Transition",
+				value: u,
+				onChange: h("transition"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "slide",
+						children: "Slide"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "fade",
+						children: "Fade"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "none",
+						children: "None"
+					})
+				]
+			}),
+			o === "slide" && /* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Autoplay (ms, 0 for none)",
+				size: "xs",
+				value: String(s),
+				onChange: g("autoplay")
+			}),
+			o === "marquee" && /* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Speed (px per second)",
+				size: "xs",
+				value: String(d),
+				onChange: g("speed")
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				onChange: _("pauseOnHover"),
+				label: "Pause on hover",
+				size: "xs"
+			}),
+			o === "slide" && /* @__PURE__ */ t(r, {
+				checked: l,
+				onChange: _("loop"),
+				label: "Loop",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				label: "Row key",
+				size: "xs",
+				placeholder: "id",
+				value: f,
+				title: "The field of each item that names it, so a slide stays with its item when the items change.",
+				onChange: h("itemKey")
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

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

@@ -0,0 +1,13 @@
+/** Which way the carousel last moved: what a slide entering animates from. */
+export type CarouselDirection = 'next' | 'previous';
+/**
+ * Where a move lands: `delta` slides on, round the ends when the carousel loops and stopped at them when it does not.
+ * An empty carousel stays at 0.
+ */
+export declare const stepIndex: (index: number, count: number, delta: number, loop: boolean) => number;
+/** A requested position, as one the carousel has: whole, and within its slides. */
+export declare const clampIndex: (index: unknown, count: number) => number;
+/** The way a jump goes: on to a later slide, back to an earlier one. */
+export declare const directionOf: (from: number, to: number) => CarouselDirection;
+/** How far one slide is from the next in a scrolling row: its width and the gap after it. */
+export declare const slideStep: (scroller: HTMLElement) => number;

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

@@ -0,0 +1,16 @@
+//#region src/elements/structure/Carousel/carouselIndex.ts
+var e = (e, t, n, r) => {
+	if (t <= 0) return 0;
+	let i = e + n;
+	return r ? (i % t + t) % t : Math.min(t - 1, Math.max(0, i));
+}, t = (e, t) => {
+	let n = typeof e == "number" ? e : Number(e);
+	return !Number.isFinite(n) || t <= 0 ? 0 : Math.min(t - 1, Math.max(0, Math.trunc(n)));
+}, n = (e, t) => t < e ? "previous" : "next", r = (e) => {
+	let t = e.firstElementChild;
+	if (!(t instanceof HTMLElement)) return 0;
+	let n = Number.parseFloat(getComputedStyle(e).columnGap);
+	return t.offsetWidth + (Number.isFinite(n) ? n : 0);
+};
+//#endregion
+export { t as clampIndex, n as directionOf, r as slideStep, e as stepIndex };