@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/activity-line.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useEffect, useId, useLayoutEffect, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Loader } from "./loader.js";
+import { Collapse, Swap } from "./presence.js";
+import { Status } from "./status.js";
+/** Short elapsed time: `0.4s`, `4.2s`, `42s`, `3m 05s`. */
+export function formatElapsed(milliseconds) {
+    const ms = Math.max(0, milliseconds);
+    if (ms < 10_000)
+        return `${(ms / 1_000).toFixed(1)}s`;
+    if (ms < 60_000)
+        return `${String(Math.floor(ms / 1_000))}s`;
+    const minutes = Math.floor(ms / 60_000);
+    const seconds = Math.floor((ms % 60_000) / 1_000);
+    return `${String(minutes)}m ${String(seconds).padStart(2, "0")}s`;
+}
+/**
+ * A clock that ticks while `running` and holds still otherwise. Times are
+ * epoch milliseconds (`Date.now()`), owned by the caller.
+ */
+export function useElapsed(startedAt, finishedAt, running) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!running)
+            return;
+        setNow(Date.now());
+        const tick = setInterval(() => {
+            setNow(Date.now());
+        }, 100);
+        return () => {
+            clearInterval(tick);
+        };
+    }, [running]);
+    return (finishedAt ?? now) - startedAt;
+}
+/** A finished mark that closes its arc and draws itself once it appears. */
+function SettledMark({ outcome }) {
+    const [drawn, setDrawn] = useState(false);
+    useLayoutEffect(() => {
+        setDrawn(true);
+    }, []);
+    return (_jsx(Status, { glyph: drawn ? outcome : "arc", progress: 1, size: "compact", tone: outcome === "check" ? "neutral" : "error" }));
+}
+/**
+ * One line of agent activity. While running it says what is happening with
+ * a live clock and shows its trace; when done it settles into "Thought for
+ * 4.2s" and folds the trace away, one click from reopening.
+ */
+export function ActivityLine({ state, startedAt, finishedAt, label, doneLabel, failedLabel = "Stopped after", children, className, }) {
+    const running = state === "running";
+    const elapsed = useElapsed(startedAt, finishedAt, running);
+    // Open while running; fold when it settles, unless the reader chose.
+    const [chosen, setChosen] = useState(null);
+    const [settledState, setSettledState] = useState(state);
+    if (settledState !== state) {
+        setSettledState(state);
+        setChosen(null);
+    }
+    const open = chosen ?? running;
+    const panel = useId();
+    const summary = running
+        ? `${label}…`
+        : `${state === "done" ? doneLabel : failedLabel} ${formatElapsed(elapsed)}`;
+    return (_jsxs("div", { className: cn("caps-disclosure caps-disclosure-row caps-activity-line", state === "failed" && "caps-disclosure-error", className), "data-open": open ? "" : undefined, "data-state": state, children: [_jsxs("button", { type: "button", className: "caps-disclosure-trigger", "aria-expanded": open, "aria-controls": children === undefined ? undefined : panel, onClick: () => {
+                    setChosen(!open);
+                }, children: [_jsx("span", { className: "caps-disclosure-leading caps-activity-line-leading", children: _jsx(Swap, { swapKey: state, children: running ? (_jsx(Loader, { decorative: true, size: "sm", variant: "line" })) : (_jsx(SettledMark, { outcome: state === "done" ? "check" : "cross" })) }) }), _jsx("span", { className: "caps-disclosure-summary", children: _jsx(Swap, { swapKey: running ? "running" : "settled", children: summary }) }), running ? (_jsx("span", { className: "caps-disclosure-trailing", "aria-hidden": "true", children: formatElapsed(elapsed) })) : null, children === undefined ? null : (_jsx(ChevronRight, { "aria-hidden": "true", className: "caps-disclosure-chevron", size: 12 }))] }), children === undefined ? null : (_jsx(Collapse, { open: open, id: panel, children: _jsx("div", { className: "caps-disclosure-panel", children: children }) }))] }));
+}

package/dist/components/alert.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Supported AlertTone values. */
+export type AlertTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error";
+/** Props accepted by Alert. */
+export type AlertProps = {
+    action?: ReactNode;
+    description?: ReactNode;
+    title?: ReactNode;
+    tone?: AlertTone;
+} & Omit<HTMLAttributes<HTMLDivElement>, "title">;
+/** A caller-labelled alert presentation. */
+export declare const Alert: import("react").ForwardRefExoticComponent<{
+    action?: ReactNode;
+    description?: ReactNode;
+    title?: ReactNode;
+    tone?: AlertTone;
+} & Omit<HTMLAttributes<HTMLDivElement>, "title"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/alert.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const alertToneClasses = {
+    neutral: "alert-neutral",
+    primary: "alert-primary",
+    secondary: "alert-secondary",
+    accent: "alert-accent",
+    success: "alert-success",
+    info: "alert-info",
+    warning: "alert-warning",
+    error: "alert-error",
+};
+/** A caller-labelled alert presentation. */
+export const Alert = forwardRef(function Alert({ action, children, className, description, title, tone = "neutral", ...props }, ref) {
+    return (_jsxs("div", { ...props, className: cn("alert caps-alert", alertToneClasses[tone], className), "data-tone": tone, role: props.role ?? "alert", ref: ref, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("h3", { className: "font-semibold", children: title }) : null, description ? _jsx("p", { className: "text-sm", children: description }) : null, children] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+});

package/dist/components/badge.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "react";
+/** Supported BadgeTone values. */
+export type BadgeTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error";
+/** Supported BadgeSize values. */
+export type BadgeSize = "sm" | "default" | "lg";
+/** `quiet` is a soft tint with no outline, for labels that sit beside keys. */
+export type BadgeVariant = "solid" | "quiet";
+/** Props accepted by Badge. */
+export type BadgeProps = {
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    tone?: BadgeTone;
+} & HTMLAttributes<HTMLSpanElement>;
+/** A compact status or category label. */
+export declare const Badge: import("react").ForwardRefExoticComponent<{
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    tone?: BadgeTone;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn, cva } from "../lib/cn.js";
+const badgeVariants = cva("badge caps-badge", {
+    variants: {
+        tone: {
+            neutral: "badge-neutral",
+            primary: "badge-primary",
+            secondary: "badge-secondary",
+            accent: "badge-accent",
+            success: "badge-success",
+            info: "badge-info",
+            warning: "badge-warning",
+            error: "badge-error",
+        },
+        size: { sm: "badge-sm", default: "badge-md", lg: "badge-lg" },
+        variant: { solid: "", quiet: "caps-badge-quiet" },
+    },
+    defaultVariants: { tone: "neutral", size: "default" },
+});
+/** A compact status or category label. */
+export const Badge = forwardRef(function Badge({ className, size, tone, variant, ...props }, ref) {
+    return (_jsx("span", { ...props, className: cn(badgeVariants({ size, tone, variant }), className), ref: ref }));
+});

package/dist/components/button.d.ts

@@ -0,0 +1,55 @@
+import { type ButtonHTMLAttributes, type ElementRef, type ReactNode } from "react";
+/** Supported Button visual variants. */
+export type ButtonVariant = "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost"
+/** Quiet text that turns to the error colour on hover or focus, e.g. Stop. */
+ | "ghost-destructive" | "link";
+/** Supported ButtonSize values. */
+export type ButtonSize = "xs" | "sm" | "default" | "lg" | "icon" | "menubar";
+/** The outcome of a Button's last action. */
+export type ButtonResult = "done" | "failed";
+/** Props accepted by Button. */
+export type ButtonProps = {
+    asChild?: boolean;
+    loading?: boolean;
+    /**
+     * The outcome of the last action. Becoming `done` plays a short beat: a
+     * check (and `resultLabel`) springs in, holds, then settles back to the
+     * label. Becoming `failed` shakes the label by the theme's
+     * `--stipe-motion-shake`. Say what failed elsewhere, next to the action.
+     */
+    result?: ButtonResult | undefined;
+    /** What the done beat says, such as "Installed". The button keeps the wider of its two labels, so nothing shifts. */
+    resultLabel?: ReactNode;
+    /**
+     * Called when the done beat has held long enough to read, just before it
+     * would settle back to the label. Replace the button here to hand off to
+     * what comes next (an "Installed" mark, an "Open" action).
+     */
+    onResultEnd?: (() => void) | undefined;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/** A reusable button with caller-controlled native behavior and intrinsic loading presentation. */
+export declare const Button: import("react").ForwardRefExoticComponent<{
+    asChild?: boolean;
+    loading?: boolean;
+    /**
+     * The outcome of the last action. Becoming `done` plays a short beat: a
+     * check (and `resultLabel`) springs in, holds, then settles back to the
+     * label. Becoming `failed` shakes the label by the theme's
+     * `--stipe-motion-shake`. Say what failed elsewhere, next to the action.
+     */
+    result?: ButtonResult | undefined;
+    /** What the done beat says, such as "Installed". The button keeps the wider of its two labels, so nothing shifts. */
+    resultLabel?: ReactNode;
+    /**
+     * Called when the done beat has held long enough to read, just before it
+     * would settle back to the label. Replace the button here to hand off to
+     * what comes next (an "Installed" mark, an "Open" action).
+     */
+    onResultEnd?: (() => void) | undefined;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/** The native element type used by Button. */
+export type ButtonElement = ElementRef<"button">;

package/dist/components/button.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cn, cva } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion, useReducedMotion, } from "../lib/motion.js";
+import { Loader } from "./loader.js";
+/** Outline and link controls keep a neutral disabled plate behind a hairline. */
+const disabledPlate = "disabled:bg-base-200 disabled:text-base-content disabled:outline-1 disabled:outline-solid disabled:outline-base-content/25 aria-disabled:bg-base-200 aria-disabled:text-base-content aria-disabled:outline-1 aria-disabled:outline-solid aria-disabled:outline-base-content/25";
+const buttonVariants = cva("btn caps-button disabled:pointer-events-none", {
+    variants: {
+        variant: {
+            primary: "btn-primary caps-button-filled",
+            secondary: "btn-secondary caps-button-filled",
+            accent: "btn-accent caps-button-filled",
+            destructive: "btn-error caps-button-filled",
+            outline: `btn-outline ${disabledPlate}`,
+            // A faceless ghost stays faceless when disabled: Caps dims its ink.
+            ghost: "btn-ghost",
+            "ghost-destructive": "btn-ghost caps-button-ghost-destructive",
+            link: `btn-link ${disabledPlate}`,
+        },
+        size: {
+            xs: "btn-xs",
+            sm: "btn-sm",
+            default: "btn-md",
+            lg: "btn-lg",
+            icon: "btn-square btn-md",
+            menubar: "caps-button-menubar",
+        },
+    },
+    defaultVariants: { variant: "primary", size: "default" },
+});
+/** A reusable button with caller-controlled native behavior and intrinsic loading presentation. */
+export const Button = forwardRef(function Button({ asChild = false, children, className, disabled, loading = false, result, resultLabel, onResultEnd, size = "default", variant = "primary", ...props }, ref) {
+    const classes = cn(buttonVariants({ size, variant }), className);
+    // A result present when the button first mounts is history, not news.
+    const mountedResult = useRef(result).current;
+    const node = useRef(null);
+    useImperativeHandle(ref, () => node.current);
+    // Text labels compare by value; element labels re-measure each render.
+    useWidthTween(node, [loading, result, children]);
+    if (asChild) {
+        return (_jsx(Slot, { ...props, "aria-busy": loading ? true : props["aria-busy"], "aria-disabled": disabled === true || loading ? true : undefined, className: classes, ref: node, children: children }));
+    }
+    return (_jsx("button", { ...props, "aria-busy": loading ? true : props["aria-busy"], className: classes, disabled: disabled === true || loading, ref: node, type: props.type ?? "button", children: result === undefined && resultLabel === undefined ? (_jsxs(_Fragment, { children: [loading ? (_jsx(Loader, { className: "size-3", decorative: true, size: "sm" })) : null, children] })) : (_jsx(ResultFaces, { label: resultLabel, loading: loading, onResultEnd: onResultEnd, result: result, settled: mountedResult, children: children })) }));
+});
+/**
+ * When a button's label changes (loading, a result, new text) its width eases
+ * to the new size instead of jumping, so neighbours never lurch.
+ */
+function useWidthTween(node, label) {
+    const width = useRef(null);
+    const tween = useRef(null);
+    useLayoutEffect(() => {
+        const element = node.current;
+        if (!element)
+            return;
+        const running = tween.current;
+        const from = running
+            ? element.getBoundingClientRect().width
+            : width.current;
+        running?.cancel();
+        tween.current = null;
+        const to = element.getBoundingClientRect().width;
+        width.current = to;
+        if (from === null || Math.abs(from - to) < 1 || !canAnimate(element))
+            return;
+        const motion = readMotion(element);
+        if (motion.reduced)
+            return;
+        const animation = element.animate([{ width: `${String(from)}px` }, { width: `${String(to)}px` }], { duration: motion.normal, easing: motionEasing(motion, motion.ease) });
+        tween.current = animation;
+        // Content wider than the moving edge is clipped, never spilled or wrapped.
+        element.style.overflow = "clip";
+        element.style.whiteSpace = "nowrap";
+        const done = () => {
+            if (tween.current !== animation)
+                return;
+            tween.current = null;
+            element.style.removeProperty("overflow");
+            element.style.removeProperty("white-space");
+        };
+        animation.onfinish = done;
+        animation.oncancel = done;
+    }, [node, ...label]);
+}
+/** How long the done beat holds before settling: long enough to read. */
+const resultHoldMs = 1100;
+function pop(faces, motion) {
+    // One overshoot sized by the theme's bounce; a calm theme just nods.
+    const liveliness = motion.bounce / 0.3;
+    const lift = 1 + 0.05 * Math.min(1.4, 0.4 + liveliness);
+    const dip = 1 - 0.02 * Math.min(1.4, liveliness);
+    return faces.animate([
+        { transform: "scale(1)" },
+        { transform: `scale(${String(lift)})`, offset: 0.35 },
+        { transform: `scale(${String(dip)})`, offset: 0.7 },
+        { transform: "scale(1)" },
+    ], {
+        duration: motion.springDuration,
+        easing: motionEasing(motion, "ease-out"),
+    });
+}
+function shake(faces, motion) {
+    const x = motion.shake;
+    return faces.animate([
+        { transform: "none" },
+        { transform: `translateX(${String(-x)}px)` },
+        { transform: `translateX(${String(x)}px)` },
+        { transform: `translateX(${String(-x * 0.6)}px)` },
+        { transform: `translateX(${String(x * 0.3)}px)` },
+        { transform: "none" },
+    ], { duration: motion.slow * 1.3, easing: motionEasing(motion, "linear") });
+}
+function swapFaces(leaving, arriving, motion) {
+    const travel = motion.distance + 2;
+    const blur = `blur(${String(motion.blur)}px)`;
+    return [
+        leaving.animate([
+            { opacity: 1, transform: "none", filter: "blur(0px)" },
+            {
+                opacity: 0,
+                transform: `translateY(${String(-travel)}px)`,
+                filter: blur,
+            },
+        ], {
+            duration: motion.fast,
+            // A label rolls away at once; an ease-in would linger on stale text.
+            easing: motionEasing(motion, motion.ease),
+        }),
+        arriving.animate([
+            {
+                opacity: 0,
+                transform: `translateY(${String(travel)}px)`,
+                filter: blur,
+            },
+            { opacity: 1, transform: "none", filter: "blur(0px)" },
+        ], {
+            duration: motion.normal,
+            easing: motionEasing(motion, motion.ease),
+            fill: "backwards",
+        }),
+    ];
+}
+/** @internal The label and result faces of a Button with a result beat. */
+function ResultFaces({ children, label, loading, onResultEnd, result, settled, }) {
+    const faces = useRef(null);
+    const reduced = useReducedMotion();
+    const [showing, setShowing] = useState(false);
+    // The result face exists only for its beat, so it never lingers as hidden
+    // text in the button.
+    const [resultMounted, setResultMounted] = useState(false);
+    if (showing && !resultMounted)
+        setResultMounted(true);
+    const previous = useRef(settled);
+    const ended = useRef(onResultEnd);
+    useEffect(() => {
+        ended.current = onResultEnd;
+    }, [onResultEnd]);
+    // Before paint, so the label never flashes ahead of the beat.
+    useLayoutEffect(() => {
+        const before = previous.current;
+        previous.current = result;
+        if (result === before)
+            return;
+        if (result === "done") {
+            setShowing(true);
+            const settle = setTimeout(() => {
+                // A caller that hands off keeps the result face until it replaces
+                // the button; otherwise the beat settles back to the label.
+                if (ended.current)
+                    ended.current();
+                else
+                    setShowing(false);
+            }, resultHoldMs);
+            return () => {
+                clearTimeout(settle);
+            };
+        }
+        setShowing(false);
+        const element = faces.current;
+        if (result !== "failed" || !element || !canAnimate(element))
+            return;
+        const motion = readMotion(element);
+        if (motion.shake <= 0)
+            return;
+        const refusal = shake(element, motion);
+        return () => {
+            refusal.cancel();
+        };
+    }, [result, reduced]);
+    const shown = useRef(showing);
+    useLayoutEffect(() => {
+        const element = faces.current;
+        if (!element || shown.current === showing)
+            return;
+        shown.current = showing;
+        const labelFace = element.querySelector('[data-face="label"]');
+        const resultFace = element.querySelector('[data-face="result"]');
+        if (!labelFace || !resultFace || !canAnimate(element)) {
+            if (!showing)
+                setResultMounted(false);
+            return;
+        }
+        const motion = readMotion(element);
+        const animations = showing
+            ? swapFaces(labelFace, resultFace, motion)
+            : swapFaces(resultFace, labelFace, motion);
+        if (!showing)
+            animations[0]?.addEventListener("finish", () => {
+                setResultMounted(false);
+            });
+        if (showing && !motion.reduced) {
+            animations.push(pop(element.closest("button") ?? element, motion));
+            const tick = resultFace.querySelector("path");
+            if (tick)
+                animations.push(tick.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], {
+                    duration: motion.normal * 1.4,
+                    delay: motion.fast / 2,
+                    easing: motionEasing(motion, motion.ease),
+                    fill: "backwards",
+                }));
+        }
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [showing, reduced]);
+    return (_jsxs("span", { ref: faces, className: "caps-button-faces", "data-showing": showing ? "result" : "label", children: [_jsxs("span", { className: "caps-button-face", "data-face": "label", "aria-hidden": showing ? true : undefined, children: [loading || showing ? (_jsx(Loader, { className: "size-3", decorative: true, size: "sm" })) : null, children] }), resultMounted ? (_jsxs("span", { className: "caps-button-face", "data-face": "result", "aria-hidden": showing ? undefined : true, children: [_jsx("svg", { className: "caps-button-check", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M4.5 12.5 9.5 17.5 19.5 6.5", pathLength: 1 }) }), label === undefined ? children : label] })) : null] }));
+}

package/dist/components/card.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes } from "react";
+/** Props accepted by Card. */
+export type CardProps = {
+    variant?: "surface" | "outline" | "interactive" | "game" | "fit";
+    /** Emphasize a featured item without changing its interaction. */
+    featured?: boolean;
+    /** Present the absence of content within the same card shell. */
+    state?: "empty";
+    /** Reduce card section padding when several related details share a page. */
+    density?: "regular" | "compact";
+} & HTMLAttributes<HTMLDivElement>;
+/** Props accepted by CenteredCard. */
+export type CenteredCardProps = CardProps & {
+    width?: "default" | "wide";
+};
+/** A presentational card shell. */
+export declare const Card: import("react").ForwardRefExoticComponent<{
+    variant?: "surface" | "outline" | "interactive" | "game" | "fit";
+    /** Emphasize a featured item without changing its interaction. */
+    featured?: boolean;
+    /** Present the absence of content within the same card shell. */
+    state?: "empty";
+    /** Reduce card section padding when several related details share a page. */
+    density?: "regular" | "compact";
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Center one primary card in a welcoming, viewport-filling page stage. */
+export declare const CenteredCard: import("react").ForwardRefExoticComponent<{
+    variant?: "surface" | "outline" | "interactive" | "game" | "fit";
+    /** Emphasize a featured item without changing its interaction. */
+    featured?: boolean;
+    /** Present the absence of content within the same card shell. */
+    state?: "empty";
+    /** Reduce card section padding when several related details share a page. */
+    density?: "regular" | "compact";
+} & HTMLAttributes<HTMLDivElement> & {
+    width?: "default" | "wide";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** A card header layout with optional centered alignment. */
+export type CardHeaderProps = {
+    alignment?: "start" | "center";
+} & HTMLAttributes<HTMLDivElement>;
+/** Render a Caps card header with the requested alignment. */
+export declare const CardHeader: import("react").ForwardRefExoticComponent<{
+    alignment?: "start" | "center";
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by CardTitle. */
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level; the host keeps its document outline. Defaults to 3. */
+    level?: 2 | 3;
+};
+/** A card title element. */
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level; the host keeps its document outline. Defaults to 3. */
+    level?: 2 | 3;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+/** A card supporting-description element. */
+export declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+/** A card body layout. */
+export declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** A card footer layout. */
+export declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn, cva } from "../lib/cn.js";
+const cardVariants = cva("card caps-card", {
+    variants: {
+        variant: {
+            surface: "caps-card-surface",
+            outline: "caps-card-outline",
+            interactive: "caps-card-interactive",
+            game: "caps-card-game caps-card-interactive",
+            fit: "caps-card-fit",
+        },
+        density: {
+            regular: "",
+            compact: "caps-card-compact",
+        },
+    },
+    defaultVariants: { variant: "surface", density: "regular" },
+});
+/** A presentational card shell. */
+export const Card = forwardRef(function Card({ className, density, featured = false, state, variant, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn(cardVariants({ density, variant }), featured && "caps-card-featured", className), "data-state": state, ref: ref }));
+});
+/** Center one primary card in a welcoming, viewport-filling page stage. */
+export const CenteredCard = forwardRef(function CenteredCard({ className, density, variant, width = "default", ...props }, ref) {
+    return (_jsx("main", { className: "caps-centered-card-stage", children: _jsx(Card, { ...props, className: cn("caps-centered-card", width === "wide" && "caps-centered-card-wide", className), ref: ref, variant: variant ?? "surface", ...(density ? { density } : {}) }) }));
+});
+/** Render a Caps card header with the requested alignment. */
+export const CardHeader = forwardRef(function CardHeader({ alignment = "start", className, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-card-header", alignment === "center" && "caps-card-header-centered", className), ref: ref }));
+});
+/** A card title element. */
+export const CardTitle = forwardRef(function CardTitle({ className, level = 3, ...props }, ref) {
+    const Heading = level === 2 ? "h2" : "h3";
+    return (_jsx(Heading, { ...props, className: cn("caps-card-title", className), ref: ref }));
+});
+/** A card supporting-description element. */
+export const CardDescription = forwardRef(function CardDescription({ className, ...props }, ref) {
+    return (_jsx("p", { ...props, className: cn("caps-card-description", className), ref: ref }));
+});
+/** A card body layout. */
+export const CardContent = forwardRef(function CardContent({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-card-content", className), ref: ref }));
+});
+/** A card footer layout. */
+export const CardFooter = forwardRef(function CardFooter({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-card-footer", className), ref: ref }));
+});

package/dist/components/chat-bubble.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Which side of the conversation a bubble sits on. */
+export type ChatBubbleSide = "agent" | "user";
+/** `pending` is still being written; `error` is a turn that did not finish. */
+export type ChatBubbleState = "settled" | "pending" | "error";
+/** Props accepted by ChatBubble. */
+export type ChatBubbleProps = {
+    /** An agent speaks from the left with its mark; the person from the right. */
+    side: ChatBubbleSide;
+    /** A mark for an agent, drawn beside its bubble. */
+    avatar?: ReactNode;
+    /** Who is speaking, on the line above the bubble. */
+    name?: ReactNode;
+    /** When it was said, or what the speaker is doing instead. */
+    time?: ReactNode;
+    state?: ChatBubbleState;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * One turn of a conversation: who said it, when, and what. It owns the
+ * sides, the bubble and the still-writing dots; the caller owns the content.
+ */
+export declare const ChatBubble: import("react").ForwardRefExoticComponent<{
+    /** An agent speaks from the left with its mark; the person from the right. */
+    side: ChatBubbleSide;
+    /** A mark for an agent, drawn beside its bubble. */
+    avatar?: ReactNode;
+    /** Who is speaking, on the line above the bubble. */
+    name?: ReactNode;
+    /** When it was said, or what the speaker is doing instead. */
+    time?: ReactNode;
+    state?: ChatBubbleState;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/chat-bubble.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * One turn of a conversation: who said it, when, and what. It owns the
+ * sides, the bubble and the still-writing dots; the caller owns the content.
+ */
+export const ChatBubble = forwardRef(function ChatBubble({ side, avatar, name, time, state = "settled", children, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, className: cn("caps-chat-bubble", className), "data-side": side, "data-state": state, ref: ref, children: [avatar ? (_jsx("span", { "aria-hidden": "true", className: "caps-chat-avatar", children: avatar })) : null, _jsxs("div", { className: "caps-chat-main", children: [name || time ? (_jsxs("div", { className: "caps-chat-meta", children: [name ? _jsx("span", { className: "caps-chat-name", children: name }) : null, time ? _jsx("span", { className: "caps-chat-time", children: time }) : null] })) : null, _jsxs("div", { className: "caps-chat-body", children: [children, state === "pending" ? (_jsxs("span", { "aria-hidden": "true", className: "caps-chat-typing", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })) : null] })] })] }));
+});

package/dist/components/checkbox-bead.d.ts

@@ -0,0 +1,6 @@
+/** Visual state of a checkbox's mark: unchecked, checked, or indeterminate ("mixed"). */
+export type CheckboxState = "unchecked" | "checked" | "mixed";
+/** @internal Draw one sculpted stroke from its first tip through to its last. */
+export declare function CheckboxBead({ state }: {
+    state: CheckboxState;
+}): import("react/jsx-runtime").JSX.Element;