@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/carousel-CjRTu8m7.js

@@ -0,0 +1,499 @@
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as i } from "@slotted/core/selector-key";
+import { createRovingTabindex as a } from "@slotted/core/focus";
+import { createControllable as o } from "@slotted/core/state";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useId as d, useImperativeHandle as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g } from "react/jsx-runtime";
+import { carouselMessages as ee } from "@slotted/core/i18n";
+import { getLiveAnnouncer as te } from "@slotted/core/live-announcer";
+import { DEFAULT_AUTOPLAY_DELAY as _, EMPTY_PAGES as ne, canStep as v, carouselKeyIntent as re, createCarouselEngine as ie, createCarouselRotation as ae, indicatorDistance as y, intentPage as oe, revealInStrip as se, stepPage as b } from "@slotted/core/carousel";
+//#region src/carousel/carousel-defaults.tsx
+var x = s({
+	align: "start",
+	arrows: "inset",
+	autoplayDelay: _,
+	draggable: !0,
+	loop: !1,
+	orientation: "horizontal",
+	size: "md",
+	transition: "slide"
+});
+function S() {
+	return l(x);
+}
+function ce({ children: e, ...t }) {
+	let n = S();
+	return /* @__PURE__ */ g(x.Provider, {
+		value: {
+			align: t.align ?? n.align,
+			arrows: t.arrows ?? n.arrows,
+			autoplayDelay: t.autoplayDelay ?? n.autoplayDelay,
+			draggable: t.draggable ?? n.draggable,
+			loop: t.loop ?? n.loop,
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size,
+			transition: t.transition ?? n.transition
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/carousel/carousel.tsx
+var le = typeof document > "u" ? u : p, ue = s(void 0);
+function C() {
+	let e = l(ue);
+	if (e === void 0) throw Error("Carousel parts must be rendered inside Carousel.");
+	return e;
+}
+function de(e) {
+	if (!(e instanceof Element)) return !1;
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+function fe(e) {
+	return e === "pointer" || e === "keyboard" || e === "scroll";
+}
+var pe = /* @__PURE__ */ new Set([
+	"pointer",
+	"keyboard",
+	"scroll"
+]);
+function me({ align: e, arrows: t, autoplay: a, children: s, defaultPage: c, defaultPlaying: l, draggable: p, handleRef: _, loop: re, messages: y, onFocus: oe, onPageChange: se, onPlayingChange: x, onPointerEnter: ce, onPointerLeave: C, orientation: me, page: w, playing: T, ref: he, render: E, size: D, slidesPerMove: ge, slidesPerView: O, style: _e, transition: ve, ...ye }) {
+	let k = S(), A = d(), j = e ?? k.align, be = t ?? k.arrows, M = p ?? k.draggable, N = re ?? k.loop, P = me ?? k.orientation, xe = D ?? k.size, F = ve ?? k.transition, I = r(ee, y), Se = n(), L = ge ?? "page", R = a !== void 0 && a !== !1, z = typeof a == "number" ? a : k.autoplayDelay, [Ce, we] = h(c ?? 0), B = w ?? Ce, [Te, Ee] = h(null), [De, Oe] = h(R && l !== !1), V = R && (T ?? De), [H, ke] = h(ne), [Ae, je] = h([]), [Me, Ne] = h(!1), [Pe, Fe] = h(!1), [Ie, Le] = h(!1), [Re, ze] = h(0), [U, Be] = h(null), W = m(null), G = m(null), K = m({
+		animate: !1,
+		announce: !1
+	}), Ve = m(z);
+	Ve.current = z;
+	let He = m(null), q = H.positions.length, J = q === 0 ? B : Math.min(Math.max(B, 0), q - 1), Ue = Te ?? J;
+	function Y(e, t, n) {
+		R && e !== V && o({
+			controlled: T,
+			initial: V,
+			onRequest: (e) => x?.(e.value, e)
+		}).request(e, t, n) && Oe(e);
+	}
+	function X(e, t, n, r = {}) {
+		q === 0 || e < 0 || e >= q || (fe(t) && V && Y(!1, t, n), Ee(null), ze((e) => e + 1), e !== J && (K.current = {
+			animate: r.instant !== !0,
+			announce: pe.has(t)
+		}, o({
+			controlled: w,
+			initial: J,
+			onRequest: (e) => se?.(e.value, e)
+		}).request(e, t, n) && we(e)));
+	}
+	function We(e, t, n) {
+		v(J, e, q, N) && X(b(J, e, q, N), t, n);
+	}
+	let Z = m({
+		current: J,
+		go: X,
+		setPlayingState: Y,
+		pageCount: q,
+		loop: N,
+		isPlaying: V
+	});
+	u(() => {
+		Z.current = {
+			current: J,
+			go: X,
+			setPlayingState: Y,
+			pageCount: q,
+			loop: N,
+			isPlaying: V
+		};
+	});
+	let Q = m({
+		orientation: P,
+		align: j,
+		slidesPerMove: L,
+		transition: F,
+		draggable: M,
+		t: I
+	});
+	Q.current = {
+		orientation: P,
+		align: j,
+		slidesPerMove: L,
+		transition: F,
+		draggable: M,
+		t: I
+	}, le(() => {
+		if (U === null) return;
+		let e = ie(U, {
+			orientation: () => Q.current.orientation,
+			align: () => Q.current.align,
+			slidesPerMove: () => Q.current.slidesPerMove,
+			transition: () => Q.current.transition,
+			draggable: () => Q.current.draggable,
+			page: () => Z.current.current,
+			idPrefix: `${A}slide-`,
+			slideLabel: (e, t) => Q.current.t("slide", {
+				index: e + 1,
+				count: t
+			}),
+			onPages: (e, t) => {
+				ke(e), je(t), Ne(!0);
+			},
+			onVisualPage: Ee,
+			onSettle: (e, t, n) => Z.current.go(e, t, n, { instant: !0 }),
+			onDraggingChange: Fe,
+			onSwipe: (e, t) => {
+				let { current: n, pageCount: r, loop: i } = Z.current;
+				v(n, e, r, i) && Z.current.go(b(n, e, r, i), "pointer", t);
+			},
+			onPeekPress: (t, n) => {
+				let r = e.pages().pageOfSlide[t];
+				r !== void 0 && Z.current.go(r, "pointer", n);
+			}
+		});
+		return W.current = e, e.setCurrent(Z.current.current), e.scrollToPage(Z.current.current, { animate: !1 }), () => {
+			e.destroy(), W.current = null;
+		};
+	}, [
+		U,
+		P,
+		F,
+		j,
+		L,
+		A
+	]), le(() => {
+		let e = W.current;
+		if (e === null) return;
+		let t = He.current !== J;
+		He.current = J, e.setCurrent(J), e.scrollToPage(J, { animate: !t || K.current.animate }), t && K.current.announce && q > 0 && te(U?.ownerDocument).announce(I("announce", {
+			page: J + 1,
+			count: q
+		})), K.current = {
+			animate: !1,
+			announce: !1
+		}, G.current?.restart();
+	}, [
+		J,
+		Re,
+		H
+	]), u(() => {
+		q > 0 && B > q - 1 && X(q - 1, "resize", void 0, { instant: !0 });
+	}, [q]), u(() => {
+		R && T === void 0 && l !== !0 && U?.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === !0 && Oe(!1);
+	}, [U]), u(() => {
+		if (!R || U === null) return;
+		let e = ae({
+			delay: () => Ve.current,
+			document: U.ownerDocument,
+			onHeldChange: Le,
+			onTick: () => {
+				let { current: e, pageCount: t, loop: n } = Z.current;
+				if (!(t <= 1)) {
+					if (e >= t - 1 && !n) {
+						Z.current.setPlayingState(!1, "timeout", void 0);
+						return;
+					}
+					Z.current.go(b(e, 1, t, !0), "timeout", void 0);
+				}
+			}
+		});
+		return G.current = e, Le(e.held()), () => {
+			e.destroy(), G.current = null;
+		};
+	}, [R, U]), u(() => {
+		V && q > 1 ? G.current?.start() : G.current?.stop();
+	}, [V, q]), f(_, () => ({
+		scrollTo: (e) => Z.current.go(e, "programmatic", void 0),
+		scrollToSlide: (e) => {
+			let t = W.current?.pages().pageOfSlide[e];
+			t !== void 0 && Z.current.go(t, "programmatic", void 0);
+		},
+		refresh: () => {
+			W.current?.measure();
+		}
+	}), []);
+	function Ge(e) {
+		oe?.(e), V && de(e.target) && Y(!1, "keyboard", e);
+	}
+	function Ke(e) {
+		ce?.(e), e.pointerType === "mouse" && G.current?.hold("hover");
+	}
+	function qe(e) {
+		C?.(e), G.current?.release("hover");
+	}
+	let Je = {
+		attachViewport: Be,
+		viewportId: `${A}viewport`,
+		orientation: P,
+		transition: F,
+		size: xe,
+		loop: N,
+		t: I,
+		locale: Se,
+		page: Ue,
+		pageCount: q,
+		pages: H,
+		slideIds: Ae,
+		playing: V,
+		autoplay: R,
+		canPrevious: v(J, -1, q, N),
+		canNext: v(J, 1, q, N),
+		go: X,
+		step: We,
+		setPlaying: Y
+	}, $ = {};
+	O !== void 0 && ($["--slotted-carousel-slides-per-view"] = String(O)), R && ($["--slotted-carousel-autoplay-delay"] = `${z}ms`);
+	let Ye = i({
+		...ye,
+		"aria-roledescription": I("roleDescription"),
+		children: s,
+		"data-align": j,
+		"data-arrows": be,
+		...M ? { "data-draggable": "" } : {},
+		...Pe ? { "data-dragging": "" } : {},
+		...Me ? { "data-measured": "" } : {},
+		"data-orientation": P,
+		"data-part": "root",
+		...V ? { "data-playing": "" } : {},
+		...V && Ie ? { "data-paused": "" } : {},
+		"data-size": xe,
+		"data-transition": F,
+		"data-ui": "carousel",
+		onFocus: Ge,
+		onPointerEnter: Ke,
+		onPointerLeave: qe,
+		style: {
+			...$,
+			..._e
+		}
+	});
+	return /* @__PURE__ */ g(ue.Provider, {
+		value: Je,
+		children: E === void 0 ? /* @__PURE__ */ g("section", {
+			...Ye,
+			ref: he
+		}) : E(Ye)
+	});
+}
+//#endregion
+//#region src/carousel/carousel-parts.tsx
+function w(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function T(e, t) {
+	return c((n) => {
+		if (e(n), typeof t == "function") return t(n);
+		t && (t.current = n);
+	}, [e, t]);
+}
+function he({ children: e, onKeyDown: t, ref: n, render: r, ...a }) {
+	let o = C(), s = T(o.attachViewport, n);
+	function c(e) {
+		if (t?.(e), e.defaultPrevented || e.target !== e.currentTarget) return;
+		let n = getComputedStyle(e.currentTarget).direction === "rtl" ? "rtl" : "ltr", r = re(e.key, o.orientation, n);
+		if (r === null) return;
+		let i = oe(r, o.page, o.pageCount, o.loop);
+		i !== -1 && (e.preventDefault(), o.go(i, "keyboard", e, { instant: e.repeat }));
+	}
+	let l = i({
+		"aria-label": o.t("viewport"),
+		role: "group",
+		tabIndex: 0,
+		...a,
+		children: e,
+		"data-part": "viewport",
+		id: o.viewportId,
+		onKeyDown: c
+	});
+	return r === void 0 ? /* @__PURE__ */ g("div", {
+		...l,
+		ref: s
+	}) : r({
+		...l,
+		ref: s
+	});
+}
+function E({ children: e, ref: t, render: n, ...r }) {
+	let a = C(), o = i({
+		role: "group",
+		"aria-roledescription": a.t("slideRoleDescription"),
+		...r,
+		children: e,
+		"data-part": "slide"
+	});
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		...o,
+		ref: t
+	}) : n({
+		...o,
+		ref: t
+	});
+}
+function D({ children: n, delta: r, onClick: a, ref: o, render: s, ...c }) {
+	let l = C(), u = r === 1 ? l.canNext : l.canPrevious;
+	function d(e) {
+		a?.(e), !e.defaultPrevented && u && l.step(r, w(e), e);
+	}
+	let f = i({
+		"aria-controls": l.viewportId,
+		"aria-label": l.t(r === 1 ? "next" : "previous"),
+		...c,
+		...u ? {} : {
+			"aria-disabled": "true",
+			"data-disabled": ""
+		},
+		children: n ?? /* @__PURE__ */ g(t, {
+			directional: l.orientation === "horizontal",
+			children: /* @__PURE__ */ g(e, { name: "chevron-right" })
+		}),
+		"data-part": r === 1 ? "next" : "previous",
+		onClick: d,
+		type: "button"
+	});
+	return s === void 0 ? /* @__PURE__ */ g("button", {
+		...f,
+		ref: o
+	}) : s({
+		...f,
+		ref: o
+	});
+}
+function ge(e) {
+	return /* @__PURE__ */ g(D, {
+		...e,
+		delta: -1
+	});
+}
+function O(e) {
+	return /* @__PURE__ */ g(D, {
+		...e,
+		delta: 1
+	});
+}
+function _e({ children: n, onClick: r, ref: a, render: o, ...s }) {
+	let c = C();
+	if (!c.autoplay) return null;
+	function l(e) {
+		r?.(e), !e.defaultPrevented && c.setPlaying(!c.playing, w(e), e);
+	}
+	let u = i({
+		"aria-controls": c.viewportId,
+		"aria-label": c.t(c.playing ? "stop" : "start"),
+		...s,
+		children: n ?? /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: c.playing ? "pause" : "play" }) }),
+		"data-part": "autoplay",
+		onClick: l,
+		type: "button"
+	});
+	return o === void 0 ? /* @__PURE__ */ g("button", {
+		...u,
+		ref: a
+	}) : o({
+		...u,
+		ref: a
+	});
+}
+function ve({ children: e, placement: t = "below", ref: n, render: r, ...a }) {
+	let o = i({
+		...a,
+		children: e,
+		"data-part": "controls",
+		"data-placement": t
+	});
+	return r === void 0 ? /* @__PURE__ */ g("div", {
+		...o,
+		ref: n
+	}) : r({
+		...o,
+		ref: n
+	});
+}
+function ye({ children: e, ref: t, render: n, variant: r = "dots", ...o }) {
+	let s = C(), [c, l] = h(null), d = m(null), f = m(s);
+	f.current = s;
+	let p = T(l, t);
+	u(() => {
+		if (c === null) return;
+		let e = a(c, {
+			itemSelector: "[data-part=\"indicator\"]",
+			loop: !1,
+			orientation: () => "horizontal",
+			onMove: (e) => f.current.go(e, "keyboard", void 0)
+		});
+		return d.current = e, () => {
+			e.destroy(), d.current = null;
+		};
+	}, [c]), u(() => {
+		if (d.current?.refresh(), d.current?.setActive(s.page), r !== "thumbnails" || c === null) return;
+		let e = c.querySelectorAll("[data-part=\"indicator\"]")[s.page];
+		e !== void 0 && se(c, e);
+	}, [
+		s.page,
+		s.pageCount,
+		c,
+		r
+	]);
+	let ee = r === "dots" && y(0, 0, s.pageCount) !== null, te = Array.from({ length: s.pageCount }, (e, t) => t), _ = i({
+		"aria-label": s.t("indicators"),
+		...o,
+		children: te.map((t) => e === void 0 ? /* @__PURE__ */ g(k, { page: t }, t) : e(t)),
+		"data-part": "indicators",
+		"data-variant": r,
+		...ee ? { "data-adaptive": "" } : {},
+		role: "tablist"
+	});
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		..._,
+		ref: p
+	}) : n({
+		..._,
+		ref: p
+	});
+}
+function k({ children: e, onClick: t, page: n, ref: r, render: a, ...o }) {
+	let s = C(), c = s.page === n, l = y(n, s.page, s.pageCount), u = s.pages.starts[n], d = u === void 0 ? void 0 : s.slideIds[u];
+	function f(e) {
+		t?.(e), !e.defaultPrevented && s.go(n, w(e), e);
+	}
+	let p = i({
+		...e === void 0 ? { "aria-label": s.t("indicator", {
+			page: n + 1,
+			count: s.pageCount
+		}) } : {},
+		...o,
+		"aria-controls": d,
+		"aria-selected": c,
+		children: e,
+		...c ? { "data-current": "" } : {},
+		...l === null ? {} : { "data-distance": l },
+		"data-part": "indicator",
+		onClick: f,
+		role: "tab",
+		tabIndex: c ? 0 : -1,
+		type: "button"
+	});
+	return a === void 0 ? /* @__PURE__ */ g("button", {
+		...p,
+		ref: r
+	}) : a({
+		...p,
+		ref: r
+	});
+}
+function A({ children: e, ref: t, render: n, ...r }) {
+	let a = C(), o = a.pageCount === 0 ? 0 : a.page + 1, s = new Intl.NumberFormat(a.locale), c = i({
+		"aria-hidden": !0,
+		...r,
+		children: e === void 0 ? `${s.format(o)} / ${s.format(a.pageCount)}` : e(o, a.pageCount),
+		"data-part": "counter"
+	});
+	return n === void 0 ? /* @__PURE__ */ g("span", {
+		...c,
+		ref: t
+	}) : n({
+		...c,
+		ref: t
+	});
+}
+//#endregion
+export { ye as a, E as c, C as d, ce as f, k as i, he as l, ve as n, O as o, S as p, A as r, ge as s, _e as t, me as u };

package/dist/carousel.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, p as c, r as l, s as u, t as d, u as f } from "./carousel-BPi-Y5yF.js";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, p as c, r as l, s as u, t as d, u as f } from "./carousel-CjRTu8m7.js";
 export { f as Carousel, d as CarouselAutoplay, o as CarouselControls, l as CarouselCounter, r as CarouselDefaultsProvider, i as CarouselIndicator, e as CarouselIndicators, s as CarouselNext, u as CarouselPrevious, t as CarouselSlide, a as CarouselViewport, n as useCarousel, c as useCarouselDefaults };