@abuzareal/contour-ui 0.1.0

package/dist/components/ui/DataTable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+export default function DataTable({ caption, columns, rows, rowKey, }) {
+    const [sort, setSort] = useState(null);
+    const sortedRows = useMemo(() => {
+        if (!sort)
+            return rows;
+        const factor = sort.direction === "ascending" ? 1 : -1;
+        return [...rows].sort((a, b) => a[sort.key] > b[sort.key]
+            ? factor
+            : a[sort.key] < b[sort.key]
+                ? -factor
+                : 0);
+    }, [rows, sort]);
+    const toggleSort = (key) => setSort((current) => current?.key === key && current.direction === "ascending"
+        ? { key, direction: "descending" }
+        : { key, direction: "ascending" });
+    return (_jsx("div", { className: "table-scroll", tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: "data-table", children: [_jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { className: "mono", children: _jsx("tr", { children: columns.map((column) => {
+                            const direction = sort?.key === column.key ? sort.direction : undefined;
+                            return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: direction ? undefined : "data-table-idle" }))] })) : (column.header) }, column.key));
+                        }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }) }));
+}

package/dist/components/ui/DepthButton.d.ts

@@ -0,0 +1,6 @@
+/** Physical, layered button that presses down into its base (CSS 3D depth). */
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type DepthButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+};
+export default function DepthButton({ children, type, ...rest }: DepthButtonProps): import("react").JSX.Element;

package/dist/components/ui/DepthButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DepthButton({ children, type = "button", ...rest }) {
+    return (_jsx("button", { ...rest, type: type, className: "depth-button", children: _jsx("span", { className: "depth-button-face", children: children }) }));
+}

package/dist/components/ui/Dialog.d.ts

@@ -0,0 +1,12 @@
+/** Modal dialog on the native <dialog> element; also slides in from either edge as a drawer. */
+import { type ReactNode } from "react";
+export type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    description?: string;
+    footer?: ReactNode;
+    placement?: "center" | "left" | "right";
+};
+export default function Dialog({ open, onClose, title, children, description, footer, placement, }: DialogProps): import("react").JSX.Element;

package/dist/components/ui/Dialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Modal dialog on the native <dialog> element; also slides in from either edge as a drawer. */
+import { useEffect, useId, useRef } from "react";
+import { X } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+export default function Dialog({ open, onClose, title, children, description, footer, placement = "center", }) {
+    const ref = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        if (!open && dialog.open)
+            dialog.close();
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, className: cx("dialog", `dialog-${placement}`), "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : undefined, onCancel: (event) => {
+            event.preventDefault();
+            onClose();
+        }, onClick: (event) => {
+            // A click on the element itself (not its panel) is a backdrop click.
+            if (event.target === event.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: "dialog-panel", children: [_jsxs("header", { className: "dialog-header", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, children: title }), description && (_jsx("p", { id: descriptionId, className: "dialog-description", children: description }))] }), _jsx("button", { type: "button", className: "dialog-close", "aria-label": "Close dialog", onClick: onClose, children: _jsx(X, { size: 18 }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { className: "dialog-footer", children: footer })] }) }));
+}

package/dist/components/ui/Disclosure.d.ts

@@ -0,0 +1,11 @@
+/** Native details/summary disclosure with a plus icon that turns into a cross when open. */
+import type { ReactNode } from "react";
+export type DisclosureProps = {
+    className: string;
+    summary: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    iconSize?: number;
+    iconStrokeWidth?: number;
+};
+export default function Disclosure({ className, summary, children, defaultOpen, iconSize, iconStrokeWidth, }: DisclosureProps): import("react").JSX.Element;

package/dist/components/ui/Disclosure.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+export default function Disclosure({ className, summary, children, defaultOpen = false, iconSize = 23, iconStrokeWidth = 1.25, }) {
+    return (_jsxs("details", { className: `disclosure ${className}`, open: defaultOpen, children: [_jsxs("summary", { children: [summary, _jsx(Plus, { className: "disclosure-icon", size: iconSize, strokeWidth: iconStrokeWidth, "aria-hidden": "true" })] }), children] }));
+}

