@c9up/nebula 0.1.0

package/src/molecules/Resizable.ts

@@ -0,0 +1,166 @@
+/**
+ * Resizable — two panes with a draggable divider.
+ *
+ * `react-resizable-panels`, which shadcn wraps, supports arbitrarily nested
+ * groups with persisted layouts and collapse-to-zero. nebula ships the case
+ * that covers almost every use of it: two panes, one handle. Nesting two of
+ * these gets a three-pane layout, which is where the demand stops.
+ *
+ * The split is one number — the first pane's percentage — driving both panes
+ * through `flex-basis`. One source of truth means the two can never disagree,
+ * which is the failure mode of tracking a size per pane.
+ *
+ * Pointer capture on the handle is what keeps the drag alive when the pointer
+ * outruns it, which it will: the handle is a few pixels wide and the pointer
+ * moves faster than layout. Without capture the drag drops the moment the
+ * cursor leaves.
+ *
+ * The handle is also a real `separator` with `aria-valuenow`, and arrow keys
+ * move it. A resizable layout reachable only by dragging is unusable by
+ * keyboard, and this is the whole of what it takes to fix that.
+ */
+
+import { component, html, signal } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { GripVerticalIcon } from "../lib/icons.js";
+import { uid } from "../lib/id.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface ResizableProps {
+	first?: Slot;
+	second?: Slot;
+	direction?: "horizontal" | "vertical";
+	/** First pane's share at first render, in percent. Default `50`. */
+	defaultSize?: number;
+	minSize?: number;
+	maxSize?: number;
+	/** Show the grip dots on the handle. */
+	withHandle?: boolean;
+	class?: Reactive<string>;
+	onResize?: (percent: number) => void;
+}
+
+const KEYBOARD_STEP = 5;
+
+export const Resizable = component<ResizableProps>((props) => {
+	const horizontal = props.direction !== "vertical";
+	const min = props.minSize ?? 10;
+	const max = props.maxSize ?? 90;
+	const size = signal(clamp(props.defaultSize ?? 50, min, max));
+	const rootId = uid("resizable");
+
+	function setSize(percent: number): void {
+		const next = clamp(percent, min, max);
+		size(next);
+		props.onResize?.(next);
+	}
+
+	/**
+	 * Convert a pointer position into a percentage of the group.
+	 *
+	 * Measured against the group's own rect on every move rather than a rect
+	 * cached at drag start: the window can be resized mid-drag, and a stale rect
+	 * makes the divider drift away from the pointer.
+	 */
+	function percentAt(event: PointerEvent): number | null {
+		const root = document.getElementById(rootId);
+		if (root === null) return null;
+		const rect = root.getBoundingClientRect();
+		const span = horizontal ? rect.width : rect.height;
+		if (span === 0) return null;
+		const offset = horizontal
+			? event.clientX - rect.left
+			: event.clientY - rect.top;
+		return (offset / span) * 100;
+	}
+
+	function onPointerDown(event: PointerEvent): void {
+		const target = event.currentTarget;
+		if (!(target instanceof HTMLElement)) return;
+		event.preventDefault();
+		target.setPointerCapture(event.pointerId);
+
+		const onMove = (move: PointerEvent): void => {
+			const percent = percentAt(move);
+			if (percent !== null) setSize(percent);
+		};
+		const onUp = (): void => {
+			target.releasePointerCapture(event.pointerId);
+			target.removeEventListener("pointermove", onMove);
+			target.removeEventListener("pointerup", onUp);
+			target.removeEventListener("pointercancel", onUp);
+		};
+
+		target.addEventListener("pointermove", onMove);
+		target.addEventListener("pointerup", onUp);
+		target.addEventListener("pointercancel", onUp);
+	}
+
+	function onKeyDown(event: KeyboardEvent): void {
+		const back = horizontal ? "ArrowLeft" : "ArrowUp";
+		const forward = horizontal ? "ArrowRight" : "ArrowDown";
+
+		if (event.key === back) {
+			event.preventDefault();
+			setSize(size() - KEYBOARD_STEP);
+		} else if (event.key === forward) {
+			event.preventDefault();
+			setSize(size() + KEYBOARD_STEP);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			setSize(min);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			setSize(max);
+		}
+	}
+
+	return html`<div
+		data-slot="resizable-group"
+		id="${rootId}"
+		data-direction="${horizontal ? "horizontal" : "vertical"}"
+		class="${() =>
+			cn(
+				"flex h-full w-full",
+				horizontal ? "flex-row" : "flex-col",
+				read(props.class),
+			)}"
+	>
+		<div
+			data-slot="resizable-panel"
+			class="overflow-hidden"
+			style="${() => `flex: 0 0 ${size()}%`}"
+		>${slot(props.first)}</div>
+		<div
+			data-slot="resizable-handle"
+			role="separator"
+			tabindex="0"
+			aria-orientation="${horizontal ? "vertical" : "horizontal"}"
+			aria-valuemin="${min}"
+			aria-valuemax="${max}"
+			aria-valuenow="${() => Math.round(size())}"
+			aria-label="Resize panes"
+			class="${cn(
+				"bg-border relative flex shrink-0 items-center justify-center outline-none",
+				"focus-visible:ring-ring focus-visible:ring-1 focus-visible:ring-offset-1",
+				horizontal ? "w-px cursor-col-resize" : "h-px cursor-row-resize",
+			)}"
+			@pointerdown="${onPointerDown}"
+			@keydown="${onKeyDown}"
+		>
+			${
+				props.withHandle === true
+					? html`<span
+						class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border"
+					>${GripVerticalIcon({ class: "size-2.5" })}</span>`
+					: null
+			}
+		</div>
+		<div data-slot="resizable-panel" class="flex-1 overflow-hidden">${slot(props.second)}</div>
+	</div>`;
+});
+
+function clamp(value: number, min: number, max: number): number {
+	return Math.min(Math.max(value, min), max);
+}

