ajo-ui 0.1.0

package/dist/input-group.js

@@ -0,0 +1,52 @@
+import { callHandler } from "ajo-cloves";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/input-group.tsx
+/** Unstyled host that groups a control with addons and actions. */
+var InputGroup = ({ children, disabled, role = "group", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-disabled": disabled ? "true" : void 0,
+	"data-slot": "input-group",
+	role,
+	children
+});
+/** Unstyled addon that forwards non-button clicks to the grouped control. */
+var InputGroupAddon = ({ align = "inline-start", children, role = "group", "set:onclick": onclick, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-align": align,
+	"data-slot": "input-group-addon",
+	role,
+	"set:onclick": (event) => {
+		callHandler(onclick, event);
+		if (event.target.closest("button")) return;
+		const parent = event.currentTarget.parentElement;
+		(parent?.querySelector("[data-slot=\"input-group-control\"]") ?? parent?.querySelector("input,textarea"))?.focus();
+	},
+	children
+});
+/** Unstyled button rendered inside an InputGroup. */
+var InputGroupButton = ({ children, "data-slot": slot = "input-group-button", type = "button", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	"data-slot": slot,
+	type,
+	children
+});
+/** Unstyled supporting text rendered inside an InputGroup. */
+var InputGroupText = ({ children, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	"data-slot": "input-group-text",
+	children
+});
+/** Unstyled native input carrying the InputGroup control slot. */
+var InputGroupInput = ({ "data-slot": slot = "input-group-control", type = "text", ...attrs }) => /* @__PURE__ */ jsx("input", {
+	...attrs,
+	"data-slot": slot,
+	type
+});
+/** Unstyled native textarea carrying the InputGroup control slot. */
+var InputGroupTextarea = ({ children, "data-slot": slot = "input-group-control", ...attrs }) => /* @__PURE__ */ jsx("textarea", {
+	...attrs,
+	"data-slot": slot,
+	children
+});
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-otp.js

@@ -0,0 +1,179 @@
+import { callHandler, callRef, clamp, controlled, dom } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/input-otp.tsx
+/** Built-in InputOTP pattern accepting one or more ASCII digits. */
+var REGEXP_ONLY_DIGITS = /^[0-9]+$/;
+/** Built-in InputOTP pattern accepting one or more ASCII letters or digits. */
+var REGEXP_ONLY_DIGITS_AND_CHARS = /^[a-zA-Z0-9]+$/;
+var InputOTPContext = context(null);
+var isRegExp = (value) => Object.prototype.toString.call(value) === "[object RegExp]";
+var accepts = (pattern, char) => {
+	if (!pattern) return true;
+	if (isRegExp(pattern)) {
+		pattern.lastIndex = 0;
+		return pattern.test(char);
+	}
+	return new RegExp(pattern).test(char);
+};
+var clean = (value, maxLength, pattern) => String(value ?? "").split("").filter((char) => accepts(pattern, char)).slice(0, Math.max(1, maxLength)).join("");
+var inputPattern = (pattern) => isRegExp(pattern) ? pattern.source : pattern;
+var nextSelection = (input, fallback) => Math.min(input?.selectionStart ?? fallback, Math.max(0, input?.value.length ?? fallback));
+var completionState = (value, maxLength) => value.length === maxLength ? "complete" : "incomplete";
+var InputOTPRoot = function* ({ defaultValue = "", maxLength = 6, pattern, value }) {
+	let input = null;
+	const initial = clean(value ?? defaultValue, maxLength, pattern);
+	let active = Math.min(initial.length, Math.max(0, maxLength - 1));
+	let onValueChange;
+	let onComplete;
+	let previousComplete = initial.length === maxLength ? initial : "";
+	const emit = (next, event) => {
+		onValueChange?.(next, event);
+		if (next.length === maxLength && next !== previousComplete) {
+			previousComplete = next;
+			onComplete?.(next, event);
+		} else if (next.length !== maxLength) previousComplete = "";
+	};
+	const state = controlled(this, {
+		fallback: initial,
+		onChange: (next, event) => emit(next, event)
+	});
+	const setValue = (next, args, nextActive = next.length, event) => {
+		const length = args.maxLength ?? maxLength;
+		const parsed = clean(next, length, args.pattern);
+		active = Math.min(nextActive, Math.max(0, length - 1));
+		if (input) input.value = parsed;
+		state.accept(parsed, event);
+	};
+	const focus = (index) => {
+		active = clamp(index, 0, Math.max(0, maxLength - 1));
+		input?.focus();
+		input?.setSelectionRange(active, active);
+		this.next();
+	};
+	for (const args of this) {
+		const { children, class: _class, defaultValue: _defaultValue, inputClass, inputRef, maxLength: _maxLength, onValueChange: change, onComplete: complete, pattern, value, "set:onblur": onBlur, "set:onfocus": onFocus, "set:oninput": onInput, "set:onkeyup": onKeyUp, "set:onpaste": onPaste, ...inputAttrs } = args;
+		maxLength = _maxLength ?? 6;
+		onValueChange = change;
+		onComplete = complete;
+		state.sync(value != null ? clean(value, maxLength, pattern) : void 0);
+		if (!state.controlled) {
+			const parsed = clean(state.value, maxLength, pattern);
+			if (parsed !== state.value) state.init(parsed);
+		}
+		active = Math.min(active, Math.max(0, maxLength - 1));
+		if (dom(this)) this.dataset.state = completionState(state.value, maxLength);
+		InputOTPContext({
+			active,
+			disabled: Boolean(inputAttrs.disabled),
+			focus,
+			maxLength,
+			value: state.value
+		});
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			...inputAttrs,
+			"aria-label": inputAttrs["aria-label"] ?? "One-time password",
+			autocomplete: inputAttrs.autocomplete ?? "one-time-code",
+			class: inputClass,
+			"data-slot": "input-otp-input",
+			"data-state": completionState(state.value, maxLength),
+			inputmode: inputAttrs.inputmode ?? "numeric",
+			maxLength,
+			pattern: inputPattern(pattern),
+			ref: (element) => {
+				input = element;
+				callRef(inputRef, element);
+			},
+			type: inputAttrs.type ?? "text",
+			"set:onblur": (event) => {
+				callHandler(onBlur, event);
+				this.next(() => active = -1);
+			},
+			"set:onfocus": (event) => {
+				callHandler(onFocus, event);
+				this.next(() => active = Math.min(state.value.length, Math.max(0, maxLength - 1)));
+			},
+			"set:oninput": (event) => {
+				callHandler(onInput, event);
+				const control = event.currentTarget;
+				setValue(control.value, args, nextSelection(control, control.value.length), event);
+			},
+			"set:onkeyup": (event) => {
+				callHandler(onKeyUp, event);
+				this.next(() => {
+					active = nextSelection(event.currentTarget, active);
+				});
+			},
+			"set:onpaste": (event) => {
+				callHandler(onPaste, event);
+				if (event.defaultPrevented) return;
+				const pasted = event.clipboardData?.getData("text") ?? "";
+				if (!pasted) return;
+				event.preventDefault();
+				setValue(pasted, args, pasted.length, event);
+			},
+			"set:value": state.value
+		}), children] });
+	}
+};
+/** Unstyled one-time password input with visible slot context. */
+var InputOTP = ({ children, class: classes, disabled, ref, ...attrs }) => {
+	const maxLength = attrs.maxLength ?? 6;
+	const state = completionState(clean(attrs.value ?? attrs.defaultValue, maxLength, attrs.pattern), maxLength);
+	return /* @__PURE__ */ jsx(InputOTPRoot, {
+		...attrs,
+		disabled,
+		inputRef: ref,
+		"attr:class": classes,
+		"attr:data-disabled": disabled ? "true" : void 0,
+		"attr:data-slot": "input-otp",
+		"attr:data-state": state,
+		children
+	});
+};
+/** Unstyled visual group for adjacent OTP slots. */
+var InputOTPGroup = ({ children, "data-slot": slot = "input-otp-group", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": slot,
+	children
+});
+/** Unstyled OTP slot synchronized with the nearest OTP input. */
+var InputOTPSlot = ({ caretClass, caretMarkClass, children, index, role = "presentation", "set:onclick": onClick, ...attrs }) => {
+	const context = InputOTPContext();
+	if (!context) throw new Error("InputOTPSlot must be used within an <InputOTP />");
+	const char = context.value[index];
+	const active = context.active === index;
+	const caret = active && !char && !context.disabled;
+	const state = active ? "active" : "inactive";
+	return /* @__PURE__ */ jsxs("div", {
+		...attrs,
+		"aria-hidden": "true",
+		"data-active": active ? "true" : "false",
+		"data-disabled": context.disabled ? "true" : void 0,
+		"data-slot": "input-otp-slot",
+		"data-state": state,
+		role,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (!event.defaultPrevented && !context.disabled) context.focus(index);
+		},
+		children: [children ?? char, caret && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			class: caretClass,
+			"data-slot": "input-otp-caret",
+			children: /* @__PURE__ */ jsx("div", {
+				class: caretMarkClass,
+				"data-slot": "input-otp-caret-mark"
+			})
+		})]
+	});
+};
+/** Unstyled separator between OTP slot groups. */
+var InputOTPSeparator = ({ children, role = "separator", "data-slot": slot = "input-otp-separator", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": slot,
+	role,
+	children
+});
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/menu.js

