@number10/jsx-components 5.0.0

package/dist/ScrollView.d.ts

@@ -0,0 +1,121 @@
+import { LayoutContainer, Ref, ViewPrimitivePropsComplete, VNodeLike } from '@number10/jsx-core';
+import { SliderSize } from './ScrollSlider';
+import { PortableComponentPartialTheme } from './theme-types';
+/**
+ * Scroll information data
+ */
+export interface ScrollInfo {
+    /** Current horizontal scroll position */
+    dx: number;
+    /** Current vertical scroll position */
+    dy: number;
+    /** Viewport width */
+    viewportWidth: number;
+    /** Viewport height */
+    viewportHeight: number;
+    /** Content width */
+    contentWidth: number;
+    /** Content height */
+    contentHeight: number;
+    /** Maximum horizontal scroll */
+    maxScrollX: number;
+    /** Maximum vertical scroll */
+    maxScrollY: number;
+}
+export interface ScrollToOptions {
+    dx?: number | undefined;
+    dy?: number | undefined;
+    animate?: boolean | undefined;
+    duration?: number | undefined;
+}
+export type ScrollChildAlignment = 'start' | 'center' | 'end' | 'nearest';
+export interface ScrollChildIntoViewOptions {
+    block?: ScrollChildAlignment | undefined;
+    inline?: ScrollChildAlignment | undefined;
+    animate?: boolean | undefined;
+    duration?: number | undefined;
+}
+export interface ScrollViewHandle extends LayoutContainer {
+    scrollTo(options: ScrollToOptions): void;
+    scrollChildIntoView(child: LayoutContainer | null, options?: ScrollChildIntoViewOptions | undefined): void;
+}
+/** Snap configuration types */
+type SnapMode = {
+    positions: number[];
+    threshold?: number;
+};
+export type SnapAlignment = 'start' | 'center' | 'end';
+type ScrollbarVisibility = boolean | 'auto' | undefined;
+export interface ResolvedScrollViewLayout {
+    outerWidth: number;
+    outerHeight: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    contentWidth: number;
+    contentHeight: number;
+    effectiveContentWidth: number;
+    effectiveContentHeight: number;
+    showVerticalSlider: boolean;
+    showHorizontalSlider: boolean;
+    maxScrollX: number;
+    maxScrollY: number;
+}
+interface ScrollViewLayoutInput {
+    outerWidth: number;
+    outerHeight: number;
+    contentWidth: number;
+    contentHeight: number;
+    sliderSize: number;
+    showVerticalSlider: ScrollbarVisibility;
+    showHorizontalSlider: ScrollbarVisibility;
+    epsilon?: number;
+}
+/**
+ * Props for ScrollView component
+ */
+export interface ScrollViewProps extends Omit<ViewPrimitivePropsComplete, 'children' | 'ref' | 'onTouchMove' | 'onWheel'> {
+    /** Imperative ref handle */
+    ref?: Ref<ScrollViewHandle> | undefined;
+    /** Whether to show the vertical scroll slider (default: auto) */
+    showVerticalSlider?: boolean | 'auto' | undefined;
+    /** Whether to show the horizontal scroll slider (default: auto) */
+    showHorizontalSlider?: boolean | 'auto' | undefined;
+    /** Size variant for the scroll sliders */
+    sliderSize?: SliderSize;
+    /** Initial scroll position; with snap enabled you can optionally set snapIndex instead of dx/dy */
+    scroll?: {
+        dx?: number | undefined;
+        dy?: number | undefined;
+        snapIndex?: number | undefined;
+    };
+    /** Callback when scroll information changes */
+    onScrollInfoChange?: (info: ScrollInfo) => void;
+    /** Snap behavior: false (disabled), 'auto' (to items), or manual positions */
+    snap?: SnapMode | undefined;
+    /** Alignment for snapping */
+    snapAlignment?: SnapAlignment;
+    /** Threshold for snap (pixels) */
+    snapThreshold?: number;
+    /** Enable momentum scrolling */
+    momentum?: boolean;
+    /** Callback fired when snapping lands on a target (index is from snap.positions) */
+    onSnap?: (index: number) => void;
+    /** Callback to deliver the slider size */
+    onSliderSize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** ScrollView content */
+    children?: unknown;
+    /** Theme override */
+    theme?: PortableComponentPartialTheme<'ScrollView'> | undefined;
+}
+export declare function resolveScrollViewLayout(input: ScrollViewLayoutInput): ResolvedScrollViewLayout;
+/**
+ * ScrollView component providing a scrollable area with optional sliders.
+ * @param props - ScrollView properties
+ * @returns JSX element
+ */
+export declare function ScrollView(props: ScrollViewProps): VNodeLike;
+export {};
+//# sourceMappingURL=ScrollView.d.ts.map

package/dist/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"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"}

package/dist/ScrollView.js

@@ -0,0 +1,541 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import { ScrollSlider as t, calculateSliderSize as n } from "./ScrollSlider.js";
+import { DeferredLayoutQueue as r, Easing as i, KNOWN_COMPONENTS as a, createTween as o, getGlobalThemeDefaults as s, resolveComponentTheme as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f, useSurface as p, useTheme as m } from "@number10/jsx-core";
+import { jsx as h, jsxs as ee } from "@number10/jsx-core/jsx-runtime";
+//#region src/ScrollView.tsx
+function g(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function _(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+function v(e, t) {
+	return Math.abs(e.width - t.width) < .5 && Math.abs(e.height - t.height) < .5;
+}
+function te(e, t) {
+	return e ? Math.abs(e.dx - t.dx) < .5 && Math.abs(e.dy - t.dy) < .5 && Math.abs(e.viewportWidth - t.viewportWidth) < .5 && Math.abs(e.viewportHeight - t.viewportHeight) < .5 && Math.abs(e.contentWidth - t.contentWidth) < .5 && Math.abs(e.contentHeight - t.contentHeight) < .5 && Math.abs(e.maxScrollX - t.maxScrollX) < .5 && Math.abs(e.maxScrollY - t.maxScrollY) < .5 : !1;
+}
+function y(e) {
+	let t = e?.__getLayoutSize?.();
+	return {
+		width: Math.max(0, t?.width ?? 0),
+		height: Math.max(0, t?.height ?? 0)
+	};
+}
+function b(e) {
+	let t = e.x ?? 0, n = e.y ?? 0, r = e.parent;
+	for (; r;) t += r.x ?? 0, n += r.y ?? 0, r = r.parent;
+	return {
+		x: t,
+		y: n
+	};
+}
+function x(e, t) {
+	return e === !0 ? !0 : e === !1 ? !1 : t;
+}
+function ne(e) {
+	let t = e.epsilon ?? .5, n = Math.max(0, e.outerWidth), r = Math.max(0, e.outerHeight), i = Math.max(0, e.contentWidth), a = Math.max(0, e.contentHeight), o = Math.max(0, e.sliderSize), s = e.showVerticalSlider === !0, c = e.showHorizontalSlider === !0;
+	for (let l = 0; l < 4; l++) {
+		let l = Math.max(0, n - (s ? o : 0)), u = Math.max(0, r - (c ? o : 0)), d = Math.max(i, l), f = Math.max(a, u), p = x(e.showVerticalSlider, f > u + t), m = x(e.showHorizontalSlider, d > l + t);
+		if (p === s && m === c) break;
+		s = p, c = m;
+	}
+	let l = Math.max(0, n - (s ? o : 0)), u = Math.max(0, r - (c ? o : 0)), d = Math.max(i, l), f = Math.max(a, u);
+	return {
+		outerWidth: n,
+		outerHeight: r,
+		viewportWidth: l,
+		viewportHeight: u,
+		contentWidth: i,
+		contentHeight: a,
+		effectiveContentWidth: d,
+		effectiveContentHeight: f,
+		showVerticalSlider: s,
+		showHorizontalSlider: c,
+		maxScrollX: Math.max(0, d - l),
+		maxScrollY: Math.max(0, f - u)
+	};
+}
+function re(e, t) {
+	let [n, i] = f({
+		width: 0,
+		height: 0
+	}), [a, o] = f({
+		width: 0,
+		height: 0
+	}), s = d(n), c = d(a);
+	return l(() => {
+		let n = !1, a = () => {
+			n || r.defer(l);
+		}, l = () => {
+			if (n) return;
+			let r = y(e.current), l = y(t.current);
+			v(s.current, r) || (s.current = r, i(r)), v(c.current, l) || (c.current = l, o(l)), a();
+		};
+		return a(), () => {
+			n = !0;
+		};
+	}, []), {
+		outerSize: n,
+		contentSize: a
+	};
+}
+function ie(r) {
+	let { ref: x, children: ie, showVerticalSlider: ae = "auto", showHorizontalSlider: oe = "auto", scroll: S, onScrollInfoChange: C, snap: w = !1, snapAlignment: T = "start", snapThreshold: se = 20, momentum: E = !0, onSnap: D, onSliderSize: O, sliderSize: k, visible: ce, ...le } = r, ue = m(), { props: de } = c({
+		componentName: "ScrollSlider",
+		globalTheme: s(),
+		localTheme: ue,
+		knownComponents: a
+	}), [A, fe] = f({
+		dx: S?.dx ?? 0,
+		dy: S?.dy ?? 0
+	}), j = d(A), M = d(!1), pe = d(S?.snapIndex), me = d(null), he = d(null), ge = d(null), { outerSize: N, contentSize: P } = re(me, ge), F = d({
+		vx: 0,
+		vy: 0
+	}), I = d(0), L = d({
+		dx: 0,
+		dy: 0
+	}), R = d(null), z = d(null), B = d(null), V = p()?.scheduler ?? null, H = d(V);
+	V && H.current !== V && (H.current = V);
+	let { outer: U } = n(k, de), W = ne({
+		outerWidth: N.width,
+		outerHeight: N.height,
+		contentWidth: P.width,
+		contentHeight: P.height,
+		sliderSize: U,
+		showVerticalSlider: ae,
+		showHorizontalSlider: oe
+	}), G = d(W);
+	G.current = W;
+	let _e = d(null), ve = d(null);
+	l(() => {
+		if (!O) return;
+		let e = {
+			width: W.showVerticalSlider ? U : 0,
+			height: W.showHorizontalSlider ? U : 0
+		};
+		v(_e.current ?? {
+			width: -1,
+			height: -1
+		}, e) || (_e.current = e, O(e));
+	}, [
+		W.showHorizontalSlider,
+		W.showVerticalSlider,
+		O,
+		U
+	]);
+	let K = (e) => {
+		fe((t) => {
+			let n = typeof e == "function" ? e(t) : e;
+			return Math.abs(n.dx - t.dx) < .001 && Math.abs(n.dy - t.dy) < .001 ? (j.current = t, t) : (j.current = n, n);
+		});
+	}, q = () => {
+		z.current &&= (z.current.stop(), null);
+	}, ye = (e, t) => {
+		let n = G.current, r = g(e.dx ?? j.current.dx, 0, n.maxScrollX), a = g(e.dy ?? j.current.dy, 0, n.maxScrollY), s = t?.animate === !0 && H.current !== null;
+		if (!(Math.abs(r - j.current.dx) < .5 && Math.abs(a - j.current.dy) < .5)) {
+			if (q(), s && H.current) {
+				z.current = o({
+					dx: j.current.dx,
+					dy: j.current.dy
+				}, {
+					to: {
+						dx: r,
+						dy: a
+					},
+					duration: t?.duration ?? 220,
+					ease: i.quadOut,
+					onUpdate: (e) => K({
+						dx: e.dx,
+						dy: e.dy
+					}),
+					onComplete: () => {
+						z.current = null;
+					}
+				}, H.current);
+				return;
+			}
+			K({
+				dx: r,
+				dy: a
+			});
+		}
+	}, be = (e, t, n = 2) => {
+		let r = he.current;
+		if (!e || !r) return;
+		let i = b(r), a = b(e), o = y(e), s = G.current;
+		if (n > 0 && (s.viewportWidth <= 0 || s.viewportHeight <= 0 || o.width <= 0 || o.height <= 0)) {
+			requestAnimationFrame(() => {
+				be(e, t, n - 1);
+			});
+			return;
+		}
+		let c = j.current.dx, l = j.current.dy, u = a.x - i.x, d = u + o.width, f = a.y - i.y, p = f + o.height, m = t?.block ?? "nearest", h = t?.inline ?? "nearest";
+		m === "start" ? l += f : m === "center" ? l += f - (s.viewportHeight - o.height) / 2 : m === "end" ? l += p - s.viewportHeight : f < 0 ? l += f : p > s.viewportHeight && (l += p - s.viewportHeight), h === "start" ? c += u : h === "center" ? c += u - (s.viewportWidth - o.width) / 2 : h === "end" ? c += d - s.viewportWidth : u < 0 ? c += u : d > s.viewportWidth && (c += d - s.viewportWidth), ye({
+			dx: c,
+			dy: l
+		}, {
+			animate: t?.animate,
+			duration: t?.duration
+		});
+	}, xe = (e) => {
+		let t = e;
+		if (me.current = t, !t) {
+			_(x, null);
+			return;
+		}
+		let n = t;
+		n.scrollTo = (e) => {
+			ye(e, e);
+		}, n.scrollChildIntoView = (e, t) => {
+			be(e, t);
+		}, _(x, n);
+	}, J = typeof w == "object" && "positions" in w ? w.threshold ?? se : se, Se = J === void 0 || J < 0 ? Infinity : J, Ce = () => {
+		let { viewportWidth: e, viewportHeight: t } = G.current;
+		if (typeof w == "object" && "positions" in w) {
+			let n = [...w.positions].sort((e, t) => e - t), r = n.length > 1 ? Math.max(0, (n[1] ?? 0) - (n[0] ?? 0)) : t || 0, i = n.length > 1 ? Math.max(0, (n[1] ?? 0) - (n[0] ?? 0)) : e || 0;
+			return {
+				x: n.map((t, r) => {
+					let a = n[r + 1];
+					return {
+						position: t,
+						size: a === void 0 ? i > 0 ? i : e || 0 : Math.max(0, a - t)
+					};
+				}),
+				y: n.map((e, i) => {
+					let a = n[i + 1];
+					return {
+						position: e,
+						size: a === void 0 ? r > 0 ? r : t || 0 : Math.max(0, a - e)
+					};
+				})
+			};
+		}
+		return {
+			x: [],
+			y: []
+		};
+	}, Y = (e, t, n) => {
+		let r = e.position;
+		return T === "center" ? r = e.position + e.size / 2 - t / 2 : T === "end" && (r = e.position + e.size - t), g(r, 0, n);
+	}, we = (e, t, n, r) => {
+		if (t.length === 0) return {
+			position: e,
+			index: -1
+		};
+		let i = e, a = Infinity, o = -1;
+		for (let s = 0; s < t.length; s++) {
+			let { position: c, size: l } = t[s] ?? {
+				position: 0,
+				size: 0
+			}, u = Y({
+				position: c,
+				size: l
+			}, n, r), d = Math.abs(e - u);
+			(d < a && d <= Se || d < a && Se === Infinity) && (a = d, i = u, o = s);
+		}
+		return {
+			position: i,
+			index: o
+		};
+	}, Te = (e, t) => {
+		let { x: n, y: r } = Ce(), { viewportWidth: i, viewportHeight: a, maxScrollX: o, maxScrollY: s } = G.current, c = .5, l = o > c ? n : [], u = s > c ? r : [], d = we(e, l, i, o), f = we(t, u, a, s), p = f.index >= 0 ? f.index : d.index;
+		return {
+			dx: d.position,
+			dy: f.position,
+			index: p
+		};
+	}, X = () => {
+		if (!H.current || !w) return;
+		let e = j.current, { dx: t, dy: n, index: r } = Te(e.dx, e.dy);
+		if (t === e.dx && n === e.dy) {
+			r >= 0 && D && D(r);
+			return;
+		}
+		q(), z.current = o({
+			dx: e.dx,
+			dy: e.dy
+		}, {
+			to: {
+				dx: t,
+				dy: n
+			},
+			duration: 250,
+			ease: i.quadOut,
+			onUpdate: (e) => K({
+				dx: e.dx,
+				dy: e.dy
+			}),
+			onComplete: () => {
+				z.current = null, r >= 0 && D && D(r);
+			}
+		}, H.current);
+	};
+	u(() => {
+		if (!S) return;
+		let e = M.current;
+		if (w && typeof w == "object" && "positions" in w) {
+			let { x: t, y: n } = Ce(), r = t.length > 0 || n.length > 0;
+			if (S.snapIndex !== void 0 && r) {
+				let r = Math.max(t.length, n.length) - 1, a = Math.max(0, Math.min(S.snapIndex, r)), s = t[a], c = n[a], l = s === void 0 ? S.dx ?? j.current.dx : Y(s, W.viewportWidth, W.maxScrollX), u = c === void 0 ? S.dy ?? j.current.dy : Y(c, W.viewportHeight, W.maxScrollY), d = e && (a !== pe.current || Math.abs(j.current.dx - l) > .5 || Math.abs(j.current.dy - u) > .5);
+				pe.current = a, d && H.current ? (q(), z.current = o({
+					dx: j.current.dx,
+					dy: j.current.dy
+				}, {
+					to: {
+						dx: l,
+						dy: u
+					},
+					duration: 220,
+					ease: i.quadOut,
+					onUpdate: (e) => K({
+						dx: e.dx,
+						dy: e.dy
+					}),
+					onComplete: () => {
+						z.current = null, D && D(a);
+					}
+				}, H.current)) : (K({
+					dx: l,
+					dy: u
+				}), D && D(a)), M.current = !0;
+				return;
+			}
+		}
+		if (S.dx !== void 0 && S.dy !== void 0) {
+			let t = S.dx, n = S.dy;
+			e && (Math.abs(j.current.dx - t) > .5 || Math.abs(j.current.dy - n) > .5) && H.current ? (q(), z.current = o({
+				dx: j.current.dx,
+				dy: j.current.dy
+			}, {
+				to: {
+					dx: t,
+					dy: n
+				},
+				duration: 220,
+				ease: i.quadOut,
+				onUpdate: (e) => K({
+					dx: e.dx,
+					dy: e.dy
+				}),
+				onComplete: () => {
+					z.current = null;
+				}
+			}, H.current)) : K({
+				dx: t,
+				dy: n
+			});
+		}
+		M.current = !0;
+	}, [
+		S,
+		W.maxScrollX,
+		W.maxScrollY,
+		W.viewportHeight,
+		W.viewportWidth,
+		w
+	]);
+	let Z = g(A.dx, 0, W.maxScrollX), Q = g(A.dy, 0, W.maxScrollY);
+	l(() => {
+		(Z !== A.dx || Q !== A.dy) && K({
+			dx: Z,
+			dy: Q
+		});
+	}, [
+		Z,
+		Q,
+		A.dx,
+		A.dy
+	]), l(() => {
+		if (C && W.viewportWidth > 0 && W.viewportHeight > 0) {
+			let e = {
+				dx: Z,
+				dy: Q,
+				viewportWidth: W.viewportWidth,
+				viewportHeight: W.viewportHeight,
+				contentWidth: W.effectiveContentWidth,
+				contentHeight: W.effectiveContentHeight,
+				maxScrollX: W.maxScrollX,
+				maxScrollY: W.maxScrollY
+			};
+			if (te(ve.current, e)) return;
+			ve.current = e, C(e);
+		}
+	}, [
+		Z,
+		Q,
+		W.effectiveContentHeight,
+		W.effectiveContentWidth,
+		W.maxScrollX,
+		W.maxScrollY,
+		W.viewportHeight,
+		W.viewportWidth,
+		C
+	]);
+	let Ee = (e, t) => {
+		let n = G.current, r = j.current, i = g(r.dy - t, 0, n.maxScrollY), a = g(r.dx - e, 0, n.maxScrollX);
+		Math.abs(a - r.dx) < .001 && Math.abs(i - r.dy) < .001 || K({
+			dx: a,
+			dy: i
+		});
+	}, De = () => {
+		R.current = null;
+		let e = L.current;
+		if (e.dx === 0 && e.dy === 0) return;
+		let t = e.dx, n = e.dy;
+		L.current = {
+			dx: 0,
+			dy: 0
+		}, Ee(t, n);
+	}, $ = (e, t) => {
+		e === 0 && t === 0 || (L.current = {
+			dx: L.current.dx + e,
+			dy: L.current.dy + t
+		}, R.current === null && (R.current = requestAnimationFrame(De)));
+	}, Oe = () => {
+		if (!H.current) return;
+		let e = G.current, t = F.current, n = Math.min(1e3, Math.max(200, Math.abs(t.vx) + Math.abs(t.vy))), r = j.current, a = g(r.dx - t.vx * (n / 1e3), 0, e.maxScrollX), s = g(r.dy - t.vy * (n / 1e3), 0, e.maxScrollY), c = w ? Te(a, s) : null;
+		q(), z.current = o({
+			dx: r.dx,
+			dy: r.dy
+		}, {
+			to: {
+				dx: c?.dx ?? a,
+				dy: c?.dy ?? s
+			},
+			duration: n,
+			ease: i.quadOut,
+			onUpdate: (e) => K({
+				dx: e.dx,
+				dy: e.dy
+			}),
+			onComplete: () => {
+				z.current = null, c && c.index >= 0 && D && D(c.index);
+			}
+		}, H.current);
+	}, ke = (e) => {
+		K((t) => ({
+			...t,
+			dy: g(e, 0, G.current.maxScrollY)
+		}));
+	}, Ae = (e) => {
+		K((t) => ({
+			...t,
+			dx: g(e, 0, G.current.maxScrollX)
+		}));
+	}, je = () => {
+		w && X();
+	}, Me = (e) => {
+		if (e.state === "end") {
+			let e = F.current;
+			E && (Math.abs(e.vx) > .1 || Math.abs(e.vy) > .1) ? Oe() : w && X();
+			return;
+		}
+		if (e.state === "start") {
+			q(), R.current !== null && (cancelAnimationFrame(R.current), R.current = null), L.current = {
+				dx: 0,
+				dy: 0
+			}, F.current = {
+				vx: 0,
+				vy: 0
+			}, I.current = Date.now(), e.stopPropagation();
+			return;
+		}
+		e.stopPropagation();
+		let t = e.dx ?? 0, n = e.dy ?? 0, r = Date.now(), i = r - I.current;
+		i > 0 && (F.current = {
+			vx: t / i * 1e3,
+			vy: n / i * 1e3
+		}, I.current = r), $(t, n);
+	}, Ne = (e) => {
+		e.stopPropagation(), e.preventDefault(), q(), $(-e.deltaX, -e.deltaY), w && (B.current && clearTimeout(B.current), B.current = setTimeout(() => X(), 200));
+	};
+	l(() => () => {
+		R.current !== null && (cancelAnimationFrame(R.current), R.current = null), L.current = {
+			dx: 0,
+			dy: 0
+		}, B.current && clearTimeout(B.current), q();
+	}, []);
+	let Pe = ce === "none" ? "none" : ce ?? !0;
+	return /* @__PURE__ */ h(e, { children: /* @__PURE__ */ h(e, {
+		...le,
+		visible: Pe,
+		children: /* @__PURE__ */ ee(e, {
+			ref: xe,
+			width: "100%",
+			height: "100%",
+			direction: "stack",
+			children: [
+				/* @__PURE__ */ ee(e, {
+					ref: he,
+					width: W.viewportWidth,
+					height: W.viewportHeight,
+					onTouchMove: Me,
+					onWheel: Ne,
+					overflow: "hidden",
+					direction: "stack",
+					children: [/* @__PURE__ */ h(e, {
+						ref: ge,
+						x: -Z,
+						y: -Q,
+						children: ie
+					}), /* @__PURE__ */ h(e, {
+						width: W.viewportWidth,
+						height: W.viewportHeight,
+						enableGestures: !0,
+						backgroundAlpha: 0,
+						onTouch: (e) => {
+							let t = e.localX, n = e.localY, r = .1;
+							t >= -r && t <= W.viewportWidth + r && n >= -r && n <= W.viewportHeight + r || e.stopPropagation();
+						}
+					})]
+				}),
+				W.showHorizontalSlider && W.viewportWidth > 0 ? /* @__PURE__ */ h(e, {
+					y: W.viewportHeight,
+					width: W.viewportWidth,
+					height: U,
+					children: /* @__PURE__ */ h(t, {
+						direction: "horizontal",
+						size: k,
+						scrollPosition: Z,
+						viewportSize: W.viewportWidth,
+						contentSize: W.effectiveContentWidth,
+						onScroll: Ae,
+						momentum: E,
+						onMomentumEnd: je
+					})
+				}) : null,
+				W.showVerticalSlider && W.viewportHeight > 0 ? /* @__PURE__ */ h(e, {
+					x: W.viewportWidth,
+					width: U,
+					height: W.viewportHeight,
+					children: /* @__PURE__ */ h(t, {
+						direction: "vertical",
+						size: k,
+						scrollPosition: Q,
+						viewportSize: W.viewportHeight,
+						contentSize: W.effectiveContentHeight,
+						onScroll: ke,
+						momentum: E,
+						onMomentumEnd: je
+					})
+				}) : null,
+				W.showHorizontalSlider && W.showVerticalSlider ? /* @__PURE__ */ h(e, {
+					x: W.viewportWidth,
+					y: W.viewportHeight,
+					width: U,
+					height: U
+				}) : null
+			]
+		})
+	}) });
+}
+//#endregion
+export { ie as ScrollView, ne as resolveScrollViewLayout };

package/dist/ScrollView.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScrollView.test.d.ts.map

package/dist/ScrollView.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.test.d.ts","sourceRoot":"","sources":["../src/ScrollView.test.ts"],"names":[],"mappings":""}

package/dist/SegmentedControl.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);function i(e,t){if(t!==void 0)return e.find(e=>e.value===t)}function a(e,t,n){if(t!==void 0)return i(e,t)?.value??``;let r=i(e,n);return r?r.value:e.find(e=>!e.disabled)?.value??e[0]?.value??``}function o(e,t,n=!1){return!n&&!e.disabled&&e.value!==t}function s(...e){return Object.assign({},...e.filter(Boolean))}function c(...e){let t=Object.assign({},...e.filter(Boolean));return Object.keys(t).length>0?t:void 0}function l(e){let{orientation:t,size:n,variant:r,segmentWidth:i,segmentHeight:a,segmentGap:o,segmentPadding:s,segmentCornerRadius:c,segmentStyle:l,segmentHoverStyle:u,segmentSelectedStyle:d,segmentDisabledStyle:f,textStyle:p,selectedTextStyle:m,disabledTextStyle:h,labelStyle:g,iconGap:_,iconSize:v,disabledAlpha:y,labelPosition:b,labels:x,...S}=e;return S}function u(e){switch(e){case`small`:return{segmentWidth:72,segmentHeight:28,segmentPadding:{left:8,right:8,top:4,bottom:4},iconSize:14,textStyle:{fontSize:`12px`}};case`large`:return{segmentWidth:108,segmentHeight:40,segmentPadding:{left:14,right:14,top:8,bottom:8},iconSize:20,textStyle:{fontSize:`16px`}};default:return{}}}function d(e){switch(e){case`soft`:return{backgroundColor:988970,backgroundAlpha:.78,borderColor:3359061,segmentStyle:{backgroundColor:1976635,backgroundAlpha:0,borderWidth:0},segmentHoverStyle:{backgroundColor:3359061,backgroundAlpha:.7},segmentSelectedStyle:{backgroundColor:3359061,backgroundAlpha:1,borderColor:6583435,borderWidth:1},textStyle:{color:`#cbd5e1`},selectedTextStyle:{color:`#ffffff`,fontStyle:`bold`}};case`outline`:return{backgroundColor:0,backgroundAlpha:0,borderColor:6333946,borderWidth:1,segmentStyle:{backgroundColor:0,backgroundAlpha:0,borderColor:6333946,borderWidth:0},segmentHoverStyle:{backgroundColor:1920728,backgroundAlpha:.12},segmentSelectedStyle:{backgroundColor:1920728,backgroundAlpha:.2,borderColor:9684477,borderWidth:1},textStyle:{color:`#bfdbfe`},selectedTextStyle:{color:`#ffffff`,fontStyle:`bold`}};default:return{}}}function f(f){let{options:p,value:m,defaultValue:h,onChange:g,orientation:_,size:v,variant:y,label:b,labelPosition:x,labels:S,disabled:C=!1,segmentWidth:ee,segmentHeight:w,renderOption:T,theme:E,alpha:D,...O}=f,k=(0,n.useTheme)(),A=E?(0,n.mergeThemes)(k??{},E):k,{props:j,nestedTheme:M}=(0,n.resolveComponentTheme)({componentName:`SegmentedControl`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:A,knownComponents:n.KNOWN_COMPONENTS}),N=m!==void 0,[P,F]=(0,n.useState)(a(p,m,h)),[I,L]=(0,n.useState)(void 0),R=N?a(p,m):a(p,P);(0,n.useEffect)(()=>{!N&&P!==R&&F(R)},[N,P,R]);let te={...j.labels??{},...S??{}},z=_??j.orientation??`horizontal`,B=v??j.size??`medium`,V=y??j.variant??`solid`,H=u(B),U=d(V),W=x??j.labelPosition??`none`,G=ee??H.segmentWidth??j.segmentWidth,K=w??H.segmentHeight??j.segmentHeight,q=b??te.group,J=W!==`none`&&q!==void 0,Y=s(l(j),l(U)),X=W===`left`?`row`:`column`,Z=z===`horizontal`?`row`:`column`,ne=j.segmentGap??0,Q=c({color:`#dbeafe`,fontSize:`13px`},j.textStyle,U.textStyle,H.textStyle),re=c(Q,j.selectedTextStyle,U.selectedTextStyle),ie=c(Q,j.disabledTextStyle),ae=j.labelStyle??{color:`#9fb3c8`,fontSize:`13px`},$=C?j.disabledAlpha??.5:D,oe=e=>{let t=i(p,e);!t||!o(t,R,C)||(N||F(e),g?.(e))},se=(i,a)=>{let c=i.value===R,l=C||!!i.disabled,u=I===i.value,d=o(i,R,C),f=i.label??(i.icon?void 0:i.value),p=s({height:K,width:G,padding:H.segmentPadding??j.segmentPadding,cornerRadius:j.segmentCornerRadius},j.segmentStyle,U.segmentStyle,u&&!c&&!l?j.segmentHoverStyle:void 0,u&&!c&&!l?U.segmentHoverStyle:void 0,c?j.segmentSelectedStyle:void 0,c?U.segmentSelectedStyle:void 0,l?j.segmentDisabledStyle:void 0),m=l?ie:c?re:Q,h=H.iconSize??j.iconSize,g=(0,n.mergeThemes)(M,{Text:m?{style:m}:{},Icon:{...h===void 0?{}:{size:h}}}),_=T?.({option:i,selected:c,disabled:l,hovered:u,index:a,size:B,variant:V,orientation:z,...m?{textStyle:m}:{},...h===void 0?{}:{iconSize:h}})??i.children,v=d&&(j.segmentHoverStyle||U.segmentHoverStyle)?{onHoverStart:()=>L(i.value),onHoverEnd:()=>L(e=>e===i.value?void 0:e)}:{};return(0,r.jsx)(t.View,{direction:`row`,alignItems:`center`,justifyContent:`center`,gap:j.iconGap??6,...p,enableGestures:d,onTouch:()=>oe(i.value),...v,theme:g,children:_??(0,r.jsxs)(r.Fragment,{children:[i.icon,f===void 0?null:(0,r.jsx)(e.Text,{text:f,...m?{style:m}:{}})]})},i.value)},ce=(0,r.jsx)(t.View,{...Y,direction:Z,gap:ne,...$===void 0?{}:{alpha:$},theme:M,children:p.map(se)});return(0,r.jsxs)(t.View,{...O,direction:X,alignItems:`center`,gap:j.gap??8,theme:M,children:[J?(0,r.jsx)(e.Text,{text:q,style:ae}):null,ce]})}exports.SegmentedControl=f,exports.findSegmentedControlOption=i,exports.isSegmentedControlOptionSelectable=o,exports.resolveSegmentedControlValue=a;