@cronus-ui/ui 0.6.0

package/dist/components/notification-center.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } from "react";
+import { PopoverContent } from "./popover.js";
+/** A single entry rendered inside the {@link NotificationCenter} inbox. */
+export interface NotificationItem {
+    /** Stable identity; echoed back to `onNotificationClick`. */
+    id: string;
+    /** Primary line — the headline of the notification. */
+    title: ReactNode;
+    /** Optional secondary line with extra context. */
+    description?: ReactNode;
+    /** Pre-formatted relative/absolute time label (e.g. "2m ago"). */
+    timestamp?: string;
+    /** When falsy the row is treated as unread (dot + wash + counted). */
+    read?: boolean;
+    /** Leading glyph; ignored when `avatar` is provided. */
+    icon?: ReactNode;
+    /** Leading avatar; takes precedence over `icon`. */
+    avatar?: {
+        src?: string;
+        fallback: ReactNode;
+    };
+}
+export interface NotificationRowProps extends Omit<HTMLAttributes<HTMLButtonElement>, "id" | "title" | "onClick" | "onSelect"> {
+    notification: NotificationItem;
+    /** Fired with the notification id when the row is activated. */
+    onSelect?: (id: string) => void;
+}
+/**
+ * A single, fully-interactive notification row. Rendered as a real `<button>`
+ * so it is keyboard-focusable and announced as a control.
+ */
+export declare const NotificationRow: import("react").ForwardRefExoticComponent<NotificationRowProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface NotificationListProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    notifications: readonly NotificationItem[];
+    /** Fired with the notification id when a row is activated. */
+    onSelect?: (id: string) => void;
+    /** Replaces the built-in "You're all caught up" empty state. */
+    emptyState?: ReactNode;
+}
+/**
+ * The scrollable list body. Renders an accessible `list`/`listitem` structure,
+ * or the empty state when there are no notifications.
+ */
+export declare const NotificationList: import("react").ForwardRefExoticComponent<NotificationListProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface NotificationCenterProps extends Omit<ComponentPropsWithoutRef<typeof PopoverContent>, "onSelect" | "title"> {
+    /** Items to display in the inbox. */
+    notifications: readonly NotificationItem[];
+    /** Fired when the "Mark all read" affordance is activated. */
+    onMarkAllRead?: () => void;
+    /** Fired with the notification id when a row is activated. */
+    onNotificationClick?: (id: string) => void;
+    /** Header heading text. */
+    title?: ReactNode;
+    /** Custom empty-state content (defaults to "You're all caught up"). */
+    emptyState?: ReactNode;
+    /** Optional footer rendered below the list (e.g. a "View all" link). */
+    footer?: ReactNode;
+    /** Class names for the popover panel. */
+    className?: string;
+}
+/**
+ * A bell-trigger notifications inbox built on {@link Popover}. The trigger is a
+ * ghost icon button with an unread-count badge; the panel renders a header with
+ * a "Mark all read" action, a scrollable list of notifications, an empty state,
+ * and an optional footer slot.
+ */
+export declare const NotificationCenter: import("react").ForwardRefExoticComponent<NotificationCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=notification-center.d.ts.map

