ajo-ui 0.1.0

package/dist/radio-group.js

@@ -0,0 +1,107 @@
+import { ariaChecked, bool, flag, syncCheckedState } from "./utils.js";
+import { callHandler, callRef, dom, listen, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/radio-group.tsx
+var RadioGroupContext = context(null);
+var syncRadioInput = (input) => syncCheckedState(input, input.closest("[data-slot=\"radio-group-item\"]"));
+var syncRadioGroup = (root) => {
+	for (const input of root.querySelectorAll("input[data-slot=\"radio-group-input\"]")) syncRadioInput(input);
+};
+var itemState = (active, attrs) => bool(active ?? attrs["set:checked"] ?? attrs.checked ?? attrs.defaultChecked) ? "checked" : "unchecked";
+var change = (value, previous, onValueChange) => (event) => {
+	callHandler(previous, event);
+	const input = event.currentTarget;
+	if (input.checked && value != null) onValueChange?.(value, event);
+	queueMicrotask(() => {
+		const root = input.closest("[data-slot=\"radio-group\"]");
+		if (root) syncRadioGroup(root);
+		else syncRadioInput(input);
+	});
+};
+var RadioGroupRoot = function* () {
+	listen(this, "change", () => {
+		queueMicrotask(() => syncRadioGroup(this));
+	});
+	for (const { children, defaultValue, disabled, name, onValueChange, required, value } of this) {
+		RadioGroupContext({
+			defaultValue,
+			disabled,
+			name,
+			onValueChange,
+			required,
+			value
+		});
+		if (dom(this)) queueMicrotask(() => syncRadioGroup(this));
+		yield /* @__PURE__ */ jsx(Fragment, { children });
+	}
+};
+RadioGroupRoot.is = "fieldset";
+/** Unstyled radio group with native fieldset semantics. */
+var RadioGroup = ({ children, defaultValue, disabled, name, onValueChange, orientation = "vertical", required, value, ...attrs }) => {
+	const disabledFlag = disabled ? true : void 0;
+	const requiredFlag = required ? true : void 0;
+	return /* @__PURE__ */ jsx(RadioGroupRoot, {
+		...statefulRootAttrs(attrs),
+		defaultValue,
+		disabled: disabledFlag,
+		name,
+		onValueChange,
+		required: requiredFlag,
+		value,
+		"attr:aria-orientation": orientation,
+		"attr:data-disabled": flag(disabled),
+		"attr:data-orientation": orientation,
+		"attr:data-slot": "radio-group",
+		"attr:disabled": disabledFlag,
+		children
+	});
+};
+/** Unstyled native radio item with indicator slot. */
+var RadioGroupItem = ({ checked, class: classes, disabled, indicatorClass, inputClass, name, ref, required, "set:checked": setChecked, "set:onchange": setOnChange, type: _type, value, ...attrs }) => {
+	const group = RadioGroupContext();
+	const itemValue = value == null ? void 0 : String(value);
+	const ownChecked = checked == null ? void 0 : Boolean(checked);
+	const groupChecked = group?.value != null ? itemValue === group.value : group?.defaultValue != null ? itemValue === group.defaultValue : void 0;
+	const active = ownChecked ?? groupChecked;
+	const syncChecked = active ?? setChecked;
+	const state = itemState(active, {
+		...attrs,
+		checked,
+		defaultChecked: attrs.defaultChecked,
+		"set:checked": setChecked
+	});
+	const disabledValue = disabled ?? group?.disabled;
+	return /* @__PURE__ */ jsxs("span", {
+		class: classes,
+		"data-disabled": flag(disabledValue),
+		"data-slot": "radio-group-item",
+		"data-state": state,
+		children: [/* @__PURE__ */ jsx("input", {
+			...attrs,
+			"aria-checked": ariaChecked(state),
+			checked: active,
+			class: inputClass,
+			"data-slot": "radio-group-input",
+			"data-state": state,
+			disabled: disabledValue,
+			name: name ?? group?.name,
+			ref: (element) => {
+				callRef(ref, element);
+				if (element) queueMicrotask(() => syncRadioInput(element));
+			},
+			required: required ?? group?.required,
+			"set:checked": syncChecked,
+			"set:onchange": change(itemValue, setOnChange, group?.onValueChange),
+			type: "radio",
+			value
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: indicatorClass,
+			"data-slot": "radio-group-indicator",
+			"data-state": state
+		})]
+	});
+};
+//#endregion
+export { RadioGroup, RadioGroupItem };

package/dist/resizable.js

@@ -0,0 +1,172 @@
+import { stlx } from "./utils.js";
+import { clamp, listen, move, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/resizable.tsx
+/** Layout direction shared by a ResizablePanelGroup with its parts. */
+var ResizableContext = context({ orientation: "horizontal" });
+var percent = (size, fallback) => {
+	if (typeof size === "number" && Number.isFinite(size)) return size;
+	if (typeof size === "string") {
+		const parsed = Number.parseFloat(size);
+		if (Number.isFinite(parsed)) return parsed;
+	}
+	return fallback;
+};
+var limit = (panel, name, fallback) => percent(panel.dataset[name], fallback);
+var style = (orientation, defaultSize, minSize, maxSize, styles) => {
+	const basis = percent(defaultSize, 0);
+	return stlx(typeof styles === "string" ? styles : void 0, { flex: defaultSize == null ? "1 1 0" : `0 0 ${basis}%` }, minSize == null ? void 0 : { [orientation === "horizontal" ? "minWidth" : "minHeight"]: `${percent(minSize, 0)}%` }, maxSize == null ? void 0 : { [orientation === "horizontal" ? "maxWidth" : "maxHeight"]: `${percent(maxSize, 100)}%` });
+};
+var mainSize = (element, orientation) => {
+	const box = element.getBoundingClientRect();
+	return orientation === "horizontal" ? box.width : box.height;
+};
+var previousPanel = (handle) => {
+	let node = handle.previousElementSibling;
+	while (node && !(node instanceof HTMLElement && node.matches("[data-slot=\"resizable-panel\"]"))) node = node.previousElementSibling;
+	return node instanceof HTMLElement ? node : null;
+};
+var nextPanel = (handle) => {
+	let node = handle.nextElementSibling;
+	while (node && !(node instanceof HTMLElement && node.matches("[data-slot=\"resizable-panel\"]"))) node = node.nextElementSibling;
+	return node instanceof HTMLElement ? node : null;
+};
+var owningGroup = (handle) => handle.closest("[data-slot=\"resizable-panel-group\"]");
+var setPanelSize = (panel, px, groupSize) => {
+	const pct = groupSize > 0 ? px / groupSize * 100 : 0;
+	panel.dataset.size = String(pct);
+	panel.style.flex = `0 0 ${px}px`;
+	panel.dispatchEvent(new CustomEvent("resize", { detail: { size: pct } }));
+};
+var setHandleValue = (session, prev) => {
+	const pct = session.groupSize > 0 ? prev / session.groupSize * 100 : 0;
+	session.handle.setAttribute("aria-valuenow", String(Math.round(clamp(pct, 0, 100))));
+};
+var applyResize = (session, delta) => {
+	const min = Math.max(session.prevMin, session.total - session.nextMax);
+	const max = Math.min(session.prevMax, session.total - session.nextMin);
+	const prev = clamp(session.prevStart + delta, min, Math.max(min, max));
+	const next = session.total - prev;
+	setPanelSize(session.prev, prev, session.groupSize);
+	setPanelSize(session.next, next, session.groupSize);
+	setHandleValue(session, prev);
+};
+var session = (group, handle, orientation) => {
+	const prev = previousPanel(handle);
+	const next = nextPanel(handle);
+	const groupSize = mainSize(group, orientation);
+	if (!prev || !next || groupSize <= 0) return null;
+	const prevStart = mainSize(prev, orientation);
+	const total = prevStart + mainSize(next, orientation);
+	const active = {
+		groupSize,
+		handle,
+		next,
+		nextMax: groupSize * limit(next, "maxSize", 100) / 100,
+		nextMin: groupSize * limit(next, "minSize", 0) / 100,
+		prev,
+		prevMax: groupSize * limit(prev, "maxSize", 100) / 100,
+		prevMin: groupSize * limit(prev, "minSize", 0) / 100,
+		prevStart,
+		total
+	};
+	setHandleValue(active, prevStart);
+	return active;
+};
+var ResizablePanelGroupRoot = function* () {
+	let orientation = "horizontal";
+	let active = null;
+	let cursor = "";
+	let select = "";
+	const restore = () => {
+		if (!active) return;
+		document.body.style.cursor = cursor;
+		document.body.style.userSelect = select;
+		active = null;
+	};
+	this.signal.addEventListener("abort", restore, { once: true });
+	const drag = move(this, {
+		onMove: (data) => {
+			if (active) applyResize(active, orientation === "horizontal" ? data.dx : data.dy);
+		},
+		onEnd: () => restore()
+	});
+	const startPointer = (event) => {
+		if (active || event.button !== 0) return;
+		const handle = event.target?.closest("[data-slot=\"resizable-handle\"]");
+		if (!handle || owningGroup(handle) !== this || handle.getAttribute("aria-disabled") === "true") return;
+		const next = session(this, handle, orientation);
+		if (!next) return;
+		event.preventDefault();
+		event.stopPropagation();
+		cursor = document.body.style.cursor;
+		select = document.body.style.userSelect;
+		document.body.style.cursor = orientation === "horizontal" ? "col-resize" : "row-resize";
+		document.body.style.userSelect = "none";
+		active = next;
+		if (!drag.start(event)) restore();
+	};
+	const keyResize = (event) => {
+		const handle = event.target?.closest("[data-slot=\"resizable-handle\"]");
+		if (!handle || owningGroup(handle) !== this || handle.getAttribute("aria-disabled") === "true") return;
+		const step = event.shiftKey ? 50 : 10;
+		const delta = orientation === "horizontal" ? event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0 : event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+		if (!delta) return;
+		const active = session(this, handle, orientation);
+		if (!active) return;
+		event.preventDefault();
+		applyResize(active, delta);
+	};
+	listen(this, "pointerdown", startPointer);
+	listen(this, "keydown", keyResize);
+	for (const args of this) {
+		orientation = args.orientation ?? "horizontal";
+		ResizableContext({ orientation });
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled resizable panel group for split layouts. */
+var ResizablePanelGroup = ({ children, orientation = "horizontal", ...attrs }) => /* @__PURE__ */ jsx(ResizablePanelGroupRoot, {
+	...statefulRootAttrs(attrs),
+	orientation,
+	"attr:aria-orientation": orientation,
+	"attr:data-orientation": orientation,
+	"attr:data-panel-group-direction": orientation,
+	"attr:data-slot": "resizable-panel-group",
+	children
+});
+/** Unstyled resizable flex panel. */
+var ResizablePanel = ({ children, defaultSize, maxSize, minSize, style: styles, ...attrs }) => {
+	const { orientation } = ResizableContext();
+	const initial = percent(defaultSize, 0);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"data-max-size": maxSize == null ? void 0 : percent(maxSize, 100),
+		"data-min-size": minSize == null ? void 0 : percent(minSize, 0),
+		"data-size": defaultSize == null ? void 0 : initial,
+		"data-slot": "resizable-panel",
+		style: style(orientation, defaultSize, minSize, maxSize, styles),
+		children
+	});
+};
+/** Unstyled resize separator between adjacent panels. */
+var ResizableHandle = ({ children, disabled, ...attrs }) => {
+	const { orientation } = ResizableContext();
+	const separator = orientation === "vertical" ? "horizontal" : "vertical";
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-disabled": disabled ? "true" : void 0,
+		"aria-orientation": separator,
+		"aria-valuemax": "100",
+		"aria-valuemin": "0",
+		"data-orientation": separator,
+		"data-panel-group-direction": orientation,
+		"data-slot": "resizable-handle",
+		role: "separator",
+		tabindex: disabled ? -1 : 0,
+		children
+	});
+};
+//#endregion
+export { ResizableContext, ResizableHandle, ResizablePanel, ResizablePanelGroup };