ajo-ui 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2022-2026, Cristian Falcone
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# ajo-ui
+
+Unstyled, accessible component families for Ajo applications.
+
+Components provide semantic markup, ARIA relationships, keyboard behavior,
+stable styling hooks, and controlled or uncontrolled state. Use them directly
+to build an application UI or a reusable theme.
+
+## Install
+
+```bash
+pnpm add ajo ajo-ui
+```
+
+`ajo-ui` requires `ajo ^0.1.35`.
+
+## Usage
+
+Import a component family from its subpath:
+
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'ajo-ui/accordion'
+import { Popover, PopoverContent, PopoverTrigger } from 'ajo-ui/popover'
+```
+
+The package root exports every component family:
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ajo-ui'
+```
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ajo-ui/tabs'
+
+export default () => (
+  <Tabs defaultValue="overview">
+    <TabsList aria-label="Project">
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="activity">Activity</TabsTrigger>
+    </TabsList>
+
+    <TabsContent value="overview">Project overview</TabsContent>
+    <TabsContent value="activity">Recent activity</TabsContent>
+  </Tabs>
+)
+```
+
+## Components
+
+| Group | Family subpaths |
+|---|---|
+| Foundations | `direction`, `field`, `input-group` |
+| Disclosure and layout | `accordion`, `collapsible`, `dialog`, `drawer`, `resizable`, `sidebar` |
+| Navigation and menus | `command`, `context-menu`, `menu`, `menubar`, `navigation-menu`, `tabs`, `toolbar` |
+| Inputs and selection | `calendar`, `checkbox`, `checkbox-group`, `input-date`, `input-otp`, `radio-group`, `select`, `slider`, `switch`, `toggle`, `toggle-group` |
+| Overlays and feedback | `popover`, `progress`, `toast`, `tooltip` |
+| Data and display | `avatar`, `carousel`, `chart`, `data-table`, `message-scroller`, `virtual-list` |
+
+## Component Utilities
+
+`ajo-ui/utils` provides helpers and types for custom components, themes, and
+adapters:
+
+```tsx
+import {
+  ariaChecked,
+  bool,
+  clx,
+  flag,
+  popupStyle,
+  stlx,
+  text,
+  triggerAttrs,
+  withSlot,
+} from 'ajo-ui/utils'
+import type {
+  CheckedState,
+  FixedArgs,
+  OmitArg,
+  PopupPlacement,
+  PopupPosition,
+  StyleInput,
+  StyleObject,
+  StyleValue,
+} from 'ajo-ui/utils'
+```
+
+| Area | Exports |
+|---|---|
+| Popup composition | `PopupPlacement`, `PopupPosition`, `triggerAttrs`, `popupStyle` |
+| Component adapters | `OmitArg`, `FixedArgs`, `withSlot` |
+| Checked state | `CheckedState`, `ariaChecked`, `syncCheckedState` |
+| Values and filtering | `bool`, `flag`, `text`, `strings`, `matchesTokens`, `defaultResultsLabel`, `resolveFilter`, `toNumber`, `emptyChildren` |
+| Classes and styles | `clx`, `stlx`, `StyleValue`, `StyleObject`, `StyleInput` |
+
+`OmitArg` removes named properties while preserving Ajo's open argument
+index. `FixedArgs` marks properties supplied by an adapter.
+
+## Styling
+
+Components render semantic elements, ARIA attributes, `data-slot` markers, and
+state attributes. Apply visual styles through `class`, family class maps, or
+state-aware class callbacks such as `dayClassName`.
+
+Boolean state attributes use `data-x="true"` when active. Common
+`data-state` values include `open`, `closed`, `checked`, `unchecked`,
+`active`, `inactive`, `on`, and `off`.
+
+## State
+
+Controlled and uncontrolled families use matching prop groups:
+
+- `value`, `defaultValue`, `onValueChange(value, event)`
+- `open`, `defaultOpen`, `onOpenChange(open, event)`
+- `checked`, `defaultChecked`, `onCheckedChange(checked, event)`
+
+## Localization and Direction
+
+User-visible and assistive-technology strings have English defaults and
+component args for replacement.
+
+`DirectionProvider` supplies the default text direction. Components with
+horizontal keyboard navigation also accept a `dir` override.
+
+Component-family subpaths and root imports are side-effect-free and
+tree-shakeable.

package/dist/accordion.js

@@ -0,0 +1,130 @@
+import { strings } from "./utils.js";
+import { Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleTrigger } from "./collapsible.js";
+import { controlled, listen, roving, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/accordion.tsx
+var AccordionContext = context(null);
+var sameArray = (first, second) => first.length === second.length && first.every((value, index) => value === second[index]);
+var AccordionRoot = function* ({ defaultValue, type, value }) {
+	let collapsible = false;
+	let disabled = false;
+	let onValueChange;
+	let mode = type;
+	const multipleState = controlled(this, {
+		fallback: type === "multiple" ? strings(value ?? defaultValue) : [],
+		onChange: (next, event) => {
+			onValueChange?.(next, event);
+		}
+	});
+	const singleState = controlled(this, {
+		fallback: type === "single" ? String(value ?? defaultValue ?? "") : "",
+		onChange: (next, event) => {
+			onValueChange?.(next, event);
+		}
+	});
+	let multiple = multipleState.value;
+	let single = singleState.value;
+	const isOpen = (itemValue) => mode === "multiple" ? multiple.includes(itemValue) : single === itemValue;
+	const setSingle = (next, event) => {
+		if (next === single) return;
+		singleState.set(next, event);
+	};
+	const setMultiple = (next, event) => {
+		if (sameArray(next, multiple)) return;
+		multipleState.set(next, event);
+	};
+	const toggle = (itemValue, 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("[data-slot=\"accordion-trigger\"]")).filter((trigger) => trigger.getAttribute("aria-disabled") !== "true" && trigger.offsetParent !== null),
+		onMove: (target) => target.focus()
+	});
+	listen(this, "keydown", (event) => {
+		if (!event.target?.matches("[data-slot=\"accordion-trigger\"]")) return;
+		nav.handle(event);
+	});
+	for (const args of this) {
+		mode = args.type ?? "single";
+		collapsible = mode === "single" && Boolean(args.collapsible);
+		disabled = Boolean(args.disabled);
+		onValueChange = args.onValueChange;
+		multipleState.sync(mode === "multiple" && args.value != null ? strings(args.value) : void 0);
+		singleState.sync(mode === "single" && args.value != null ? String(args.value ?? "") : void 0);
+		multiple = mode === "multiple" ? multipleState.value : [];
+		single = mode === "single" ? singleState.value : "";
+		AccordionContext({
+			collapsible,
+			disabled,
+			isOpen,
+			toggle,
+			type: mode
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled root provider for accordion state. */
+var Accordion = ({ children, collapsible, defaultValue, disabled, onValueChange, type = "single", value, ...attrs }) => /* @__PURE__ */ jsx(AccordionRoot, {
+	...statefulRootAttrs(attrs),
+	collapsible: collapsible === true,
+	defaultValue,
+	disabled: Boolean(disabled),
+	onValueChange,
+	type,
+	value,
+	"attr:data-slot": "accordion",
+	children
+});
+/** Unstyled accordion section: a group-controlled collapsible details element. */
+var AccordionItem = ({ 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 /* @__PURE__ */ jsx(Collapsible, {
+		"data-orientation": "vertical",
+		"data-slot": "accordion-item",
+		"data-value": value,
+		...attrs,
+		disabled: disabledFlag,
+		onOpenChange: (_next, event) => accordion?.toggle(itemValue, event),
+		open: opened,
+		children
+	});
+};
+/** Unstyled accordion heading trigger: a collapsible summary locked by group rules. */
+var AccordionTrigger = ({ children, ...attrs }) => {
+	const accordion = AccordionContext();
+	const item = CollapsibleContext();
+	const locked = Boolean(item?.open && accordion?.type === "single" && !accordion.collapsible);
+	return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		"data-orientation": "vertical",
+		"data-slot": "accordion-trigger",
+		...attrs,
+		locked,
+		children
+	});
+};
+/** Unstyled accordion panel content. */
+var AccordionContent = ({ children, innerClass, ...attrs }) => /* @__PURE__ */ jsx(CollapsibleContent, {
+	"data-orientation": "vertical",
+	"data-slot": "accordion-content",
+	role: "region",
+	...attrs,
+	children: /* @__PURE__ */ jsx("div", {
+		class: innerClass,
+		children
+	})
+});
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/avatar.js

@@ -0,0 +1,54 @@
+import { callHandler } from "ajo-cloves";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/avatar.tsx
+/** Unstyled avatar root that exposes image, fallback, and badge slots. */
+var Avatar = ({ children, size = "default", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-size": size,
+	"data-slot": "avatar",
+	children
+});
+/** Unstyled avatar image that hides itself after load errors. */
+var AvatarImage = ({ alt = "", decoding = "async", loading = "lazy", "set:onerror": onerror, "set:onload": onload, ...attrs }) => /* @__PURE__ */ jsx("img", {
+	...attrs,
+	alt,
+	"data-slot": "avatar-image",
+	decoding,
+	loading,
+	"set:onerror": (event) => {
+		if (event instanceof Event) {
+			event.currentTarget.hidden = true;
+			callHandler(onerror, event);
+		}
+	},
+	"set:onload": (event) => {
+		event.currentTarget.hidden = false;
+		callHandler(onload, event);
+	}
+});
+/** Unstyled fallback content for an Avatar. */
+var AvatarFallback = ({ children, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	"data-slot": "avatar-fallback",
+	children
+});
+/** Unstyled badge anchored to an Avatar. */
+var AvatarBadge = ({ children, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	"data-slot": "avatar-badge",
+	children
+});
+/** Unstyled container for a group of avatars. */
+var AvatarGroup = ({ children, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": "avatar-group",
+	children
+});
+/** Unstyled count for avatars omitted from a visible group. */
+var AvatarGroupCount = ({ children, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": "avatar-group-count",
+	children
+});
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/calendar.js

@@ -0,0 +1,2 @@
+import { n as CalendarDayButton, t as Calendar } from "./chunks/calendar-q8jZ8Cxr.js";
+export { Calendar, CalendarDayButton };

package/dist/carousel.js

@@ -0,0 +1,239 @@
+import { callHandler, clamp, listen, resize, scrolling, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/carousel.tsx
+/** Read the observable state and controls inherited from the nearest Carousel. */
+var CarouselContext = context(null);
+var CarouselPartsContext = context(null);
+var carousel = () => {
+	const value = CarouselContext();
+	if (!value) throw new Error("Carousel parts must be used within a <Carousel />");
+	return value;
+};
+var carouselParts = () => {
+	const value = CarouselPartsContext();
+	if (!value) throw new Error("Carousel parts must be used within a <Carousel />");
+	return value;
+};
+var axis = (orientation) => orientation === "horizontal" ? "x" : "y";
+var alignBlock = (orientation) => orientation === "vertical" ? "start" : "nearest";
+var alignInline = (orientation) => orientation === "horizontal" ? "start" : "nearest";
+var itemPosition = (item, orientation) => orientation === "horizontal" ? item.offsetLeft : item.offsetTop;
+var viewportPosition = (viewport, orientation) => orientation === "horizontal" ? viewport.scrollLeft : viewport.scrollTop;
+var viewportSize = (viewport, orientation) => orientation === "horizontal" ? viewport.clientWidth : viewport.clientHeight;
+var itemSize = (item, orientation) => orientation === "horizontal" ? item.offsetWidth : item.offsetHeight;
+var CarouselRoot = function* () {
+	let viewport = null;
+	let orientation = "horizontal";
+	let loop = false;
+	let selected = 0;
+	let count = 0;
+	let canScrollPrev = false;
+	let canScrollNext = false;
+	let apiReceiver;
+	const listeners = /* @__PURE__ */ new Map();
+	const items = () => viewport ? Array.from(viewport.querySelectorAll("[data-slot=\"carousel-item\"]")) : [];
+	const emit = (event) => {
+		for (const listener of listeners.get(event) ?? []) listener();
+	};
+	const syncScrollability = () => {
+		canScrollPrev = Boolean(count) && (loop || selected > 0);
+		canScrollNext = Boolean(count) && (loop || selected < count - 1);
+	};
+	const sync = () => {
+		const nodes = items();
+		const previousSelected = selected;
+		const previousCount = count;
+		const previousCanScrollPrev = canScrollPrev;
+		const previousCanScrollNext = canScrollNext;
+		count = nodes.length;
+		if (!viewport || !count) selected = 0;
+		else {
+			const center = viewportPosition(viewport, orientation) + viewportSize(viewport, orientation) / 2;
+			let nextSelected = 0;
+			let distance = Number.POSITIVE_INFINITY;
+			nodes.forEach((item, index) => {
+				const next = Math.abs(itemPosition(item, orientation) + itemSize(item, orientation) / 2 - center);
+				if (next < distance) {
+					distance = next;
+					nextSelected = index;
+				}
+			});
+			selected = nextSelected;
+		}
+		syncScrollability();
+		const changed = previousSelected !== selected || previousCount !== count || previousCanScrollPrev !== canScrollPrev || previousCanScrollNext !== canScrollNext;
+		if (previousCount !== count) emit("reInit");
+		if (previousSelected !== selected) emit("select");
+		return changed;
+	};
+	const invalidate = () => {
+		if (sync()) this.next();
+	};
+	const scroll = scrolling(this, {
+		target: () => viewport,
+		onScroll: invalidate
+	});
+	const size = resize(this, {
+		target: () => viewport,
+		onResize: invalidate
+	});
+	const scrollTo = (index) => {
+		const nodes = items();
+		if (!nodes.length) return;
+		nodes[clamp(index, 0, nodes.length - 1)]?.scrollIntoView({
+			behavior: "smooth",
+			block: alignBlock(orientation),
+			inline: alignInline(orientation)
+		});
+	};
+	const scrollPrev = () => {
+		if (!count) return;
+		scrollTo(selected <= 0 && loop ? count - 1 : selected - 1);
+	};
+	const scrollNext = () => {
+		if (!count) return;
+		scrollTo(selected >= count - 1 && loop ? 0 : selected + 1);
+	};
+	const api = {
+		canScrollNext: () => canScrollNext,
+		canScrollPrev: () => canScrollPrev,
+		off: (event, listener) => listeners.get(event)?.delete(listener),
+		on: (event, listener) => {
+			const set = listeners.get(event) ?? /* @__PURE__ */ new Set();
+			set.add(listener);
+			listeners.set(event, set);
+		},
+		reInit: () => {
+			this.next(sync);
+		},
+		scrollNext,
+		scrollPrev,
+		scrollSnapList: () => items().map((_, index) => index),
+		scrollTo,
+		selectedScrollSnap: () => selected
+	};
+	const setViewport = (element) => {
+		if (viewport === element) return;
+		viewport = element;
+		scroll.sync();
+		size.sync();
+		this.next(sync);
+	};
+	const parts = { setViewport };
+	const keydown = (event) => {
+		if (orientation === "horizontal") {
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				scrollNext();
+			}
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			scrollNext();
+		}
+	};
+	listen(this, "keydown", keydown);
+	for (const { children, opts, orientation: nextOrientation, setApi } of this) {
+		orientation = nextOrientation ?? (opts?.axis === "y" ? "vertical" : "horizontal");
+		loop = Boolean(opts?.loop);
+		syncScrollability();
+		if (setApi && setApi !== apiReceiver) {
+			apiReceiver = setApi;
+			setApi(api);
+		}
+		scroll.sync();
+		size.sync();
+		CarouselContext({
+			canScrollNext,
+			canScrollPrev,
+			count,
+			orientation,
+			scrollNext,
+			scrollPrev,
+			selected
+		});
+		CarouselPartsContext(parts);
+		yield /* @__PURE__ */ jsx(Fragment, { children });
+	}
+};
+/** Unstyled native scroll-snap carousel root. */
+var Carousel = ({ children, dir, opts, orientation, role = "region", setApi, ...attrs }) => /* @__PURE__ */ jsx(CarouselRoot, {
+	...statefulRootAttrs(attrs),
+	opts,
+	orientation,
+	setApi,
+	"attr:aria-roledescription": "carousel",
+	"attr:data-axis": axis(orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal")),
+	"attr:data-slot": "carousel",
+	"attr:dir": opts?.direction ?? dir,
+	"attr:role": role,
+	children
+});
+/** Unstyled scroll viewport and track for carousel slides. */
+var CarouselContent = ({ children, viewportClass, ...attrs }) => {
+	const state = carousel();
+	const parts = carouselParts();
+	return /* @__PURE__ */ jsx("div", {
+		class: viewportClass,
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			...attrs,
+			"data-axis": axis(state.orientation),
+			"data-slot": "carousel-track",
+			ref: parts.setViewport,
+			children
+		})
+	});
+};
+/** Unstyled carousel slide item. */
+var CarouselItem = ({ children, role = "group", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"aria-roledescription": "slide",
+	"data-slot": "carousel-item",
+	role,
+	children
+});
+/** Unstyled previous slide button. */
+var CarouselPrevious = ({ children, "aria-label": label = "Previous slide", disabled, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const { canScrollPrev, scrollPrev } = carousel();
+	const click = (event) => {
+		callHandler(onClick, event);
+		if (event.defaultPrevented || disabled || !canScrollPrev) return;
+		scrollPrev();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": label,
+		"data-slot": "carousel-previous",
+		disabled: disabled || !canScrollPrev,
+		"set:onclick": click,
+		type,
+		children
+	});
+};
+/** Unstyled next slide button. */
+var CarouselNext = ({ children, "aria-label": label = "Next slide", disabled, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const { canScrollNext, scrollNext } = carousel();
+	const click = (event) => {
+		callHandler(onClick, event);
+		if (event.defaultPrevented || disabled || !canScrollNext) return;
+		scrollNext();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": label,
+		"data-slot": "carousel-next",
+		disabled: disabled || !canScrollNext,
+		"set:onclick": click,
+		type,
+		children
+	});
+};
+//#endregion
+export { Carousel, CarouselContent, CarouselContext, CarouselItem, CarouselNext, CarouselPrevious };