ajo-ui 0.1.0

package/src/dialog.tsx

@@ -0,0 +1,393 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import { callHandler, callRef, controlled, id, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import { triggerAttrs } from './utils'
+import type { FixedArgs, OmitArg } from './utils'
+
+/** Arguments for the Dialog state provider and its wrapper host. */
+export type DialogArgs = WithChildren<OmitArg<IntrinsicElements['div'], 'onchange'> & {
+	/** Controlled open state. */
+	open?: boolean
+	/** Initial open state for uncontrolled usage. */
+	defaultOpen?: boolean
+	/** Use native modal behavior. Set false for modeless dialogs. */
+	modal?: boolean
+	/** Called whenever the dialog opens or closes. */
+	onOpenChange?: (open: boolean, event?: Event) => void
+	/** Additional CSS classes for the root wrapper. */
+	class?: string
+}> & FixedArgs<'onchange'>
+
+/** Arguments for the button that opens its nearest Dialog. */
+export type DialogTriggerArgs = WithChildren<IntrinsicElements['button'] & {
+	/** Additional CSS classes. */
+	class?: string
+}>
+
+/** Arguments for a button that closes its nearest Dialog. */
+export type DialogCloseArgs = WithChildren<IntrinsicElements['button'] & {
+	/** Additional CSS classes. */
+	class?: string
+}>
+
+/** Arguments for the native dialog panel and its dismissal hooks. */
+export type DialogContentArgs = WithChildren<OmitArg<IntrinsicElements['dialog'], 'open'> & {
+	/** Called when Escape requests dialog close. Prevent default to keep it open. */
+	onEscapeKeyDown?: (event: KeyboardEvent) => void
+	/** Called when the native backdrop is clicked. Prevent default to keep it open. */
+	onPointerDownOutside?: (event: MouseEvent) => void
+	/** Additional CSS classes for the dialog panel. */
+	class?: string
+}> & FixedArgs<'open'>
+
+/** Shared arguments for structural sections inside a dialog panel. */
+export type DialogSectionArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Additional CSS classes. */
+	class?: string
+}>
+
+/** Arguments for the title and description area of a dialog. */
+export type DialogHeaderArgs = DialogSectionArgs
+
+/** Arguments for the action area at the end of a dialog. */
+export type DialogFooterArgs = DialogSectionArgs
+
+/** Arguments for the heading that labels DialogContent. */
+export type DialogTitleArgs = WithChildren<IntrinsicElements['h2'] & {
+	/** Additional CSS classes. */
+	class?: string
+}>
+
+/** Arguments for the text that describes DialogContent. */
+export type DialogDescriptionArgs = WithChildren<IntrinsicElements['p'] & {
+	/** Additional CSS classes. */
+	class?: string
+}>
+
+type DialogContextValue = {
+	close: (event?: Event) => void
+	contentId: string
+	descriptionId: string
+	modal: boolean
+	open: boolean
+	setContent: (element: HTMLDialogElement | null) => void
+	setOpen: (open: boolean, event?: Event) => void
+	setTrigger: (element: HTMLButtonElement | null) => void
+	titleId: string
+	triggerId: string
+}
+
+const DialogContext = context<DialogContextValue | null>(null)
+
+const dialog = () => {
+	const value = DialogContext()
+	if (!value) throw new Error('Dialog component must be used within Dialog.')
+	return value
+}
+
+const outside = (element: HTMLDialogElement, event: MouseEvent) => {
+	const rect = element.getBoundingClientRect()
+	return event.clientX < rect.left ||
+		event.clientX > rect.right ||
+		event.clientY < rect.top ||
+		event.clientY > rect.bottom
+}
+
+const DialogRoot: Stateful<DialogArgs> = function* ({ defaultOpen, open }) {
+	const dialogId = id('dialog')
+	const watched = new WeakSet<HTMLDialogElement>()
+	let content: HTMLDialogElement | null = null
+	let modal = true
+	let onOpenChange: DialogArgs['onOpenChange']
+	let syncing = false
+	let trigger: HTMLButtonElement | null = null
+	const state = controlled<boolean>(this, {
+		fallback: Boolean(open ?? defaultOpen),
+		onChange: (next, event) => onOpenChange?.(next, event),
+	})
+	let current = state.value
+
+	const focusTrigger = () => queueMicrotask(() => trigger?.focus())
+
+	const sync = () => queueMicrotask(() => {
+		if (!content) return
+		syncing = true
+
+		try {
+			if (current && !content.open) {
+				if (modal) content.showModal()
+				else content.show()
+			} else if (!current && content.open) {
+				content.close()
+			}
+		} finally {
+			queueMicrotask(() => syncing = false)
+		}
+	})
+
+	const setOpen = (next: boolean, event?: Event) => {
+		if (next === current) return
+		state.set(next, event)
+		current = state.value
+		sync()
+		if (!next) focusTrigger()
+	}
+
+	const setContent = (element: HTMLDialogElement | null) => {
+		content = element
+		if (!element || watched.has(element)) return
+
+		watched.add(element)
+		element.addEventListener('close', event => {
+			if (syncing || current === false) return
+			state.accept(false, event)
+			current = state.value
+			focusTrigger()
+		}, { signal: this.signal })
+	}
+
+	for (const args of this) {
+		modal = args.modal !== false
+		onOpenChange = args.onOpenChange
+		current = state.sync(args.open == null ? undefined : Boolean(args.open))
+
+		DialogContext({
+			close: event => setOpen(false, event),
+			contentId: `${dialogId}-content`,
+			descriptionId: `${dialogId}-description`,
+			modal,
+			open: current,
+			setContent,
+			setOpen,
+			setTrigger: element => trigger = element,
+			titleId: `${dialogId}-title`,
+			triggerId: `${dialogId}-trigger`,
+		})
+
+		sync()
+		yield <>{args.children}</>
+	}
+}
+
+
+/** Unstyled root provider for a native dialog. */
+const Dialog: Stateless<DialogArgs> = ({
+	children,
+	class: classes,
+	'data-slot': slot = 'dialog',
+	defaultOpen,
+	modal,
+	onOpenChange,
+	open,
+	...attrs
+}) => (
+	<DialogRoot
+		{...rootAttrs(attrs)}
+		defaultOpen={defaultOpen}
+		modal={modal}
+		onOpenChange={onOpenChange}
+		open={open}
+		attr:class={classes}
+		attr:data-slot={slot}
+	>
+		{children}
+	</DialogRoot>
+)
+
+/** Unstyled button that opens the nearest Dialog. */
+const DialogTrigger: Stateless<DialogTriggerArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-trigger',
+	disabled,
+	id,
+	ref,
+	type = 'button',
+	'set:onclick': onClick,
+	...attrs
+}) => {
+	const ctx = dialog()
+
+	return (
+		<button
+			{...attrs}
+			{...triggerAttrs({
+				controls: ctx.contentId,
+				expanded: ctx.open,
+				id,
+				open: ctx.open,
+				ref,
+				setTrigger: ctx.setTrigger,
+				triggerId: ctx.triggerId,
+			})}
+			data-slot={slot}
+			disabled={disabled}
+			type={type}
+			set:onclick={(event: Event) => {
+				callHandler(onClick, event)
+				if (event.defaultPrevented || disabled) return
+				ctx.setOpen(true, event)
+			}}
+		>
+			{children}
+		</button>
+	)
+}
+
+/** Unstyled button that closes the nearest Dialog. */
+const DialogClose: Stateless<DialogCloseArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-close',
+	disabled,
+	type = 'button',
+	'set:onclick': onClick,
+	...attrs
+}) => {
+	const ctx = dialog()
+
+	return (
+		<button
+			{...attrs}
+			data-slot={slot}
+			disabled={disabled}
+			type={type}
+			set:onclick={(event: Event) => {
+				callHandler(onClick, event)
+				if (event.defaultPrevented || disabled) return
+				ctx.close(event)
+			}}
+		>
+			{children}
+		</button>
+	)
+}
+
+/** Unstyled native dialog panel. */
+const DialogContent: Stateless<DialogContentArgs> = ({
+	children,
+	class: classes,
+	'data-slot': slot = 'dialog-content',
+	onEscapeKeyDown,
+	onPointerDownOutside,
+	ref,
+	'aria-describedby': describedBy,
+	'aria-labelledby': labelledBy,
+	'set:oncancel': onCancel,
+	'set:onclick': onClick,
+	'set:onkeydown': onKeydown,
+	...attrs
+}) => {
+	const ctx = dialog()
+	const reference = (element: HTMLDialogElement | null) => {
+		ctx.setContent(element)
+		callRef(ref, element)
+	}
+
+	return (
+		<dialog
+			{...attrs}
+			aria-describedby={describedBy ?? ctx.descriptionId}
+			aria-labelledby={labelledBy ?? ctx.titleId}
+			aria-modal={ctx.modal ? 'true' : undefined}
+			class={classes}
+			data-slot={slot}
+			data-state={ctx.open ? 'open' : 'closed'}
+			id={ctx.contentId}
+			ref={reference}
+			set:oncancel={(event: Event) => {
+				callHandler(onCancel, event)
+				if (event.defaultPrevented) return
+				if (event.cancelable) event.preventDefault()
+				ctx.close(event)
+			}}
+			set:onclick={(event: MouseEvent) => {
+				callHandler(onClick, event)
+				if (event.defaultPrevented) return
+				const target = event.currentTarget as HTMLDialogElement
+				if (event.target === target && outside(target, event)) {
+					onPointerDownOutside?.(event)
+					if (!event.defaultPrevented) ctx.close(event)
+				}
+			}}
+			set:onkeydown={(event: KeyboardEvent) => {
+				if (event.key === 'Escape') onEscapeKeyDown?.(event)
+				callHandler(onKeydown, event)
+			}}
+		>
+			{children}
+			{/* Portal outlet for top-layer UI that must stay interactive while
+			    this dialog is modal (everything outside the dialog subtree is
+			    inert). The Toaster re-homes its viewport here through a second
+			    render root; `skip` keeps that root's DOM out of this tree's
+			    reconciliation, the `key` keeps sibling churn in the dialog's
+			    children from ever claiming this element (unkeyed matching
+			    pairs by tag name alone), and display:contents keeps the
+			    outlet out of the panel's layout. */}
+			<div data-slot="dialog-portal" key="dialog-portal" skip style="display:contents" />
+		</dialog>
+	)
+}
+
+/** Unstyled header area for dialog title and description. */
+const DialogHeader: Stateless<DialogHeaderArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-header',
+	...attrs
+}) => (
+	<div {...attrs} data-slot={slot}>
+		{children}
+	</div>
+)
+
+/** Unstyled footer area for dialog actions. */
+const DialogFooter: Stateless<DialogFooterArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-footer',
+	...attrs
+}) => (
+	<div {...attrs} data-slot={slot}>
+		{children}
+	</div>
+)
+
+/** Accessible title for DialogContent. */
+const DialogTitle: Stateless<DialogTitleArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-title',
+	id,
+	...attrs
+}) => {
+	const ctx = DialogContext()
+
+	return (
+		<h2 {...attrs} data-slot={slot} id={id ?? ctx?.titleId}>
+			{children}
+		</h2>
+	)
+}
+
+/** Accessible description for DialogContent. */
+const DialogDescription: Stateless<DialogDescriptionArgs> = ({
+	children,
+	'data-slot': slot = 'dialog-description',
+	id,
+	...attrs
+}) => {
+	const ctx = DialogContext()
+
+	return (
+		<p {...attrs} data-slot={slot} id={id ?? ctx?.descriptionId}>
+			{children}
+		</p>
+	)
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+}

package/src/direction.tsx

@@ -0,0 +1,45 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import type { OmitArg } from './utils'
+import { statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+
+/** Logical text direction inherited by direction-aware components. */
+export type Direction = 'ltr' | 'rtl'
+
+/** Arguments for a provider that owns direction context and the host `dir`. */
+export type DirectionProviderArgs = WithChildren<OmitArg<IntrinsicElements['div'], 'dir'> & {
+	/** Text direction. */
+	dir?: Direction
+}>
+
+/** Direction inherited by direction-aware components. */
+export const DirectionContext = context<Direction>('ltr')
+
+type DirectionRootArgs = WithChildren<{
+	dir: Direction
+}>
+
+const DirectionRoot: Stateful<DirectionRootArgs> = function* () {
+	for (const { children, dir } of this) {
+		DirectionContext(dir)
+		yield <>{children}</>
+	}
+}
+
+/** Unstyled provider that sets direction context and an inherited HTML `dir` attribute. */
+const DirectionProvider: Stateless<DirectionProviderArgs> = ({
+	children,
+	dir = 'ltr',
+	...attrs
+}) => (
+	<DirectionRoot
+		{...rootAttrs(attrs)}
+		dir={dir}
+		attr:data-slot="direction-provider"
+		attr:dir={dir}
+	>
+		{children}
+	</DirectionRoot>
+)
+
+export { DirectionProvider }

package/src/drawer.tsx

@@ -0,0 +1,251 @@
+import type { Stateful, Stateless } from 'ajo'
+import { callRef, move, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import { clx, withSlot } from './utils'
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+	type DialogArgs,
+	type DialogCloseArgs,
+	type DialogContentArgs,
+	type DialogDescriptionArgs,
+	type DialogFooterArgs,
+	type DialogHeaderArgs,
+	type DialogTitleArgs,
+	type DialogTriggerArgs,
+} from './dialog'
+
+/** Viewport edge from which a Drawer panel enters. */
+export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'
+
+/** Arguments for the Drawer state provider and entry edge. */
+export type DrawerArgs = DialogArgs & {
+	/** Edge where the drawer enters from. */
+	side?: DrawerSide
+}
+/** Arguments for a button that opens its nearest Drawer. */
+export type DrawerTriggerArgs = DialogTriggerArgs
+/** Arguments for a button that closes its nearest Drawer. */
+export type DrawerCloseArgs = DialogCloseArgs
+/** Arguments for the Drawer panel, drag handle, and default close control. */
+export type DrawerContentArgs = DialogContentArgs & {
+	closeClass?: string
+	/** Icon class for the default close button. */
+	closeIconClass?: string
+	/** Accessible label for the default close button. */
+	closeLabel?: string
+	handle?: boolean
+	handleClass?: string
+	/** Accessible label for the drag handle. */
+	handleLabel?: string
+	showCloseButton?: boolean
+	sideClass?: Partial<Record<DrawerSide, string>>
+}
+/** Arguments for the title and description area of a Drawer. */
+export type DrawerHeaderArgs = DialogHeaderArgs
+/** Arguments for the action area at the end of a Drawer. */
+export type DrawerFooterArgs = DialogFooterArgs
+/** Arguments for the heading that labels DrawerContent. */
+export type DrawerTitleArgs = DialogTitleArgs
+/** Arguments for the text that describes DrawerContent. */
+export type DrawerDescriptionArgs = DialogDescriptionArgs
+
+type DrawerContextValue = {
+	drag: ReturnType<typeof move>
+	side: DrawerSide
+	setPanel: (element: HTMLDialogElement | null) => void
+}
+
+const DrawerContext = context<DrawerContextValue>({
+	drag: {
+		start: () => false,
+		get active() {
+			return false
+		},
+	},
+	side: 'right',
+	setPanel: () => {},
+})
+
+const DrawerRoot: Stateful<DrawerArgs> = function* () {
+	let side: DrawerSide = 'right'
+	let offset = 0
+	let panel: HTMLDialogElement | null = null
+
+	const reset = () => {
+		if (!panel) return
+		panel.style.transform = ''
+		panel.style.transition = ''
+		panel.style.willChange = ''
+	}
+
+	const movePanel = (next: number) => {
+		if (!panel) return
+		panel.style.transition = 'none'
+		panel.style.transform = transform(next, side)
+		panel.style.willChange = 'transform'
+	}
+
+	const drag = move(this, {
+		onStart: () => {
+			offset = 0
+		},
+		onMove: data => {
+			const delta = side === 'left' || side === 'right' ? data.dx : data.dy
+			offset = Math.max(0, side === 'left' || side === 'top' ? -delta : delta)
+			movePanel(offset)
+		},
+		onEnd: data => {
+			reset()
+			if (!data.canceled && offset > 72 && panel?.open) panel.close()
+		},
+	})
+
+	for (const args of this) {
+		side = args.side ?? 'right'
+		DrawerContext({
+			drag,
+			side,
+			setPanel: element => panel = element,
+		})
+
+		yield (
+			<Dialog
+				data-slot="drawer-dialog"
+				defaultOpen={args.defaultOpen}
+				modal={args.modal}
+				onOpenChange={args.onOpenChange}
+				open={args.open}
+			>
+				{args.children}
+			</Dialog>
+		)
+	}
+}
+
+
+/** Unstyled edge panel provider built on native Dialog behavior. */
+const Drawer: Stateless<DrawerArgs> = ({
+	children,
+	class: classes,
+	defaultOpen,
+	modal,
+	onOpenChange,
+	open,
+	side,
+	...attrs
+}) => (
+	<DrawerRoot
+		{...rootAttrs(attrs)}
+		defaultOpen={defaultOpen}
+		modal={modal}
+		onOpenChange={onOpenChange}
+		open={open}
+		side={side}
+		attr:class={classes}
+		attr:data-slot="drawer"
+	>
+		{children}
+	</DrawerRoot>
+)
+
+/** Unstyled button that opens the nearest Drawer. */
+const DrawerTrigger: Stateless<DrawerTriggerArgs> = withSlot<DrawerTriggerArgs>(DialogTrigger, 'drawer-trigger')
+
+/** Unstyled button that closes the nearest Drawer. */
+const DrawerClose: Stateless<DrawerCloseArgs> = withSlot<DrawerCloseArgs>(DialogClose, 'drawer-close')
+
+const transform = (offset: number, side: DrawerSide) => {
+	if (side === 'left') return `translateX(${-offset}px)`
+	if (side === 'right') return `translateX(${offset}px)`
+	if (side === 'top') return `translateY(${-offset}px)`
+	return `translateY(${offset}px)`
+}
+
+/** Unstyled native Drawer panel with optional drag and close controls. */
+const DrawerContent: Stateless<DrawerContentArgs> = ({
+	children,
+	class: classes,
+	closeClass,
+	closeIconClass,
+	closeLabel = 'Close',
+	handle = false,
+	handleClass,
+	handleLabel = 'Drag to close',
+	ref,
+	showCloseButton = true,
+	sideClass,
+	...attrs
+}) => {
+	const drawer = DrawerContext()
+	const { side } = drawer
+	let panel: HTMLDialogElement | null = null
+
+	const reference = (element: HTMLDialogElement | null) => {
+		panel = element
+		drawer.setPanel(element)
+		callRef(ref, element)
+	}
+
+	return (
+		<DialogContent
+			{...attrs}
+			class={clx(sideClass?.[side], classes)}
+			data-side={side}
+			data-slot="drawer-content"
+			ref={reference}
+		>
+			{handle ? (
+				<div
+					aria-label={handleLabel}
+					class={handleClass}
+					data-slot="drawer-handle"
+					role="button"
+					tabIndex={0}
+					set:onkeydown={(event: KeyboardEvent) => {
+						if ((event.key === 'Enter' || event.key === ' ') && panel?.open) {
+							event.preventDefault()
+							panel.close()
+						}
+					}}
+					set:onpointerdown={(event: PointerEvent) => drawer.drag.start(event)}
+				/>
+			) : null}
+			{children}
+			{showCloseButton ? (
+				<DrawerClose aria-label={closeLabel} class={closeClass}>
+					<span aria-hidden="true" class={closeIconClass} data-slot="drawer-close-icon" />
+				</DrawerClose>
+			) : null}
+		</DialogContent>
+	)
+}
+
+/** Unstyled header area for Drawer title and description. */
+const DrawerHeader: Stateless<DrawerHeaderArgs> = withSlot<DrawerHeaderArgs>(DialogHeader, 'drawer-header')
+
+/** Unstyled footer area for Drawer actions. */
+const DrawerFooter: Stateless<DrawerFooterArgs> = withSlot<DrawerFooterArgs>(DialogFooter, 'drawer-footer')
+
+/** Accessible heading for DrawerContent. */
+const DrawerTitle: Stateless<DrawerTitleArgs> = withSlot<DrawerTitleArgs>(DialogTitle, 'drawer-title')
+
+/** Accessible description for DrawerContent. */
+const DrawerDescription: Stateless<DrawerDescriptionArgs> = withSlot<DrawerDescriptionArgs>(DialogDescription, 'drawer-description')
+
+export {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+}