@c9up/nebula 0.1.0

package/dist/molecules/Pagination.js

@@ -0,0 +1,144 @@
+/**
+ * Pagination — page links for a long list.
+ *
+ * The interesting part is `pageWindow`, which decides which page numbers to
+ * show. Rendering all of them breaks at a few hundred pages; the usual fix is
+ * a fixed window around the current page, which then jitters in width as you
+ * approach either end — the control visibly reflows while you click through
+ * it. `pageWindow` keeps the count constant instead, so the row stays the same
+ * size from page 1 to page 500.
+ *
+ * `aria-current="page"` marks the current page. Without it the only signal is
+ * the highlight, which a screen-reader user does not get.
+ */
+import { component, html } from "@c9up/aurora";
+import { buttonVariants } from "../atoms/Button.js";
+import { cn } from "../lib/cn.js";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "../lib/icons.js";
+import { read } from "../lib/props.js";
+/**
+ * Which page numbers to show, at a fixed total width.
+ *
+ * Always the first page, the last page, a run around the current one, and one
+ * or two gaps — adding up to exactly `size` slots wherever the current page
+ * sits. The constant width is the whole reason this is computed rather than a
+ * range being sliced: a window that simply narrows near the ends makes the
+ * control reflow as you click through it, and the buttons move under the
+ * pointer.
+ *
+ * Near an end there is only one gap, so the run is one slot wider to make up
+ * for it. That is the case a naive implementation gets wrong.
+ */
+export function pageWindow(page, pageCount, size = 7) {
+    if (pageCount <= size)
+        return range(1, pageCount);
+    // Below five slots there is no room for first, last, a gap and a run, so
+    // the shape this function promises cannot be built.
+    const slots = Math.max(size, 5);
+    const current = Math.min(Math.max(page, 1), pageCount);
+    // Near an end the run absorbs the first (or last) page and there is a
+    // single gap, so it holds `slots - 2` entries. In the middle the first and
+    // last pages are separate and there are two gaps, leaving `slots - 4`.
+    const runNearEnd = slots - 2;
+    const runInMiddle = slots - 4;
+    if (current <= runNearEnd - 1) {
+        return [...range(1, runNearEnd), null, pageCount];
+    }
+    if (current >= pageCount - runNearEnd + 2) {
+        return [1, null, ...range(pageCount - runNearEnd + 1, pageCount)];
+    }
+    const before = Math.floor((runInMiddle - 1) / 2);
+    const start = current - before;
+    return [1, null, ...range(start, start + runInMiddle - 1), null, pageCount];
+}
+function range(from, to) {
+    const out = [];
+    for (let value = from; value <= to; value += 1)
+        out.push(value);
+    return out;
+}
+export const Pagination = component((props) => {
+    const page = () => read(props.page) ?? 1;
+    const pageCount = () => Math.max(1, read(props.pageCount) ?? 1);
+    const go = (target) => (event) => {
+        if (props.onPageChange === undefined)
+            return;
+        // Only intercept when the caller wants callback-driven paging. With an
+        // `href` and no handler the link must navigate normally.
+        event.preventDefault();
+        props.onPageChange(Math.min(Math.max(target, 1), pageCount()));
+    };
+    return html `<nav
+		data-slot="pagination"
+		role="navigation"
+		aria-label="pagination"
+		class="${() => cn("mx-auto flex w-full justify-center", read(props.class))}"
+	>
+		<ul data-slot="pagination-content" class="flex flex-row items-center gap-1">
+			<li>
+				${link({
+        label: html `${ChevronLeftIcon({ class: "size-4" })}<span class="hidden sm:block">Previous</span>`,
+        ariaLabel: "Go to previous page",
+        href: props.href?.(page() - 1),
+        disabled: () => page() <= 1,
+        onClick: go(page() - 1),
+        size: "default",
+        extra: "gap-1 px-2.5 sm:pl-2.5",
+    })}
+			</li>
+			${() => pageWindow(page(), pageCount(), props.window ?? 7).map((entry, index) => entry === null
+        ? html `<li aria-hidden="true">
+								<span class="flex size-9 items-center justify-center">
+									${MoreHorizontalIcon({ class: "size-4" })}
+									<span class="sr-only">More pages</span>
+								</span>
+							</li>`
+        : html `<li>
+								${link({
+            label: String(entry),
+            ariaLabel: `Go to page ${entry}`,
+            href: props.href?.(entry),
+            current: entry === page(),
+            onClick: go(entry),
+            size: "icon",
+            key: index,
+        })}
+							</li>`)}
+			<li>
+				${link({
+        label: html `<span class="hidden sm:block">Next</span>${ChevronRightIcon({ class: "size-4" })}`,
+        ariaLabel: "Go to next page",
+        href: props.href?.(page() + 1),
+        disabled: () => page() >= pageCount(),
+        onClick: go(page() + 1),
+        size: "default",
+        extra: "gap-1 px-2.5 sm:pr-2.5",
+    })}
+			</li>
+		</ul>
+	</nav>`;
+});
+/**
+ * One page link.
+ *
+ * Always an `<a>`, even without an `href`: pagination is navigation, and the
+ * role is what a screen reader uses to offer "list of links" here. The
+ * disabled ends carry `aria-disabled` plus `pointer-events-none` rather than
+ * being removed, so the control keeps its width at both ends of the range.
+ */
+function link(spec) {
+    const disabled = () => spec.disabled?.() === true;
+    return html `<a
+		data-slot="pagination-link"
+		href="${spec.href}"
+		aria-label="${spec.ariaLabel}"
+		aria-current="${spec.current === true ? "page" : undefined}"
+		aria-disabled="${() => (disabled() ? "true" : undefined)}"
+		tabindex="${() => (disabled() ? -1 : 0)}"
+		class="${() => cn(buttonVariants({
+        variant: spec.current === true ? "outline" : "ghost",
+        size: spec.size,
+    }), spec.extra, disabled() ? "pointer-events-none opacity-50" : "")}"
+		@click="${spec.onClick}"
+	>${spec.label}</a>`;
+}

package/dist/molecules/RadioGroup.d.ts

@@ -0,0 +1,32 @@
+/**
+ * RadioGroup — pick exactly one option.
+ *
+ * Native `<input type="radio">` throughout. The browser already implements the
+ * radio group pattern on a shared `name`: arrows move and select, only one can
+ * be checked, and the group is one tab stop. Radix reimplements all of that
+ * because it needs a stylable element; `appearance-none` gets nebula the same
+ * styling freedom while the behaviour stays the browser's.
+ *
+ * The indicator dot is a sibling shown by `peer-checked:`, so selecting a
+ * radio runs no JavaScript at all.
+ */
+import type { Child } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface RadioOption {
+    value: string;
+    label: Child;
+    description?: Child;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    /** Shared `name`, which is what makes the browser treat these as one group. */
+    name: string;
+    options: readonly RadioOption[];
+    value?: Reactive<string | undefined>;
+    defaultValue?: string;
+    disabled?: Reactive<boolean>;
+    orientation?: "vertical" | "horizontal";
+    class?: Reactive<string>;
+    onValueChange?: (value: string) => void;
+}
+export declare const RadioGroup: (props?: RadioGroupProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/RadioGroup.js

@@ -0,0 +1,65 @@
+/**
+ * RadioGroup — pick exactly one option.
+ *
+ * Native `<input type="radio">` throughout. The browser already implements the
+ * radio group pattern on a shared `name`: arrows move and select, only one can
+ * be checked, and the group is one tab stop. Radix reimplements all of that
+ * because it needs a stylable element; `appearance-none` gets nebula the same
+ * styling freedom while the behaviour stays the browser's.
+ *
+ * The indicator dot is a sibling shown by `peer-checked:`, so selecting a
+ * radio runs no JavaScript at all.
+ */
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { read, readOr } from "../lib/props.js";
+const radioClasses = "peer size-4 shrink-0 appearance-none rounded-full border border-input bg-transparent shadow-xs outline-none transition-shadow dark:bg-input/30 checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+export const RadioGroup = component((props) => {
+    const selected = () => {
+        const controlled = read(props.value);
+        return controlled === undefined ? props.defaultValue : controlled;
+    };
+    return html `<div
+		role="radiogroup"
+		data-slot="radio-group"
+		aria-orientation="${props.orientation ?? "vertical"}"
+		class="${() => cn("grid gap-3", props.orientation === "horizontal" ? "grid-flow-col auto-cols-max" : "", read(props.class))}"
+	>
+		${props.options.map((option) => renderOption(option, props, selected))}
+	</div>`;
+});
+function renderOption(option, props, selected) {
+    const id = uid("radio");
+    const descriptionId = option.description === undefined ? undefined : uid("radio-description");
+    return html `<div class="flex items-start gap-3">
+		<span class="relative flex size-4 shrink-0 items-center justify-center">
+			<input
+				type="radio"
+				data-slot="radio-group-item"
+				id="${id}"
+				name="${props.name}"
+				value="${option.value}"
+				aria-describedby="${descriptionId}"
+				?disabled="${() => option.disabled === true || readOr(props.disabled, false)}"
+				.checked="${() => selected() === option.value}"
+				class="${radioClasses}"
+				@change="${() => props.onValueChange?.(option.value)}"
+			/>
+			<span
+				class="bg-primary pointer-events-none absolute size-2 rounded-full opacity-0 transition-opacity peer-checked:opacity-100"
+			></span>
+		</span>
+		<div class="grid gap-1 leading-none">
+			<label
+				for="${id}"
+				class="text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+			>${option.label}</label>
+			${option.description === undefined
+        ? null
+        : html `<p id="${descriptionId}" class="text-muted-foreground text-sm">
+						${option.description}
+					</p>`}
+		</div>
+	</div>`;
+}

package/dist/molecules/Resizable.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } 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;
+}
+export declare const Resizable: (props?: ResizableProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Resizable.js

@@ -0,0 +1,136 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { GripVerticalIcon } from "../lib/icons.js";
+import { uid } from "../lib/id.js";
+import { read } from "../lib/props.js";
+const KEYBOARD_STEP = 5;
+export const Resizable = component((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) {
+        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) {
+        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) {
+        const target = event.currentTarget;
+        if (!(target instanceof HTMLElement))
+            return;
+        event.preventDefault();
+        target.setPointerCapture(event.pointerId);
+        const onMove = (move) => {
+            const percent = percentAt(move);
+            if (percent !== null)
+                setSize(percent);
+        };
+        const onUp = () => {
+            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) {
+        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, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/molecules/Table.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { type Reactive } 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 declare const Table: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableHeader: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableBody: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableFooter: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export interface TableRowProps extends StyledProps {
+    /** Reflected as `data-state="selected"`, which the row styling keys off. */
+    selected?: Reactive<boolean>;
+    onClick?: (event: MouseEvent) => void;
+}
+export declare const TableRow: (props?: TableRowProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableHead: (props?: TableCellProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableCell: (props?: TableCellProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const TableCaption: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Table.js

@@ -0,0 +1,78 @@
+/**
+ * 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 { read } from "../lib/props.js";
+export const Table = component((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((props) => {
+    return html `<thead
+		data-slot="table-header"
+		class="${() => cn("[&_tr]:border-b", read(props.class))}"
+	>${slot(props.children)}</thead>`;
+});
+export const TableBody = component((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((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 const TableRow = component((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((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((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((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/dist/molecules/Tabs.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 type { Child, Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.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 declare const Tabs: (props?: TabsProps | undefined) => import("@c9up/aurora").TemplateResult;