@@ -0,0 +1,2 @@
+import { a as MenuItem, c as MenuRadioItem, d as MenuSub, f as MenuSubContent, i as MenuGroup, l as MenuSeparator, m as MenuTrigger, n as MenuCheckboxItem, o as MenuLabel, p as MenuSubTrigger, r as MenuContent, s as MenuRadioGroup, t as Menu, u as MenuShortcut } from "./chunks/menu-B45IyHHC.js";
+export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger };

package/dist/menubar.js

@@ -0,0 +1,236 @@
+import { text, withSlot } from "./utils.js";
+import { a as MenuItem, c as MenuRadioItem, d as MenuSub, f as MenuSubContent, i as MenuGroup, l as MenuSeparator, m as MenuTrigger, n as MenuCheckboxItem, o as MenuLabel, p as MenuSubTrigger, r as MenuContent, s as MenuRadioGroup, t as Menu, u as MenuShortcut, v as provideMenubarComposition } from "./chunks/menu-B45IyHHC.js";
+import { t as bar } from "./chunks/bar-CVafh6C1.js";
+import { callHandler, callRef, id, listen, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/menubar.tsx
+var MenubarContext = context(null);
+var MenubarMenuContext = context(null);
+var order = (root) => Array.from(root.querySelectorAll("[data-menubar-trigger=\"true\"]")).filter((trigger) => !trigger.disabled && trigger.offsetParent !== null && trigger.closest("[data-slot=\"menubar\"]") === root);
+var MenubarRoot = function* ({ defaultValue, value }) {
+	const triggers = /* @__PURE__ */ new Map();
+	let disabled = false;
+	let entering = false;
+	let loop = true;
+	let onValueChange;
+	let pendingFocus = "";
+	let queued = false;
+	const state = bar(this, {
+		triggers: () => order(this),
+		initialValue: String(value ?? defaultValue ?? ""),
+		disabled: () => disabled,
+		loop: () => loop,
+		onValueChange: (next, event) => onValueChange?.(next, event)
+	});
+	const rerender = () => {
+		if (queued) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			this.next();
+		});
+	};
+	const register = (itemValue, element) => {
+		if (element) {
+			if (triggers.get(itemValue) === element) return;
+			triggers.set(itemValue, element);
+			rerender();
+		} else if (triggers.delete(itemValue)) {
+			if (state.focused === itemValue) state.adopt("");
+			rerender();
+		}
+	};
+	const close = (event) => {
+		pendingFocus = "";
+		state.close(event);
+	};
+	const focus = (next, event) => {
+		if (!entering) pendingFocus = "";
+		state.focus(next, event);
+	};
+	const follow = (next, event) => {
+		if (!entering) pendingFocus = "";
+		state.follow(next, event);
+	};
+	const open = (next, event) => {
+		pendingFocus = "";
+		state.setValue(next, event);
+	};
+	const enter = (next, event) => {
+		pendingFocus = next;
+		entering = true;
+		try {
+			state.follow(next, event);
+		} finally {
+			entering = false;
+		}
+	};
+	const ackFocus = (next) => {
+		if (!next || pendingFocus !== next) return false;
+		pendingFocus = "";
+		return true;
+	};
+	listen(this, "keydown", (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (target?.closest("[data-slot=\"menubar\"]") !== this) return;
+		if (event.key === "Tab") {
+			close(event);
+			return;
+		}
+		if (target?.closest("[data-menubar-trigger=\"true\"]")) {
+			if (event.key === "Escape") pendingFocus = "";
+			const transfer = Boolean(pendingFocus);
+			if (transfer) entering = true;
+			try {
+				if (state.handle(event) && transfer) pendingFocus = state.value;
+			} finally {
+				if (transfer) entering = false;
+			}
+			return;
+		}
+		if (state.value && (event.key === "ArrowLeft" || event.key === "ArrowRight") && target?.closest("[data-menu-content=\"true\"]")) {
+			if (event.key === "ArrowRight" && target.closest("[data-menu-sub-trigger=\"true\"]")) return;
+			if (target.closest("[data-menu-sub-content=\"true\"]")) return;
+			const row = order(this);
+			const index = row.findIndex((trigger) => trigger.dataset.value === state.value);
+			if (index < 0) return;
+			const step = event.key === "ArrowRight" ? 1 : -1;
+			const next = row[index + step] ?? (loop ? row[(index + step + row.length) % row.length] : void 0);
+			if (!next || next === row[index]) return;
+			event.preventDefault();
+			enter(next.dataset.value ?? "", event);
+		}
+	});
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		loop = args.loop !== false;
+		onValueChange = args.onValueChange;
+		state.sync(args.value != null ? String(args.value ?? "") : void 0);
+		MenubarContext({
+			ackFocus,
+			close,
+			disabled,
+			focus,
+			follow,
+			gap: args.gap,
+			isTabbable: state.isTabbable,
+			open,
+			placement: args.placement,
+			register,
+			value: state.value
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Persistent horizontal menu bar. */
+var Menubar = ({ children, class: classes, defaultValue, disabled, gap, loop, onValueChange, placement, value, ...attrs }) => /* @__PURE__ */ jsx(MenubarRoot, {
+	...statefulRootAttrs(attrs),
+	defaultValue,
+	disabled,
+	gap,
+	loop,
+	onValueChange,
+	placement,
+	value,
+	"attr:aria-orientation": "horizontal",
+	"attr:class": classes,
+	"attr:data-slot": "menubar",
+	"attr:role": "menubar",
+	children
+});
+var MenubarMenuRoot = function* ({ value }) {
+	const fallback = id("menubar-menu");
+	let bar = null;
+	let itemValue = String(value ?? fallback);
+	const ackFocus = () => bar?.ackFocus(itemValue) ?? false;
+	for (const args of this) {
+		bar = MenubarContext();
+		itemValue = String(args.value ?? value ?? fallback);
+		const disabled = Boolean(args.disabled ?? bar?.disabled);
+		MenubarMenuContext({
+			disabled,
+			value: itemValue
+		});
+		if (bar) provideMenubarComposition(ackFocus);
+		yield /* @__PURE__ */ jsx(Menu, {
+			disabled,
+			gap: bar?.gap,
+			onOpenChange: (open, event) => open ? bar?.open(itemValue, event) : bar?.close(event),
+			open: bar ? bar.value === itemValue : void 0,
+			placement: bar?.placement,
+			children: args.children
+		});
+	}
+};
+/** Top-level Menubar menu. */
+var MenubarMenu = ({ children, class: classes, disabled, value, ...attrs }) => /* @__PURE__ */ jsx(MenubarMenuRoot, {
+	...statefulRootAttrs(attrs),
+	disabled,
+	value,
+	"attr:class": classes,
+	"attr:data-slot": "menubar-menu",
+	children
+});
+/** Top-level trigger inside a Menubar. */
+var MenubarTrigger = ({ children, class: classes, disabled, ref, textValue, "set:onfocus": onFocus, "set:onmouseenter": onMouseEnter, ...attrs }) => {
+	const bar = MenubarContext();
+	const menu = MenubarMenuContext();
+	const itemValue = menu?.value ?? "";
+	const disabledFlag = Boolean(disabled ?? menu?.disabled ?? bar?.disabled);
+	const label = textValue ?? text(children);
+	const reference = (element) => {
+		if (itemValue) bar?.register(itemValue, element);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsx(MenuTrigger, {
+		...attrs,
+		class: classes,
+		"data-label": bar ? label : void 0,
+		"data-menubar-trigger": bar ? "true" : void 0,
+		"data-slot": "menubar-trigger",
+		"data-value": bar ? itemValue : void 0,
+		disabled: disabledFlag,
+		ref: reference,
+		role: bar ? "menuitem" : void 0,
+		"set:onfocus": (event) => {
+			callHandler(onFocus, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			bar?.focus(itemValue, event);
+		},
+		"set:onmouseenter": (event) => {
+			callHandler(onMouseEnter, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			bar?.follow(itemValue, event);
+		},
+		tabindex: bar ? bar.isTabbable(itemValue) ? 0 : -1 : void 0,
+		children
+	});
+};
+/** Popover content for a top-level Menubar menu. */
+var MenubarContent = withSlot(MenuContent, "menubar-content");
+/** Standard menubar action item. */
+var MenubarItem = withSlot(MenuItem, "menubar-item");
+/** Checkable menubar item. */
+var MenubarCheckboxItem = withSlot(MenuCheckboxItem, "menubar-checkbox-item");
+/** Radio group inside a menubar menu. */
+var MenubarRadioGroup = withSlot(MenuRadioGroup, "menubar-radio-group");
+/** Radio item inside a menubar radio group. */
+var MenubarRadioItem = withSlot(MenuRadioItem, "menubar-radio-item");
+/** Group of menubar items. */
+var MenubarGroup = withSlot(MenuGroup, "menubar-group");
+/** Non-interactive label inside a menubar menu. */
+var MenubarLabel = withSlot(MenuLabel, "menubar-label");
+/** Visual separator between menubar groups. */
+var MenubarSeparator = withSlot(MenuSeparator, "menubar-separator");
+/** Right-aligned shortcut hint inside a menubar item. */
+var MenubarShortcut = withSlot(MenuShortcut, "menubar-shortcut");
+/** Root provider for a menubar submenu. */
+var MenubarSub = withSlot(MenuSub, "menubar-sub");
+/** Trigger item that opens a menubar submenu. */
+var MenubarSubTrigger = withSlot(MenuSubTrigger, "menubar-sub-trigger");
+/** Content for a menubar submenu. */
+var MenubarSubContent = withSlot(MenuSubContent, "menubar-sub-content");
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };