ajo-ui 0.1.0

package/dist/sidebar.js

@@ -0,0 +1,343 @@
+import { Drawer, DrawerContent } from "./drawer.js";
+import { browser, callHandler, controlled, dom, hotkey, media, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/sidebar.tsx
+/** Responsive state and controls provided by the nearest SidebarProvider. */
+var SidebarContext = context(null);
+var cookie = "sidebar_state";
+var cookieMaxAge = 3600 * 24 * 7;
+var defaultMobileQuery = "(max-width: 767px)";
+var defaultShortcut = "mod+b";
+var vars = (style) => [
+	"--sidebar-width:16rem",
+	"--sidebar-width-mobile:18rem",
+	"--sidebar-width-icon:3rem",
+	style
+].filter(Boolean).join(";");
+var writeCookie = (open) => {
+	if (!browser()) return;
+	document.cookie = `${cookie}=${open}; path=/; max-age=${cookieMaxAge}`;
+};
+var sidebar = () => {
+	const value = SidebarContext();
+	if (!value) throw new Error("Sidebar controls must be used within a <SidebarProvider />.");
+	return value;
+};
+var SidebarProviderRoot = function* ({ defaultOpen = true, open }) {
+	let mobileQuery = defaultMobileQuery;
+	let onOpenChange;
+	let persist;
+	let shortcut = defaultShortcut;
+	const mobile = media(this, { query: () => mobileQuery });
+	const state = controlled(this, {
+		fallback: Boolean(open ?? defaultOpen),
+		onChange: (next, event) => {
+			onOpenChange?.(next, event);
+			if (persist !== false) (persist ?? writeCookie)(next);
+		}
+	});
+	const mobileState = controlled(this, {
+		fallback: false,
+		onChange: (next, event) => onOpenChange?.(next, event)
+	});
+	const setOpen = (next, event) => state.set(next, event);
+	const setOpenMobile = (next, event) => mobileState.set(next, event);
+	const toggleSidebar = (event) => mobile.matches ? setOpenMobile(!mobileState.value, event) : setOpen(!state.value, event);
+	hotkey(this, {
+		keys: () => shortcut || "",
+		active: () => shortcut !== false,
+		onPress: (event) => toggleSidebar(event)
+	});
+	for (const args of this) {
+		mobileQuery = args.mobileQuery ?? defaultMobileQuery;
+		onOpenChange = args.onOpenChange;
+		persist = args.persist;
+		shortcut = args.shortcut ?? defaultShortcut;
+		mobile.sync();
+		if (dom(this)) this.setAttribute("data-mobile", String(mobile.matches));
+		if (!mobile.matches && mobileState.value) queueMicrotask(() => {
+			if (!this.signal.aborted && !mobile.matches && mobileState.value) mobileState.set(false);
+		});
+		const opened = state.sync(args.open != null ? Boolean(args.open) : void 0);
+		SidebarContext({
+			isMobile: mobile.matches,
+			open: opened,
+			openMobile: mobileState.value,
+			setOpen,
+			setOpenMobile,
+			state: opened ? "expanded" : "collapsed",
+			toggleSidebar
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled state provider for the sidebar component family. */
+var SidebarProvider = ({ children, class: classes, defaultOpen, mobileQuery, onOpenChange, open, persist, shortcut, style, ...attrs }) => /* @__PURE__ */ jsx(SidebarProviderRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	mobileQuery,
+	onOpenChange,
+	open,
+	persist,
+	shortcut,
+	"attr:class": classes,
+	"attr:data-slot": "sidebar-wrapper",
+	"attr:style": vars(style),
+	children
+});
+/** Unstyled main sidebar panel. */
+var Sidebar = ({ children, class: classes, collapsible = "offcanvas", mobileClass, mobileContentClass, side = "left", variant = "sidebar", ...attrs }) => {
+	const ctx = SidebarContext();
+	const state = collapsible === "none" ? "expanded" : ctx?.state ?? "expanded";
+	const collapsed = state === "collapsed" ? collapsible : "";
+	if (ctx?.isMobile && collapsible !== "none") return /* @__PURE__ */ jsx(Drawer, {
+		onOpenChange: (next, event) => ctx.setOpenMobile(next, event),
+		open: ctx.openMobile,
+		side,
+		style: "position:fixed",
+		children: /* @__PURE__ */ jsx(DrawerContent, {
+			...attrs,
+			"aria-label": attrs["aria-label"] ?? "Sidebar",
+			class: mobileClass ?? classes,
+			"data-mobile": "true",
+			"data-variant": variant,
+			showCloseButton: false,
+			ref: (element) => element?.setAttribute("data-slot", "sidebar"),
+			children: /* @__PURE__ */ jsx("div", {
+				class: mobileContentClass,
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("aside", {
+		...attrs,
+		"aria-label": attrs["aria-label"] ?? "Sidebar",
+		class: classes,
+		"data-collapsible": collapsed || void 0,
+		"data-side": side,
+		"data-slot": "sidebar",
+		"data-state": state,
+		"data-variant": variant,
+		children
+	});
+};
+/** Toggles the nearest SidebarProvider unless a caller-supplied click handler prevented default. */
+var toggleClick = (ctx, onClick) => (event) => {
+	callHandler(onClick, event);
+	if (!event.defaultPrevented) ctx.toggleSidebar(event);
+};
+/** Unstyled button that toggles the current SidebarProvider. */
+var SidebarTrigger = ({ "aria-label": label = "Toggle Sidebar", children, class: classes, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = sidebar();
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": label,
+		class: classes,
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		type,
+		"set:onclick": toggleClick(ctx, onClick),
+		children
+	});
+};
+/** Unstyled rail hit area used to collapse or expand a sidebar. */
+var SidebarRail = ({ "aria-label": label = "Toggle Sidebar", class: classes, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = sidebar();
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": label,
+		class: classes,
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		tabindex: "-1",
+		title: label,
+		type,
+		"set:onclick": toggleClick(ctx, onClick)
+	});
+};
+/** Unstyled main content wrapper used with inset sidebars. */
+var SidebarInset = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("main", {
+	...attrs,
+	class: classes,
+	"data-slot": "sidebar-inset",
+	children
+});
+/** Unstyled input carrying the sidebar slot and data markers. */
+var SidebarInput = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx("input", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "input",
+	"data-slot": "sidebar-input"
+});
+/** Unstyled container for content at the top of a sidebar. */
+var SidebarHeader = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "header",
+	"data-slot": "sidebar-header",
+	children
+});
+/** Unstyled container for content at the bottom of a sidebar. */
+var SidebarFooter = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "footer",
+	"data-slot": "sidebar-footer",
+	children
+});
+/** Unstyled decorative separator between sidebar sections. */
+var SidebarSeparator = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"aria-hidden": "true",
+	class: classes,
+	"data-sidebar": "separator",
+	"data-slot": "sidebar-separator",
+	role: "none"
+});
+/** Unstyled container for the sidebar's primary content. */
+var SidebarContent = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "content",
+	"data-slot": "sidebar-content",
+	children
+});
+/** Unstyled wrapper for a related group of sidebar controls. */
+var SidebarGroup = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "group",
+	"data-slot": "sidebar-group",
+	children
+});
+/** Unstyled label for a sidebar group. */
+var SidebarGroupLabel = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "group-label",
+	"data-slot": "sidebar-group-label",
+	children
+});
+/** Unstyled action button associated with a sidebar group. */
+var SidebarGroupAction = ({ children, class: classes, type = "button", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "group-action",
+	"data-slot": "sidebar-group-action",
+	type,
+	children
+});
+/** Unstyled content container inside a sidebar group. */
+var SidebarGroupContent = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "group-content",
+	"data-slot": "sidebar-group-content",
+	children
+});
+/** Unstyled list for primary sidebar navigation items. */
+var SidebarMenu = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("ul", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu",
+	"data-slot": "sidebar-menu",
+	children
+});
+/** Unstyled item in the primary sidebar menu. */
+var SidebarMenuItem = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("li", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-item",
+	"data-slot": "sidebar-menu-item",
+	children
+});
+/** Unstyled primary sidebar menu control rendered as a button or anchor. */
+var SidebarMenuButton = ({ as = "button", children, class: classes, isActive, size = "default", tooltip, ...attrs }) => {
+	const ctx = SidebarContext();
+	const title = tooltip && ctx?.state === "collapsed" ? tooltip : attrs.title;
+	if (as === "a") return /* @__PURE__ */ jsx("a", {
+		...attrs,
+		"aria-current": isActive ? "page" : void 0,
+		class: classes,
+		"data-active": isActive ? "true" : void 0,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-button",
+		title,
+		children
+	});
+	const { type = "button", ...button } = attrs;
+	return /* @__PURE__ */ jsx("button", {
+		...button,
+		class: classes,
+		"data-active": isActive ? "true" : void 0,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-button",
+		title,
+		type,
+		children
+	});
+};
+/** Unstyled secondary action attached to a sidebar menu item. */
+var SidebarMenuAction = ({ children, class: classes, type = "button", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-action",
+	"data-slot": "sidebar-menu-action",
+	type,
+	children
+});
+/** Unstyled metadata badge displayed beside a sidebar menu item. */
+var SidebarMenuBadge = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-badge",
+	"data-slot": "sidebar-menu-badge",
+	children
+});
+/** Unstyled loading placeholder for a sidebar menu item. */
+var SidebarMenuSkeleton = ({ class: classes, iconClass, showIcon, textClass, width = "70%", ...attrs }) => /* @__PURE__ */ jsxs("div", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-skeleton",
+	"data-slot": "sidebar-menu-skeleton",
+	children: [showIcon ? /* @__PURE__ */ jsx("div", {
+		class: iconClass,
+		"data-sidebar": "menu-skeleton-icon"
+	}) : null, /* @__PURE__ */ jsx("div", {
+		class: textClass,
+		"data-sidebar": "menu-skeleton-text",
+		style: `max-width:${width}`
+	})]
+});
+/** Unstyled nested list within the sidebar menu. */
+var SidebarMenuSub = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("ul", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-sub",
+	"data-slot": "sidebar-menu-sub",
+	children
+});
+/** Unstyled item in a nested sidebar menu. */
+var SidebarMenuSubItem = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("li", {
+	...attrs,
+	class: classes,
+	"data-sidebar": "menu-sub-item",
+	"data-slot": "sidebar-menu-sub-item",
+	children
+});
+/** Unstyled anchor for a nested sidebar menu item. */
+var SidebarMenuSubButton = ({ children, class: classes, isActive, size = "md", ...attrs }) => /* @__PURE__ */ jsx("a", {
+	...attrs,
+	"aria-current": isActive ? "page" : void 0,
+	class: classes,
+	"data-active": isActive ? "true" : void 0,
+	"data-sidebar": "menu-sub-button",
+	"data-size": size,
+	"data-slot": "sidebar-menu-sub-button",
+	children
+});
+//#endregion
+export { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger };

package/dist/slider.js

@@ -0,0 +1,259 @@
+import { clx, flag, stlx, toNumber } from "./utils.js";
+import { FieldContext } from "./field.js";
+import { callHandler, clamp, controlled, listen, move } from "ajo-cloves";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/slider.tsx
+var sliderStep = (value) => value === "any" ? "any" : toNumber(value ?? 1, 1);
+var sliderOrientation = (value) => value === "vertical" ? "vertical" : "horizontal";
+var valueCallback = (value) => typeof value === "function" ? value : void 0;
+var percent = (value, min, max, inverted) => {
+	if (max <= min) return 0;
+	const raw = clamp((value - min) / (max - min) * 100, 0, 100);
+	return inverted ? 100 - raw : raw;
+};
+var precision = (value) => {
+	const match = String(value).match(/\.(\d+)/);
+	return match ? match[1].length : 0;
+};
+var snap = (value, min, step) => {
+	if (step === "any" || step == null) return value;
+	const amount = Number(step);
+	if (!Number.isFinite(amount) || amount <= 0) return value;
+	const places = Math.max(precision(min), precision(amount));
+	const next = min + Math.round((value - min) / amount) * amount;
+	return Number(next.toFixed(places + 2));
+};
+var valuesFrom = (value, min, max, step, minStepsBetweenThumbs = 0) => {
+	const raw = Array.isArray(value) && value.length ? value.map((item) => toNumber(item, min)) : [min];
+	const gapStep = step === "any" ? 0 : toNumber(step ?? 1, 1);
+	const gap = Math.max(0, minStepsBetweenThumbs) * Math.max(0, gapStep);
+	const next = raw.map((item) => snap(clamp(item, min, max), min, step)).sort((a, b) => a - b);
+	for (let index = 0; index < next.length; index++) {
+		const lower = index > 0 ? next[index - 1] + gap : min;
+		next[index] = clamp(next[index], lower, max);
+	}
+	for (let index = next.length - 1; index >= 0; index--) {
+		const upper = index < next.length - 1 ? next[index + 1] - gap : max;
+		next[index] = clamp(next[index], min, upper);
+	}
+	return next;
+};
+var sameValues = (first, second) => first.length === second.length && first.every((value, index) => value === second[index]);
+var replaceValue = (runtime, index, value) => {
+	const next = [...runtime.values];
+	const gapStep = runtime.step === "any" ? 0 : toNumber(runtime.step ?? 1, 1);
+	const gap = Math.max(0, runtime.minStepsBetweenThumbs) * Math.max(0, gapStep);
+	next[index] = snap(clamp(value, index > 0 ? next[index - 1] + gap : runtime.min, index < next.length - 1 ? next[index + 1] - gap : runtime.max), runtime.min, runtime.step);
+	return next;
+};
+var closestThumb = (runtime, value) => {
+	let nearest = 0;
+	let distance = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < runtime.values.length; index++) {
+		const next = Math.abs(runtime.values[index] - value);
+		if (next < distance) {
+			nearest = index;
+			distance = next;
+		}
+	}
+	return nearest;
+};
+var pointerValue = (element, runtime, event) => {
+	const rect = element.getBoundingClientRect();
+	const distance = runtime.orientation === "vertical" ? rect.bottom - event.clientY : event.clientX - rect.left;
+	const size = runtime.orientation === "vertical" ? rect.height : rect.width;
+	const raw = size > 0 ? clamp(distance / size, 0, 1) : 0;
+	const ratio = runtime.inverted ? 1 - raw : raw;
+	return runtime.min + ratio * (runtime.max - runtime.min);
+};
+var rangeStyle = (orientation, start, end) => orientation === "vertical" ? stlx({
+	bottom: `${start}%`,
+	height: `${Math.max(0, end - start)}%`
+}) : stlx({
+	left: `${start}%`,
+	width: `${Math.max(0, end - start)}%`
+});
+var thumbStyle = (orientation, position) => orientation === "vertical" ? stlx({
+	bottom: `${position}%`,
+	left: "50%",
+	transform: "translate(-50%, 50%)"
+}) : stlx({
+	left: `${position}%`,
+	top: "50%",
+	transform: "translate(-50%, -50%)"
+});
+var inputId = (id, index, total) => {
+	if (id == null) return void 0;
+	const value = String(id);
+	return total === 1 ? value : `${value}-${index + 1}`;
+};
+var inputLabel = (label, index, total) => {
+	if (label == null) return total === 1 ? "Slider" : `Slider thumb ${index + 1}`;
+	const value = String(label);
+	return total === 1 ? value : `${value} ${index + 1}`;
+};
+var SliderRoot = function* ({ defaultValue, max = 100, min = 0, step = 1, value }) {
+	const initialMin = toNumber(min, 0);
+	const initialMax = toNumber(max, 100);
+	const initialStep = sliderStep(step);
+	const initial = valuesFrom(value ?? defaultValue, initialMin, initialMax, initialStep, 0);
+	let runtime = {
+		disabled: false,
+		inputs: [],
+		inverted: false,
+		max: initialMax,
+		min: initialMin,
+		minStepsBetweenThumbs: 0,
+		orientation: "horizontal",
+		step: initialStep,
+		values: initial
+	};
+	const state = controlled(this, {
+		fallback: initial,
+		onChange: (next, event) => runtime.onValueChange?.(next, event)
+	});
+	const commit = (event) => runtime.onValueCommit?.(runtime.values, event);
+	const update = (index, raw, event) => {
+		const next = replaceValue(runtime, index, raw);
+		if (sameValues(next, runtime.values)) return;
+		runtime.values = next;
+		state.set(next, event);
+	};
+	let dragIndex = 0;
+	const drag = move(this, {
+		onMove: (_data, event) => update(dragIndex, pointerValue(this, runtime, event), event),
+		onEnd: (_data, event) => commit(event)
+	});
+	listen(this, "pointerdown", (event) => {
+		if (runtime.disabled || event.button !== 0) return;
+		const raw = pointerValue(this, runtime, event);
+		const index = closestThumb(runtime, raw);
+		dragIndex = index;
+		runtime.inputs[index]?.focus();
+		update(index, raw, event);
+		event.preventDefault();
+		drag.start(event);
+	});
+	for (const { disabled, inputAttrs, inputClass, inputOnChange, inputOnInput, inverted, max = 100, min = 0, minStepsBetweenThumbs = 0, onValueChange, onValueCommit, orientation = "horizontal", rangeClass, step = 1, thumbClass, trackClass, value, verticalInputClass } of this) {
+		const minValue = toNumber(min, 0);
+		const maxValue = toNumber(max, 100);
+		const stepValue = sliderStep(step);
+		const gapValue = toNumber(minStepsBetweenThumbs, 0);
+		const orientationValue = sliderOrientation(orientation);
+		const raw = state.sync(value != null ? value : void 0);
+		const values = valuesFrom(raw, minValue, maxValue, stepValue, gapValue);
+		if (!state.controlled && !sameValues(values, raw)) state.init(values);
+		runtime = {
+			disabled: Boolean(disabled),
+			inputs: runtime.inputs,
+			inverted: Boolean(inverted),
+			max: maxValue,
+			min: minValue,
+			minStepsBetweenThumbs: gapValue,
+			onValueChange: valueCallback(onValueChange),
+			onValueCommit: valueCallback(onValueCommit),
+			orientation: orientationValue,
+			step: stepValue,
+			values
+		};
+		runtime.inputs.length = values.length;
+		const positions = values.map((item) => percent(item, minValue, maxValue, runtime.inverted));
+		const start = values.length > 1 ? Math.min(...positions) : 0;
+		const end = values.length > 1 ? Math.max(...positions) : positions[0] ?? 0;
+		const disabledFlag = disabled ? true : void 0;
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				class: trackClass,
+				"data-orientation": orientationValue,
+				"data-slot": "slider-track",
+				children: /* @__PURE__ */ jsx("span", {
+					class: rangeClass,
+					"data-orientation": orientationValue,
+					"data-slot": "slider-range",
+					style: rangeStyle(orientationValue, start, end)
+				})
+			}),
+			values.map((item, index) => {
+				const handleInput = (event) => {
+					callHandler(inputOnInput, event);
+					update(index, event.currentTarget.valueAsNumber, event);
+				};
+				const handleChange = (event) => {
+					callHandler(inputOnChange, event);
+					commit(event);
+				};
+				return /* @__PURE__ */ jsx("input", {
+					...inputAttrs,
+					"aria-label": inputLabel(inputAttrs["aria-label"], index, values.length),
+					"aria-orientation": orientationValue,
+					class: clx(inputClass, orientationValue === "vertical" && verticalInputClass),
+					"data-orientation": orientationValue,
+					"data-slot": "slider-input",
+					disabled: disabledFlag,
+					id: inputId(inputAttrs.id, index, values.length),
+					max: maxValue,
+					min: minValue,
+					ref: (element) => runtime.inputs[index] = element,
+					"set:onchange": handleChange,
+					"set:oninput": handleInput,
+					"set:value": String(item),
+					step: stepValue,
+					type: "range",
+					value: item
+				}, `slider-input-${index}`);
+			}),
+			positions.map((item, index) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: thumbClass,
+				"data-index": index,
+				"data-orientation": orientationValue,
+				"data-slot": "slider-thumb",
+				style: thumbStyle(orientationValue, item)
+			}, `slider-thumb-${index}`))
+		] });
+	}
+};
+SliderRoot.is = "span";
+/** Unstyled range slider with native range inputs and pointer behavior. */
+var Slider = ({ class: classes, defaultValue, disabled, inputClass, inverted, max = 100, min = 0, minStepsBetweenThumbs, onValueChange, onValueCommit, orientation = "horizontal", rangeClass, "set:onchange": inputOnChange, "set:oninput": inputOnInput, step = 1, thumbClass, trackClass, type: _type, value, verticalInputClass, ...inputAttrs }) => {
+	const disabledFlag = disabled ? true : void 0;
+	const preview = valuesFrom(value ?? defaultValue, toNumber(min, 0), toNumber(max, 100), sliderStep(step), toNumber(minStepsBetweenThumbs, 0));
+	const field = FieldContext();
+	const groupAttrs = field && preview.length > 1 ? field.groupAttrs : void 0;
+	const controlAttrs = field && preview.length === 1 ? field.controlAttrs : void 0;
+	return /* @__PURE__ */ jsx(SliderRoot, {
+		defaultValue,
+		disabled: disabledFlag,
+		inputAttrs: controlAttrs ? {
+			...controlAttrs,
+			...inputAttrs
+		} : inputAttrs,
+		inputClass,
+		inputOnChange,
+		inputOnInput,
+		inverted,
+		max,
+		min,
+		minStepsBetweenThumbs,
+		onValueChange,
+		onValueCommit,
+		orientation,
+		rangeClass,
+		step,
+		thumbClass,
+		trackClass,
+		value,
+		verticalInputClass,
+		"attr:aria-describedby": groupAttrs?.["aria-describedby"],
+		"attr:aria-labelledby": groupAttrs?.["aria-labelledby"],
+		"attr:aria-disabled": flag(disabled),
+		"attr:class": classes,
+		"attr:data-disabled": flag(disabled),
+		"attr:data-inverted": flag(inverted),
+		"attr:data-orientation": orientation,
+		"attr:data-slot": "slider",
+		"attr:role": groupAttrs ? "group" : void 0
+	});
+};
+//#endregion
+export { Slider };

