ajo-ui 0.1.0

package/src/checkbox-group.tsx

@@ -0,0 +1,132 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import { selection, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import type { FixedArgs, OmitArg } from './utils'
+import { flag, strings } from './utils'
+import { Checkbox, type CheckboxArgs } from './checkbox'
+
+/** Arguments for a group that coordinates checkbox values. */
+export type CheckboxGroupArgs = WithChildren<OmitArg<IntrinsicElements['div'], 'defaultValue' | 'value'> & {
+	/** Controlled checked values. */
+	value?: string[]
+	/** Initial checked values for uncontrolled usage. */
+	defaultValue?: string[]
+	/** Called whenever the checked values change. */
+	onValueChange?: (value: string[], event: Event) => void
+	/** Disable every item in the group. */
+	disabled?: boolean
+	/** Shared checkbox input name. */
+	name?: string
+}>
+
+/** Arguments for one Checkbox registered with a CheckboxGroup. */
+export type CheckboxGroupItemArgs = OmitArg<CheckboxArgs, 'checked' | 'defaultChecked' | 'onCheckedChange'> & {
+	/** Item value used by the parent checkbox group. */
+	value: string
+} & FixedArgs<'checked' | 'defaultChecked' | 'onCheckedChange'>
+
+type CheckboxGroupContextValue = {
+	checked: (value: string) => boolean
+	disabled?: boolean
+	name?: string
+	toggle: (value: string, checked: boolean, event: Event) => void
+}
+
+type CheckboxGroupRootArgs = WithChildren<{
+	defaultValue?: string[]
+	disabled?: boolean
+	name?: string
+	onValueChange?: (value: string[], event: Event) => void
+	value?: string[]
+}>
+
+const CheckboxGroupContext = context<CheckboxGroupContextValue | null>(null)
+
+const CheckboxGroupRoot: Stateful<CheckboxGroupRootArgs> = function* ({ defaultValue }) {
+	let disabled = false
+	let name: string | undefined
+	let onValueChange: CheckboxGroupRootArgs['onValueChange']
+	const sel = selection(this, {
+		multiple: () => true,
+		fallback: strings(defaultValue),
+		onChange: (next, event) => onValueChange?.(next, event as Event),
+	})
+
+	const checked = (value: string) =>
+		sel.has(value)
+
+	const change = (value: string, _checked: boolean, event: 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) : undefined)
+
+		CheckboxGroupContext({ checked, disabled, name, toggle: change })
+
+		yield <>{args.children}</>
+	}
+}
+
+
+/** Unstyled checkbox group cascading checked values, name, and disabled state to its items. */
+const CheckboxGroup: Stateless<CheckboxGroupArgs> = ({
+	children,
+	defaultValue,
+	disabled,
+	name,
+	onValueChange,
+	role = 'group',
+	value,
+	...attrs
+}) => {
+	const disabledFlag = Boolean(disabled)
+
+	return (
+		<CheckboxGroupRoot
+			{...rootAttrs(attrs)}
+			defaultValue={defaultValue}
+			disabled={disabledFlag}
+			name={name}
+			onValueChange={onValueChange}
+			value={value}
+			attr:aria-disabled={flag(disabledFlag)}
+			attr:data-disabled={flag(disabledFlag)}
+			attr:data-slot="checkbox-group"
+			attr:role={role}
+		>
+			{children}
+		</CheckboxGroupRoot>
+	)
+}
+
+/** Unstyled native checkbox item wired to the nearest group. */
+const CheckboxGroupItem: Stateless<CheckboxGroupItemArgs> = ({
+	disabled,
+	name,
+	value,
+	...attrs
+}) => {
+	const group = CheckboxGroupContext()
+	const item = String(value)
+	const checked = group?.checked(item) ?? false
+
+	return (
+		<Checkbox
+			{...attrs}
+			checked={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)}
+		/>
+	)
+}
+
+export { CheckboxGroup, CheckboxGroupItem }

package/src/checkbox.tsx