package/src/molecules/Table.ts

@@ -0,0 +1,118 @@
+/**
+ * Table — the styled primitives for tabular data.
+ *
+ * Real table elements, not a grid of divs. A `<table>` gives screen readers
+ * row and column context for free ("row 3, Amount, 42"), and reproducing that
+ * over divs means hand-maintaining `role="grid"`, `aria-rowindex` and
+ * `aria-colindex` on every cell. The container's `overflow-x-auto` handles
+ * narrow viewports without touching the semantics.
+ *
+ * These are the presentation layer only. `DataTable` in `organisms/` adds
+ * sorting, selection and pagination on top of them.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+import type { StyledProps } from "../lib/styled.js";
+
+export type TableProps = StyledProps;
+
+export interface TableCellProps extends StyledProps {
+	colspan?: number;
+	rowspan?: number;
+	/** `col` for a column header, `row` for a row header. */
+	scope?: "col" | "row";
+	/** Reflected as `aria-sort` — set it on the column currently sorted. */
+	sort?: Reactive<"ascending" | "descending" | "none" | undefined>;
+	onClick?: (event: MouseEvent) => void;
+}
+
+export const Table = component<TableProps>((props) => {
+	return html`<div
+		data-slot="table-container"
+		class="relative w-full overflow-x-auto"
+	>
+		<table
+			data-slot="table"
+			class="${() => cn("w-full caption-bottom text-sm", read(props.class))}"
+		>${slot(props.children)}</table>
+	</div>`;
+});
+
+export const TableHeader = component<TableProps>((props) => {
+	return html`<thead
+		data-slot="table-header"
+		class="${() => cn("[&_tr]:border-b", read(props.class))}"
+	>${slot(props.children)}</thead>`;
+});
+
+export const TableBody = component<TableProps>((props) => {
+	return html`<tbody
+		data-slot="table-body"
+		class="${() => cn("[&_tr:last-child]:border-0", read(props.class))}"
+	>${slot(props.children)}</tbody>`;
+});
+
+export const TableFooter = component<TableProps>((props) => {
+	return html`<tfoot
+		data-slot="table-footer"
+		class="${() => cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", read(props.class))}"
+	>${slot(props.children)}</tfoot>`;
+});
+
+export interface TableRowProps extends StyledProps {
+	/** Reflected as `data-state="selected"`, which the row styling keys off. */
+	selected?: Reactive<boolean>;
+	onClick?: (event: MouseEvent) => void;
+}
+
+export const TableRow = component<TableRowProps>((props) => {
+	return html`<tr
+		data-slot="table-row"
+		data-state="${() => (read(props.selected) === true ? "selected" : undefined)}"
+		class="${() =>
+			cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				read(props.class),
+			)}"
+		@click="${props.onClick}"
+	>${slot(props.children)}</tr>`;
+});
+
+export const TableHead = component<TableCellProps>((props) => {
+	return html`<th
+		data-slot="table-head"
+		scope="${props.scope ?? "col"}"
+		colspan="${props.colspan}"
+		rowspan="${props.rowspan}"
+		aria-sort="${() => read(props.sort)}"
+		class="${() =>
+			cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				read(props.class),
+			)}"
+		@click="${props.onClick}"
+	>${slot(props.children)}</th>`;
+});
+
+export const TableCell = component<TableCellProps>((props) => {
+	return html`<td
+		data-slot="table-cell"
+		colspan="${props.colspan}"
+		rowspan="${props.rowspan}"
+		class="${() =>
+			cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				read(props.class),
+			)}"
+	>${slot(props.children)}</td>`;
+});
+
+export const TableCaption = component<TableProps>((props) => {
+	return html`<caption
+		data-slot="table-caption"
+		class="${() => cn("text-muted-foreground mt-4 text-sm", read(props.class))}"
+	>${slot(props.children)}</caption>`;
+});

package/src/molecules/Tabs.ts

@@ -0,0 +1,148 @@
+/**
+ * Tabs — one panel visible at a time.
+ *
+ * The WAI-ARIA tabs pattern in full: the tab list is a single tab stop with
+ * arrows moving between tabs, each tab points at its panel with
+ * `aria-controls`, and each panel points back with `aria-labelledby`.
+ *
+ * Activation is automatic — moving to a tab selects it — which is the right
+ * default when panels are already rendered and switching costs nothing. The
+ * `activateOnFocus: false` escape hatch exists for panels that fetch on
+ * display, where arrowing past three tabs would fire three requests.
+ *
+ * Hidden panels stay mounted so a form or a scroll position inside one
+ * survives a trip to another tab. `hidden` keeps them out of the layout and
+ * the accessibility tree, which is the behaviour `display: none` would give
+ * without also removing them from the DOM.
+ */
+
+import { component, html, onMount, onUnmount, signal } from "@c9up/aurora";
+import type { Child, Slot } from "../lib/children.js";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { type Reactive, read } from "../lib/props.js";
+import { type RovingFocus, rovingFocus } from "../primitives/rovingFocus.js";
+
+export interface TabItem {
+	value: string;
+	label: Child;
+	content: Slot;
+	disabled?: boolean;
+}
+
+export interface TabsProps {
+	items: readonly TabItem[];
+	/** Selected at first render. Defaults to the first enabled tab. */
+	defaultValue?: string;
+	orientation?: "horizontal" | "vertical";
+	/** Selecting follows focus. Default `true`. */
+	activateOnFocus?: boolean;
+	onValueChange?: (value: string) => void;
+	class?: Reactive<string>;
+	listClass?: Reactive<string>;
+}
+
+export const Tabs = component<TabsProps>((props) => {
+	const orientation = props.orientation ?? "horizontal";
+	const first = props.items.find((item) => item.disabled !== true);
+	const active = signal(props.defaultValue ?? first?.value ?? "");
+	const listId = uid("tabs-list");
+
+	// Ids are minted once per tab, up front, because a tab and its panel each
+	// need to name the other — one of them has to know both before rendering.
+	const ids = new Map<string, { tab: string; panel: string }>();
+	for (const item of props.items) {
+		ids.set(item.value, { tab: uid("tab"), panel: uid("tab-panel") });
+	}
+
+	function select(value: string): void {
+		if (active() === value) return;
+		active(value);
+		props.onValueChange?.(value);
+	}
+
+	let group: RovingFocus | undefined;
+	onMount(() => {
+		group = rovingFocus({
+			container: () => document.getElementById(listId),
+			itemSelector: "[role='tab']",
+			orientation,
+			onFocusChange: (item) => {
+				if (props.activateOnFocus === false) return;
+				const value = item.getAttribute("data-value");
+				if (value !== null) select(value);
+			},
+			onSelect: (item) => {
+				const value = item.getAttribute("data-value");
+				if (value !== null) select(value);
+			},
+		});
+		group.sync();
+	});
+	onUnmount(() => group?.destroy());
+
+	return html`<div
+		data-slot="tabs"
+		data-orientation="${orientation}"
+		class="${() => cn("flex gap-2", orientation === "vertical" ? "flex-row" : "flex-col", read(props.class))}"
+	>
+		<div
+			role="tablist"
+			data-slot="tabs-list"
+			id="${listId}"
+			aria-orientation="${orientation}"
+			class="${() =>
+				cn(
+					"bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px]",
+					orientation === "vertical" ? "flex-col" : "h-9",
+					read(props.listClass),
+				)}"
+		>
+			${props.items.map((item) => renderTab(item, ids, active, select))}
+		</div>
+		${props.items.map((item) => renderPanel(item, ids, active))}
+	</div>`;
+});
+
+function renderTab(
+	item: TabItem,
+	ids: ReadonlyMap<string, { tab: string; panel: string }>,
+	active: () => string,
+	select: (value: string) => void,
+): Child {
+	const id = ids.get(item.value);
+	const selected = (): boolean => active() === item.value;
+
+	return html`<button
+		type="button"
+		role="tab"
+		data-slot="tabs-trigger"
+		data-value="${item.value}"
+		data-state="${() => (selected() ? "active" : "inactive")}"
+		data-disabled="${item.disabled === true ? "" : undefined}"
+		id="${id?.tab}"
+		aria-selected="${() => (selected() ? "true" : "false")}"
+		aria-controls="${id?.panel}"
+		?disabled="${item.disabled === true}"
+		class="data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"
+		@click="${() => select(item.value)}"
+	>${item.label}</button>`;
+}
+
+function renderPanel(
+	item: TabItem,
+	ids: ReadonlyMap<string, { tab: string; panel: string }>,
+	active: () => string,
+): Child {
+	const id = ids.get(item.value);
+	return html`<div
+		role="tabpanel"
+		data-slot="tabs-content"
+		id="${id?.panel}"
+		aria-labelledby="${id?.tab}"
+		tabindex="0"
+		?hidden="${() => active() !== item.value}"
+		class="flex-1 outline-none"
+	>${slot(item.content)}</div>`;
+}

package/src/molecules/ToggleGroup.ts

@@ -0,0 +1,109 @@
+/**
+ * ToggleGroup — a row of toggles acting as one control.
+ *
+ * `type` decides both the behaviour and the semantics, and they have to move
+ * together. `"single"` is a radio group: one value, `role="radio"` on each
+ * button, and picking one clears the rest. `"multiple"` is a set of
+ * independent toggle buttons, each with `aria-pressed`.
+ *
+ * Getting that pairing wrong is the usual bug here — a single-select group
+ * announcing each option as "pressed" tells a screen-reader user they can turn
+ * several on at once.
+ *
+ * The classes come from `Toggle`'s own `cva`, so a grouped button and a
+ * standalone one cannot drift apart. Only the corner rounding is overridden,
+ * to weld the row into one shape.
+ */
+
+import { component, html, signal } from "@c9up/aurora";
+import { type ToggleVariants, toggleVariants } from "../atoms/Toggle.js";
+import type { Child } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read, readOr } from "../lib/props.js";
+
+export interface ToggleGroupItem {
+	value: string;
+	label: Child;
+	/** Required when the label is an icon alone. */
+	ariaLabel?: string;
+	disabled?: boolean;
+}
+
+export interface ToggleGroupProps {
+	items: readonly ToggleGroupItem[];
+	type?: "single" | "multiple";
+	defaultValue?: string | readonly string[];
+	variant?: Reactive<ToggleVariants["variant"]>;
+	size?: Reactive<ToggleVariants["size"]>;
+	disabled?: Reactive<boolean>;
+	class?: Reactive<string>;
+	onValueChange?: (value: readonly string[]) => void;
+}
+
+export const ToggleGroup = component<ToggleGroupProps>((props) => {
+	const type = props.type ?? "single";
+	const selected = signal<readonly string[]>(
+		props.defaultValue === undefined
+			? []
+			: typeof props.defaultValue === "string"
+				? [props.defaultValue]
+				: props.defaultValue,
+	);
+
+	function toggle(value: string): void {
+		const current = selected();
+		const next =
+			type === "single"
+				? current.includes(value)
+					? []
+					: [value]
+				: current.includes(value)
+					? current.filter((entry) => entry !== value)
+					: [...current, value];
+		selected(next);
+		props.onValueChange?.(next);
+	}
+
+	return html`<div
+		data-slot="toggle-group"
+		role="${type === "single" ? "radiogroup" : "group"}"
+		class="${() =>
+			cn(
+				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+				read(props.class),
+			)}"
+		data-variant="${() => readOr(props.variant, "default")}"
+	>
+		${props.items.map((item) => renderItem(item, props, type, selected, toggle))}
+	</div>`;
+});
+
+function renderItem(
+	item: ToggleGroupItem,
+	props: ToggleGroupProps,
+	type: "single" | "multiple",
+	selected: () => readonly string[],
+	toggle: (value: string) => void,
+): Child {
+	const on = (): boolean => selected().includes(item.value);
+
+	return html`<button
+		type="button"
+		data-slot="toggle-group-item"
+		data-state="${() => (on() ? "on" : "off")}"
+		data-value="${item.value}"
+		role="${type === "single" ? "radio" : undefined}"
+		aria-checked="${() => (type === "single" ? (on() ? "true" : "false") : undefined)}"
+		aria-pressed="${() => (type === "multiple" ? (on() ? "true" : "false") : undefined)}"
+		aria-label="${item.ariaLabel}"
+		?disabled="${() => item.disabled === true || readOr(props.disabled, false)}"
+		class="${() =>
+			toggleVariants({
+				variant: read(props.variant),
+				size: read(props.size),
+				class:
+					"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l aria-checked:bg-accent aria-checked:text-accent-foreground",
+			})}"
+		@click="${() => toggle(item.value)}"
+	>${item.label}</button>`;
+}

package/src/molecules/Typography.ts

@@ -0,0 +1,94 @@
+/**
+ * Typography — prose styles for content nebula does not otherwise own.
+ *
+ * shadcn documents these as copy-paste snippets rather than shipping them as
+ * components, which leaves every app to re-derive the same scale. They are
+ * cheap to ship and they are what keeps a marketing page, a changelog and an
+ * empty state reading as one product.
+ *
+ * `text-balance` on headings and `text-pretty` on body copy do the work here:
+ * they stop a two-word orphan on the last line of a heading and a single word
+ * ending a paragraph, which is most of what separates typeset text from text.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+import { type StyledProps, styledDiv } from "../lib/styled.js";
+
+export type TypographyProps = StyledProps;
+
+export const H1 = component<TypographyProps>((props) => {
+	return html`<h1
+		id="${props.id}"
+		class="${() =>
+			cn(
+				"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",
+				read(props.class),
+			)}"
+	>${slot(props.children)}</h1>`;
+});
+
+export const H2 = component<TypographyProps>((props) => {
+	return html`<h2
+		id="${props.id}"
+		class="${() =>
+			cn(
+				"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+				read(props.class),
+			)}"
+	>${slot(props.children)}</h2>`;
+});
+
+export const H3 = component<TypographyProps>((props) => {
+	return html`<h3
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 text-2xl font-semibold tracking-tight", read(props.class))}"
+	>${slot(props.children)}</h3>`;
+});
+
+export const H4 = component<TypographyProps>((props) => {
+	return html`<h4
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 text-xl font-semibold tracking-tight", read(props.class))}"
+	>${slot(props.children)}</h4>`;
+});
+
+export const P = component<TypographyProps>((props) => {
+	return html`<p
+		id="${props.id}"
+		class="${() => cn("leading-7 text-pretty [&:not(:first-child)]:mt-6", read(props.class))}"
+	>${slot(props.children)}</p>`;
+});
+
+export const Blockquote = component<TypographyProps>((props) => {
+	return html`<blockquote
+		id="${props.id}"
+		class="${() => cn("mt-6 border-l-2 pl-6 italic", read(props.class))}"
+	>${slot(props.children)}</blockquote>`;
+});
+
+export const InlineCode = component<TypographyProps>((props) => {
+	return html`<code
+		class="${() =>
+			cn(
+				"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+				read(props.class),
+			)}"
+	>${slot(props.children)}</code>`;
+});
+
+export const List = component<TypographyProps>((props) => {
+	return html`<ul
+		class="${() => cn("my-6 ml-6 list-disc [&>li]:mt-2", read(props.class))}"
+	>${slot(props.children)}</ul>`;
+});
+
+export const Lead = styledDiv(
+	"lead",
+	"text-muted-foreground text-xl text-pretty",
+);
+export const Large = styledDiv("large", "text-lg font-semibold");
+export const Small = styledDiv("small", "text-sm leading-none font-medium");
+export const Muted = styledDiv("muted", "text-muted-foreground text-sm");