package/dist/switch.js

@@ -0,0 +1,53 @@
+import { callHandler, controlled } from "ajo-cloves";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/switch.tsx
+var SwitchRoot = function* ({ checked, defaultChecked, setChecked }) {
+	let onCheckedChange;
+	const state = controlled(this, {
+		fallback: Boolean(checked ?? defaultChecked ?? setChecked),
+		onChange: (next, event) => onCheckedChange?.(next, event)
+	});
+	for (const args of this) {
+		const initialChecked = args.checked ?? args.defaultChecked;
+		onCheckedChange = args.onCheckedChange;
+		state.sync(args.checked != null ? Boolean(args.checked) : void 0);
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			...args.inputAttrs,
+			checked: initialChecked,
+			class: args.inputClass,
+			"data-slot": "switch-input",
+			role: args.role,
+			"set:checked": state.value,
+			"set:onchange": (event) => {
+				callHandler(args.setOnChange, event);
+				state.set(event.currentTarget.checked, event);
+			},
+			type: "checkbox",
+			value: args.value
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: args.thumbClass,
+			"data-slot": "switch-thumb"
+		})] });
+	}
+};
+SwitchRoot.is = "span";
+/** Unstyled native switch control with form behavior. */
+var Switch = ({ checked, class: classes, defaultChecked, inputClass, onCheckedChange, role = "switch", size, thumbClass, "set:checked": setChecked, "set:onchange": setOnChange, type: _type, value = "on", ...attrs }) => /* @__PURE__ */ jsx(SwitchRoot, {
+	checked,
+	defaultChecked,
+	inputAttrs: attrs,
+	inputClass,
+	onCheckedChange,
+	role,
+	setChecked,
+	setOnChange,
+	size,
+	thumbClass,
+	value,
+	"attr:class": classes,
+	"attr:data-size": size,
+	"attr:data-slot": "switch"
+});
+//#endregion
+export { Switch };