@@ -0,0 +1,130 @@
+import type { IntrinsicElements, Stateful, Stateless } from 'ajo'
+import { callHandler, callRef, dom } from 'ajo-cloves'
+import { ariaChecked, bool, flag, syncCheckedState, type CheckedState } from './utils'
+
+/** Visual and ARIA state exposed by a Checkbox. */
+export type CheckboxState = CheckedState
+
+/** Arguments for the native checkbox and its visual companion. */
+export type CheckboxArgs = IntrinsicElements['input'] & {
+	/** Classes for the checked indicator element. */
+	checkedIndicatorClass?: string
+	/** Classes for the native input element. */
+	inputClass?: string
+	/** Classes for the indeterminate indicator element. */
+	indeterminateIndicatorClass?: string
+	/** Called when the native checkbox state changes. */
+	onCheckedChange?: (checked: boolean, event: Event) => void
+}
+
+type CheckboxRootArgs = {
+	checkedIndicatorClass?: string
+	inputAttrs: IntrinsicElements['input']
+	inputClass?: string
+	indeterminateIndicatorClass?: string
+	onCheckedChange?: CheckboxArgs['onCheckedChange']
+}
+
+const stateFromAttrs = (attrs: IntrinsicElements['input']): CheckboxState => {
+	if (bool(attrs['set:indeterminate'])) return 'indeterminate'
+	return bool(attrs['set:checked'] ?? attrs.checked ?? attrs.defaultChecked) ? 'checked' : 'unchecked'
+}
+
+const CheckboxRoot: Stateful<CheckboxRootArgs, 'span'> = function* () {
+	let input: HTMLInputElement | null = 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 (
+			<>
+				<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: Event) => {
+						callHandler(onChange, event)
+						sync()
+						onCheckedChange?.((event.currentTarget as HTMLInputElement).checked, event)
+					}}
+					set:oninput={(event: Event) => {
+						callHandler(onInput, event)
+						sync()
+					}}
+					type="checkbox"
+				/>
+				<span
+					aria-hidden="true"
+					class={checkedIndicatorClass}
+					data-slot="checkbox-indicator"
+					data-state="checked"
+				/>
+				<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. */
+const Checkbox: Stateless<CheckboxArgs> = ({
+	checkedIndicatorClass,
+	class: classes,
+	disabled,
+	inputClass,
+	indeterminateIndicatorClass,
+	onCheckedChange,
+	...attrs
+}) => {
+	const inputAttrs = { ...attrs, disabled }
+	const state = stateFromAttrs(inputAttrs)
+
+	return (
+		<CheckboxRoot
+			checkedIndicatorClass={checkedIndicatorClass}
+			inputAttrs={inputAttrs}
+			inputClass={inputClass}
+			indeterminateIndicatorClass={indeterminateIndicatorClass}
+			onCheckedChange={onCheckedChange}
+			attr:class={classes}
+			attr:data-disabled={flag(disabled)}
+			attr:data-slot={attrs['data-slot'] ?? 'checkbox'}
+			attr:data-state={state}
+		/>
+	)
+}
+
+export { Checkbox }

package/src/collapsible.tsx