package/dist/components/notification-center.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Bell, BellOff } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { ScrollArea } from "./scroll-area.js";
+/** Number of unread (`read !== true`) items in the list. */
+function countUnread(notifications) {
+    let unread = 0;
+    for (const item of notifications) {
+        if (!item.read)
+            unread += 1;
+    }
+    return unread;
+}
+/** Clamp the unread count into the trigger badge's "9+" display label. */
+function formatUnread(count) {
+    return count > 9 ? "9+" : String(count);
+}
+/**
+ * A single, fully-interactive notification row. Rendered as a real `<button>`
+ * so it is keyboard-focusable and announced as a control.
+ */
+export const NotificationRow = forwardRef(({ className, notification, onSelect, ...props }, ref) => {
+    const { id, title, description, timestamp, read, icon, avatar } = notification;
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "notification-row", "data-unread": read ? undefined : "", onClick: () => onSelect?.(id), className: cn("flex w-full items-start gap-3 rounded-md px-2 py-2.5 text-left outline-none transition-colors hover:bg-surface-overlay focus-visible:bg-surface-overlay focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !read && "bg-surface-overlay/40", className), ...props, children: [avatar ? (_jsxs(Avatar, { className: "size-9", children: [avatar.src ? _jsx(AvatarImage, { src: avatar.src, alt: "" }) : null, _jsx(AvatarFallback, { children: avatar.fallback })] })) : icon ? (_jsx("span", { "data-slot": "notification-icon", "aria-hidden": "true", className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-surface-overlay text-fg-secondary [&_svg]:size-4", children: icon })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 break-words text-sm font-medium text-fg", children: title }), read ? null : (_jsx("span", { "data-slot": "notification-unread-dot", "aria-hidden": "true", className: "mt-1.5 size-2 shrink-0 rounded-full bg-primary" }))] }), description ? (_jsx("span", { className: "min-w-0 break-words text-sm text-fg-secondary", children: description })) : null, timestamp ? _jsx("span", { className: "text-xs text-fg-tertiary", children: timestamp }) : null] })] }));
+});
+NotificationRow.displayName = "NotificationRow";
+/**
+ * The scrollable list body. Renders an accessible `list`/`listitem` structure,
+ * or the empty state when there are no notifications.
+ */
+export const NotificationList = forwardRef(({ className, notifications, onSelect, emptyState, ...props }, ref) => {
+    if (notifications.length === 0) {
+        return (_jsx("div", { ref: ref, "data-slot": "notification-empty", className: cn("flex flex-col items-center justify-center gap-2 px-4 py-10 text-center", className), ...props, children: emptyState ?? (_jsxs(_Fragment, { children: [_jsx(BellOff, { "aria-hidden": "true", className: "size-6 text-fg-muted" }), _jsx("p", { className: "text-sm text-fg-secondary", children: "You're all caught up" })] })) }));
+    }
+    return (_jsx("div", { ref: ref, "data-slot": "notification-list", className: cn(className), ...props, children: _jsx("ul", { className: "flex flex-col", children: notifications.map((notification) => (_jsx("li", { children: _jsx(NotificationRow, { notification: notification, onSelect: onSelect }) }, notification.id))) }) }));
+});
+NotificationList.displayName = "NotificationList";
+/**
+ * A bell-trigger notifications inbox built on {@link Popover}. The trigger is a
+ * ghost icon button with an unread-count badge; the panel renders a header with
+ * a "Mark all read" action, a scrollable list of notifications, an empty state,
+ * and an optional footer slot.
+ */
+export const NotificationCenter = forwardRef(({ notifications, onMarkAllRead, onNotificationClick, title = "Notifications", emptyState, footer, align = "end", className, ...props }, ref) => {
+    const unreadCount = countUnread(notifications);
+    const hasUnread = unreadCount > 0;
+    const triggerLabel = unreadCount === 0 ? "Notifications" : `Notifications, ${unreadCount} unread`;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": triggerLabel, "data-slot": "notification-trigger", className: "relative", children: [_jsx(Bell, { "aria-hidden": "true" }), hasUnread ? (_jsx(Badge, { "aria-hidden": "true", variant: "primary", "data-slot": "notification-badge", className: "-right-1 -top-1 pointer-events-none absolute flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.625rem] leading-none tabular-nums", children: formatUnread(unreadCount) })) : null] }) }), _jsxs(PopoverContent, { ref: ref, align: align, "aria-label": typeof title === "string" ? title : "Notifications", "data-slot": "notification-center", className: cn("w-80 p-0", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-border border-b px-3 py-2.5", children: [_jsx("p", { className: "font-display font-semibold text-fg text-sm", children: title }), hasUnread && onMarkAllRead ? (_jsx(Button, { type: "button", variant: "link", size: "sm", onClick: onMarkAllRead, className: "h-auto px-0", children: "Mark all read" })) : null] }), _jsx(ScrollArea, { className: "max-h-80", children: _jsx("div", { className: "p-1", children: _jsx(NotificationList, { notifications: notifications, onSelect: onNotificationClick, emptyState: emptyState }) }) }), footer ? (_jsx("div", { "data-slot": "notification-footer", className: "border-border border-t px-3 py-2.5", children: footer })) : null] })] }));
+});
+NotificationCenter.displayName = "NotificationCenter";
+//# sourceMappingURL=notification-center.js.map

package/dist/components/number-input.d.ts

@@ -0,0 +1,45 @@
+import { type FocusEvent } from "react";
+export interface NumberInputProps {
+    /** Controlled value. Pair with `onValueChange`. Use `null` for empty. */
+    value?: number | null;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: number | null;
+    /** Called with the new value (or `null` when cleared) on every change. */
+    onValueChange?: (value: number | null) => void;
+    /** Minimum allowed value. The decrement stepper disables at this bound. */
+    min?: number;
+    /** Maximum allowed value. The increment stepper disables at this bound. */
+    max?: number;
+    /** Increment for steppers and Arrow keys. Defaults to `1`. */
+    step?: number;
+    /** Larger increment for PageUp / PageDown. Defaults to `step * 10`. */
+    largeStep?: number;
+    /** Number of decimal places to round and display the committed value to. */
+    precision?: number;
+    /** Custom formatter for the displayed value when not focused. */
+    format?: (value: number) => string;
+    /** Disables the input and both steppers. */
+    disabled?: boolean;
+    /** Marks the field as invalid (forwarded to the underlying Input). */
+    invalid?: boolean;
+    /** Placeholder shown when the field is empty. */
+    placeholder?: string;
+    /** Extra classes for the wrapper element. */
+    className?: string;
+    /** Extra classes for the underlying input. */
+    inputClassName?: string;
+    /** Accessible name for the spinbutton when there is no visible label. */
+    "aria-label"?: string;
+    /** ID of an element labelling the spinbutton. */
+    "aria-labelledby"?: string;
+    /** ID of an element describing the spinbutton. */
+    "aria-describedby"?: string;
+    /** Native id for the input. */
+    id?: string;
+    /** Native name for the input (form submission). */
+    name?: string;
+    /** Called when the input loses focus. */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/number-input.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Minus, Plus } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+/** Round to the configured precision, avoiding float drift (e.g. 0.1 + 0.2). */
+function roundTo(value, precision) {
+    if (precision === undefined)
+        return value;
+    const factor = 10 ** precision;
+    return Math.round((value + Number.EPSILON) * factor) / factor;
+}
+function clamp(value, min, max) {
+    let next = value;
+    if (min !== undefined)
+        next = Math.max(next, min);
+    if (max !== undefined)
+        next = Math.min(next, max);
+    return next;
+}
+export const NumberInput = forwardRef(({ value: valueProp, defaultValue = null, onValueChange, min, max, step = 1, largeStep, precision, format, disabled = false, invalid = false, placeholder, className, inputClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, id, name, onBlur, ...props }, ref) => {
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    // Local text mirrors keystrokes so partial entries ("-", "1.") stay editable.
+    const [text, setText] = useState(() => value === null || value === undefined ? "" : String(value));
+    const [focused, setFocused] = useState(false);
+    // Re-sync the visible text when the value changes from outside (controlled
+    // updates, programmatic resets) without clobbering the user's in-progress
+    // typing while the field is focused. We track the last value we mirrored so
+    // our own commits don't trigger a redundant text rewrite.
+    const lastSyncedValue = useRef(value);
+    useEffect(() => {
+        if (focused)
+            return;
+        if (value === lastSyncedValue.current)
+            return;
+        lastSyncedValue.current = value;
+        setText(value === null || value === undefined ? "" : String(value));
+    }, [value, focused]);
+    const pageStep = largeStep ?? step * 10;
+    const commit = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange]);
+    // Apply rounding + clamping, sync both the value and the visible text.
+    const commitNumber = useCallback((raw) => {
+        const next = clamp(roundTo(raw, precision), min, max);
+        setText(String(next));
+        commit(next);
+        return next;
+    }, [commit, precision, min, max]);
+    const applyStep = useCallback((delta) => {
+        const base = value ?? clamp(0, min, max);
+        commitNumber(base + delta);
+    }, [value, min, max, commitNumber]);
+    const handleChange = useCallback((event) => {
+        const raw = event.target.value;
+        setText(raw);
+        if (raw === "") {
+            // Clearing the field maps to null.
+            commit(null);
+            return;
+        }
+        if (raw === "-" || raw === "." || raw === "-.") {
+            // Partial input ("-", ".", "-.") isn't a number yet. Keep the visible
+            // text but don't re-commit the previous value on every keystroke — that
+            // would fight the user mid-type. We wait for a valid number (or blur).
+            return;
+        }
+        const parsed = Number(raw);
+        if (!Number.isNaN(parsed)) {
+            // Live updates use precision rounding but defer clamping to blur so the
+            // user can finish typing values that transiently exceed a bound.
+            commit(roundTo(parsed, precision));
+        }
+    }, [commit, precision]);
+    const handleBlur = useCallback((event) => {
+        setFocused(false);
+        if (text === "" || text === "-" || text === "." || text === "-.") {
+            setText("");
+            commit(null);
+        }
+        else {
+            const parsed = Number(text);
+            if (Number.isNaN(parsed)) {
+                // Reject unparseable residue, fall back to the last good value.
+                setText(value === null || value === undefined ? "" : String(value));
+            }
+            else {
+                commitNumber(parsed);
+            }
+        }
+        onBlur?.(event);
+    }, [text, value, commit, commitNumber, onBlur]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "ArrowUp":
+                event.preventDefault();
+                applyStep(step);
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                applyStep(-step);
+                break;
+            case "PageUp":
+                event.preventDefault();
+                applyStep(pageStep);
+                break;
+            case "PageDown":
+                event.preventDefault();
+                applyStep(-pageStep);
+                break;
+            case "Home":
+                if (min !== undefined) {
+                    event.preventDefault();
+                    commitNumber(min);
+                }
+                break;
+            case "End":
+                if (max !== undefined) {
+                    event.preventDefault();
+                    commitNumber(max);
+                }
+                break;
+        }
+    }, [disabled, step, pageStep, min, max, applyStep, commitNumber]);
+    const atMin = value !== null && value !== undefined && min !== undefined && value <= min;
+    const atMax = value !== null && value !== undefined && max !== undefined && value >= max;
+    // While focused show raw keystrokes; otherwise show the formatted/committed value.
+    const displayValue = focused
+        ? text
+        : value === null || value === undefined
+            ? ""
+            : format
+                ? format(value)
+                : precision !== undefined
+                    ? value.toFixed(precision)
+                    : String(value);
+    return (_jsxs("div", { "data-slot": "number-input", "data-disabled": disabled ? "" : undefined, className: cn("flex items-center gap-1", className), children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", tabIndex: -1, disabled: disabled || atMin, "aria-label": "Decrement", "data-slot": "number-input-decrement", className: "shrink-0", onClick: () => applyStep(-step), children: _jsx(Minus, { "aria-hidden": "true" }) }), _jsx(Input, { ref: ref, id: id, name: name, type: "text", inputMode: precision !== undefined ? "decimal" : "numeric", role: "spinbutton", autoComplete: "off", disabled: disabled, invalid: invalid, placeholder: placeholder, value: displayValue, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value ?? undefined, "aria-valuetext": value !== null && value !== undefined ? displayValue : undefined, "data-slot": "number-input-field", className: cn("text-center", inputClassName), onChange: handleChange, onKeyDown: handleKeyDown, onFocus: () => setFocused(true), onBlur: handleBlur, ...props }), _jsx(Button, { type: "button", variant: "outline", size: "icon", tabIndex: -1, disabled: disabled || atMax, "aria-label": "Increment", "data-slot": "number-input-increment", className: "shrink-0", onClick: () => applyStep(step), children: _jsx(Plus, { "aria-hidden": "true" }) })] }));
+});
+NumberInput.displayName = "NumberInput";
+//# sourceMappingURL=number-input.js.map

package/dist/components/orbit.d.ts

@@ -0,0 +1,77 @@
+import { type HTMLAttributes } from "react";
+export interface OrbitProps extends HTMLAttributes<HTMLDivElement> {
+}
+export interface OrbitRingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Radius of the ring in pixels — the distance from the nucleus' centre to
+     * the centre of each orbiting item. The ring renders as a `2 × radius`
+     * circle absolutely centred on the stage.
+     */
+    radius: number;
+    /**
+     * Seconds for one full revolution. Larger is calmer; concentric rings look
+     * best with distinct durations so their items never sync up. Defaults to
+     * `24`.
+     */
+    duration?: number;
+    /** Revolve counter-clockwise instead of clockwise. Defaults to `false`. */
+    reverse?: boolean;
+    /**
+     * Angle of the first item's slot in degrees, measured clockwise from
+     * 12 o'clock. Remaining items stay evenly distributed after the offset.
+     * Use it to de-align concentric rings' starting positions. Defaults to `0`.
+     */
+    startAngle?: number;
+    /** Draw the faint circular guide (`border-border/40`). Defaults to `true`. */
+    guide?: boolean;
+}
+export interface OrbitItemProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The stage for a decorative orbit system: a `relative` flex box that centres
+ * its children as the **nucleus** while `OrbitRing`s (absolutely positioned)
+ * centre themselves around it. Size the stage to contain the largest ring,
+ * e.g. `className="size-72"` for a 128 px ring.
+ *
+ * **Mechanism** — pure CSS, zero JS per frame. Each item hangs off a
+ * *positioner* that fills the ring's circle and spins via one shared keyframe
+ * (`cronus-orbit-spin`, injected here once). The positioner's slot angle lives
+ * in the CSS `rotate` property, which the browser **composes with** the
+ * animated `transform` instead of being overwritten by it — so one keyframe
+ * serves every slot. The item itself runs the same keyframe with
+ * `animation-direction` inverted plus a `rotate` of the negated slot angle, so
+ * the two rotations cancel exactly and content stays upright while it travels.
+ *
+ * **Pause on hover** — hovering anywhere on the stage pauses every ring via
+ * `animation-play-state` (the stage is a named `group/orbit`), so no frame is
+ * ever dropped and interactive items can be reached mid-flight.
+ *
+ * **Reduced motion** — under `prefers-reduced-motion: reduce` the animations
+ * are removed (`motion-reduce:[animation-name:none]`) and the static `rotate`
+ * bases take over: items keep their exact distributed placement on the ring,
+ * upright, with no spin.
+ */
+export declare const Orbit: import("react").ForwardRefExoticComponent<OrbitProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * One circular track of an `Orbit` stage: an absolutely-centred `2 × radius`
+ * circle with a faint guide border, whose children are distributed evenly
+ * around the circumference and revolve together. Each child is wrapped in a
+ * spinning positioner; wrap the child content in `OrbitItem` so it
+ * counter-rotates and stays upright (bare children simply spin with the ring).
+ *
+ * Slots are counted from the ring's **direct** children (`Children.toArray`),
+ * so render items inline — a wrapper component or fragment is opaque to React
+ * and would occupy a single slot.
+ */
+export declare const OrbitRing: import("react").ForwardRefExoticComponent<OrbitRingProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The upright content of one ring slot. Runs the shared spin keyframe with the
+ * ring's inverted `animation-direction` (via the inherited
+ * `--orbit-counter-direction`) plus a static `rotate` of the negated slot
+ * angle, cancelling the positioner's rotation frame-for-frame — the content
+ * revolves around the nucleus but never tilts. Restores `pointer-events` so
+ * links/buttons inside remain clickable (hovering the stage pauses the orbit,
+ * making them easy to reach).
+ */
+export declare const OrbitItem: import("react").ForwardRefExoticComponent<OrbitItemProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=orbit.d.ts.map

package/dist/components/orbit.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * The one shared keyframe the whole system runs on: a plain 0→1 turn rotation.
+ * Everything else (starting angle, speed, direction, counter-rotation) rides
+ * CSS custom properties and the `rotate` property, so a single fixed name
+ * covers every ring and every item. It is injected once per `<Orbit>` stage;
+ * repeated identical definitions are deduped by the browser (same pattern as
+ * `BorderBeam`'s `cronus-border-beam`).
+ */
+const ORBIT_KEYFRAMES = "@keyframes cronus-orbit-spin{from{transform:rotate(0turn)}to{transform:rotate(1turn)}}";
+const DEFAULT_DURATION = 24;
+const MIN_DURATION = 1;
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * The stage for a decorative orbit system: a `relative` flex box that centres
+ * its children as the **nucleus** while `OrbitRing`s (absolutely positioned)
+ * centre themselves around it. Size the stage to contain the largest ring,
+ * e.g. `className="size-72"` for a 128 px ring.
+ *
+ * **Mechanism** — pure CSS, zero JS per frame. Each item hangs off a
+ * *positioner* that fills the ring's circle and spins via one shared keyframe
+ * (`cronus-orbit-spin`, injected here once). The positioner's slot angle lives
+ * in the CSS `rotate` property, which the browser **composes with** the
+ * animated `transform` instead of being overwritten by it — so one keyframe
+ * serves every slot. The item itself runs the same keyframe with
+ * `animation-direction` inverted plus a `rotate` of the negated slot angle, so
+ * the two rotations cancel exactly and content stays upright while it travels.
+ *
+ * **Pause on hover** — hovering anywhere on the stage pauses every ring via
+ * `animation-play-state` (the stage is a named `group/orbit`), so no frame is
+ * ever dropped and interactive items can be reached mid-flight.
+ *
+ * **Reduced motion** — under `prefers-reduced-motion: reduce` the animations
+ * are removed (`motion-reduce:[animation-name:none]`) and the static `rotate`
+ * bases take over: items keep their exact distributed placement on the ring,
+ * upright, with no spin.
+ */
+export const Orbit = forwardRef(({ className, children, ...props }, ref) => (_jsxs("div", { ref: ref, "data-slot": "orbit", className: cn("group/orbit relative flex items-center justify-center", className), ...props, children: [_jsx("style", { children: ORBIT_KEYFRAMES }), children] })));
+Orbit.displayName = "Orbit";
+/**
+ * One circular track of an `Orbit` stage: an absolutely-centred `2 × radius`
+ * circle with a faint guide border, whose children are distributed evenly
+ * around the circumference and revolve together. Each child is wrapped in a
+ * spinning positioner; wrap the child content in `OrbitItem` so it
+ * counter-rotates and stays upright (bare children simply spin with the ring).
+ *
+ * Slots are counted from the ring's **direct** children (`Children.toArray`),
+ * so render items inline — a wrapper component or fragment is opaque to React
+ * and would occupy a single slot.
+ */
+export const OrbitRing = forwardRef(({ className, children, radius, duration = DEFAULT_DURATION, reverse = false, startAngle = 0, guide = true, style, ...props }, ref) => {
+    const safeRadius = Math.max(finiteOr(radius, 0), 0);
+    const safeDuration = Math.max(finiteOr(duration, DEFAULT_DURATION), MIN_DURATION);
+    const safeStartAngle = finiteOr(startAngle, 0);
+    const items = Children.toArray(children);
+    const step = items.length > 0 ? 360 / items.length : 0;
+    const ringStyle = {
+        width: safeRadius * 2,
+        height: safeRadius * 2,
+        "--orbit-duration": `${safeDuration}s`,
+        // The item's counter-spin runs the SAME keyframe in the opposite
+        // direction, so the pair always sums to a full turn (≡ upright).
+        "--orbit-spin-direction": reverse ? "reverse" : "normal",
+        "--orbit-counter-direction": reverse ? "normal" : "reverse",
+    };
+    return (_jsx("div", { ref: ref, "data-slot": "orbit-ring", className: cn(
+        // pointer-events-none keeps the (potentially large) circle from
+        // blocking the nucleus; OrbitItem restores pointer-events for its
+        // own content.
+        "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", guide && "border border-border/40", className), style: { ...ringStyle, ...style }, ...props, children: items.map((child, index) => {
+            const angle = safeStartAngle + index * step;
+            const key = isValidElement(child) && child.key != null ? child.key : `orbit-slot-${index}`;
+            const positionerStyle = {
+                "--orbit-angle": `${angle}deg`,
+                // Static slot placement. While the animation runs, the keyframe's
+                // `transform` composes ON TOP of this `rotate` (they are separate
+                // properties); under reduced motion the animation is removed and
+                // this alone places the item at its distributed angle.
+                rotate: "var(--orbit-angle)",
+            };
+            return (_jsx("div", { "data-slot": "orbit-positioner", className: cn("absolute inset-0 [animation-name:cronus-orbit-spin] [will-change:transform]", "[animation-duration:var(--orbit-duration)] [animation-timing-function:linear]", "[animation-iteration-count:infinite] [animation-direction:var(--orbit-spin-direction)]", "group-hover/orbit:[animation-play-state:paused] motion-reduce:[animation-name:none]"), style: positionerStyle, children: _jsx("div", { "data-slot": "orbit-holder", className: "absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2", children: child }) }, key));
+        }) }));
+});
+OrbitRing.displayName = "OrbitRing";
+/**
+ * The upright content of one ring slot. Runs the shared spin keyframe with the
+ * ring's inverted `animation-direction` (via the inherited
+ * `--orbit-counter-direction`) plus a static `rotate` of the negated slot
+ * angle, cancelling the positioner's rotation frame-for-frame — the content
+ * revolves around the nucleus but never tilts. Restores `pointer-events` so
+ * links/buttons inside remain clickable (hovering the stage pauses the orbit,
+ * making them easy to reach).
+ */
+export const OrbitItem = forwardRef(({ className, style, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "orbit-item", className: cn("pointer-events-auto flex items-center justify-center [animation-name:cronus-orbit-spin]", "[animation-duration:var(--orbit-duration,24s)] [animation-timing-function:linear]", "[animation-iteration-count:infinite] [animation-direction:var(--orbit-counter-direction,reverse)]", "group-hover/orbit:[animation-play-state:paused] motion-reduce:[animation-name:none]", className), style: { rotate: "calc(var(--orbit-angle, 0deg) * -1)", ...style }, ...props })));
+OrbitItem.displayName = "OrbitItem";
+//# sourceMappingURL=orbit.js.map

