ajo-ui 0.1.0

package/package.json

@@ -0,0 +1,250 @@
+{
+  "name": "ajo-ui",
+  "version": "0.1.0",
+  "description": "Unstyled accessible UI components for Ajo",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./src/utils.ts",
+      "default": "./dist/utils.js",
+      "import": "./dist/utils.js"
+    },
+    "./accordion": {
+      "types": "./src/accordion.tsx",
+      "default": "./dist/accordion.js",
+      "import": "./dist/accordion.js"
+    },
+    "./avatar": {
+      "types": "./src/avatar.tsx",
+      "default": "./dist/avatar.js",
+      "import": "./dist/avatar.js"
+    },
+    "./calendar": {
+      "types": "./src/calendar.tsx",
+      "default": "./dist/calendar.js",
+      "import": "./dist/calendar.js"
+    },
+    "./carousel": {
+      "types": "./src/carousel.tsx",
+      "default": "./dist/carousel.js",
+      "import": "./dist/carousel.js"
+    },
+    "./chart": {
+      "types": "./src/chart.tsx",
+      "default": "./dist/chart.js",
+      "import": "./dist/chart.js"
+    },
+    "./checkbox": {
+      "types": "./src/checkbox.tsx",
+      "default": "./dist/checkbox.js",
+      "import": "./dist/checkbox.js"
+    },
+    "./checkbox-group": {
+      "types": "./src/checkbox-group.tsx",
+      "default": "./dist/checkbox-group.js",
+      "import": "./dist/checkbox-group.js"
+    },
+    "./collapsible": {
+      "types": "./src/collapsible.tsx",
+      "default": "./dist/collapsible.js",
+      "import": "./dist/collapsible.js"
+    },
+    "./command": {
+      "types": "./src/command.tsx",
+      "default": "./dist/command.js",
+      "import": "./dist/command.js"
+    },
+    "./context-menu": {
+      "types": "./src/context-menu.tsx",
+      "default": "./dist/context-menu.js",
+      "import": "./dist/context-menu.js"
+    },
+    "./data-table": {
+      "types": "./src/data-table.tsx",
+      "default": "./dist/data-table.js",
+      "import": "./dist/data-table.js"
+    },
+    "./dialog": {
+      "types": "./src/dialog.tsx",
+      "default": "./dist/dialog.js",
+      "import": "./dist/dialog.js"
+    },
+    "./direction": {
+      "types": "./src/direction.tsx",
+      "default": "./dist/direction.js",
+      "import": "./dist/direction.js"
+    },
+    "./drawer": {
+      "types": "./src/drawer.tsx",
+      "default": "./dist/drawer.js",
+      "import": "./dist/drawer.js"
+    },
+    "./field": {
+      "types": "./src/field.tsx",
+      "default": "./dist/field.js",
+      "import": "./dist/field.js"
+    },
+    "./input-date": {
+      "types": "./src/input-date.tsx",
+      "default": "./dist/input-date.js",
+      "import": "./dist/input-date.js"
+    },
+    "./input-group": {
+      "types": "./src/input-group.tsx",
+      "default": "./dist/input-group.js",
+      "import": "./dist/input-group.js"
+    },
+    "./input-otp": {
+      "types": "./src/input-otp.tsx",
+      "default": "./dist/input-otp.js",
+      "import": "./dist/input-otp.js"
+    },
+    "./menu": {
+      "types": "./src/menu.tsx",
+      "default": "./dist/menu.js",
+      "import": "./dist/menu.js"
+    },
+    "./menubar": {
+      "types": "./src/menubar.tsx",
+      "default": "./dist/menubar.js",
+      "import": "./dist/menubar.js"
+    },
+    "./message-scroller": {
+      "types": "./src/message-scroller.tsx",
+      "default": "./dist/message-scroller.js",
+      "import": "./dist/message-scroller.js"
+    },
+    "./navigation-menu": {
+      "types": "./src/navigation-menu.tsx",
+      "default": "./dist/navigation-menu.js",
+      "import": "./dist/navigation-menu.js"
+    },
+    "./popover": {
+      "types": "./src/popover.tsx",
+      "default": "./dist/popover.js",
+      "import": "./dist/popover.js"
+    },
+    "./progress": {
+      "types": "./src/progress.tsx",
+      "default": "./dist/progress.js",
+      "import": "./dist/progress.js"
+    },
+    "./radio-group": {
+      "types": "./src/radio-group.tsx",
+      "default": "./dist/radio-group.js",
+      "import": "./dist/radio-group.js"
+    },
+    "./resizable": {
+      "types": "./src/resizable.tsx",
+      "default": "./dist/resizable.js",
+      "import": "./dist/resizable.js"
+    },
+    "./select": {
+      "types": "./src/select.tsx",
+      "default": "./dist/select.js",
+      "import": "./dist/select.js"
+    },
+    "./sidebar": {
+      "types": "./src/sidebar.tsx",
+      "default": "./dist/sidebar.js",
+      "import": "./dist/sidebar.js"
+    },
+    "./slider": {
+      "types": "./src/slider.tsx",
+      "default": "./dist/slider.js",
+      "import": "./dist/slider.js"
+    },
+    "./switch": {
+      "types": "./src/switch.tsx",
+      "default": "./dist/switch.js",
+      "import": "./dist/switch.js"
+    },
+    "./tabs": {
+      "types": "./src/tabs.tsx",
+      "default": "./dist/tabs.js",
+      "import": "./dist/tabs.js"
+    },
+    "./toast": {
+      "types": "./src/toast.tsx",
+      "default": "./dist/toast.js",
+      "import": "./dist/toast.js"
+    },
+    "./toggle": {
+      "types": "./src/toggle.tsx",
+      "default": "./dist/toggle.js",
+      "import": "./dist/toggle.js"
+    },
+    "./toggle-group": {
+      "types": "./src/toggle-group.tsx",
+      "default": "./dist/toggle-group.js",
+      "import": "./dist/toggle-group.js"
+    },
+    "./toolbar": {
+      "types": "./src/toolbar.tsx",
+      "default": "./dist/toolbar.js",
+      "import": "./dist/toolbar.js"
+    },
+    "./tooltip": {
+      "types": "./src/tooltip.tsx",
+      "default": "./dist/tooltip.js",
+      "import": "./dist/tooltip.js"
+    },
+    "./virtual-list": {
+      "types": "./src/virtual-list.tsx",
+      "default": "./dist/virtual-list.js",
+      "import": "./dist/virtual-list.js"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "1.8.0",
+    "@tanstack/table-core": "9.0.0-beta.47",
+    "@tanstack/virtual-core": "3.17.4",
+    "ajo-cloves": "^0.1.0"
+  },
+  "peerDependencies": {
+    "ajo": "^0.1.35"
+  },
+  "devDependencies": {
+    "ajo": "0.1.35"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "keywords": [
+    "ajo",
+    "ui",
+    "components",
+    "accessibility",
+    "headless"
+  ],
+  "author": "Cristian Falcone",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cristianfalcone/ajo-kit.git",
+    "directory": "packages/ajo-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/cristianfalcone/ajo-kit/issues"
+  },
+  "homepage": "https://github.com/cristianfalcone/ajo-kit/tree/main/packages/ajo-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm -w exec tsx scripts/package-build.ts ajo-ui",
+    "test": "pnpm -w exec vitest run packages/ajo-ui/tests",
+    "test:bundle": "pnpm -w exec tsx packages/ajo-ui/tests/bundle.ts"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,261 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import { controlled, listen, roving, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import type { FixedArgs, OmitArg } from './utils'
+import { strings } from './utils'
+import { Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleTrigger } from './collapsible'
+
+/** Selection model supported by an Accordion root. */
+export type AccordionType = 'multiple' | 'single'
+
+type AccordionSharedArgs = WithChildren<OmitArg<IntrinsicElements['div'], 'onchange'> & {
+	/** Disable every accordion item. */
+	disabled?: boolean
+}> & FixedArgs<'onchange'>
+
+/** Arguments for a single-open Accordion. */
+export type AccordionSingleArgs = AccordionSharedArgs & {
+	/** Allow the open item to close. */
+	collapsible?: boolean
+	/** Initial open item for uncontrolled usage. */
+	defaultValue?: string
+	/** Single-open accordion mode. */
+	type?: 'single'
+	/** Controlled open item. */
+	value?: string
+	/** Called whenever the open item changes. */
+	onValueChange?: (value: string, event?: Event) => void
+}
+
+/** Arguments for an Accordion that may keep several items open. */
+export type AccordionMultipleArgs = AccordionSharedArgs & {
+	/** Initial open items for uncontrolled usage. */
+	defaultValue?: string[]
+	/** Multiple-open accordion mode. */
+	type: 'multiple'
+	/** Controlled open items. */
+	value?: string[]
+	/** Called whenever the open items change. */
+	onValueChange?: (value: string[], event?: Event) => void
+}
+
+/** Public arguments accepted by the Accordion root. */
+export type AccordionArgs = AccordionMultipleArgs | AccordionSingleArgs
+
+/** Arguments for one value-bearing Accordion item. */
+export type AccordionItemArgs = WithChildren<OmitArg<IntrinsicElements['details'], 'open'> & {
+	/** Stable item value used by the parent accordion. */
+	value: string
+	/** Disable this item. */
+	disabled?: boolean
+}> & FixedArgs<'open'>
+
+/** Arguments for an Accordion item's summary trigger. */
+export type AccordionTriggerArgs = WithChildren<IntrinsicElements['summary']>
+
+/** Arguments for an Accordion item's collapsible panel. */
+export type AccordionContentArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Classes for an inner content wrapper. */
+	innerClass?: string
+}>
+
+type AccordionRootArgs = WithChildren<{
+	collapsible?: boolean
+	defaultValue?: string | string[]
+	disabled?: boolean
+	onValueChange?: ((value: string, event?: Event) => void) | ((value: string[], event?: Event) => void)
+	type: AccordionType
+	value?: string | string[]
+}>
+
+type AccordionContextValue = {
+	collapsible: boolean
+	disabled: boolean
+	isOpen: (value: string) => boolean
+	toggle: (value: string, event?: Event) => void
+	type: AccordionType
+}
+
+const AccordionContext = context<AccordionContextValue | null>(null)
+
+const sameArray = (first: string[], second: string[]) =>
+	first.length === second.length && first.every((value, index) => value === second[index])
+
+const AccordionRoot: Stateful<AccordionRootArgs> = function* ({ defaultValue, type, value }) {
+	let collapsible = false
+	let disabled = false
+	let onValueChange: AccordionArgs['onValueChange']
+	let mode: AccordionType = type
+	const multipleState = controlled<string[]>(this, {
+		fallback: type === 'multiple' ? strings(value ?? defaultValue) : [],
+		onChange: (next, event) => {
+			const notify = onValueChange as ((value: string[], event?: Event) => void) | undefined
+			notify?.(next, event)
+		},
+	})
+	const singleState = controlled<string>(this, {
+		fallback: type === 'single' ? String(value ?? defaultValue ?? '') : '',
+		onChange: (next, event) => {
+			const notify = onValueChange as ((value: string, event?: Event) => void) | undefined
+			notify?.(next, event)
+		},
+	})
+	let multiple = multipleState.value
+	let single = singleState.value
+
+	const isOpen = (itemValue: string) =>
+		mode === 'multiple' ? multiple.includes(itemValue) : single === itemValue
+
+	const setSingle = (next: string, event?: Event) => {
+		if (next === single) return
+		singleState.set(next, event)
+	}
+
+	const setMultiple = (next: string[], event?: Event) => {
+		if (sameArray(next, multiple)) return
+		multipleState.set(next, event)
+	}
+
+	const toggle = (itemValue: string, event?: Event) => {
+		if (disabled) return
+
+		if (mode === 'multiple') {
+			setMultiple(
+				multiple.includes(itemValue)
+					? multiple.filter(value => value !== itemValue)
+					: [...multiple, itemValue],
+				event,
+			)
+			return
+		}
+
+		if (single === itemValue) {
+			if (collapsible) setSingle('', event)
+			return
+		}
+
+		setSingle(itemValue, event)
+	}
+
+	const nav = roving(this, {
+		items: () => Array.from(this.querySelectorAll<HTMLElement>('[data-slot="accordion-trigger"]'))
+			.filter(trigger => trigger.getAttribute('aria-disabled') !== 'true' && trigger.offsetParent !== null),
+		onMove: target => target.focus(),
+	})
+
+	listen(this, 'keydown', (event: KeyboardEvent) => {
+		const target = event.target as HTMLElement | null
+		if (!target?.matches('[data-slot="accordion-trigger"]')) return
+
+		nav.handle(event)
+	})
+
+	for (const args of this) {
+		mode = args.type ?? 'single'
+		collapsible = mode === 'single' && Boolean((args as AccordionSingleArgs).collapsible)
+		disabled = Boolean(args.disabled)
+		onValueChange = args.onValueChange
+		multipleState.sync(mode === 'multiple' && args.value != null ? strings(args.value) : undefined)
+		singleState.sync(mode === 'single' && args.value != null ? String(args.value ?? '') : undefined)
+		multiple = mode === 'multiple' ? multipleState.value : []
+		single = mode === 'single' ? singleState.value : ''
+
+		AccordionContext({ collapsible, disabled, isOpen, toggle, type: mode })
+		yield <>{args.children}</>
+	}
+}
+
+
+/** Unstyled root provider for accordion state. */
+const Accordion: Stateless<AccordionArgs> = ({
+	children,
+	collapsible,
+	defaultValue,
+	disabled,
+	onValueChange,
+	type = 'single',
+	value,
+	...attrs
+}) => (
+	<AccordionRoot
+		{...rootAttrs(attrs)}
+		collapsible={collapsible === true}
+		defaultValue={defaultValue}
+		disabled={Boolean(disabled)}
+		onValueChange={onValueChange}
+		type={type}
+		value={value}
+		attr:data-slot="accordion"
+	>
+		{children}
+	</AccordionRoot>
+)
+
+/** Unstyled accordion section: a group-controlled collapsible details element. */
+const AccordionItem: Stateless<AccordionItemArgs> = ({
+	children,
+	disabled,
+	open: _open,
+	value,
+	...attrs
+}) => {
+	const accordion = AccordionContext()
+	const itemValue = String(value)
+	const opened = Boolean(accordion?.isOpen(itemValue))
+	const disabledFlag = Boolean(disabled ?? accordion?.disabled)
+
+	return (
+		<Collapsible
+			data-orientation="vertical"
+			data-slot="accordion-item"
+			data-value={value}
+			{...attrs}
+			disabled={disabledFlag}
+			onOpenChange={(_next: boolean, event?: Event) => accordion?.toggle(itemValue, event)}
+			open={opened}
+		>
+			{children}
+		</Collapsible>
+	)
+}
+
+/** Unstyled accordion heading trigger: a collapsible summary locked by group rules. */
+const AccordionTrigger: Stateless<AccordionTriggerArgs> = ({
+	children,
+	...attrs
+}) => {
+	const accordion = AccordionContext()
+	const item = CollapsibleContext()
+	const locked = Boolean(item?.open && accordion?.type === 'single' && !accordion.collapsible)
+
+	return (
+		<CollapsibleTrigger
+			data-orientation="vertical"
+			data-slot="accordion-trigger"
+			{...attrs}
+			locked={locked}
+		>
+			{children}
+		</CollapsibleTrigger>
+	)
+}
+
+/** Unstyled accordion panel content. */
+const AccordionContent: Stateless<AccordionContentArgs> = ({
+	children,
+	innerClass,
+	...attrs
+}) => (
+	<CollapsibleContent
+		data-orientation="vertical"
+		data-slot="accordion-content"
+		role="region"
+		{...attrs}
+	>
+		<div class={innerClass}>
+			{children}
+		</div>
+	</CollapsibleContent>
+)
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }