@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/web/SearchInput.web.tsrx.js

@@ -0,0 +1,137 @@
+import { normStyle } from "./layout-child.web.js";
+import { applyWebProps } from "./platformProps.web.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { __s, bag1, bag13, child, clone, componentSlot, delegateEvents, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template, useState } from "octane";
+import { bindSignalAttribute, bindSignalValue, enableSignalBindings, replaceRef, setBooleanAttributeIfChanged, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/SearchInput.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents([
+	"click",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown"
+]);
+var _t$0 = /* @__PURE__ */ template("<button type=\"button\" class=\"vx-search-clear\" aria-label=\"Clear search\"></button>");
+var _t$1 = /* @__PURE__ */ template("<div><!><input type=\"search\" class=\"vx-search-field\" data-octane-input=\"i:ae1a301c\" enterKeyHint=\"search\"/><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, {
+		"name": props.icon ?? "xplat-search",
+		"size": 16,
+		"className": "vx-search-icon"
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:f0530e5b");
+}
+function __then$3(__props, __s, __extra) {
+	const clear = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		setEventHandler(_root, "$$click", clear);
+		_b = bag1(__s, _root, _m0);
+	} else setEventHandler(_b.a, "$$click", clear);
+	componentSlot(__s, 1, _b.a, Icon, {
+		"name": "xplat-clear",
+		"size": 12
+	}, void 0, void 0, 2, void 0, void 0, "c:599c661e");
+}
+var _rm$6 = [
+	"r",
+	"b",
+	"a",
+	"r",
+	"g",
+	"f"
+];
+var SearchInput = /* @__PURE__ */ __s(function SearchInput(props, __s, __extra) {
+	const [internal, setInternal] = useState(props.defaultValue ?? "", _hs$ + 0);
+	const value = props.value ?? internal;
+	const setValue = (next) => {
+		if (props.value === void 0) setInternal(next);
+		props.onChange?.(next);
+	};
+	const clear = () => {
+		setValue("");
+		props.onClear?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6, _m7, _m11, _m12;
+		const _root = clone(_t$1);
+		queueRefAttach(__s, _m1 = (el) => applyWebProps(el, props.web), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = sibling(child(_root), 1);
+		queueRefAttach(__s, _m6 = (el) => {
+			if (el) props.bind?.({
+				focus: () => el.focus(),
+				blur: () => el.blur(),
+				native: el
+			});
+		}, _m5 = _el0);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.g, _b.f));
+		_m7 = bindSignalValue(__s, void 0, _el0, value, "i:ae1a301c");
+		setEventHandler(_el0, "$$input", (e) => setValue(e.target.value));
+		setEventHandler(_el0, "$$keydown", (e) => {
+			if (e.key === "Enter" && !e.shiftKey) props.onSubmit?.();
+		});
+		setEventHandler(_el0, "$$focusin", props.onFocus);
+		setEventHandler(_el0, "$$focusout", props.onBlur);
+		_m11 = child(_root);
+		_m12 = sibling(_el0, 1);
+		_b = bag13(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, void 0, void 0, void 0, _m11, _m12);
+		__s.refFields = _rm$6;
+	} else {
+		{
+			const _r = (el) => applyWebProps(el, props.web);
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		{
+			const _r = (el) => {
+				if (el) props.bind?.({
+					focus: () => el.focus(),
+					blur: () => el.blur(),
+					native: el
+				});
+			};
+			if (_r !== _b.g) _b.g = replaceRef(__s, _b.g, _r, _b.f);
+		}
+		_b.h = bindSignalValue(__s, _b.h, _b.f, value, "i:ae1a301c");
+		setEventHandler(_b.f, "$$input", (e) => setValue(e.target.value));
+		setEventHandler(_b.f, "$$keydown", (e) => {
+			if (e.key === "Enter" && !e.shiftKey) props.onSubmit?.();
+		});
+		setEventHandler(_b.f, "$$focusin", props.onFocus);
+		setEventHandler(_b.f, "$$focusout", props.onBlur);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:d2d13dd9", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-search",
+		props.editable === false ? "vx-search--disabled" : void 0,
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = normStyle(props.style);
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.i = bindSignalAttribute(__s, _b.i, _b.f, "placeholder", props.placeholder, "b:040640fd", setPlainAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.f, "aria-label", props.accessibilityLabel ?? props.placeholder, "b:ce6ea1a5", setAriaAttribute);
+	_b.k = setBooleanAttributeIfChanged(props.editable === false, _b.k, _b.f, "readonly");
+	{
+		const __ifCondition = props.icon !== false;
+		ifBlock(__s, 1, _b.a, __ifCondition, __then$0, null, _b.l, __ifCondition ? [props] : void 0);
+	}
+	{
+		const __ifCondition$ = value !== "" && props.editable !== false;
+		ifBlock(__s, 2, _b.a, __ifCondition$, __then$3, null, _b.m, __ifCondition$ ? [clear] : void 0);
+	}
+});
+//#endregion
+export { SearchInput };

package/dist/web/SegmentedControl.web.tsrx.js

@@ -0,0 +1,75 @@
+import { applyWebProps } from "./platformProps.web.js";
+import { __s, bag10, child, clone, createScopedElement, hookSlots, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/SegmentedControl.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div role=\"radiogroup\"><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(1);
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+var SegmentedControl = /* @__PURE__ */ __s(function SegmentedControl(props, __s, __extra) {
+	const [internal, setInternal] = useState(props.defaultValue, _hs$ + 0);
+	const current = props.value ?? internal;
+	const select = (value) => {
+		if (props.value === void 0) setInternal(value);
+		props.onValueChange?.(value);
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m7;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (e) => applyWebProps(e, props.web), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m7 = child(_root);
+		_b = bag10(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, _m7, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (e) => applyWebProps(e, props.web);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:7962f239", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-label", props.accessibilityLabel, "b:0963f8ba", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-disabled", props.disabled || void 0, "b:7e55726c", setAriaAttribute);
+	_b.f = updateFreshClassName([
+		"vx-segmented",
+		props.disabled ? "vx-segmented--disabled" : void 0,
+		props.className
+	], _b.f, _b.a);
+	{
+		const _v = props.style;
+		if (_b.g !== _v) {
+			setStyle(_b.a, _v, _b.g);
+			_b.g = _v;
+		}
+	}
+	_b.k = bindSignalChild(__s, _b.k, 1, _b.a, props.options.map((opt) => {
+		const selected = current === opt.value;
+		const disabled = props.disabled || opt.disabled;
+		return createScopedElement("div", {
+			key: opt.value,
+			role: "radio",
+			"aria-checked": selected,
+			"aria-disabled": disabled || void 0,
+			tabIndex: disabled ? void 0 : 0,
+			className: [
+				"vx-segment",
+				selected ? "vx-segment--on" : void 0,
+				disabled ? "vx-segment--disabled" : void 0
+			],
+			onClick: disabled ? void 0 : () => select(opt.value),
+			onKeyDown: (e) => {
+				if (disabled) return;
+				if (e.key === " " || e.key === "Enter") {
+					e.preventDefault();
+					select(opt.value);
+				}
+			}
+		}, () => createScopedElement("span", { className: "vx-segment-label" }, () => opt.label ?? opt.value));
+	}), "b:5dbdf197", _b.h, true, void 0, void 0, void 0);
+});
+//#endregion
+export { SegmentedControl };

package/dist/web/Select.web.tsrx.js

@@ -0,0 +1,149 @@
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { bag4, bag9, child, clone, componentSlotVoid, createScopedElement, createScopedValue, drainFrag, hookSlots, markChildrenBlock, positionalChildren, setAriaAttribute, sibling, template, useEffect, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, updateFreshClassName } from "octane/internal/client";
+//#region src/Select.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span></span><span class=\"vx-select-caret\" aria-hidden=\"true\">▾</span>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<!><div role=\"listbox\" class=\"vx-menu-list vx-select-list\"><!></div>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var Select = function Select(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const anchor = useRef(null, _hs$ + 0);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false, _hs$ + 1);
+	const openControlled = props.open !== void 0;
+	const open = openControlled ? props.open : internalOpen;
+	const norm = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v]);
+	const [internalValue, setInternalValue] = useState(norm(props.defaultValue), _hs$ + 2);
+	const valueControlled = props.value !== void 0;
+	const selected = valueControlled ? norm(props.value) : internalValue;
+	const [query, setQuery] = useState("", _hs$ + 3);
+	const setOpen = (next) => {
+		if (props.disabled && next) return;
+		if (!openControlled) setInternalOpen(next);
+		if (!next) setQuery("");
+		props.onOpenChange?.(next);
+	};
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [open], _hs$ + 4);
+	const report = (keys) => {
+		if (!valueControlled) setInternalValue(keys);
+		props.onValueChange?.(props.multiple ? keys : keys[0]);
+	};
+	const pick = (opt) => {
+		if (opt.disabled) return;
+		if (props.multiple) report(selected.includes(opt.value) ? selected.filter((v) => v !== opt.value) : [...selected, opt.value]);
+		else {
+			report([opt.value]);
+			setOpen(false);
+		}
+	};
+	const labelFor = (v) => props.options.find((o) => o.value === v)?.label ?? v;
+	const triggerText = selected.length ? selected.map(labelFor).join(", ") : props.placeholder ?? "";
+	const shown = props.searchable && query ? props.options.filter((o) => (o.label ?? o.value).toLowerCase().includes(query.toLowerCase())) : props.options;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m1;
+			const _root = clone(_t$0);
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, void 0, _m1, null, void 0);
+		}
+		_b.a = updateFreshClassName(["vx-select-value", selected.length ? void 0 : "vx-select-placeholder"], _b.a, _b.b);
+		{
+			const _v = triggerText;
+			_b.c = childTextHoleUpdate(__s, 1, _b.b, _v, _b.c, _b.d);
+			_b.d = _v;
+		}
+	}
+	function __children$4(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m1, _m2, _m3, _m6;
+			const _root = clone(_t$1);
+			const _el0 = sibling(child(_root), 1);
+			_m1 = _el0;
+			_m2 = __block.parentNode;
+			_m3 = child(_root);
+			_m6 = child(_el0);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag9(__s, null, void 0, _m1, _m2, _m3, null, void 0, _m6, null, void 0);
+		}
+		_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-multiselectable", props.multiple || void 0, "b:1676b9fd", setAriaAttribute);
+		_b.j = bindSignalChild(__s, _b.j, 1, _b.c, props.searchable ? createScopedValue(() => createElementFromConfig("c:e798cc60", TextInput, {
+			className: "vx-select-search",
+			placeholder: "Search…",
+			value: query,
+			onChange: setQuery
+		})) : null, "b:b4422ae5", _b.d, true, void 0, void 0, void 0);
+		_b.k = bindSignalChild(__s, _b.k, 2, _b.b, shown.map((opt) => {
+			const isSelected = selected.includes(opt.value);
+			return createScopedElement("div", {
+				key: opt.value,
+				role: "option",
+				"aria-selected": isSelected,
+				"aria-disabled": opt.disabled || void 0,
+				tabIndex: opt.disabled ? void 0 : 0,
+				className: [
+					"vx-menu-item",
+					"vx-select-option",
+					isSelected ? "vx-select-option--on" : void 0,
+					opt.disabled ? "vx-menu-item--disabled" : void 0
+				],
+				onClick: opt.disabled ? void 0 : () => pick(opt),
+				onKeyDown: (e) => {
+					if (!opt.disabled && (e.key === " " || e.key === "Enter")) {
+						e.preventDefault();
+						pick(opt);
+					}
+				}
+			}, () => positionalChildren([createScopedElement("span", {
+				className: "vx-select-check",
+				"aria-hidden": "true"
+			}, () => isSelected ? "✓" : ""), createScopedElement("span", { className: "vx-menu-item-label" }, () => opt.label ?? opt.value)]));
+		}), "b:8cf65141", _b.g, true, void 0, void 0, void 0);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"bind": (e) => {
+			anchor.current = e;
+		},
+		"id": props.id,
+		"className": [
+			"vx-select-trigger",
+			props.disabled ? "vx-select--disabled" : void 0,
+			props.className
+		],
+		"style": props.style,
+		"disabled": props.disabled,
+		"onPress": () => setOpen(!open),
+		"accessibilityLabel": props.accessibilityLabel,
+		"accessibilityState": { disabled: props.disabled },
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:427396d8");
+	componentSlotVoid(__s, 1, __block.parentNode, Popover, {
+		"anchor": anchor,
+		"open": open,
+		"placement": props.placement ?? "bottom",
+		"onDismiss": () => setOpen(false),
+		"className": "vx-menu",
+		"children": markChildrenBlock(__children$4, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:3dd5c3b4");
+};
+//#endregion
+export { Select };

package/dist/web/Separator.web.tsrx.js

@@ -0,0 +1,42 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { __s, bag6, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings, replaceRef, setAriaAttributeIfChanged, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Separator.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div role=\"separator\"></div>");
+var _rm$0 = [
+	"r",
+	"b",
+	"a"
+];
+var Separator = /* @__PURE__ */ __s(function Separator(props, __s, __extra) {
+	const vertical = props.orientation === "vertical";
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (e) => applyEscapeProps(e, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:5c0bbcd9", setPlainAttribute);
+	_b.d = setAriaAttributeIfChanged(vertical ? "vertical" : "horizontal", _b.d, _b.a, "aria-orientation");
+	_b.e = updateFreshClassName([
+		"vx-separator",
+		vertical ? "vx-separator--v" : "vx-separator--h",
+		props.className
+	], _b.e, _b.a);
+	{
+		const _v = props.style;
+		if (_b.f !== _v) {
+			setStyle(_b.a, _v, _b.f);
+			_b.f = _v;
+		}
+	}
+});
+//#endregion
+export { Separator };

package/dist/web/Sheet.web.tsrx.js

@@ -0,0 +1,81 @@
+import { cx } from "./cx.js";
+import { useThemeScheme } from "./theme/theme-scheme.js";
+import { normalizeDetents } from "./sheet-snap.js";
+import { attachSheetDetents } from "./sheet-detents.web.js";
+import { bag4, child, clone, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, useEffect, useRef, withSlot } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoEqual, hookMemoPublish1, textHoleUpdate } from "octane/internal/client";
+//#region src/Sheet.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const detents = __extra[1];
+	const maxDetent = __extra[2];
+	const panel = __extra[3];
+	const props = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	{
+		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", { className: cx("vx-sheet-layer", dark && "dark") }, () => positionalChildren([(props.shadeCover ?? true) && createScopedValue(() => createElement("div", {
+			className: "vx-sheet-backdrop",
+			onClick: props.onDismiss
+		})), createScopedValue(() => createScopedElement("div", {
+			ref: (el) => {
+				panel.current = el;
+			},
+			className: cx("vx-sheet", detents.length && "vx-sheet-detents", props.className),
+			style: {
+				...props.style,
+				...detents.length ? {
+					height: `${maxDetent * 100}%`,
+					transform: "translateY(100%)"
+				} : {}
+			},
+			...props.web
+		}, () => props.children))]))), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+var Sheet = function Sheet(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	let __hkd0;
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	const panel = useRef(null, _hs$ + 1);
+	const dismiss = useRef(props.onDismiss, _hs$ + 2);
+	dismiss.current = props.onDismiss;
+	const detents = (__hkd0 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) ? hookMemoPublish1(__hk, 0, normalizeDetents(props.detents), __hkd0) : __hk[2]);
+	const maxDetent = detents.length ? detents[detents.length - 1] : 0;
+	const detentsKey = detents.join(",");
+	useEffect(() => {
+		const el = panel.current;
+		if (!props.open || !el || !detents.length) return;
+		const ctl = attachSheetDetents(el, detents, () => dismiss.current?.());
+		return () => ctl.detach();
+	}, [props.open, detentsKey], _hs$ + 3);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition = props.open;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
+			dark,
+			detents,
+			maxDetent,
+			panel,
+			props
+		] : void 0);
+	}
+};
+//#endregion
+export { Sheet };

package/dist/web/Skeleton.web.tsrx.js

@@ -0,0 +1,56 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { __s, bag8, clone, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template } from "octane";
+import { bindSignalAttribute, canSplitStyleProperties, enableSignalBindings, replaceRef, setPlainAttribute, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
+//#region src/Skeleton.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div aria-busy=\"true\"></div>");
+var _rm$0 = [
+	"r",
+	"b",
+	"a"
+];
+var Skeleton = /* @__PURE__ */ __s(function Skeleton(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag8(__s, _root, _m0, _m1, void 0, void 0, __s, void 0, void 0, void 0);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (e) => applyEscapeProps(e, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:6a1aae76", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-skeleton", props.className], _b.d, _b.a);
+	{
+		const __styleSpread = { ...props.style };
+		const __styleValue = props.width;
+		const __styleValue$ = props.height;
+		const __styleFull = "width" in __styleSpread || "height" in __styleSpread || !canSplitStyleProperties();
+		if (_b.e === __s || __styleFull || _b.f) {
+			const __styleObject = __styleFull && !("width" in styleObjectPrototype || "height" in styleObjectPrototype) ? (__styleSpread["width"] = __styleValue, __styleSpread["height"] = __styleValue$, __styleSpread) : {
+				...__styleSpread,
+				"width": __styleValue,
+				"height": __styleValue$
+			};
+			setStyle(_b.a, __styleObject, _b.e === __s ? void 0 : _b.f ? _b.e : {
+				..._b.e,
+				"width": _b.g,
+				"height": _b.h
+			});
+			_b.e = __styleFull ? __styleObject : __styleSpread;
+		} else {
+			setStyle(_b.a, __styleSpread, _b.e);
+			if (_b.g !== __styleValue) setStyleProperty(_b.a, "width", __styleValue, "", _b.g);
+			if (_b.h !== __styleValue$) setStyleProperty(_b.a, "height", __styleValue$, "", _b.h);
+			_b.e = __styleSpread;
+		}
+		_b.f = __styleFull;
+		_b.g = __styleValue;
+		_b.h = __styleValue$;
+	}
+});
+//#endregion
+export { Skeleton };

package/dist/web/Slider.web.tsrx.js

@@ -0,0 +1,97 @@
+import { usePan } from "./pan.web.tsrx.js";
+import { applyWebProps } from "./platformProps.web.js";
+import { useMeasure } from "./useMeasure.web.tsrx.js";
+import { __s, bag13, clone, hookSlots, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, setStyleProperty, template, useRef, useState, withSlot } from "octane";
+import { bindSignalAttribute, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Slider.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div role=\"slider\"><div class=\"vx-slider-track\" aria-hidden=\"true\"></div><div class=\"vx-slider-fill\" aria-hidden=\"true\"></div><div class=\"vx-slider-thumb\" aria-hidden=\"true\"></div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _rm$0 = [
+	"r",
+	"i",
+	"b"
+];
+var Slider = /* @__PURE__ */ __s(function Slider(props, __s, __extra) {
+	const host = useRef(null, _hs$ + 0);
+	const measure = withSlot(_h$1, useMeasure);
+	const drag = useRef(null, _hs$ + 2);
+	const [dragValue, setDragValue] = useState(null, _hs$ + 3);
+	const min = props.minValue ?? 0;
+	const max = props.maxValue ?? 100;
+	const value = dragValue ?? props.value ?? min;
+	const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
+	const width = measure.bounds?.width ?? 0;
+	withSlot(_h$4, usePan, host, (e) => {
+		if (props.disabled) return;
+		if (e.state === "began") {
+			drag.current = { value0: value };
+			return;
+		}
+		if (!drag.current || !width) return;
+		if (e.state === "moved") {
+			const next = Math.min(max, Math.max(min, drag.current.value0 + e.dx / width * (max - min)));
+			setDragValue(next);
+			props.onValueChange?.(next);
+		} else {
+			drag.current = null;
+			setDragValue(null);
+		}
+	});
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m8, _m10, _m12;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		queueRefAttach(__s, _m8 = (el) => {
+			host.current = el;
+			measure.bind(el);
+			applyWebProps(el, props.web);
+		}, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.i, _b.b));
+		const _el0 = _root.firstChild.nextSibling;
+		_m10 = _el0;
+		_m12 = _el0.nextSibling;
+		_b = bag13(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, _m8, __s, _m10, __s, _m12);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (el) => {
+			host.current = el;
+			measure.bind(el);
+			applyWebProps(el, props.web);
+		};
+		if (_r !== _b.i) _b.i = replaceRef(__s, _b.i, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:eaceea6c", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "aria-valuemin", min, "b:cf2fbd7f", setAriaAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "aria-valuemax", max, "b:432fcc4b", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "aria-valuenow", value, "b:44fb3550", setAriaAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "aria-disabled", props.disabled ? true : void 0, "b:27dcd081", setAriaAttribute);
+	_b.g = updateFreshClassName(["vx-slider", props.className], _b.g, _b.b);
+	{
+		const _v = props.style;
+		if (_b.h !== _v) {
+			setStyle(_b.b, _v, _b.h);
+			_b.h = _v;
+		}
+	}
+	{
+		const _v = ratio * width;
+		if (_b.j !== _v) {
+			setStyleProperty(_b.k, "width", _v, "", _b.j);
+			_b.j = _v;
+		}
+	}
+	{
+		const _v = ratio * width;
+		if (_b.l !== _v) {
+			setStyleProperty(_b.m, "left", _v, "", _b.l);
+			_b.l = _v;
+		}
+	}
+});
+//#endregion
+export { Slider };

package/dist/web/{ui12.js → Spacer.web.tsrx.js}

@@ -1,4 +1,4 @@
-import { applyEscapeProps } from "./ui2.js";
+import { applyEscapeProps } from "./escape-props.web.js";
 import { __s, bag5, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
 import { bindSignalAttribute, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/Spacer.web.tsrx