@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/status-mark.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate } from "animejs";
+import { useId, useLayoutEffect, useRef } from "react";
+import { readMotion, useReducedMotion } from "../lib/motion.js";
+import { immediateTiming, themedEase, themedSpring, } from "../lib/motion-spring.js";
+import { GooeySurfaceDefinition } from "./gooey.js";
+import { observeMotionVisibility } from "./motion-visibility.js";
+/** An indeterminate arc covers this much of the ring while it spins. */
+const spinnerSweep = 0.28;
+function poseFor(glyph, progress) {
+    switch (glyph) {
+        case "ring":
+            return {
+                dashes: 1,
+                track: 0,
+                arc: 0,
+                sweep: 0,
+                disc: 0,
+                tick: 0,
+                cross: 0,
+            };
+        case "arc":
+            return {
+                dashes: 0,
+                track: 1,
+                arc: 1,
+                sweep: progress === undefined
+                    ? spinnerSweep
+                    : Math.min(1, Math.max(0, progress)),
+                disc: 0,
+                tick: 0,
+                cross: 0,
+            };
+        case "check":
+            return {
+                dashes: 0,
+                track: 0,
+                arc: 1,
+                sweep: 1,
+                disc: 1,
+                tick: 1,
+                cross: 0,
+            };
+        case "cross":
+            return {
+                dashes: 0,
+                track: 0,
+                arc: 1,
+                sweep: 1,
+                disc: 1,
+                tick: 0,
+                cross: 1,
+            };
+    }
+}
+/** The disc's radius when full, just covering the ring. */
+const discRadius = 7.25;
+/**
+ * @internal A 16-unit task mark. A dashed ring waits; an arc works (spinning,
+ * or filling to `progress`); when done the arc closes, the bead's material
+ * springs out to a disc and a check (or cross) is drawn out of it.
+ */
+export function StatusMark({ className, glyph, progress, }) {
+    const id = `caps-status-mark-${useId().replaceAll(":", "")}`;
+    const visual = useRef(null);
+    const dashes = useRef(null);
+    const track = useRef(null);
+    const arc = useRef(null);
+    const spin = useRef(null);
+    const disc = useRef(null);
+    const tick = useRef(null);
+    const cross = useRef(null);
+    const initial = useRef(poseFor(glyph, progress)).current;
+    const previous = useRef(glyph);
+    const reduced = useReducedMotion();
+    useLayoutEffect(() => {
+        const svg = visual.current;
+        const dashRing = dashes.current;
+        const trackRing = track.current;
+        const arcRing = arc.current;
+        const bead = disc.current;
+        const tickPath = tick.current;
+        const crossPath = cross.current;
+        if (!svg ||
+            !dashRing ||
+            !trackRing ||
+            !arcRing ||
+            !bead ||
+            !tickPath ||
+            !crossPath)
+            return;
+        const pose = poseFor(glyph, progress);
+        const from = previous.current;
+        previous.current = glyph;
+        const motion = readMotion(svg);
+        const still = reduced || (from === glyph && glyph !== "arc");
+        const fade = still
+            ? reduced
+                ? { ease: motion.ease, duration: motion.fast }
+                : immediateTiming
+            : themedEase(motion, { ease: "outQuad", duration: 160 });
+        const finishing = (glyph === "check" || glyph === "cross") && !still;
+        // The arc closes first, then the disc springs out, then the mark draws.
+        const close = themedEase(motion, { ease: "inOutSine", duration: 220 });
+        const animations = [
+            animate(dashRing, { opacity: pose.dashes, ...fade }),
+            animate(trackRing, { opacity: pose.track * 0.28, ...fade }),
+            animate(arcRing, {
+                opacity: pose.arc,
+                "stroke-dasharray": `${String(pose.sweep)} 1`,
+                ...(still ? (reduced ? immediateTiming : fade) : close),
+            }),
+            animate(bead, {
+                r: pose.disc * discRadius,
+                ...(finishing
+                    ? {
+                        delay: close.duration * 0.7,
+                        ...themedSpring(motion, { bounce: 0.35, duration: 360 }),
+                    }
+                    : reduced
+                        ? immediateTiming
+                        : themedEase(motion, { ease: "inCubic", duration: 140 })),
+            }),
+            animate(tickPath, {
+                "stroke-dashoffset": 1 - pose.tick,
+                ...(finishing && pose.tick > 0
+                    ? {
+                        delay: close.duration * 0.7 + motion.fast,
+                        ...themedEase(motion, { ease: "outCubic", duration: 240 }),
+                    }
+                    : immediateTiming),
+            }),
+            animate(crossPath, {
+                "stroke-dashoffset": 1 - pose.cross,
+                ...(finishing && pose.cross > 0
+                    ? {
+                        delay: close.duration * 0.7 + motion.fast,
+                        ...themedEase(motion, { ease: "outCubic", duration: 240 }),
+                    }
+                    : immediateTiming),
+            }),
+        ];
+        if (glyph === "cross" && finishing && motion.shake > 0)
+            animations.push(animate(svg, {
+                translateX: [0, -motion.shake, motion.shake, -motion.shake / 2, 0],
+                delay: close.duration + motion.fast,
+                ...themedEase(motion, { ease: "linear", duration: 300 }),
+            }));
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [glyph, progress, reduced]);
+    // An indeterminate arc turns while it is on screen; reduced motion holds it.
+    const spinning = glyph === "arc" && progress === undefined && !reduced;
+    useLayoutEffect(() => {
+        if (!spinning || !spin.current || !visual.current)
+            return;
+        const motion = readMotion(visual.current);
+        const loop = animate(spin.current, {
+            rotate: [0, 360],
+            ...themedEase(motion, { ease: "linear", duration: 900 }),
+            loop: true,
+        });
+        const stopObserving = observeMotionVisibility(visual.current, (visible) => {
+            if (visible)
+                loop.resume();
+            else
+                loop.pause();
+        });
+        return () => {
+            stopObserving();
+            loop.revert();
+        };
+    }, [spinning]);
+    return (_jsxs("svg", { ref: visual, "aria-hidden": "true", className: `caps-status-mark ${className ?? ""}`, viewBox: "0 0 16 16", focusable: "false", children: [_jsxs("defs", { children: [_jsx(GooeySurfaceDefinition, { id: `${id}-surface`, transform: "matrix(1.6 0 0 1.6 8 8)" }), _jsxs("mask", { id: `${id}-knock`, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: [_jsx("rect", { width: "16", height: "16", fill: "var(--color-white)" }), _jsx("path", { ref: tick, d: "M4.9 8.3 7.1 10.5 11.2 5.9", fill: "none", stroke: "var(--color-black)", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1, strokeDasharray: "1 1", strokeDashoffset: 1 - initial.tick }), _jsx("path", { ref: cross, d: "M5.4 5.4 10.6 10.6 M10.6 5.4 5.4 10.6", fill: "none", stroke: "var(--color-black)", strokeWidth: "1.9", strokeLinecap: "round", pathLength: 1, strokeDasharray: "1 1", strokeDashoffset: 1 - initial.cross })] })] }), _jsx("circle", { ref: dashes, cx: "8", cy: "8", r: "6.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeDasharray: "1.7 2.2", opacity: initial.dashes }), _jsx("circle", { ref: track, cx: "8", cy: "8", r: "6.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5", opacity: initial.track * 0.28 }), _jsx("g", { ref: spin, className: "caps-status-mark-spin", children: _jsx("circle", { ref: arc, cx: "8", cy: "8", r: "6.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", pathLength: 1, strokeDasharray: `${String(initial.sweep)} 1`, transform: "rotate(-90 8 8)", opacity: initial.arc }) }), _jsx("circle", { ref: disc, cx: "8", cy: "8", r: initial.disc * discRadius, fill: `url(#${id}-surface)`, mask: `url(#${id}-knock)` })] }));
+}

package/dist/components/status.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type StatusMarkGlyph } from "./status-mark.js";
+/**
+ * The target silhouette. Bead glyphs (`dot`, `pill`, `bang`) morph between
+ * each other; task glyphs (`ring` waiting, `arc` working, `check` finished,
+ * `cross` refused) morph between each other.
+ */
+export type StatusGlyph = "dot" | "pill" | "bang" | StatusMarkGlyph;
+/** Continuous activity, independent of the target silhouette. */
+export type StatusMotion = "none" | "pulse" | "bounce";
+/** Semantic colors supplied by the current Stipe theme. */
+export type StatusTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error";
+/** Status size keeps secondary state compact in dense rows. */
+export type StatusSize = "default" | "compact";
+/** `chip` seats the bead and label in a tone-tinted pill. */
+export type StatusAppearance = "plain" | "chip";
+/** Presentation only: the caller maps its state to glyph, tone, and motion. */
+export type StatusProps = {
+    label?: ReactNode;
+    glyph?: StatusGlyph;
+    motion?: StatusMotion;
+    tone?: StatusTone;
+    size?: StatusSize;
+    appearance?: StatusAppearance;
+    /** For `arc`: how much is done, 0 to 1. Absent, the arc spins. */
+    progress?: number | undefined;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/** A gooey SVG status bead with automatic, interruptible glyph transitions. */
+export declare const Status: import("react").ForwardRefExoticComponent<{
+    label?: ReactNode;
+    glyph?: StatusGlyph;
+    motion?: StatusMotion;
+    tone?: StatusTone;
+    size?: StatusSize;
+    appearance?: StatusAppearance;
+    /** For `arc`: how much is done, 0 to 1. Absent, the arc spins. */
+    progress?: number | undefined;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/status.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { StatusBead } from "./status-bead.js";
+import { StatusMark } from "./status-mark.js";
+const markGlyphs = new Set([
+    "ring",
+    "arc",
+    "check",
+    "cross",
+]);
+function isMarkGlyph(glyph) {
+    return markGlyphs.has(glyph);
+}
+const toneClasses = {
+    neutral: "text-base-content",
+    primary: "text-primary",
+    secondary: "text-secondary",
+    accent: "text-accent",
+    success: "text-success",
+    info: "text-info",
+    warning: "text-warning",
+    error: "text-error",
+};
+/** A gooey SVG status bead with automatic, interruptible glyph transitions. */
+export const Status = forwardRef(function Status({ className, label, glyph = "dot", motion = "none", tone = "neutral", size = "default", appearance = "plain", progress, ...props }, ref) {
+    return (_jsxs("span", { ...props, className: cn("caps-status", size === "compact" && "caps-status-compact", appearance === "chip" && "caps-status-chip", className), "data-tone": appearance === "chip" ? tone : undefined, "data-glyph": glyph, "data-motion": motion, ref: ref, children: [isMarkGlyph(glyph) ? (_jsx(StatusMark, { className: toneClasses[tone], glyph: glyph, progress: progress })) : (_jsx(StatusBead, { className: toneClasses[tone], glyph: glyph, motion: motion })), label !== undefined ? _jsx("span", { children: label }) : null] }));
+});

package/dist/components/store-card.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type PriceTagProps } from "./price-tag.js";
+/** A shelf entry with independent opening and acquisition controls. */
+export type StoreCardProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & Readonly<{
+    title: string;
+    tagline: string;
+    variant?: "listing" | "cartridge" | "server";
+    /** Split wide feature cards into cover and copy columns. */
+    layout?: "stack" | "split";
+    cover?: ReactNode;
+    icon?: ReactNode;
+    seller?: ReactNode;
+    price?: PriceTagProps["price"];
+    badges?: readonly string[];
+    action?: ReactNode;
+    href?: string;
+    /** Open the listing independently of its footer action. */
+    onSelect?: () => void;
+}>;
+/** Caps owns the cover, copy, metadata and independent interaction states. */
+export declare function StoreCard({ title, tagline, variant, layout, cover, icon, seller, price, badges, action, href, onSelect, className, ...props }: StoreCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/store-card.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "./badge.js";
+import { Card } from "./card.js";
+import { PriceTag } from "./price-tag.js";
+import { cn } from "../lib/cn.js";
+/** Caps owns the cover, copy, metadata and independent interaction states. */
+export function StoreCard({ title, tagline, variant = "listing", layout = "stack", cover, icon, seller, price, badges = [], action, href, onSelect, className, ...props }) {
+    const content = (_jsxs(_Fragment, { children: [cover ? _jsx("span", { className: "caps-store-cover", children: cover }) : null, _jsxs("span", { className: "caps-store-heading", children: [icon ? _jsx("span", { className: "caps-store-icon", children: icon }) : null, _jsxs("span", { className: "caps-store-copy", children: [_jsx("strong", { className: "caps-store-title", children: title }), _jsx("span", { className: "caps-store-tagline", children: tagline })] })] })] }));
+    return (_jsx(Card, { ...props, role: "article", "aria-label": title, variant: "interactive", className: cn("caps-store-card", className), "data-variant": variant, "data-layout": layout, children: _jsxs("div", { className: "caps-store-body", children: [href ? (_jsx("a", { className: "caps-store-open", href: href, children: content })) : onSelect ? (_jsx("button", { className: "caps-store-open", type: "button", onClick: onSelect, children: content })) : (_jsx("div", { className: "caps-store-open", children: content })), _jsxs("footer", { className: "caps-store-footer", children: [_jsxs("div", { className: "caps-store-meta", children: [seller, badges.map((badge) => (_jsx(Badge, { tone: "secondary", variant: "quiet", size: "sm", children: badge.replaceAll("-", " ") }, badge))), price ? _jsx(PriceTag, { price: price }) : null] }), action ? _jsx("div", { className: "caps-store-action", children: action }) : null] })] }) }));
+}

package/dist/components/surface.d.ts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Native surface attributes with independent rim, depth and placement choices. */
+export type SurfaceProps = HTMLAttributes<HTMLDivElement> & {
+    /** Rim scale, independent of the content's dimensions. */
+    size?: "sm" | "md" | "lg";
+    depth?: "shallow" | "deep";
+    /** Embedded surfaces borrow their parent's casing; omit the exterior surround. */
+    placement?: "standalone" | "embedded";
+};
+/** A themeable frame around a surface. No padding or interaction ownership. */
+export declare const Surface: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Rim scale, independent of the content's dimensions. */
+    size?: "sm" | "md" | "lg";
+    depth?: "shallow" | "deep";
+    /** Embedded surfaces borrow their parent's casing; omit the exterior surround. */
+    placement?: "standalone" | "embedded";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Display face using theme surfaces while preserving the inherited text font. */
+export declare const Screen: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** A recessed display with a separate gasket and screen face. */
+export type DisplayProps = SurfaceProps & {
+    /** Fill a flex region rather than sizing to its content. */
+    fit?: "content" | "fill";
+    /** Reduce the gasket footprint for compact displays. */
+    density?: "normal" | "compact";
+};
+/** Theme-owned recessed screen with a gasket and optional compact fill geometry. */
+export declare const Display: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Rim scale, independent of the content's dimensions. */
+    size?: "sm" | "md" | "lg";
+    depth?: "shallow" | "deep";
+    /** Embedded surfaces borrow their parent's casing; omit the exterior surround. */
+    placement?: "standalone" | "embedded";
+} & {
+    /** Fill a flex region rather than sizing to its content. */
+    fit?: "content" | "fill";
+    /** Reduce the gasket footprint for compact displays. */
+    density?: "normal" | "compact";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by ScreenHeader. */
+export type ScreenHeaderProps = {
+    /** A decorative Sigil or App icon before the title. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** A Status or short readout opposite the title. */
+    status?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "title" | "children">;
+/** A screen's title bar, printed on the glass above a hairline. */
+export declare const ScreenHeader: import("react").ForwardRefExoticComponent<{
+    /** A decorative Sigil or App icon before the title. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** A Status or short readout opposite the title. */
+    status?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & import("react").RefAttributes<HTMLElement>>;
+/**
+ * An instrument's cells: a grid of hairline-ruled cells that reflows to one
+ * column when narrow. Put ScreenCells straight inside a Screen or Display.
+ */
+export declare const ScreenCells: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Compact instruments retain full-width rows instead of a cell grid. */
+    appearance?: "default" | "compact";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by ScreenCell. */
+export type ScreenCellProps = {
+    /** Compact rows put their subject icon and legend before the controls. */
+    appearance?: "default" | "compact";
+    /** A leading subject icon. */
+    icon?: ReactNode;
+    /** The cell's tiny mono legend, such as "Processes". */
+    legend?: ReactNode;
+    /** A short value readout in the cell's corner, such as "2/4 ON". */
+    readout?: ReactNode;
+    /** Span the full row instead of one column. */
+    wide?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+/** One instrument cell: a legend, an optional corner readout and its content. */
+export declare const ScreenCell: import("react").ForwardRefExoticComponent<{
+    /** Compact rows put their subject icon and legend before the controls. */
+    appearance?: "default" | "compact";
+    /** A leading subject icon. */
+    icon?: ReactNode;
+    /** The cell's tiny mono legend, such as "Processes". */
+    legend?: ReactNode;
+    /** A short value readout in the cell's corner, such as "2/4 ON". */
+    readout?: ReactNode;
+    /** Span the full row instead of one column. */
+    wide?: boolean;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/surface.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A themeable frame around a surface. No padding or interaction ownership. */
+export const Surface = forwardRef(function Surface({ className, size = "md", depth = "shallow", placement = "standalone", ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-surface-size": size, "data-surface-depth": depth, "data-surface-placement": placement, className: cn("caps-surface", className) }));
+});
+/** Display face using theme surfaces while preserving the inherited text font. */
+export const Screen = forwardRef(function Screen({ className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: cn("caps-screen", className) });
+});
+/** Theme-owned recessed screen with a gasket and optional compact fill geometry. */
+export const Display = forwardRef(function Display({ children, className, depth = "deep", fit = "content", density = "normal", ...props }, ref) {
+    const fill = fit === "fill";
+    return (_jsx(Surface, { ...props, className: cn(className, fill && "flex min-h-0 flex-1"), depth: depth, ref: ref, children: _jsx("div", { className: cn("caps-display-gasket", fill && "flex min-h-0 min-w-0 flex-1"), "data-display-density": density, children: _jsx(Screen, { className: cn(fill && "flex min-h-0 min-w-0 flex-1 overflow-hidden"), children: children }) }) }));
+});
+/** A screen's title bar, printed on the glass above a hairline. */
+export const ScreenHeader = forwardRef(function ScreenHeader({ className, icon, status, title, ...props }, ref) {
+    return (_jsxs("header", { ...props, className: cn("caps-screen-header", className), ref: ref, children: [icon ? (_jsx("span", { className: "caps-screen-header-icon", "aria-hidden": "true", children: icon })) : null, _jsx("span", { className: "caps-screen-header-title", children: title }), status ? (_jsx("span", { className: "caps-screen-header-status", children: status })) : null] }));
+});
+/**
+ * An instrument's cells: a grid of hairline-ruled cells that reflows to one
+ * column when narrow. Put ScreenCells straight inside a Screen or Display.
+ */
+export const ScreenCells = forwardRef(function ScreenCells({ appearance, className, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-screen-cells", className), "data-appearance": appearance === "compact" ? appearance : undefined, ref: ref }));
+});
+/** One instrument cell: a legend, an optional corner readout and its content. */
+export const ScreenCell = forwardRef(function ScreenCell({ children, className, legend, readout, icon, appearance, wide = false, ...props }, ref) {
+    return (_jsxs("div", { ...props, className: cn("caps-screen-cell", className), "data-wide": wide || undefined, "data-appearance": appearance === "compact" ? appearance : undefined, ref: ref, children: [icon ? _jsx("span", { className: "caps-screen-cell-icon", children: icon }) : null, legend ? (_jsx("span", { className: "caps-screen-cell-legend", children: legend })) : null, readout ? (_jsx("span", { className: "caps-screen-cell-readout", children: readout })) : null, appearance === "compact" ? (_jsx("div", { className: "caps-screen-cell-controls", children: children })) : (children)] }));
+});

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

@@ -0,0 +1,4 @@
+/** @internal A bead that compresses before filling or emptying its track. */
+export declare function SwitchBead({ checked }: {
+    checked: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch-bead.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate } from "animejs";
+import { readMotion, useReducedMotion } from "../lib/motion.js";
+import { themedEase, themedSpring } from "../lib/motion-spring.js";
+import { useId, useLayoutEffect, useRef } from "react";
+import { GooeySurfaceDefinition, GooeyShadowDefinition, GooeyInsetDefinition, } from "./gooey.js";
+/** @internal A bead that compresses before filling or emptying its track. */
+export function SwitchBead({ checked }) {
+    const id = `caps-switch-${useId().replaceAll(":", "")}`;
+    const body = useRef(null);
+    const surface = useRef(null);
+    const initial = useRef(checked).current;
+    const previous = useRef(checked);
+    const reduced = useReducedMotion();
+    useLayoutEffect(() => {
+        if (!body.current || !surface.current)
+            return;
+        const immediate = reduced || previous.current === checked;
+        previous.current = checked;
+        const width = checked ? 16 : 8;
+        const motion = readMotion(body.current);
+        const settle = themedSpring(motion, { bounce: 0.25, duration: 440 });
+        const squeeze = themedEase(motion, { ease: "inOutSine", duration: 100 });
+        const fill = animate(body.current, immediate
+            ? {
+                x: 2,
+                y: 2,
+                width,
+                height: 8,
+                duration: 0,
+            }
+            : {
+                x: [
+                    { to: checked ? 2.5 : 1.5, ...squeeze },
+                    { to: 2, ...settle },
+                ],
+                y: [
+                    { to: 1.5, ...squeeze },
+                    { to: 2, ...settle },
+                ],
+                height: [
+                    { to: 9, ...squeeze },
+                    { to: 8, ...settle },
+                ],
+                width: [
+                    { to: checked ? 7 : 16.5, ...squeeze },
+                    { to: width, ...settle },
+                ],
+            });
+        const light = animate(surface.current, {
+            gradientTransform: checked
+                ? "matrix(2 0 0 1 10 6)"
+                : "matrix(1 0 0 1 6 6)",
+            ...(immediate ? { duration: 0 } : { delay: squeeze.duration, ...settle }),
+        });
+        return () => {
+            fill.cancel();
+            light.cancel();
+        };
+    }, [checked, reduced]);
+    return (_jsxs("svg", { className: "caps-switch-visual", width: "40", height: "24", viewBox: "0 0 20 12", "aria-hidden": "true", focusable: "false", children: [_jsxs("defs", { children: [_jsx(GooeySurfaceDefinition, { ref: surface, id: `${id}-surface`, transform: initial ? "matrix(2 0 0 1 10 6)" : "matrix(1 0 0 1 6 6)" }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx(GooeyInsetDefinition, { id: `${id}-inset` }), _jsx("clipPath", { id: `${id}-track`, children: _jsx("rect", { x: "1", y: "1", width: "18", height: "10", rx: "5" }) })] }), _jsx("rect", { className: "caps-switch-track", filter: `url(#${id}-inset)`, x: "0.5", y: "0.5", width: "19", height: "11", rx: "5.5" }), _jsx("g", { clipPath: `url(#${id}-track)`, children: _jsx("rect", { ref: body, x: "2", y: "2", width: initial ? 16 : 8, height: "8", rx: "4", fill: `url(#${id}-surface)`, filter: `url(#${id}-shadow)` }) })] }));
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes } from "react";
+/** Props accepted by Switch. */
+export type SwitchProps = {
+    /** Called after the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "type">;
+/** A switch primitive with caller-owned checked state. */
+export declare const Switch: import("react").ForwardRefExoticComponent<{
+    /** Called after the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/switch.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { SwitchBead } from "./switch-bead.js";
+/** A switch primitive with caller-owned checked state. */
+export const Switch = forwardRef(function Switch({ className, checked, defaultChecked = false, onChange, onCheckedChange, ...props }, ref) {
+    const input = useRef(null);
+    const [localChecked, setLocalChecked] = useState(defaultChecked);
+    const selected = checked ?? localChecked;
+    useImperativeHandle(ref, () => {
+        if (!input.current)
+            throw new Error("Switch input is not mounted");
+        return input.current;
+    }, []);
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form || checked !== undefined)
+            return;
+        const reset = (event) => {
+            queueMicrotask(() => {
+                if (!event.defaultPrevented && input.current)
+                    setLocalChecked(defaultChecked);
+            });
+        };
+        form.addEventListener("reset", reset);
+        return () => {
+            form.removeEventListener("reset", reset);
+        };
+    }, [checked, defaultChecked, props.form]);
+    return (_jsxs("span", { className: "caps-switch", "data-checked": selected, children: [_jsx("input", { ...props, checked: selected, className: cn("caps-switch-input", className), onChange: (event) => {
+                    if (checked === undefined)
+                        setLocalChecked(event.target.checked);
+                    onChange?.(event);
+                    onCheckedChange?.(event.target.checked);
+                }, ref: input, role: "switch", type: "checkbox" }), _jsx(SwitchBead, { checked: selected })] }));
+});

package/dist/components/tabs.d.ts

@@ -0,0 +1,55 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Tabs. */
+export type TabsProps = {
+    children: ReactNode;
+    defaultValue?: string;
+    /** Called after the active tab value changes. */
+    onValueChange?: (value: string) => void;
+    value?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/** A tab-list controller with explicit controlled or uncontrolled value state. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    defaultValue?: string;
+    /** Called after the active tab value changes. */
+    onValueChange?: (value: string) => void;
+    value?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Supported tab-list presentations. */
+export type TabsListVariant = "bordered" | "segmented";
+/** Props accepted by TabsList. */
+export type TabsListProps = {
+    /**
+     * `bordered` underlines the selected tab. `segmented` presents a small set
+     * of equal, mutually exclusive choices as one inset control.
+     */
+    variant?: TabsListVariant;
+} & HTMLAttributes<HTMLDivElement>;
+/** The tab-list layout for a Tabs controller. */
+export declare const TabsList: import("react").ForwardRefExoticComponent<{
+    /**
+     * `bordered` underlines the selected tab. `segmented` presents a small set
+     * of equal, mutually exclusive choices as one inset control.
+     */
+    variant?: TabsListVariant;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by TabsTrigger. */
+export type TabsTriggerProps = {
+    value: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/** A selectable tab in a Tabs controller. */
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<{
+    value: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Props accepted by TabsContent. */
+export type TabsContentProps = {
+    children: ReactNode;
+    forceMount?: boolean;
+    value: string;
+} & HTMLAttributes<HTMLDivElement>;
+/** The content panel associated with a Tabs value. */
+export declare const TabsContent: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    forceMount?: boolean;
+    value: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;