package/dist/components/ui/Divider.d.ts

@@ -0,0 +1,5 @@
+/** Hairline separator, optionally with a centred mono label. */
+export type DividerProps = {
+    label?: string;
+};
+export default function Divider({ label }: DividerProps): import("react").JSX.Element;

package/dist/components/ui/Divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Divider({ label }) {
+    if (!label)
+        return _jsx("hr", { className: "divider" });
+    return (_jsx("div", { className: "divider divider-labelled mono", role: "separator", children: _jsx("span", { children: label }) }));
+}

package/dist/components/ui/DropdownMenu.d.ts

@@ -0,0 +1,14 @@
+/** Button-triggered action menu with roving focus, Escape/outside dismissal, and focus return. */
+import { type ReactNode } from "react";
+export type MenuItem = {
+    label: string;
+    onSelect: () => void;
+    icon?: ReactNode;
+    danger?: boolean;
+};
+export type DropdownMenuProps = {
+    label: string;
+    items: MenuItem[];
+    align?: "start" | "end";
+};
+export default function DropdownMenu({ label, items, align, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/ui/DropdownMenu.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Button-triggered action menu with roving focus, Escape/outside dismissal, and focus return. */
+import { useCallback, useEffect, useId, useRef, useState, } from "react";
+import { ChevronDown } from "lucide-react";
+import useDismiss from "../../hooks/useDismiss.js";
+import { cx } from "../../lib/classNames.js";
+import { nextIndexForKey } from "../../lib/keyboard.js";
+export default function DropdownMenu({ label, items, align = "start", }) {
+    const menuId = useId();
+    const [open, setOpen] = useState(false);
+    const container = useRef(null);
+    const trigger = useRef(null);
+    const itemRefs = useRef([]);
+    const close = useCallback((returnFocus = true) => {
+        setOpen(false);
+        if (returnFocus)
+            trigger.current?.focus();
+    }, []);
+    useDismiss(container, open, useCallback((reason) => close(reason === "escape"), [close]));
+    useEffect(() => {
+        if (open)
+            itemRefs.current[0]?.focus();
+    }, [open]);
+    return (_jsxs("div", { ref: container, className: cx("menu", `menu-${align}`), children: [_jsxs("button", { ref: trigger, type: "button", className: "menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, onClick: () => setOpen((value) => !value), children: [label, _jsx(ChevronDown, { size: 15, "aria-hidden": "true", className: "menu-chevron" })] }), _jsx("div", { id: menuId, role: "menu", "aria-label": label, className: "menu-list", hidden: !open, children: items.map((item, index) => (_jsxs("button", { ref: (element) => {
+                        itemRefs.current[index] = element;
+                    }, type: "button", role: "menuitem", tabIndex: -1, className: cx("menu-item", item.danger && "menu-item-danger"), onClick: () => {
+                        item.onSelect();
+                        close();
+                    }, onKeyDown: (event) => {
+                        if (event.key === "Tab")
+                            return close(false);
+                        const next = nextIndexForKey(event.key, index, items.length, "vertical");
+                        if (next === null)
+                            return;
+                        event.preventDefault();
+                        itemRefs.current[next]?.focus();
+                    }, children: [item.icon, item.label] }, item.label))) })] }));
+}

package/dist/components/ui/EmptyState.d.ts

@@ -0,0 +1,9 @@
+/** Placeholder for empty, error, or success moments: large icon, title, message, and an optional action. */
+import type { ReactNode } from "react";
+export type EmptyStateProps = {
+    icon: ReactNode;
+    title: string;
+    message: string;
+    action?: ReactNode;
+};
+export default function EmptyState({ icon, title, message, action, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/ui/EmptyState.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function EmptyState({ icon, title, message, action, }) {
+    return (_jsxs("div", { className: "empty-state", children: [_jsx("span", { className: "empty-state-icon", "aria-hidden": "true", children: icon }), _jsx("h3", { children: title }), _jsx("p", { children: message }), action] }));
+}

package/dist/components/ui/ExternalLink.d.ts

@@ -0,0 +1,4 @@
+/** Anchor for off-site destinations; always opens a new tab without leaking the opener. */
+import type { AnchorHTMLAttributes } from "react";
+export type ExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel">;
+export default function ExternalLink({ href, ...props }: ExternalLinkProps): import("react").JSX.Element;

package/dist/components/ui/ExternalLink.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { safeHref } from "../../lib/safeHref.js";
+export default function ExternalLink({ href, ...props }) {
+    return (_jsx("a", { ...props, href: safeHref(href), target: "_blank", rel: "noopener noreferrer" }));
+}

package/dist/components/ui/Field.d.ts

@@ -0,0 +1,15 @@
+/** Form field frame: mono label, control slot, and hint, error, or counter text wired for assistive tech. */
+import type { ReactNode } from "react";
+export type FieldProps = {
+    id: string;
+    label: string;
+    children: ReactNode;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    /** e.g. "12/100", shown opposite the hint. */
+    counter?: string;
+    disabled?: boolean;
+};
+export default function Field({ id, label, children, hint, error, required, hideLabel, counter, disabled, }: FieldProps): import("react").JSX.Element;

package/dist/components/ui/Field.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+export default function Field({ id, label, children, hint, error, required, hideLabel, counter, disabled, }) {
+    return (_jsxs("div", { className: cx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: cx("field-label mono", hideLabel && "visually-hidden"), children: [label, required && (_jsx("span", { className: "field-required", "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: "field-footer mono", children: [error ? (_jsxs("span", { id: `${id}-error`, className: "field-error", children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: "field-counter", children: counter })] }))] }));
+}

package/dist/components/ui/FlipCard.d.ts

@@ -0,0 +1,8 @@
+/** Two-sided card that flips in 3D; a button toggles it so the back is reachable without hover. */
+import { type ReactNode } from "react";
+export type FlipCardProps = {
+    front: ReactNode;
+    back: ReactNode;
+    label: string;
+};
+export default function FlipCard({ front, back, label }: FlipCardProps): import("react").JSX.Element;

package/dist/components/ui/FlipCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Two-sided card that flips in 3D; a button toggles it so the back is reachable without hover. */
+import { useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+export default function FlipCard({ front, back, label }) {
+    const [flipped, setFlipped] = useState(false);
+    return (_jsxs("div", { className: "flip-stage", children: [_jsxs("div", { className: cx("flip-card", flipped && "is-flipped"), children: [_jsx("div", { className: "flip-face flip-front", "aria-hidden": flipped, ...(flipped ? { inert: "" } : {}), children: front }), _jsx("div", { className: "flip-face flip-back", "aria-hidden": !flipped, ...(!flipped ? { inert: "" } : {}), children: back })] }), _jsxs("button", { type: "button", className: "flip-toggle mono", "aria-pressed": flipped, onClick: () => setFlipped((value) => !value), children: [_jsx(RefreshCw, { size: 13, "aria-hidden": "true" }), label] })] }));
+}

package/dist/components/ui/IconButton.d.ts

@@ -0,0 +1,11 @@
+/** Circular icon-only button (the portfolio's source/copy button), with a required accessible label. */
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    children: ReactNode;
+    variant?: "outline" | "solid" | "accent";
+    size?: "sm" | "md" | "lg";
+    /** Rotates the icon 45deg on hover, as on the project source links. */
+    spin?: boolean;
+};
+export default function IconButton({ label, children, variant, size, spin, className, type, ...rest }: IconButtonProps): import("react").JSX.Element;

package/dist/components/ui/IconButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../lib/classNames.js";
+export default function IconButton({ label, children, variant = "outline", size = "md", spin = false, className, type = "button", ...rest }) {
+    return (_jsx("button", { ...rest, type: type, "aria-label": label, title: rest.title ?? label, className: cx("icon-button", `icon-button-${variant}`, `icon-button-${size}`, spin && "icon-button-spin", className), children: children }));
+}

package/dist/components/ui/Kbd.d.ts

@@ -0,0 +1,5 @@
+/** Keyboard key cap for shortcuts and instructions. */
+import type { ReactNode } from "react";
+export default function Kbd({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui/Kbd.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Kbd({ children }) {
+    return _jsx("kbd", { className: "kbd", children: children });
+}

package/dist/components/ui/Magnetic.d.ts

@@ -0,0 +1,8 @@
+/** Pulls its child toward a fine pointer while hovered, then springs back (an awwwards staple). */
+import { type ReactNode } from "react";
+export type MagneticProps = {
+    children: ReactNode;
+    /** Fraction of the pointer offset applied to the child. */
+    strength?: number;
+};
+export default function Magnetic({ children, strength }: MagneticProps): import("react").JSX.Element;

package/dist/components/ui/Magnetic.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Pulls its child toward a fine pointer while hovered, then springs back (an awwwards staple). */
+import { useRef } from "react";
+import { motionDisabledFor } from "../../lib/motion.js";
+export default function Magnetic({ children, strength = 0.35 }) {
+    const ref = useRef(null);
+    const reset = () => ref.current?.style.removeProperty("--magnet");
+    return (_jsx("span", { ref: ref, className: "magnetic", onPointerMove: (event) => {
+            const element = ref.current;
+            if (!element ||
+                event.pointerType !== "mouse" ||
+                motionDisabledFor(element))
+                return;
+            const bounds = element.getBoundingClientRect();
+            const x = (event.clientX - bounds.left - bounds.width / 2) * strength;
+            const y = (event.clientY - bounds.top - bounds.height / 2) * strength;
+            element.style.setProperty("--magnet", `${x}px, ${y}px`);
+        }, onPointerLeave: reset, children: children }));
+}

package/dist/components/ui/Marquee.d.ts

@@ -0,0 +1,7 @@
+export type MarqueeProps = {
+    items: string[];
+    label: string;
+    /** Seconds for one full loop. */
+    duration?: number;
+};
+export default function Marquee({ items, label, duration }: MarqueeProps): import("react").JSX.Element;

package/dist/components/ui/Marquee.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Asterisk } from "lucide-react";
+export default function Marquee({ items, label, duration = 28 }) {
+    // The track is rendered twice so the loop has no visible seam.
+    const track = (hidden) => (_jsx("ul", { className: "marquee-track", "aria-hidden": hidden || undefined, children: items.map((item) => (_jsxs("li", { children: [_jsx(Asterisk, { size: 18, "aria-hidden": "true" }), item] }, item))) }));
+    return (_jsx("div", { className: "marquee", role: "region", "aria-label": label, style: { "--marquee-duration": `${duration}s` }, children: _jsxs("div", { className: "marquee-inner", children: [track(false), track(true)] }) }));
+}

package/dist/components/ui/Pagination.d.ts

@@ -0,0 +1,7 @@
+export type PaginationProps = {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+    label?: string;
+};
+export default function Pagination({ page, pageCount, onChange, label, }: PaginationProps): import("react").JSX.Element;

package/dist/components/ui/Pagination.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Page navigation with previous/next controls and a condensed list of two-digit page numbers. */
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { formatIndex } from "../../lib/format.js";
+/** First, last, and the current page's neighbours; gaps become ellipses. */
+function visiblePages(page, pageCount) {
+    const pages = new Set([1, pageCount, page - 1, page, page + 1]);
+    const sorted = [...pages]
+        .filter((value) => value >= 1 && value <= pageCount)
+        .sort((a, b) => a - b);
+    return sorted.flatMap((value, index) => index > 0 && value - sorted[index - 1] > 1 ? ["gap", value] : [value]);
+}
+export default function Pagination({ page, pageCount, onChange, label = "Pagination", }) {
+    return (_jsxs("nav", { "aria-label": label, className: "pagination", children: [_jsx("button", { type: "button", className: "pagination-step", "aria-label": "Previous page", disabled: page === 1, onClick: () => onChange(page - 1), children: _jsx(ArrowLeft, { size: 16 }) }), _jsx("ol", { className: "mono", children: visiblePages(page, pageCount).map((item, index) => item === "gap" ? (_jsx("li", { "aria-hidden": "true", className: "pagination-gap", children: "\u2026" }, `gap-${index}`)) : (_jsx("li", { children: _jsx("button", { type: "button", className: "pagination-page", "aria-label": `Page ${item}`, "aria-current": item === page ? "page" : undefined, onClick: () => onChange(Number(item)), children: formatIndex(Number(item)) }) }, item))) }), _jsx("button", { type: "button", className: "pagination-step", "aria-label": "Next page", disabled: page === pageCount, onClick: () => onChange(page + 1), children: _jsx(ArrowRight, { size: 16 }) })] }));
+}

package/dist/components/ui/Popover.d.ts

@@ -0,0 +1,10 @@
+/** Non-modal floating panel anchored to a trigger; closes on Escape or an outside press. */
+import { type ReactNode } from "react";
+export type PopoverProps = {
+    /** Text for the trigger button. */
+    trigger: ReactNode;
+    title: string;
+    children: ReactNode;
+    align?: "start" | "end";
+};
+export default function Popover({ trigger, title, children, align, }: PopoverProps): import("react").JSX.Element;

package/dist/components/ui/Popover.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Non-modal floating panel anchored to a trigger; closes on Escape or an outside press. */
+import { useCallback, useId, useRef, useState } from "react";
+import useDismiss from "../../hooks/useDismiss.js";
+import { cx } from "../../lib/classNames.js";
+export default function Popover({ trigger, title, children, align = "start", }) {
+    const panelId = useId();
+    const titleId = useId();
+    const [open, setOpen] = useState(false);
+    const container = useRef(null);
+    const button = useRef(null);
+    useDismiss(container, open, useCallback((reason) => {
+        setOpen(false);
+        if (reason === "escape")
+            button.current?.focus();
+    }, []));
+    return (_jsxs("div", { ref: container, className: cx("popover", `popover-${align}`), children: [_jsx("button", { ref: button, type: "button", className: "menu-trigger", "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((value) => !value), children: trigger }), _jsxs("div", { id: panelId, role: "dialog", "aria-labelledby": titleId, className: "popover-panel", hidden: !open, children: [_jsx("strong", { id: titleId, className: "popover-title", children: title }), children] })] }));
+}

package/dist/components/ui/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+export type ProgressBarProps = {
+    label: string;
+    /** 0–100; leave undefined while the amount of work is unknown. */
+    value?: number;
+    tone?: "accent" | "success" | "danger";
+};
+export default function ProgressBar({ label, value, tone, }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/ui/ProgressBar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../lib/classNames.js";
+export default function ProgressBar({ label, value, tone = "accent", }) {
+    const indeterminate = value === undefined;
+    return (_jsxs("div", { className: cx("progress", `progress-${tone}`), children: [_jsxs("div", { className: "progress-header mono", children: [_jsx("span", { children: label }), !indeterminate && _jsxs("span", { children: [Math.round(value), "%"] })] }), _jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : value, className: cx("progress-track", indeterminate && "progress-indeterminate"), style: { "--progress": `${value ?? 0}%` }, children: _jsx("span", { className: "progress-fill" }) })] }));
+}

package/dist/components/ui/RadioGroup.d.ts

@@ -0,0 +1,14 @@
+export type RadioGroupProps<Value extends string> = {
+    legend: string;
+    options: {
+        value: Value;
+        label: string;
+        description?: string;
+        disabled?: boolean;
+    }[];
+    value: Value;
+    onChange: (value: Value) => void;
+    /** Lays options out in a row on wider screens. */
+    inline?: boolean;
+};
+export default function RadioGroup<Value extends string>({ legend, options, value, onChange, inline, }: RadioGroupProps<Value>): import("react").JSX.Element;

package/dist/components/ui/RadioGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fieldset of round radio options sharing one name, with a mono legend. */
+import { useId } from "react";
+import { cx } from "../../lib/classNames.js";
+export default function RadioGroup({ legend, options, value, onChange, inline = false, }) {
+    const name = useId();
+    return (_jsxs("fieldset", { className: cx("radio-group", inline && "radio-group-inline"), children: [_jsx("legend", { className: "field-label mono", children: legend }), options.map((option) => {
+                const id = `${name}-${option.value}`;
+                return (_jsxs("div", { className: "choice choice-radio", children: [_jsxs("span", { className: "choice-control", children: [_jsx("input", { id: id, type: "radio", name: name, value: option.value, checked: option.value === value, disabled: option.disabled, className: "choice-input", onChange: () => onChange(option.value) }), _jsx("span", { className: "choice-box", "aria-hidden": "true" })] }), _jsxs("label", { htmlFor: id, className: "choice-text", children: [_jsx("span", { className: "choice-label", children: option.label }), option.description && (_jsx("span", { className: "choice-description", children: option.description }))] })] }, option.value));
+            })] }));
+}

package/dist/components/ui/Reveal.d.ts

@@ -0,0 +1,9 @@
+/** Fades and lifts its children into view the first time they enter the viewport. */
+import { type ReactNode } from "react";
+export type RevealProps = {
+    children: ReactNode;
+    className?: string;
+    /** Stagger delay in milliseconds. */
+    delay?: number;
+};
+export default function Reveal({ children, className, delay, }: RevealProps): import("react").JSX.Element;

package/dist/components/ui/Reveal.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Fades and lifts its children into view the first time they enter the viewport. */
+import { useEffect, useRef } from "react";
+export default function Reveal({ children, className = "", delay = 0, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (typeof IntersectionObserver === "undefined") {
+            element.classList.add("is-visible");
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (!entry.isIntersecting)
+                return;
+            element.classList.add("is-visible");
+            observer.disconnect();
+        }, { threshold: 0, rootMargin: "0px 0px -24px 0px" });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ref: ref, className: `reveal ${className}`, style: { transitionDelay: `${delay}ms` }, children: children }));
+}

package/dist/components/ui/RevealHeading.d.ts

@@ -0,0 +1,12 @@
+/** Section heading whose lines slide up when the surrounding Reveal enters view. */
+import type { ReactNode } from "react";
+export type HeadingLine = {
+    text: ReactNode;
+    /** Renders the line in the section's accent colour. */
+    accent?: boolean;
+};
+export type RevealHeadingProps = {
+    id: string;
+    lines: HeadingLine[];
+};
+export default function RevealHeading({ id, lines }: RevealHeadingProps): import("react").JSX.Element;

package/dist/components/ui/RevealHeading.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RevealHeading({ id, lines }) {
+    return (_jsx("h2", { id: id, children: lines.map((line, index) => (_jsx("span", { className: line.accent ? "type-line type-accent" : "type-line", children: _jsx("span", { className: "type-run", children: line.text }) }, index))) }));
+}

package/dist/components/ui/ScrollProgress.d.ts

@@ -0,0 +1 @@
+export default function ScrollProgress(): import("react").JSX.Element;

package/dist/components/ui/ScrollProgress.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Thin acid bar fixed to the top of the viewport that tracks page scroll progress. */
+import { useEffect, useRef } from "react";
+export default function ScrollProgress() {
+    const ref = useRef(null);
+    useEffect(() => {
+        let frame = 0;
+        const update = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const root = document.documentElement;
+                const scrollable = root.scrollHeight - window.innerHeight;
+                const progress = scrollable > 0 ? window.scrollY / scrollable : 0;
+                ref.current?.style.setProperty("--scroll-progress", String(progress));
+            });
+        };
+        update();
+        window.addEventListener("scroll", update, { passive: true });
+        window.addEventListener("resize", update);
+        return () => {
+            cancelAnimationFrame(frame);
+            window.removeEventListener("scroll", update);
+            window.removeEventListener("resize", update);
+        };
+    }, []);
+    return _jsx("div", { ref: ref, className: "scroll-progress", "aria-hidden": "true" });
+}

package/dist/components/ui/SectionLabel.d.ts

@@ -0,0 +1,8 @@
+/** Numbered eyebrow above each content section, e.g. "01 / About". */
+import type { Section } from "../../types.js";
+export type SectionLabelProps = {
+    section: Section;
+    /** Secondary note shown on the right; hidden on small screens. */
+    aside: string;
+};
+export default function SectionLabel({ section, aside }: SectionLabelProps): import("react").JSX.Element;

package/dist/components/ui/SectionLabel.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { formatIndex } from "../../lib/format.js";
+export default function SectionLabel({ section, aside }) {
+    return (_jsxs("div", { className: "section-label mono", children: [_jsxs("span", { children: [formatIndex(section.number), " / ", section.title] }), _jsx("span", { children: aside })] }));
+}

package/dist/components/ui/SegmentedControl.d.ts

@@ -0,0 +1,10 @@
+export type SegmentedControlProps<Value extends string> = {
+    label: string;
+    options: {
+        value: Value;
+        label: string;
+    }[];
+    value: Value;
+    onChange: (value: Value) => void;
+};
+export default function SegmentedControl<Value extends string>({ label, options, value, onChange, }: SegmentedControlProps<Value>): import("react").JSX.Element;

package/dist/components/ui/SegmentedControl.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Single-choice pill group (filter buttons) with arrow-key navigation. */
+import { useRef } from "react";
+import { nextIndexForKey } from "../../lib/keyboard.js";
+export default function SegmentedControl({ label, options, value, onChange, }) {
+    const buttons = useRef([]);
+    return (_jsx("div", { className: "segmented", role: "radiogroup", "aria-label": label, children: options.map((option, index) => {
+            const selected = option.value === value;
+            return (_jsx("button", { ref: (element) => {
+                    buttons.current[index] = element;
+                }, type: "button", role: "radio", "aria-checked": selected, tabIndex: selected ? 0 : -1, className: "segmented-option", onClick: () => onChange(option.value), onKeyDown: (event) => {
+                    const next = nextIndexForKey(event.key, index, options.length);
+                    if (next === null)
+                        return;
+                    event.preventDefault();
+                    onChange(options[next].value);
+                    buttons.current[next]?.focus();
+                }, children: option.label }, option.value));
+        }) }));
+}

package/dist/components/ui/SelectField.d.ts

@@ -0,0 +1,13 @@
+/** Native select styled as an underlined field with a chevron. */
+import { type SelectHTMLAttributes } from "react";
+export type SelectFieldProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+};
+export default function SelectField({ label, options, hint, error, placeholder, ...rest }: SelectFieldProps): import("react").JSX.Element;

package/dist/components/ui/SelectField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Native select styled as an underlined field with a chevron. */
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { fieldDescribedBy } from "../../lib/a11y.js";
+import Field from "./Field.js";
+export default function SelectField({ label, options, hint, error, placeholder, ...rest }) {
+    const id = useId();
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, children: _jsxs("div", { className: "field-control field-select", children: [_jsxs("select", { ...rest, id: id, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(ChevronDown, { className: "field-chevron", size: 16, "aria-hidden": "true" })] }) }));
+}

package/dist/components/ui/Skeleton.d.ts

@@ -0,0 +1,6 @@
+export type SkeletonProps = {
+    shape?: "line" | "block" | "circle";
+    width?: string;
+    height?: string;
+};
+export default function Skeleton({ shape, width, height, }: SkeletonProps): import("react").JSX.Element;