@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/presence.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion, useReducedMotion, } from "../lib/motion.js";
+/**
+ * The gap a vertical grid or flex container puts before this element, or 0
+ * when it is the first child or its container doesn't stack.
+ */
+function stackGap(element) {
+    const parent = element.parentElement;
+    if (!parent || element.previousElementSibling === null)
+        return 0;
+    const style = getComputedStyle(parent);
+    const stacks = style.display.includes("grid") ||
+        (style.display.includes("flex") &&
+            style.flexDirection.startsWith("column"));
+    if (!stacks)
+        return 0;
+    const gap = Number.parseFloat(style.rowGap);
+    return Number.isFinite(gap) ? gap : 0;
+}
+/**
+ * Content that arrives and leaves instead of popping: it makes room, fades in
+ * while travelling the theme's `--stipe-motion-distance`, and on leaving fades
+ * out and gives its room back before it unmounts. Reduced motion keeps a short
+ * fade only.
+ */
+export const Presence = forwardRef(function Presence({ show, appear = false, children, className, ...props }, ref) {
+    const node = useRef(null);
+    useImperativeHandle(ref, () => node.current);
+    const reduced = useReducedMotion();
+    const [mounted, setMounted] = useState(show);
+    const first = useRef(true);
+    if (show && !mounted)
+        setMounted(true);
+    useLayoutEffect(() => {
+        const element = node.current;
+        const initial = first.current;
+        first.current = false;
+        if (!element || (initial && !appear))
+            return;
+        if (!canAnimate(element)) {
+            if (!show)
+                setMounted(false);
+            return;
+        }
+        const motion = readMotion(element);
+        const travel = `translateY(${String(motion.distance)}px)`;
+        const easing = motionEasing(motion, motion.ease);
+        // In flow, arriving content makes room and leaving content gives it
+        // back, so nothing below jumps. Reduced motion changes the room at once.
+        const height = element.getBoundingClientRect().height;
+        const gap = stackGap(element);
+        const room = (from, to) => {
+            element.style.overflow = "clip";
+            const edge = (size) => ({
+                height: `${String(size)}px`,
+                marginBlockStart: `${String(size === 0 ? -gap : 0)}px`,
+            });
+            const animation = element.animate([edge(from), edge(to)], {
+                duration: motion.normal,
+                easing,
+            });
+            const restore = () => {
+                element.style.removeProperty("overflow");
+            };
+            animation.addEventListener("finish", restore);
+            animation.addEventListener("cancel", restore);
+            return animation;
+        };
+        if (show) {
+            const animations = [
+                element.animate([
+                    { opacity: 0, transform: travel },
+                    { opacity: 1, transform: "none" },
+                ], { duration: motion.normal, easing }),
+            ];
+            if (!reduced && height > 0)
+                animations.push(room(0, height));
+            return () => {
+                for (const animation of animations)
+                    animation.cancel();
+            };
+        }
+        const fade = element.animate([
+            { opacity: 1, transform: "none" },
+            { opacity: 0, transform: travel },
+        ], {
+            duration: motion.fast,
+            easing: motionEasing(motion, motion.easeExit),
+            fill: "forwards",
+        });
+        const last = !reduced && height > 0 ? room(height, 0) : fade;
+        if (last !== fade)
+            last.effect?.updateTiming({ fill: "forwards" });
+        last.addEventListener("finish", () => {
+            setMounted(false);
+        });
+        return () => {
+            fade.cancel();
+            last.cancel();
+        };
+    }, [show, appear, reduced]);
+    if (!mounted)
+        return null;
+    return (_jsx("div", { ...props, ref: node, className: cn("caps-presence", className), "data-present": show, "aria-hidden": show ? undefined : true, children: children }));
+});
+/**
+ * Content that opens and closes its own space: an inserted alert, a field
+ * error, a disclosure body. Height and opacity follow the theme's tempo; under
+ * reduced motion the space changes at once and only the fade remains.
+ */
+export const Collapse = forwardRef(function Collapse({ open, children, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-collapse", className), "data-open": open, "aria-hidden": open ? undefined : true, children: _jsx("div", { className: "caps-collapse-clip", children: children }) }));
+});
+/**
+ * One piece of content replaced by another without a hard cut: loading to
+ * loaded, "Saving…" to "Saved". The old content fades out (blurred by the
+ * theme's `--stipe-motion-blur`) as the new one arrives, and the box eases to
+ * the new size. Reduced motion keeps the crossfade and drops the travel.
+ */
+export const Swap = forwardRef(function Swap({ swapKey, anchor = "start", children, className, ...props }, ref) {
+    const node = useRef(null);
+    useImperativeHandle(ref, () => node.current);
+    const reduced = useReducedMotion();
+    // The latest content rendered under the current key, kept so it can leave.
+    const [shown, setShown] = useState({
+        key: swapKey,
+        content: children,
+    });
+    const [leaving, setLeaving] = useState([]);
+    if (shown.key !== swapKey) {
+        setLeaving([
+            ...leaving.filter((layer) => layer.key !== swapKey && layer.key !== shown.key),
+            shown,
+        ]);
+        setShown({ key: swapKey, content: children });
+    }
+    else if (shown.content !== children) {
+        setShown({ key: swapKey, content: children });
+    }
+    const size = useRef(null);
+    useLayoutEffect(() => {
+        const element = node.current;
+        if (!element || !("ResizeObserver" in globalThis))
+            return;
+        size.current = element.getBoundingClientRect();
+        const observer = new ResizeObserver(() => {
+            if (element.getAnimations().length === 0)
+                size.current = element.getBoundingClientRect();
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const element = node.current;
+        if (!element)
+            return;
+        const exits = [
+            ...element.querySelectorAll(":scope > [data-swap-leaving]"),
+        ];
+        const entering = element.querySelector(":scope > [data-swap-current]");
+        if (entering === null || exits.length === 0)
+            return;
+        if (!canAnimate(element)) {
+            setLeaving([]);
+            return;
+        }
+        const before = size.current;
+        const after = element.getBoundingClientRect();
+        const motion = readMotion(element);
+        const animations = [
+            entering.animate([
+                {
+                    opacity: 0,
+                    filter: `blur(${String(motion.blur)}px)`,
+                    transform: `translateY(${String(motion.distance / 2)}px)`,
+                },
+                { opacity: 1, filter: "blur(0px)", transform: "none" },
+            ], {
+                duration: motion.normal,
+                easing: motionEasing(motion, motion.ease),
+            }),
+        ];
+        for (const layer of exits) {
+            const exit = layer.animate([
+                { opacity: 1, filter: "blur(0px)", transform: "none" },
+                {
+                    opacity: 0,
+                    filter: `blur(${String(motion.blur)}px)`,
+                    transform: `translateY(${String(-motion.distance / 2)}px)`,
+                },
+            ], {
+                duration: motion.fast,
+                easing: motionEasing(motion, motion.easeExit),
+                fill: "forwards",
+            });
+            const key = layer.dataset.swapLeaving;
+            exit.onfinish = () => {
+                setLeaving((layers) => layers.filter((layer) => layer.key !== key));
+            };
+            animations.push(exit);
+        }
+        const resized = before !== null &&
+            (Math.abs(before.height - after.height) > 0.5 ||
+                Math.abs(before.width - after.width) > 0.5);
+        if (!reduced && resized)
+            animations.push(element.animate([
+                {
+                    width: `${String(before.width)}px`,
+                    height: `${String(before.height)}px`,
+                },
+                {
+                    width: `${String(after.width)}px`,
+                    height: `${String(after.height)}px`,
+                },
+            ], {
+                duration: motion.normal,
+                easing: motionEasing(motion, motion.ease),
+            }));
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [swapKey, reduced]);
+    return (_jsx("div", { ...props, ref: node, className: cn("caps-swap", className), "data-anchor": anchor, children: [
+            ...leaving.map((layer) => (_jsx("div", { className: "caps-swap-layer", "data-swap-leaving": layer.key, "aria-hidden": "true", children: layer.content }, layer.key))),
+            _jsx("div", { className: "caps-swap-layer", "data-swap-current": "", children: children }, swapKey),
+        ] }));
+});

package/dist/components/price-tag.d.ts

@@ -0,0 +1,11 @@
+/** The caller-provided price shown on a store entry. */
+export type PriceTagProps = Readonly<{
+    price: {
+        kind: "free";
+    } | {
+        kind: "one-time";
+        label: string;
+    };
+}>;
+/** A compact, theme-backed price label for store entries. */
+export declare function PriceTag({ price }: PriceTagProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/price-tag.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "./badge.js";
+/** A compact, theme-backed price label for store entries. */
+export function PriceTag({ price }) {
+    return (_jsx(Badge, { tone: "success", variant: "quiet", children: price.kind === "free" ? ("Free") : (_jsx("span", { className: "caps-numeric", children: price.label })) }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ProgressHTMLAttributes } from "react";
+/** Supported ProgressTone values. */
+export type ProgressTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error";
+/** Props accepted by Progress. */
+export type ProgressProps = {
+    tone?: ProgressTone;
+} & ProgressHTMLAttributes<HTMLProgressElement>;
+/** A progress indicator for caller-provided progress values. */
+export declare const Progress: import("react").ForwardRefExoticComponent<{
+    tone?: ProgressTone;
+} & ProgressHTMLAttributes<HTMLProgressElement> & import("react").RefAttributes<HTMLProgressElement>>;
+/** A compact labelled resource meter for game windows. Values come from the game. */
+export type GameMeterProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    value: number;
+    max: number;
+    tone?: ProgressTone;
+};
+/** Pair a game's bounded resource value with its visible and accessible meter. */
+export declare const GameMeter: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    value: number;
+    max: number;
+    tone?: ProgressTone;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/progress.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+const progressToneClasses = {
+    neutral: "progress-neutral",
+    primary: "progress-primary",
+    secondary: "progress-secondary",
+    accent: "progress-accent",
+    success: "progress-success",
+    info: "progress-info",
+    warning: "progress-warning",
+    error: "progress-error",
+};
+/** A progress indicator for caller-provided progress values. */
+export const Progress = forwardRef(function Progress({ className, tone = "primary", ...props }, ref) {
+    return (_jsx("progress", { ...props, "data-complete": props.value !== undefined &&
+            Number(props.value) >= Number(props.max ?? 1)
+            ? "true"
+            : undefined, className: cn("progress caps-gooey-motion caps-gooey-progress w-full", progressToneClasses[tone], className), ref: ref }));
+});
+/** Pair a game's bounded resource value with its visible and accessible meter. */
+export const GameMeter = forwardRef(function GameMeter({ label, value, max, tone = "info", className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-game-meter", className), children: [_jsxs("div", { className: "caps-game-meter-readout", children: [_jsx("span", { children: label }), _jsxs("span", { className: "caps-game-meter-value", children: [value, " / ", max] })] }), _jsx(Progress, { "aria-label": label, value: value, max: max, tone: tone })] }));
+});

package/dist/components/prose.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from "react";
+/** Supported Prose treatments. */
+export type ProseVariant = "default" | "dropcap";
+/** Props accepted by Prose. */
+export type ProseProps = {
+    variant?: ProseVariant;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * Tailwind Typography's `prose` rhythm and measure in the active theme's
+ * colours and faces; the caller supplies the document content.
+ */
+export declare const Prose: import("react").ForwardRefExoticComponent<{
+    variant?: ProseVariant;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/prose.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Tailwind Typography's `prose` rhythm and measure in the active theme's
+ * colours and faces; the caller supplies the document content.
+ */
+export const Prose = forwardRef(function Prose({ className, variant = "default", ...props }, ref) {
+    return (_jsx("article", { ...props, className: cn("prose prose-caps", variant === "dropcap" && "caps-prose-dropcap", className), ref: ref }));
+});

package/dist/components/quota-meter.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ProgressTone } from "./progress.js";
+/** Props accepted by QuotaMeter. */
+export type QuotaMeterProps = {
+    label: ReactNode;
+    value: number;
+    max: number;
+    valueLabel?: ReactNode;
+    maxLabel?: ReactNode;
+    description?: ReactNode;
+    indicator?: ReactNode;
+    tone?: ProgressTone;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/** A meter presentation for caller-provided quota values. */
+export declare const QuotaMeter: import("react").ForwardRefExoticComponent<{
+    label: ReactNode;
+    value: number;
+    max: number;
+    valueLabel?: ReactNode;
+    maxLabel?: ReactNode;
+    description?: ReactNode;
+    indicator?: ReactNode;
+    tone?: ProgressTone;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/quota-meter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Progress } from "./progress.js";
+/** A meter presentation for caller-provided quota values. */
+export const QuotaMeter = forwardRef(function QuotaMeter({ className, label, value, max, valueLabel, maxLabel, description, indicator, tone, ...props }, ref) {
+    const id = useId();
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    return (_jsxs("div", { ...props, className: cn("space-y-sm", className), ref: ref, children: [_jsxs("div", { className: "flex items-center justify-between gap-sm", children: [_jsxs("div", { className: "flex items-center gap-sm", children: [_jsx("div", { className: "font-medium", id: labelId, children: label }), indicator !== undefined ? _jsx("div", { children: indicator }) : null] }), _jsxs("div", { className: "caps-numeric", children: [valueLabel ?? value, " / ", maxLabel ?? max] })] }), _jsx(Progress, { "aria-describedby": description !== undefined ? descriptionId : undefined, "aria-labelledby": labelId, max: max, ...(tone === undefined ? {} : { tone }), value: value }), description !== undefined ? (_jsx("p", { className: "text-sm text-base-content", id: descriptionId, children: description })) : null] }));
+});

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

@@ -0,0 +1,4 @@
+/** @internal A selected bead emerging from a recessed radio well. */
+export declare function RadioBead({ checked }: {
+    checked: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio-bead.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMotion } from "../lib/motion.js";
+import { animate } from "animejs";
+import { themedEase, themedSpring } from "../lib/motion-spring.js";
+import { useId, useLayoutEffect, useRef } from "react";
+import { GooeyInsetDefinition, GooeyShadowDefinition, GooeySurfaceDefinition, } from "./gooey.js";
+/** @internal A selected bead emerging from a recessed radio well. */
+export function RadioBead({ checked }) {
+    const id = `caps-radio-${useId().replaceAll(":", "")}`;
+    const body = useRef(null);
+    const initial = useRef(checked).current;
+    const previous = useRef(checked);
+    const root = useRef(null);
+    const motion = useMotion(root);
+    const { reduced } = motion;
+    useLayoutEffect(() => {
+        if (!body.current)
+            return;
+        const immediate = reduced || previous.current === checked;
+        previous.current = checked;
+        const radius = checked ? 4 : 0;
+        // The radio's own lively settle, in the theme's feel.
+        const press = themedEase(motion, { ease: "outCubic", duration: 75 });
+        const settle = checked
+            ? themedSpring(motion, { bounce: 0.65, duration: 300 })
+            : themedEase(motion, { ease: "inCubic", duration: 100 });
+        const bead = animate(body.current, immediate
+            ? {
+                rx: radius,
+                ry: radius,
+                cy: 6,
+                duration: 0,
+            }
+            : {
+                rx: [
+                    { to: checked ? 3.5 : 4.15, ...press },
+                    { to: radius, ...settle },
+                ],
+                ry: [
+                    { to: checked ? 4.5 : 3.85, ...press },
+                    { to: radius, ...settle },
+                ],
+                cy: [
+                    { to: checked ? 5.85 : 6.1, ...press },
+                    { to: 6, ...settle },
+                ],
+            });
+        return () => {
+            bead.cancel();
+        };
+    }, [checked, reduced, motion]);
+    return (_jsxs("svg", { ref: root, className: "caps-radio-visual", width: "24", height: "24", viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: [_jsxs("defs", { children: [_jsx(GooeySurfaceDefinition, { id: `${id}-surface`, transform: "matrix(1 0 0 1 6 6)" }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx(GooeyInsetDefinition, { id: `${id}-inset` }), _jsx("clipPath", { id: `${id}-well`, children: _jsx("circle", { cx: "6", cy: "6", r: "5" }) })] }), _jsx("circle", { className: "caps-radio-track", cx: "6", cy: "6", r: "5.5", filter: `url(#${id}-inset)` }), _jsx("g", { clipPath: `url(#${id}-well)`, children: _jsx("ellipse", { ref: body, cx: "6", cy: "6", rx: initial ? 4 : 0, ry: initial ? 4 : 0, fill: `url(#${id}-surface)`, filter: `url(#${id}-shadow)` }) })] }));
+}

package/dist/components/radio-group.d.ts

@@ -0,0 +1,54 @@
+import { type FieldsetHTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+/** Props accepted by RadioGroup. */
+export type RadioGroupProps = {
+    children: ReactNode;
+    defaultValue?: string;
+    name?: string;
+    /** Called after the selected radio value changes. */
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    value?: string;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange">;
+/** A radio-group primitive with caller-owned selection state. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    defaultValue?: string;
+    name?: string;
+    /** Called after the selected radio value changes. */
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    value?: string;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange"> & import("react").RefAttributes<HTMLFieldSetElement>>;
+/** Props accepted by RadioGroupItem. */
+export type RadioGroupItemProps = {
+    value: string;
+    /** Replaces the bead while the native input continues to own selection. */
+    indicator?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked" | "name" | "type" | "value">;
+/** A selectable item in a RadioGroup. */
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<{
+    value: string;
+    /** Replaces the bead while the native input continues to own selection. */
+    indicator?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "type" | "value" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;
+/** Props accepted by RadioGroupCard. */
+export type RadioGroupCardProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    /** A short readout on the card's trailing edge, such as a price or size. */
+    meta?: ReactNode;
+} & RadioGroupItemProps;
+/**
+ * A radio choice presented as a card: bead, title, optional description and a
+ * trailing readout. The whole card is the hit area; the title names it.
+ */
+export declare const RadioGroupCard: import("react").ForwardRefExoticComponent<{
+    title: ReactNode;
+    description?: ReactNode;
+    /** A short readout on the card's trailing edge, such as a price or size. */
+    meta?: ReactNode;
+} & {
+    value: string;
+    /** Replaces the bead while the native input continues to own selection. */
+    indicator?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "type" | "value" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/radio-group.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { RadioBead } from "./radio-bead.js";
+const RadioGroupContext = createContext(null);
+/** A radio-group primitive with caller-owned selection state. */
+export const RadioGroup = forwardRef(function RadioGroup({ children, className, defaultValue, disabled = false, name: providedName, onValueChange, orientation = "vertical", value: controlledValue, ...props }, ref) {
+    const generatedName = useId();
+    const fieldset = useRef(null);
+    useImperativeHandle(ref, () => {
+        if (!fieldset.current)
+            throw new Error("RadioGroup is not mounted");
+        return fieldset.current;
+    }, []);
+    const name = providedName ?? `radio-group-${generatedName}`;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = controlledValue ?? uncontrolledValue;
+    useEffect(() => {
+        const form = fieldset.current?.form;
+        if (!form || controlledValue !== undefined)
+            return;
+        const reset = (event) => {
+            queueMicrotask(() => {
+                if (!event.defaultPrevented)
+                    setUncontrolledValue(defaultValue);
+            });
+        };
+        form.addEventListener("reset", reset);
+        return () => {
+            form.removeEventListener("reset", reset);
+        };
+    }, [controlledValue, defaultValue, props.form]);
+    const handleChange = (next) => {
+        if (controlledValue === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    return (_jsx(RadioGroupContext.Provider, { value: { disabled, name, onValueChange: handleChange, value }, children: _jsx("fieldset", { ...props, className: cn("flex gap-md", orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col", className), disabled: disabled, role: props.role ?? "radiogroup", ref: fieldset, children: children }) }));
+});
+/** A selectable item in a RadioGroup. */
+export const RadioGroupItem = forwardRef(function RadioGroupItem({ className, indicator, onChange, onClick, value: itemValue, ...props }, ref) {
+    const context = useContext(RadioGroupContext);
+    if (!context)
+        throw new Error("RadioGroupItem must be used inside <RadioGroup>");
+    const checked = context.value === itemValue;
+    const handleChange = (event) => {
+        onChange?.(event);
+        if (event.target.checked)
+            context.onValueChange?.(itemValue);
+    };
+    return (_jsxs("span", { className: "caps-radio", "data-checked": checked, "data-custom-indicator": indicator !== undefined || undefined, children: [_jsx("input", { ...props, "aria-checked": checked, checked: checked, className: cn("caps-radio-input", className), disabled: context.disabled || props.disabled, name: context.name, onChange: handleChange, onClick: onClick, ref: ref, type: "radio", value: itemValue }), indicator !== undefined ? indicator : _jsx(RadioBead, { checked: checked })] }));
+});
+/**
+ * A radio choice presented as a card: bead, title, optional description and a
+ * trailing readout. The whole card is the hit area; the title names it.
+ */
+export const RadioGroupCard = forwardRef(function RadioGroupCard({ description, id, meta, title, ...props }, ref) {
+    const context = useContext(RadioGroupContext);
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const checked = context?.value === props.value;
+    const disabled = context?.disabled === true || props.disabled === true;
+    return (_jsxs("label", { className: "caps-choice-card", "data-checked": checked, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx(RadioGroupItem, { ...props, "aria-describedby": description ? `${inputId}-description` : undefined, "aria-labelledby": `${inputId}-title`, id: inputId, ref: ref }), _jsxs("span", { className: "caps-choice-card-copy", children: [_jsx("span", { className: "caps-choice-card-title", id: `${inputId}-title`, children: title }), description ? (_jsx("span", { className: "caps-choice-card-description", id: `${inputId}-description`, children: description })) : null] }), meta ? _jsx("span", { className: "caps-choice-card-meta", children: meta }) : null] }));
+});

package/dist/components/resize-handle.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from "react";
+/** Accessible grip presentation with caller-owned resize state and pointer gesture. */
+export type ResizeHandleProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    "aria-label": string;
+    orientation: "horizontal" | "vertical";
+    variant?: "grip" | "notch";
+    value: number;
+    min: number;
+    max: number;
+    /** Receives a clamped pixel position from keyboard controls. */
+    onValueChange: (value: number) => void;
+};
+/** Visual and keyboard surface for a caller-owned resize gesture. */
+export declare const ResizeHandle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    "aria-label": string;
+    orientation: "horizontal" | "vertical";
+    variant?: "grip" | "notch";
+    value: number;
+    min: number;
+    max: number;
+    /** Receives a clamped pixel position from keyboard controls. */
+    onValueChange: (value: number) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/resize-handle.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** Visual and keyboard surface for a caller-owned resize gesture. */
+export const ResizeHandle = forwardRef(function ResizeHandle({ className, orientation, variant = "grip", value, min, max, onValueChange, onKeyDown, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-resize-handle", className), "data-resize-variant": variant, role: "separator", "aria-orientation": orientation, "aria-valuemin": Math.round(min), "aria-valuemax": Math.round(max), "aria-valuenow": Math.round(value), tabIndex: props.tabIndex ?? 0, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (event.key === "Home" || event.key === "End") {
+                event.preventDefault();
+                onValueChange(event.key === "Home" ? min : max);
+                return;
+            }
+            const step = orientation === "horizontal"
+                ? event.key === "ArrowUp"
+                    ? -32
+                    : event.key === "ArrowDown"
+                        ? 32
+                        : null
+                : event.key === "ArrowLeft"
+                    ? -32
+                    : event.key === "ArrowRight"
+                        ? 32
+                        : null;
+            if (step === null)
+                return;
+            event.preventDefault();
+            onValueChange(Math.min(max, Math.max(min, value + step)));
+        }, children: _jsx("span", { className: "caps-resize-grip", "aria-hidden": "true" }) }));
+});

package/dist/components/rough-drawing.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Hand-drawn Rough.js chrome for any element marked `data-caps-rough`: boxes,
+ * underlines, circles, highlights, speech bubbles and leader lines drawn in the
+ * theme's ink or primary. The {@link Rough} component writes that markup; pages
+ * without React call {@link drawRough} once. Until Rough.js has drawn an
+ * element (or without JavaScript), plain CSS in `styles.css` stands in for it.
+ *
+ * Each element keeps its seed, so a redraw after a resize bends the same way.
+ */
+/** A hand-drawn mark around, under or behind an element. */
+export type RoughMark = "box" | "underline" | "circle" | "highlight" | "bubble" | "line";
+/** Theme ink (`currentColor` by default) or the theme's primary accent. */
+export type RoughTone = "ink" | "primary";
+/** Parsed `data-rough-*` settings for one element. */
+export type RoughSpec = Readonly<{
+    mark: RoughMark;
+    seed: number;
+    /** Stroke width in CSS pixels. */
+    weight: number;
+    /** Rough.js roughness; 0 is a ruler, 3 is a scribble. */
+    roughness: number;
+    /** Fill inside a box, circle or bubble: flat, or screentone-like hachure. */
+    fill: "none" | "solid" | "hachure";
+    /** For `bubble`: which lower corner the tail leaves from. */
+    tail: "left" | "right" | "none";
+    /**
+     * For `line`: points in percent of the element's box, such as
+     * `0,100 40,20 100,0`. Two points draw a straight stroke; more draw a curve.
+     */
+    points: readonly (readonly [number, number])[];
+}>;
+/** Read `0,100 40,20 100,0` as percent points, dropping malformed pairs. */
+export declare function parseRoughPoints(value: string | undefined): readonly (readonly [number, number])[];
+/** Parse an element's `data-caps-rough` and `data-rough-*` attributes. */
+export declare function readRoughSpec(element: HTMLElement): RoughSpec | null;
+/**
+ * Draw every `[data-caps-rough]` element inside `root` (and `root` itself),
+ * loading Rough.js on first use, and redraw each one when its size changes.
+ * Returns a function that stops watching sizes. If Rough.js cannot load, the
+ * CSS fallback stays.
+ */
+export declare function drawRough(root?: ParentNode): () => void;