@@ -0,0 +1,188 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import type { OmitArg } from './utils'
+import { callHandler, controlled, dom, id, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import { flag } from './utils'
+
+/** Arguments for the controlled or uncontrolled disclosure root. */
+export type CollapsibleArgs = WithChildren<OmitArg<IntrinsicElements['details'], 'open'> & {
+	/** Controlled open state. */
+	open?: boolean
+	/** Initial open state for uncontrolled usage. */
+	defaultOpen?: boolean
+	/** Disable the trigger. */
+	disabled?: boolean
+	/** Called whenever open state changes. */
+	onOpenChange?: (open: boolean, event?: Event) => void
+}>
+
+/** Arguments for the native summary that toggles a Collapsible. */
+export type CollapsibleTriggerArgs = WithChildren<IntrinsicElements['summary'] & {
+	/** Disable the trigger. */
+	disabled?: boolean
+	/** Keep the trigger focusable but block toggling. */
+	locked?: boolean
+}>
+
+/** Arguments for the content revealed by a Collapsible. */
+export type CollapsibleContentArgs = WithChildren<IntrinsicElements['div']>
+
+type CollapsibleRootArgs = WithChildren<{
+	defaultOpen?: boolean
+	disabled?: boolean
+	onOpenChange?: (open: boolean, event?: Event) => void
+	open?: boolean
+}>
+
+/** Live disclosure state shared with composed Collapsible parts. */
+export type CollapsibleContextValue = {
+	contentId: string
+	disabled: boolean
+	open: boolean
+	setOpen: (open: boolean, event?: Event) => void
+	triggerId: string
+}
+
+/** Composition context shared by Collapsible parts and derivative families such as Accordion. */
+export const CollapsibleContext = context<CollapsibleContextValue | null>(null)
+
+const CollapsibleRoot: Stateful<CollapsibleRootArgs, 'details'> = function* ({ defaultOpen, open }) {
+	const rootId = id('collapsible')
+	let disabled = false
+	let onOpenChange: CollapsibleRootArgs['onOpenChange']
+	const state = controlled<boolean>(this, {
+		fallback: Boolean(open ?? defaultOpen),
+		onChange: (next, event) => onOpenChange?.(next, event),
+	})
+
+	const syncRoot = () => {
+		if (!dom(this)) return
+
+		if (state.value) this.setAttribute('open', '')
+		else this.removeAttribute('open')
+
+		this.setAttribute('data-state', state.value ? 'open' : 'closed')
+		if (disabled) {
+			this.setAttribute('data-disabled', 'true')
+			this.setAttribute('aria-disabled', 'true')
+		} else {
+			this.removeAttribute('data-disabled')
+			this.removeAttribute('aria-disabled')
+		}
+	}
+
+	const setOpen = (next: boolean, event?: Event) => {
+		if (disabled || next === state.value) return
+		state.set(next, event)
+	}
+
+	for (const args of this) {
+		disabled = Boolean(args.disabled)
+		onOpenChange = args.onOpenChange
+		state.sync(args.open != null ? Boolean(args.open) : undefined)
+
+		syncRoot()
+
+		CollapsibleContext({
+			contentId: `${rootId}-content`,
+			disabled,
+			open: state.value,
+			setOpen,
+			triggerId: `${rootId}-trigger`,
+		})
+
+		yield <>{args.children}</>
+	}
+}
+
+CollapsibleRoot.is = 'details'
+
+/** Unstyled collapsible disclosure rendered as a native details element. */
+const Collapsible: Stateless<CollapsibleArgs> = ({
+	children,
+	defaultOpen,
+	disabled,
+	onOpenChange,
+	open,
+	...attrs
+}) => {
+	const opened = Boolean(open ?? defaultOpen)
+	const disabledFlag = Boolean(disabled)
+
+	return (
+		<CollapsibleRoot
+			attr:data-slot="collapsible"
+			{...rootAttrs(attrs)}
+			defaultOpen={defaultOpen}
+			disabled={disabledFlag}
+			onOpenChange={onOpenChange}
+			open={open}
+			attr:aria-disabled={flag(disabledFlag)}
+			attr:data-disabled={flag(disabledFlag)}
+			attr:data-state={opened ? 'open' : 'closed'}
+			attr:open={opened || undefined}
+			set:open={opened}
+		>
+			{children}
+		</CollapsibleRoot>
+	)
+}
+
+/** Unstyled disclosure trigger rendered as a native summary element. */
+const CollapsibleTrigger: Stateless<CollapsibleTriggerArgs> = ({
+	children,
+	disabled,
+	id: idArg,
+	locked,
+	'set:onclick': onClick,
+	...attrs
+}) => {
+	const collapsible = CollapsibleContext()
+	const disabledFlag = Boolean(disabled ?? collapsible?.disabled)
+	const unavailable = Boolean(disabledFlag || locked)
+
+	return (
+		<summary
+			data-slot="collapsible-trigger"
+			{...attrs}
+			aria-controls={collapsible?.contentId}
+			aria-disabled={unavailable ? 'true' : undefined}
+			aria-expanded={collapsible?.open ? 'true' : 'false'}
+			data-disabled={flag(disabledFlag)}
+			data-state={collapsible?.open ? 'open' : 'closed'}
+			id={idArg ?? collapsible?.triggerId}
+			set:onclick={(event: Event) => {
+				callHandler(onClick, event)
+				const prevented = event.defaultPrevented
+				event.preventDefault()
+				if (prevented || unavailable) return
+				collapsible?.setOpen(!collapsible.open, event)
+			}}
+			tabindex={disabledFlag ? -1 : undefined}
+		>
+			{children}
+		</summary>
+	)
+}
+
+/** Unstyled content panel natively shown or hidden by its details root. */
+const CollapsibleContent: Stateless<CollapsibleContentArgs> = ({
+	children,
+	...attrs
+}) => {
+	const collapsible = CollapsibleContext()
+
+	return (
+		<div
+			data-slot="collapsible-content"
+			{...attrs}
+			aria-labelledby={collapsible?.triggerId}
+			data-state={collapsible?.open ? 'open' : 'closed'}
+			id={collapsible?.contentId}
+		>
+			{children}
+		</div>
+	)
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }

package/src/collection.ts

@@ -0,0 +1,154 @@
+export type ItemsOptions = {
+	/** Exclude disabled items. Default: true. */
+	enabled?: boolean
+	/** Require rendered layout (an offsetParent). Default: true. */
+	rendered?: boolean
+	/** Exclude [hidden] items. Default: true. */
+	shown?: boolean
+}
+
+export type ItemAttrs = {
+	'data-item': string
+	'data-disabled'?: 'true'
+	'data-label'?: string
+	'data-value'?: string
+}
+
+type SweepOptions = {
+	empty?: string
+	group?: string
+	separator?: string
+}
+
+const enabledOf = (item: HTMLElement) =>
+	item.dataset.disabled !== 'true' && !(item as HTMLElement & { disabled?: boolean }).disabled
+
+/**
+ * One item protocol for list-like families (menus, select, combobox, command):
+ * items are marked `data-item="<kind>"` and carry `data-value`, `data-label`,
+ * and `data-disabled`; the kind keeps nested families from cross-matching.
+ * Discovery is by DOM query (house pattern), highlight is `data-highlighted`.
+ */
+export const collection = (kind: string, defaults: ItemsOptions = {}) => {
+	const selector = `[data-item="${kind}"]`
+	const sweepDefaults: Required<SweepOptions> = {
+		empty: `[data-slot="${kind}-empty"]`,
+		group: `[data-slot="${kind}-group"]`,
+		separator: `[data-slot="${kind}-separator"]`,
+	}
+
+	const all = (root: ParentNode | null | undefined) =>
+		root ? Array.from(root.querySelectorAll<HTMLElement>(selector)) : []
+
+	const items = (root: ParentNode | null | undefined, opts: ItemsOptions = {}) => {
+		const enabled = opts.enabled ?? defaults.enabled ?? true
+		const rendered = opts.rendered ?? defaults.rendered ?? true
+		const shown = opts.shown ?? defaults.shown ?? true
+
+		return all(root).filter(item =>
+			(!shown || !item.hidden) &&
+			(!rendered || item.offsetParent !== null) &&
+			(!enabled || enabledOf(item)))
+	}
+
+	const clearHighlight = (root: ParentNode | null | undefined) => {
+		for (const item of all(root)) delete item.dataset.highlighted
+	}
+
+	/** Marks one item highlighted and clears the rest; does not move focus. */
+	const highlight = (root: ParentNode | null | undefined, target: HTMLElement | undefined) => {
+		if (!target) return
+
+		target.dataset.highlighted = 'true'
+		for (const item of all(root)) {
+			if (item !== target) delete item.dataset.highlighted
+		}
+	}
+
+	/** Focus strategy: moves real focus and mirrors it in data-highlighted. */
+	const focusItem = (root: ParentNode | null | undefined, target: HTMLElement | undefined) => {
+		if (!target || !(root instanceof Node) || !root.contains(target)) return
+
+		target.focus()
+		highlight(root, target)
+	}
+
+	/** Focuses the first or last matching item. */
+	const edge = (root: ParentNode | null | undefined, which: 'first' | 'last', opts?: ItemsOptions) => {
+		const list = items(root, opts)
+		focusItem(root, which === 'first' ? list[0] : list[list.length - 1])
+	}
+
+	/** Resolves the item containing an event target. */
+	const item = (event: Event) =>
+		(event.target as HTMLElement | null)?.closest<HTMLElement>(selector)
+
+	/** Marker attrs for one item, meant for JSX spread. */
+	const attrs = (opts: { disabled?: boolean; label?: string; value?: string } = {}): ItemAttrs => ({
+		'data-item': kind,
+		'data-disabled': opts.disabled ? 'true' : undefined,
+		'data-label': opts.label,
+		'data-value': opts.value,
+	})
+
+	/**
+	 * Hides empty groups (respecting data-force-mount) and toggles empty
+	 * states against the current visible set; returns the visible items.
+	 * Separators survive only between visible items: leading, trailing,
+	 * and stacked separators hide as filtering empties their groups.
+	 */
+	const sweep = (root: HTMLElement, opts?: SweepOptions) => {
+		const empty = opts?.empty ?? sweepDefaults.empty
+		const group = opts?.group ?? sweepDefaults.group
+		const separator = opts?.separator ?? sweepDefaults.separator
+
+		if (group) {
+			for (const element of root.querySelectorAll<HTMLElement>(group)) {
+				if (element.dataset.forceMount === 'true') {
+					element.hidden = false
+					continue
+				}
+				element.hidden = !element.querySelector<HTMLElement>(`${selector}:not([hidden])`)
+			}
+		}
+
+		// A group hidden by the previous filter makes its children non-rendered.
+		// Reconcile groups first so clearing the filter can measure them again.
+		const visible = items(root)
+
+		if (separator) {
+			const separators = new Set(root.querySelectorAll<HTMLElement>(separator))
+			const order = [...visible, ...separators].sort((a, b) =>
+				a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
+			const keep = new Set<HTMLElement>()
+
+			let afterItem = false
+			for (const element of order) {
+				if (!separators.has(element)) { afterItem = true; continue }
+				if (afterItem) keep.add(element)
+				afterItem = false
+			}
+
+			let beforeItem = false
+			for (let index = order.length - 1; index >= 0; index--) {
+				const element = order[index]
+				if (!separators.has(element)) { beforeItem = true; continue }
+				if (!beforeItem) keep.delete(element)
+			}
+
+			for (const separator of separators) separator.hidden = !keep.has(separator)
+		}
+
+		if (empty) {
+			for (const element of root.querySelectorAll<HTMLElement>(empty)) {
+				element.hidden = visible.length > 0
+			}
+		}
+
+		return visible
+	}
+
+	return { all, attrs, clearHighlight, edge, focusItem, highlight, item, items, selector, sweep }
+}
+
+export type Collection = ReturnType<typeof collection>