package/dist/components/pagination.d.ts

@@ -0,0 +1,16 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes } from "react";
+import { buttonVariants } from "./button.js";
+export declare const Pagination: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const PaginationContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const PaginationItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+type PaginationLinkSize = NonNullable<Parameters<typeof buttonVariants>[0]>["size"];
+export interface PaginationLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean;
+    size?: PaginationLinkSize;
+}
+export declare const PaginationLink: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const PaginationPrevious: import("react").ForwardRefExoticComponent<Omit<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const PaginationNext: import("react").ForwardRefExoticComponent<Omit<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+export const Pagination = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("nav", { ref: ref, "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+});
+Pagination.displayName = "Pagination";
+export const PaginationContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("ul", { ref: ref, "data-slot": "pagination-content", className: cn("flex items-center gap-1", className), ...props }));
+});
+PaginationContent.displayName = "PaginationContent";
+export const PaginationItem = forwardRef(({ className, ...props }, ref) => {
+    return _jsx("li", { ref: ref, "data-slot": "pagination-item", className: className, ...props });
+});
+PaginationItem.displayName = "PaginationItem";
+export const PaginationLink = forwardRef(({ className, isActive, size, ...props }, ref) => {
+    return (_jsx("a", { ref: ref, "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({ variant: isActive ? "outline" : "ghost", size: size ?? "icon" }), className), ...props }));
+});
+PaginationLink.displayName = "PaginationLink";
+export const PaginationPrevious = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs(PaginationLink, { ref: ref, "aria-label": "Go to previous page", size: "md", "data-slot": "pagination-previous", className: cn("gap-1 px-2.5", className), ...props, children: [_jsx(ChevronLeft, {}), _jsx("span", { children: "Previous" })] }));
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+export const PaginationNext = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs(PaginationLink, { ref: ref, "aria-label": "Go to next page", size: "md", "data-slot": "pagination-next", className: cn("gap-1 px-2.5", className), ...props, children: [_jsx("span", { children: "Next" }), _jsx(ChevronRight, {})] }));
+});
+PaginationNext.displayName = "PaginationNext";
+export const PaginationEllipsis = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs("span", { ref: ref, "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-10 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+//# sourceMappingURL=pagination.js.map

package/dist/components/particles.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface ParticlesProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Number of drifting specks.
+     * @default 40
+     */
+    count?: number;
+}
+/**
+ * A calm 2D particle field that drifts behind content. Canvas-only, no WebGL.
+ * Paused (and undrawn) under reduced motion so the surface stays still.
+ */
+export declare function Particles({ ref, className, children, count, ...props }: ParticlesProps): import("react").JSX.Element;
+export declare namespace Particles {
+    var displayName: string;
+}
+//# sourceMappingURL=particles.d.ts.map