@fungi.computer/caps 0.7.1 → 0.9.0

package/dist/components/keycap.js

@@ -5,8 +5,8 @@ import { cn } from "../lib/cn.js";
  * One molded key legend, rendered as native `<kbd>`: the key a player presses.
  * The key sits on its own travel so pressed and resting keys take the same room.
  */
-export const Keycap = forwardRef(function Keycap({ tone = "neutral", size = "md", pressed = false, className, ...props }, ref) {
-    return (_jsx("kbd", { ...props, ref: ref, className: cn("caps-keycap", className), "data-tone": tone, "data-size": size, "data-pressed": pressed }));
+export const Keycap = forwardRef(function Keycap({ tone = "neutral", size = "md", pressed = false, touch, className, ...props }, ref) {
+    return (_jsx("kbd", { ...props, ref: ref, className: cn("caps-keycap", className), "data-tone": tone, "data-size": size, "data-pressed": pressed, "data-touch": touch }));
 });
 /**
  * A chunky action key for game docks and toy panels. The host owns the action
@@ -14,5 +14,5 @@ export const Keycap = forwardRef(function Keycap({ tone = "neutral", size = "md"
  */
 export const KeycapButton = forwardRef(function KeycapButton({ label, shortcut, icon, readout, tone = "neutral", density = "regular", pressed, expanded, className, type = "button", ...props }, ref) {
     const lamp = pressed ?? expanded;
-    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("caps-keycap-button", className), "data-tone": tone, "data-density": density === "compact" ? density : undefined, "aria-pressed": pressed, "aria-expanded": expanded, "aria-keyshortcuts": props["aria-keyshortcuts"] ?? shortcut, children: [lamp === undefined ? null : (_jsx("span", { className: "caps-keycap-led", "data-lit": lamp, "aria-hidden": "true" })), icon ? (_jsx("span", { className: "caps-keycap-button-icon", "aria-hidden": "true", children: icon })) : null, label === null ? null : (_jsx("span", { className: "caps-keycap-button-label", children: label })), readout, shortcut ? (_jsx(Keycap, { size: "sm", tone: "neutral", "aria-hidden": "true", children: shortcut })) : null] }));
+    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("caps-keycap-button", className), "data-tone": tone, "data-density": density === "compact" ? density : undefined, "aria-pressed": pressed, "aria-expanded": expanded, "aria-keyshortcuts": props["aria-keyshortcuts"] ?? shortcut, children: [lamp === undefined ? null : (_jsx("span", { className: "caps-keycap-led", "data-lit": lamp, "aria-hidden": "true" })), icon ? (_jsx("span", { className: "caps-keycap-button-icon", "aria-hidden": "true", children: icon })) : null, label === null ? null : (_jsx("span", { className: "caps-keycap-button-label", children: label })), readout, shortcut ? (_jsx(Keycap, { size: "sm", tone: "neutral", touch: "hide", "aria-hidden": "true", children: shortcut })) : null] }));
 });

package/dist/components/loader-blobs.d.ts

@@ -1,5 +1,6 @@
-import type { LoaderVariant } from "./loader.js";
+import type { LoaderPace, LoaderVariant } from "./loader.js";
 /** @internal Animate only the silhouette; lighting never overlaps at joins. */
-export declare function LoaderBlobs({ variant }: {
+export declare function LoaderBlobs({ variant, pace, }: {
     variant: LoaderVariant;
+    pace?: LoaderPace;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/loader-blobs.js

@@ -83,8 +83,10 @@ const durations = {
     wander: 4600,
     bloom: 2800,
 };
+// Idle art breathes at roughly half speed so it never competes with real work.
+const IDLE_SLOWDOWN = 2;
 /** @internal Animate only the silhouette; lighting never overlaps at joins. */
-export function LoaderBlobs({ variant }) {
+export function LoaderBlobs({ variant, pace = "working", }) {
     const id = `caps-loader-${useId().replaceAll(":", "")}`;
     const geometry = useRef(null);
     const visual = useRef(null);
@@ -103,7 +105,7 @@ export function LoaderBlobs({ variant }) {
         const loops = [...geometry.current.querySelectorAll("ellipse")].map((blob, index) => animate(blob, {
             keyframes: Array.from({ length: 48 }, (_, step) => ({
                 ...pose(variant, index, (step + 1) / 48),
-                duration: motionTime(timing, durations[variant]) / 48,
+                duration: motionTime(timing, durations[variant] * (pace === "idle" ? IDLE_SLOWDOWN : 1)) / 48,
             })),
             ease: "linear",
             loop: true,
@@ -121,7 +123,7 @@ export function LoaderBlobs({ variant }) {
             for (const loop of loops)
                 loop.revert();
         };
-    }, [variant, reduced, timing]);
+    }, [variant, pace, reduced, timing]);
     return (_jsxs("svg", { ref: visual, "aria-hidden": "true", focusable: "false", viewBox: variant === "line" ? "-20 -10 40 20" : "-20 -20 40 40", children: [_jsxs("defs", { children: [_jsx(GooeyFilterDefinition, { id: id, values: STATUS_GOOEY_FILTER }), _jsx(GooeySurfaceDefinition, { id: `${id}-surface`, transform: variant === "line"
                             ? "matrix(3.4 0 0 1.4 0 0)"
                             : "matrix(3 0 0 3 0 0)" }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx("mask", { id: `${id}-mask`, maskUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "40", height: "40", style: { maskType: "alpha" }, children: _jsx("g", { ref: geometry, fill: "currentColor", filter: `url(#${id})`, children: Array.from({ length: count }, (_, index) => (_jsx("ellipse", { ...pose(variant, index, 0) }, index))) }) })] }), _jsx("g", { filter: `url(#${id}-shadow)`, children: _jsx("rect", { x: "-20", y: "-20", width: "40", height: "40", fill: `url(#${id}-surface)`, mask: `url(#${id}-mask)` }) })] }));

package/dist/components/loader.d.ts

@@ -1,6 +1,8 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 /** Fluid motion formations, sharing one material. */
 export type LoaderVariant = "line" | "wander" | "square" | "donut" | "bloom";
+/** How briskly a formation cycles: `working` for a wait, `idle` for art. */
+export type LoaderPace = "working" | "idle";
 /** Props accepted by Loader. */
 export type LoaderProps = {
     decorative?: boolean;
@@ -8,7 +10,9 @@ export type LoaderProps = {
     /** `fill` grows the formation to its container, as a full-tile placeholder. */
     size?: "sm" | "md" | "lg" | "fill";
     variant?: LoaderVariant;
-    tone?: "neutral" | "accent" | "primary" | "success";
+    /** `idle` slows the cycle for decorative art such as an empty state. */
+    pace?: LoaderPace;
+    tone?: "neutral" | "accent" | "primary" | "success" | "current";
 } & HTMLAttributes<HTMLSpanElement>;
 /** Connecting gooey beads, with a static silhouette for reduced motion. */
 export declare const Loader: import("react").ForwardRefExoticComponent<{
@@ -17,5 +21,7 @@ export declare const Loader: import("react").ForwardRefExoticComponent<{
     /** `fill` grows the formation to its container, as a full-tile placeholder. */
     size?: "sm" | "md" | "lg" | "fill";
     variant?: LoaderVariant;
-    tone?: "neutral" | "accent" | "primary" | "success";
+    /** `idle` slows the cycle for decorative art such as an empty state. */
+    pace?: LoaderPace;
+    tone?: "neutral" | "accent" | "primary" | "success" | "current";
 } & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/loader.js

@@ -14,12 +14,14 @@ const toneClasses = {
     accent: "text-accent",
     primary: "text-primary",
     success: "text-success",
+    /** The surrounding ink, for a loader inside a button. */
+    current: "text-current",
 };
 /** Connecting gooey beads, with a static silhouette for reduced motion. */
-export const Loader = forwardRef(function Loader({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, decorative = false, label = "Loading", size = "md", variant = "line", tone = "neutral", ...props }, ref) {
+export const Loader = forwardRef(function Loader({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, decorative = false, label = "Loading", size = "md", variant = "line", pace = "working", tone = "neutral", ...props }, ref) {
     const labelId = `${useId()}-label`;
     const ownsLabel = !decorative && ariaLabel === undefined && ariaLabelledby === undefined;
     return (_jsxs("span", { ...props, "aria-label": decorative ? undefined : ariaLabel, "aria-hidden": decorative || undefined, "aria-labelledby": decorative
             ? undefined
-            : (ariaLabelledby ?? (ariaLabel === undefined ? labelId : undefined)), className: cn("caps-loader", sizeClasses[size], toneClasses[tone], className), "data-variant": variant, role: decorative ? undefined : "status", ref: ref, children: [_jsx(LoaderBlobs, { variant: variant }), ownsLabel ? _jsx(VisuallyHidden, { id: labelId, children: label }) : null] }));
+            : (ariaLabelledby ?? (ariaLabel === undefined ? labelId : undefined)), className: cn("caps-loader", sizeClasses[size], toneClasses[tone], className), "data-variant": variant, "data-pace": pace, role: decorative ? undefined : "status", ref: ref, children: [_jsx(LoaderBlobs, { variant: variant, pace: pace }), ownsLabel ? _jsx(VisuallyHidden, { id: labelId, children: label }) : null] }));
 });

package/dist/components/toaster.d.ts

@@ -1,4 +1,8 @@
 import { type ToasterProps } from "sonner";
 export { toast } from "sonner";
-/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+/**
+ * Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
+ * Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
+ * restyles open toasts; Sonner's own light and dark palettes are overridden.
+ */
 export declare function Toaster({ className, ...props }: ToasterProps): import("react").ReactPortal | null;

package/dist/components/toaster.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster as Sonner } from "sonner";
+import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { Loader } from "./loader.js";
+import { Status } from "./status.js";
 import { createPortal } from "react-dom";
 import { useOverlayRoot } from "./overlay-root.js";
 export { toast } from "sonner";
-/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+/**
+ * Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
+ * Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
+ * restyles open toasts; Sonner's own light and dark palettes are overridden.
+ */
 export function Toaster({ className, ...props }) {
     const root = useOverlayRoot("toast");
     if (!root)
         return null;
-    return createPortal(_jsx(Sonner, { position: "top-right", swipeDirections: ["right", "top"], offset: 16, gap: 8, className: cn("caps-toaster", className), ...props }), root);
+    return createPortal(_jsx(Sonner, { position: "top-right", swipeDirections: ["right", "top"], offset: 16, gap: 8, icons: {
+            close: _jsx(X, { "aria-hidden": "true", size: 12 }),
+            success: _jsx(Status, { glyph: "dot", tone: "success" }),
+            error: _jsx(Status, { glyph: "dot", tone: "error" }),
+            warning: _jsx(Status, { glyph: "dot", tone: "warning" }),
+            info: _jsx(Status, { glyph: "dot", tone: "info" }),
+            loading: (_jsx(Loader, { decorative: true, size: "sm", tone: "current", variant: "wander" })),
+        }, className: cn("caps-toaster", className), ...props }), root);
 }