ajo-ui 0.1.0

package/dist/checkbox-group.js

@@ -0,0 +1,70 @@
+import { flag, strings } from "./utils.js";
+import { Checkbox } from "./checkbox.js";
+import { selection, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/checkbox-group.tsx
+var CheckboxGroupContext = context(null);
+var CheckboxGroupRoot = function* ({ defaultValue }) {
+	let disabled = false;
+	let name;
+	let onValueChange;
+	const sel = selection(this, {
+		multiple: () => true,
+		fallback: strings(defaultValue),
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const checked = (value) => sel.has(value);
+	const change = (value, _checked, event) => {
+		if (disabled) return;
+		sel.toggle(value, event);
+	};
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		name = args.name;
+		onValueChange = args.onValueChange;
+		sel.sync(args.value != null ? strings(args.value) : void 0);
+		CheckboxGroupContext({
+			checked,
+			disabled,
+			name,
+			toggle: change
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled checkbox group cascading checked values, name, and disabled state to its items. */
+var CheckboxGroup = ({ children, defaultValue, disabled, name, onValueChange, role = "group", value, ...attrs }) => {
+	const disabledFlag = Boolean(disabled);
+	return /* @__PURE__ */ jsx(CheckboxGroupRoot, {
+		...statefulRootAttrs(attrs),
+		defaultValue,
+		disabled: disabledFlag,
+		name,
+		onValueChange,
+		value,
+		"attr:aria-disabled": flag(disabledFlag),
+		"attr:data-disabled": flag(disabledFlag),
+		"attr:data-slot": "checkbox-group",
+		"attr:role": role,
+		children
+	});
+};
+/** Unstyled native checkbox item wired to the nearest group. */
+var CheckboxGroupItem = ({ disabled, name, value, ...attrs }) => {
+	const group = CheckboxGroupContext();
+	const item = String(value);
+	const checked = group?.checked(item) ?? false;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		...attrs,
+		checked,
+		"data-slot": "checkbox-group-item",
+		disabled: disabled ?? group?.disabled,
+		name: name ?? group?.name,
+		"set:checked": checked,
+		value: item,
+		onCheckedChange: (next, event) => group?.toggle(item, next, event)
+	});
+};
+//#endregion
+export { CheckboxGroup, CheckboxGroupItem };

package/dist/checkbox.js

@@ -0,0 +1,77 @@
+import { ariaChecked, bool, flag, syncCheckedState } from "./utils.js";
+import { callHandler, callRef, dom } from "ajo-cloves";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/checkbox.tsx
+var stateFromAttrs = (attrs) => {
+	if (bool(attrs["set:indeterminate"])) return "indeterminate";
+	return bool(attrs["set:checked"] ?? attrs.checked ?? attrs.defaultChecked) ? "checked" : "unchecked";
+};
+var CheckboxRoot = function* () {
+	let input = null;
+	const sync = () => {
+		if (input) syncCheckedState(input, dom(this) ? this : null);
+	};
+	for (const { checkedIndicatorClass, inputAttrs, inputClass, indeterminateIndicatorClass, onCheckedChange } of this) {
+		const { class: _class, ref, "set:onchange": onChange, "set:oninput": onInput, type: _type, ...attrs } = inputAttrs;
+		const state = stateFromAttrs(inputAttrs);
+		if (dom(this)) this.dataset.state = state;
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...attrs,
+				"aria-checked": ariaChecked(state),
+				class: inputClass,
+				"data-slot": "checkbox-input",
+				"data-state": state,
+				ref: (element) => {
+					input = element;
+					callRef(ref, element);
+					if (element) queueMicrotask(sync);
+				},
+				"set:onchange": (event) => {
+					callHandler(onChange, event);
+					sync();
+					onCheckedChange?.(event.currentTarget.checked, event);
+				},
+				"set:oninput": (event) => {
+					callHandler(onInput, event);
+					sync();
+				},
+				type: "checkbox"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: checkedIndicatorClass,
+				"data-slot": "checkbox-indicator",
+				"data-state": "checked"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: indeterminateIndicatorClass,
+				"data-slot": "checkbox-indicator",
+				"data-state": "indeterminate"
+			})
+		] });
+	}
+};
+CheckboxRoot.is = "span";
+/** Unstyled native checkbox with state slots and form behavior. */
+var Checkbox = ({ checkedIndicatorClass, class: classes, disabled, inputClass, indeterminateIndicatorClass, onCheckedChange, ...attrs }) => {
+	const inputAttrs = {
+		...attrs,
+		disabled
+	};
+	const state = stateFromAttrs(inputAttrs);
+	return /* @__PURE__ */ jsx(CheckboxRoot, {
+		checkedIndicatorClass,
+		inputAttrs,
+		inputClass,
+		indeterminateIndicatorClass,
+		onCheckedChange,
+		"attr:class": classes,
+		"attr:data-disabled": flag(disabled),
+		"attr:data-slot": attrs["data-slot"] ?? "checkbox",
+		"attr:data-state": state
+	});
+};
+//#endregion
+export { Checkbox };

package/dist/chunks/bar-CVafh6C1.js

@@ -0,0 +1,99 @@
+import { controlled, dom, roving, typeahead } from "ajo-cloves";
+//#region packages/ajo-ui/src/bar.ts
+/**
+* The shared root machine for horizontal trigger bars (menubar,
+* navigation-menu): one controlled open value ('' = closed), roving over a
+* live trigger row with typeahead, and the open-follows-focus/hover policy.
+*
+* Movement (arrows, typeahead) only focuses the target trigger; the follow
+* policy runs exactly once through the trigger's own focus handler, so
+* controlled consumers see a single onValueChange per move.
+*/
+var bar = (host, opts) => {
+	const read = opts.value ?? ((trigger) => trigger.dataset.value ?? "");
+	const state = controlled(host, {
+		fallback: opts.initialValue ?? "",
+		onChange: opts.onValueChange
+	});
+	let focused = "";
+	const stop = () => {
+		if (!dom(host)) return "";
+		const row = opts.triggers();
+		if (!row.length) return "";
+		return focused && row.some((trigger) => read(trigger) === focused) ? focused : read(row[0]);
+	};
+	const setValue = (next, event) => {
+		if (next && opts.disabled?.()) return;
+		if (next === state.value) return;
+		if (next) focused = next;
+		state.set(next, event);
+	};
+	let following = false;
+	const follow = (next, event) => {
+		if (following) return;
+		if (!state.value || !next || next === state.value) return;
+		following = true;
+		try {
+			if (dom(host)) {
+				const row = opts.triggers();
+				const target = row.find((trigger) => read(trigger) === next);
+				const active = document.activeElement;
+				if (target && active && active !== target && host.contains(active) && !row.includes(active)) target.focus();
+			}
+			setValue(next, event);
+		} finally {
+			following = false;
+		}
+	};
+	const nav = roving(host, {
+		items: opts.triggers,
+		orientation: () => "horizontal",
+		loop: () => opts.loop?.() ?? true,
+		onMove: (target) => target.focus()
+	});
+	const ta = typeahead(host, {
+		items: opts.triggers,
+		onMatch: (target, event) => {
+			event.preventDefault();
+			target.focus();
+		}
+	});
+	return {
+		get value() {
+			return state.value;
+		},
+		get focused() {
+			return focused;
+		},
+		sync: (value) => state.sync(value),
+		setValue,
+		close: (event) => setValue("", event),
+		follow,
+		focus(next, event) {
+			if (state.value && next && next !== state.value) follow(next, event);
+			else if (focused !== next) {
+				focused = next;
+				host.next();
+			}
+		},
+		adopt(next) {
+			focused = next;
+		},
+		isTabbable(value) {
+			const current = stop();
+			return !current || current === value;
+		},
+		handle(event) {
+			if (nav.handle(event)) return true;
+			if (event.key === "Escape") {
+				if (!state.value) return false;
+				event.preventDefault();
+				setValue("", event);
+				return true;
+			}
+			return ta.handle(event);
+		}
+	};
+};
+//#endregion
+export { bar as t };