@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/carousel-BPi-Y5yF.js

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

package/dist/carousel.js

@@ -0,0 +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";
+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 };