solid-drift 0.10.0 → 0.12.0

package/README.md

@@ -776,6 +776,25 @@ createTextWave(() => headline, {
 
 Options: `amplitude`, `wavelength` (characters per wave), `period`, `tilt` (default true), `progress`. Returns `{ stop }`. Under reduced motion the text sits still.
 
+### `createCountUp(source, options?)`
+
+A signal that counts toward a source number with an eased tween, rendering as a formatted string: dashboard stats, prices, scores. When the source changes mid-count the tween retargets from the current displayed value, with no snapping.
+
+```tsx
+import { createCountUp } from "solid-drift"
+
+const [revenue, setRevenue] = createSignal(0)
+const display = createCountUp(revenue, {
+  decimals: 2,
+  prefix: "$",
+  separator: ",",
+})
+<div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+setRevenue(1234.5)
+```
+
+Options: `decimals` (default 0), `duration` (ms, default 1000), `easing` (default `"easeOutExpo"`), `prefix` (default `""`), `suffix` (default `""`), `separator` (thousands separator, default `""`). Returns an accessor of the formatted string. SSR-safe: renders the formatted source value. Under reduced motion the text jumps straight to each new value.
+
 ### `createKineticType(ref, options?)`
 
 Kinetic typography: each character (or word) flies in with position, blur, scale, and opacity, staggered for that showreel title feel. One master clock drives every unit, so a 40-character headline costs a single rAF task.
@@ -1075,6 +1094,42 @@ const connect = createConnectButton(() => btn, { strength: 0.35 });
 
 Returns `{ copyTick, chainPulse, status }`. `status()` is `"idle"`, `"ticking"` (check visible), or `"pulsing"` (ring expanding). Call `chainPulse()` after a successful connection or network switch. Under reduced motion there is no magnetic pull or scale; `copyTick()` and `chainPulse()` still show their overlays statically.
 
+### `createToast(options?)`
+
+A signal-native toast queue with choreographed lifecycle. The primitive owns timing and state; you own the rendering, so no component opinions leak into your design system. Each toast moves through `"entering"` to `"visible"` to `"leaving"` to removed on the shared animation clock: bind `state` to CSS classes or drift values for enter/exit motion without any timers of your own.
+
+```tsx
+import { createToast } from "solid-drift"
+
+const { toasts, success, dismiss } = createToast()
+success("Payment sent", { description: "0.5 SOL to alice.sol" })
+
+<For each={toasts()}>
+  {(t) => (
+    <div
+      class="toast"
+      classList={{
+        "toast-enter": t.state === "entering",
+        "toast-leave": t.state === "leaving",
+      }}
+    >
+      <strong>{t.title}</strong>
+      {t.description && <p>{t.description}</p>}
+      <button onClick={() => dismiss(t.id)}>Dismiss</button>
+    </div>
+  )}
+</For>
+```
+
+| Option     | Default | Description                                                      |
+| ---------- | ------- | ---------------------------------------------------------------- |
+| `max`      | `5`     | Max toasts in the queue; older ones are dismissed first          |
+| `enterMs`  | `250`   | Enter transition time in milliseconds                            |
+| `leaveMs`  | `200`   | Leave transition time in milliseconds                            |
+| `duration` | `4000`  | Default auto-dismiss time in milliseconds                        |
+
+Push helpers: `toast(title, options?)`, `info(...)`, `success(...)`, `warning(...)`, `error(...)`. Each returns the toast id. Per-toast options: `kind`, `description`, `duration` (ms; `0` means sticky). `dismiss(id)` starts the leave transition for one toast; `clear()` dismisses all. SSR-safe: toasts pushed on the server start `"visible"`. Under reduced motion the enter and leave transitions are instant, but auto-dismiss timing still applies.
+
 ### Easings
 
 Named easings: `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeOutExpo`, `easeOutBack`, plus the cartoon set: `easeInBack` (anticipation dip before movement), `easeInOutBack` (wind-up, overshoot, settle), `easeOutElastic` (decaying rubber-band oscillation), `easeOutBounce` (shrinking cartoon bounces). Also `cubicBezier(x1, y1, x2, y2)` for CSS-style curves. Pass a name or a custom `(t) => number` function anywhere an easing is accepted.

package/dist/index.d.ts

@@ -20,9 +20,10 @@ export { createMagnetic, type MagneticOptions, type MagneticResult, createTilt,
 export { createTrail, type TrailOptions } from "./trail.js";
 export { createTimeline, type TimelineStep, type TimelineStatus, type TimelineControls, } from "./timeline.js";
 export { animateFlip, type FlipOptions, createSharedLayout, type SharedLayoutOptions, type SharedLayoutResult, } from "./flip.js";
+export { createToast, type Toast, type ToastControls, type ToastKind, type ToastOptions, type ToastQueueOptions, type ToastState, } from "./toast.js";
 export { createSquashStretch, type SquashStretchOptions, type SquashStretchResult, createFollowThrough, type FollowThroughOptions, createAnticipation, type AnticipationOptions, createWobble, type WobbleOptions, type WobbleResult, } from "./cartoon.js";
 export { createGravity, type GravityOptions, type GravityResult, createPendulum, type PendulumOptions, type PendulumResult, createFling, type FlingOptions, type FlingResult, } from "./physics.js";
-export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping, type TypingOptions, type TypingResult, createTextPhysics, type TextPhysicsOptions, type TextPhysicsResult, createTextTunnel, type TextTunnelOptions, type TextTunnelResult, createTextCutout, type TextCutoutOptions, createTextGradient, type TextGradientOptions, createTextScramble, type TextScrambleOptions, type TextScrambleResult, createTextWave, type TextWaveOptions, } from "./typography.js";
+export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping, type TypingOptions, type TypingResult, createTextPhysics, type TextPhysicsOptions, type TextPhysicsResult, createTextTunnel, type TextTunnelOptions, type TextTunnelResult, createTextCutout, type TextCutoutOptions, createTextGradient, type TextGradientOptions, createTextScramble, type TextScrambleOptions, type TextScrambleResult, createTextWave, type TextWaveOptions, createCountUp, type CountUpOptions, } from "./typography.js";
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, type Easing, type EasingName, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
 export type { KineticTypeFrom, KineticTypeOptions, KineticTypeStatus, KineticTypeControls, MotionScene, ScenePlayerStatus, ScenePlayerControls, ShowreelScene, ShowreelSceneKind, CameraKeyframe, CameraOptions, ColorShiftOptions, ColorShiftStatus, ColorShiftControls, TransitionType, TransitionDirection, TransitionOptions, TransitionLayerStyle, TransitionStatus, TransitionControls, BeatOptions, BeatStatus, BeatControls, BeatCutOptions, } from "./motion.js";

package/dist/index.js

@@ -20,9 +20,10 @@ export { createMagnetic, createTilt, } from "./pointer.js";
 export { createTrail } from "./trail.js";
 export { createTimeline, } from "./timeline.js";
 export { animateFlip, createSharedLayout, } from "./flip.js";
+export { createToast, } from "./toast.js";
 export { createSquashStretch, createFollowThrough, createAnticipation, createWobble, } from "./cartoon.js";
 export { createGravity, createPendulum, createFling, } from "./physics.js";
-export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, } from "./typography.js";
+export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, createCountUp, } from "./typography.js";
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
 export { createDrag, } from "./gesture.js";

package/dist/toast.d.ts

@@ -0,0 +1,81 @@
+import { type Accessor } from "solid-js";
+export type ToastKind = "info" | "success" | "warning" | "error";
+/** Lifecycle state of a toast. Bind it to your enter/exit animation. */
+export type ToastState = "entering" | "visible" | "leaving";
+export interface Toast {
+    /** Unique id, returned by the push helpers. */
+    id: number;
+    kind: ToastKind;
+    title: string;
+    description?: string;
+    state: ToastState;
+    /** Millisecond timestamp when the toast entered the queue. */
+    createdAt: number;
+}
+export interface ToastOptions {
+    /** Visual kind. Default "info" (or the shortcut you called). */
+    kind?: ToastKind;
+    description?: string;
+    /** Auto-dismiss after this many ms. Default 4000. 0 means sticky. */
+    duration?: number;
+}
+export interface ToastQueueOptions {
+    /** Max toasts in the queue; older ones are dismissed first. Default 5. */
+    max?: number;
+    /** Enter transition time in ms. Default 250. */
+    enterMs?: number;
+    /** Leave transition time in ms. Default 200. */
+    leaveMs?: number;
+    /** Default auto-dismiss time in ms. Default 4000. */
+    duration?: number;
+}
+export interface ToastControls {
+    /** Reactive list of toasts, oldest first. */
+    toasts: Accessor<Toast[]>;
+    /** Push a toast. Returns its id. */
+    toast: (title: string, options?: ToastOptions) => number;
+    info: (title: string, options?: ToastOptions) => number;
+    success: (title: string, options?: ToastOptions) => number;
+    warning: (title: string, options?: ToastOptions) => number;
+    error: (title: string, options?: ToastOptions) => number;
+    /** Start the leave transition for one toast. */
+    dismiss: (id: number) => void;
+    /** Dismiss every toast. */
+    clear: () => void;
+}
+/**
+ * A signal-native toast queue with choreographed lifecycle.
+ *
+ * The primitive owns timing and state; you own the rendering. Each toast
+ * moves through `entering` -> `visible` -> `leaving` -> removed on the
+ * shared animation clock, so you can bind `state` to CSS classes or drift
+ * values for enter/exit motion without any timers of your own.
+ *
+ * SSR-safe: toasts pushed on the server start `visible`. Under reduced
+ * motion the enter and leave transitions are instant, but auto-dismiss
+ * timing still applies.
+ *
+ * ```tsx
+ * import { createToast } from "solid-drift"
+ *
+ * const { toasts, success, dismiss } = createToast()
+ * success("Payment sent", { description: "0.5 SOL to alice.sol" })
+ *
+ * <For each={toasts()}>
+ *   {(t) => (
+ *     <div
+ *       class="toast"
+ *       classList={{
+ *         "toast-enter": t.state === "entering",
+ *         "toast-leave": t.state === "leaving",
+ *       }}
+ *     >
+ *       <strong>{t.title}</strong>
+ *       {t.description && <p>{t.description}</p>}
+ *       <button onClick={() => dismiss(t.id)}>Dismiss</button>
+ *     </div>
+ *   )}
+ * </For>
+ * ```
+ */
+export declare function createToast(options?: ToastQueueOptions): ToastControls;

package/dist/toast.js

@@ -0,0 +1,167 @@
+import { createSignal, onCleanup, untrack } from "solid-js";
+import { now, schedule } from "./engine.js";
+import { prefersReducedMotion } from "./reduced-motion.js";
+/**
+ * A signal-native toast queue with choreographed lifecycle.
+ *
+ * The primitive owns timing and state; you own the rendering. Each toast
+ * moves through `entering` -> `visible` -> `leaving` -> removed on the
+ * shared animation clock, so you can bind `state` to CSS classes or drift
+ * values for enter/exit motion without any timers of your own.
+ *
+ * SSR-safe: toasts pushed on the server start `visible`. Under reduced
+ * motion the enter and leave transitions are instant, but auto-dismiss
+ * timing still applies.
+ *
+ * ```tsx
+ * import { createToast } from "solid-drift"
+ *
+ * const { toasts, success, dismiss } = createToast()
+ * success("Payment sent", { description: "0.5 SOL to alice.sol" })
+ *
+ * <For each={toasts()}>
+ *   {(t) => (
+ *     <div
+ *       class="toast"
+ *       classList={{
+ *         "toast-enter": t.state === "entering",
+ *         "toast-leave": t.state === "leaving",
+ *       }}
+ *     >
+ *       <strong>{t.title}</strong>
+ *       {t.description && <p>{t.description}</p>}
+ *       <button onClick={() => dismiss(t.id)}>Dismiss</button>
+ *     </div>
+ *   )}
+ * </For>
+ * ```
+ */
+export function createToast(options = {}) {
+    const { max = 5, enterMs = 250, leaveMs = 200, duration: defaultDuration = 4000, } = options;
+    const [toasts, setToasts] = createSignal([]);
+    const timers = new Map();
+    let nextId = 1;
+    let cancelDriver = null;
+    const tick = (t) => {
+        const list = untrack(toasts);
+        if (list.length === 0) {
+            cancelDriver = null;
+            return false;
+        }
+        const em = prefersReducedMotion() ? 0 : enterMs;
+        const lm = prefersReducedMotion() ? 0 : leaveMs;
+        const out = [];
+        for (const toast of list) {
+            const meta = timers.get(toast.id);
+            if (!meta)
+                continue;
+            if (toast.state === "entering" && t - meta.enteredAt >= em) {
+                out.push({ ...toast, state: "visible" });
+            }
+            else if (toast.state === "visible" &&
+                meta.deadline > 0 &&
+                t >= meta.deadline) {
+                meta.leavingAt = t;
+                out.push({ ...toast, state: "leaving" });
+            }
+            else if (toast.state === "leaving" && t - meta.leavingAt >= lm) {
+                timers.delete(toast.id);
+            }
+            else {
+                out.push(toast);
+            }
+        }
+        const changed = out.length !== list.length ||
+            out.some((toast, i) => toast !== list[i]);
+        if (changed)
+            setToasts(out);
+        const busy = out.some((toast) => {
+            const meta = timers.get(toast.id);
+            return (toast.state === "entering" ||
+                toast.state === "leaving" ||
+                (toast.state === "visible" && !!meta && meta.deadline > 0));
+        });
+        if (!busy) {
+            cancelDriver = null;
+            return false;
+        }
+        return true;
+    };
+    const ensureDriver = () => {
+        if (!cancelDriver && typeof window !== "undefined") {
+            cancelDriver = schedule(tick);
+        }
+    };
+    const push = (kind, title, opts = {}) => {
+        const id = nextId++;
+        const t = now();
+        const duration = opts.duration ?? defaultDuration;
+        const toast = {
+            id,
+            kind: opts.kind ?? kind,
+            title,
+            description: opts.description,
+            state: typeof window === "undefined" ? "visible" : "entering",
+            createdAt: t,
+        };
+        timers.set(id, {
+            enteredAt: t,
+            deadline: duration > 0 ? t + duration : 0,
+            leavingAt: 0,
+        });
+        setToasts((prev) => {
+            const next = [...prev, toast];
+            if (next.length > max) {
+                const excess = next.length - max;
+                return next.map((item, i) => {
+                    if (i < excess && item.state !== "leaving") {
+                        const meta = timers.get(item.id);
+                        if (meta)
+                            meta.leavingAt = now();
+                        return { ...item, state: "leaving" };
+                    }
+                    return item;
+                });
+            }
+            return next;
+        });
+        ensureDriver();
+        return id;
+    };
+    const dismiss = (id) => {
+        const meta = timers.get(id);
+        if (!meta)
+            return;
+        meta.leavingAt = now();
+        setToasts((prev) => prev.map((toast) => toast.id === id && toast.state !== "leaving"
+            ? { ...toast, state: "leaving" }
+            : toast));
+        ensureDriver();
+    };
+    const clear = () => {
+        const t = now();
+        setToasts((prev) => prev.map((toast) => {
+            if (toast.state === "leaving")
+                return toast;
+            const meta = timers.get(toast.id);
+            if (meta)
+                meta.leavingAt = t;
+            return { ...toast, state: "leaving" };
+        }));
+        ensureDriver();
+    };
+    onCleanup(() => {
+        cancelDriver?.();
+        cancelDriver = null;
+    });
+    return {
+        toasts,
+        toast: (title, opts) => push("info", title, opts),
+        info: (title, opts) => push("info", title, opts),
+        success: (title, opts) => push("success", title, opts),
+        warning: (title, opts) => push("warning", title, opts),
+        error: (title, opts) => push("error", title, opts),
+        dismiss,
+        clear,
+    };
+}

package/dist/typography.d.ts

@@ -238,4 +238,43 @@ export interface TextWaveOptions {
 export declare function createTextWave(ref: MaybeElement, options?: TextWaveOptions): {
     stop: () => void;
 };
+export interface CountUpOptions {
+    /** Decimal places in the output. Default 0. */
+    decimals?: number;
+    /** Tween duration in milliseconds when the source changes. Default 1000. */
+    duration?: number;
+    /** Easing for the count. Default "easeOutExpo". */
+    easing?: Easing | EasingName;
+    /** String placed before the number, e.g. "$". Default "". */
+    prefix?: string;
+    /** String placed after the number, e.g. "%". Default "". */
+    suffix?: string;
+    /** Thousands separator, e.g. ",". Default "" (no grouping). */
+    separator?: string;
+}
+/**
+ * A signal that counts toward a source number with an eased tween,
+ * rendering as a formatted string: dashboard stats, prices, scores.
+ *
+ * When the source changes mid-count the tween retargets from the
+ * current displayed value, with no snapping. Formatting (decimals,
+ * prefix, suffix, thousands separator) applies to every frame.
+ *
+ * SSR-safe: renders the formatted source value. Under reduced motion
+ * the text jumps straight to each new value with no tween.
+ *
+ * ```tsx
+ * import { createCountUp } from "solid-drift"
+ *
+ * const [revenue, setRevenue] = createSignal(0)
+ * const display = createCountUp(revenue, {
+ *   decimals: 2,
+ *   prefix: "$",
+ *   separator: ",",
+ * })
+ * <div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+ * setRevenue(1234.5)
+ * ```
+ */
+export declare function createCountUp(source: Accessor<number>, options?: CountUpOptions): Accessor<string>;
 export {};

package/dist/typography.js

@@ -1,5 +1,6 @@
 import { createEffect, createSignal, onCleanup, untrack, } from "solid-js";
 import { animate } from "./animate.js";
+import { createTween } from "./tween.js";
 import { resolveEasing } from "./easing.js";
 import { now, schedule } from "./engine.js";
 import { prefersReducedMotion } from "./reduced-motion.js";
@@ -810,3 +811,47 @@ export function createTextWave(ref, options = {}) {
         },
     };
 }
+function groupInteger(int, separator) {
+    if (!separator)
+        return int;
+    const negative = int.startsWith("-");
+    const digits = negative ? int.slice(1) : int;
+    const grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+    return (negative ? "-" : "") + grouped;
+}
+/**
+ * A signal that counts toward a source number with an eased tween,
+ * rendering as a formatted string: dashboard stats, prices, scores.
+ *
+ * When the source changes mid-count the tween retargets from the
+ * current displayed value, with no snapping. Formatting (decimals,
+ * prefix, suffix, thousands separator) applies to every frame.
+ *
+ * SSR-safe: renders the formatted source value. Under reduced motion
+ * the text jumps straight to each new value with no tween.
+ *
+ * ```tsx
+ * import { createCountUp } from "solid-drift"
+ *
+ * const [revenue, setRevenue] = createSignal(0)
+ * const display = createCountUp(revenue, {
+ *   decimals: 2,
+ *   prefix: "$",
+ *   separator: ",",
+ * })
+ * <div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+ * setRevenue(1234.5)
+ * ```
+ */
+export function createCountUp(source, options = {}) {
+    const { decimals = 0, duration = 1000, easing = "easeOutExpo", prefix = "", suffix = "", separator = "", } = options;
+    const tweened = createTween(source, { duration, easing });
+    const format = (value) => {
+        const fixed = value.toFixed(decimals);
+        const dot = fixed.indexOf(".");
+        const head = dot === -1 ? fixed : fixed.slice(0, dot);
+        const tail = dot === -1 ? "" : fixed.slice(dot);
+        return prefix + groupInteger(head, separator) + tail + suffix;
+    };
+    return () => format(tweened());
+}

package/package.json

@@ -43,5 +43,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.10.0"
+  "version": "0.12.0"
 }