@dopaminefx/react 0.1.0

package/dist/DopamineSuccess.d.ts

@@ -0,0 +1,24 @@
+import { type DopamineMood } from "@dopaminefx/effects";
+export interface DopamineSuccessProps {
+    /**
+     * Change this value to fire the celebration. The effect plays whenever
+     * `trigger` changes to a new value (the initial mount does not fire).
+     */
+    trigger: unknown;
+    mood?: DopamineMood;
+    intensity?: number;
+    whimsy?: number;
+    seed?: number;
+    /** Called when the animation finishes. */
+    onDone?: () => void;
+}
+/**
+ * Declarative success effect. Drops an invisible marker into the layout and
+ * anchors the full-page bloom at its center.
+ *
+ * ```tsx
+ * <DopamineSuccess trigger={orderId} mood="celebratory" intensity={0.8} />
+ * ```
+ */
+export declare function DopamineSuccess({ trigger, mood, intensity, whimsy, seed, onDone, }: DopamineSuccessProps): JSX.Element;
+//# sourceMappingURL=DopamineSuccess.d.ts.map

package/dist/DopamineSuccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DopamineSuccess.d.ts","sourceRoot":"","sources":["../src/DopamineSuccess.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,MAAM,GACP,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsBpC"}

package/dist/DopamineSuccess.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { celebrate } from "@dopaminefx/effects";
+/**
+ * Declarative success effect. Drops an invisible marker into the layout and
+ * anchors the full-page bloom at its center.
+ *
+ * ```tsx
+ * <DopamineSuccess trigger={orderId} mood="celebratory" intensity={0.8} />
+ * ```
+ */
+export function DopamineSuccess({ trigger, mood, intensity, whimsy, seed, onDone, }) {
+    const ref = useRef(null);
+    const first = useRef(true);
+    useEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        const el = ref.current;
+        const origin = el
+            ? (() => {
+                const r = el.getBoundingClientRect();
+                return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+            })()
+            : undefined;
+        void celebrate({ mood, intensity, whimsy, seed, origin }).then(() => onDone?.());
+        // Intentionally only re-run when `trigger` changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [trigger]);
+    return _jsx("span", { ref: ref, "aria-hidden": true, style: { display: "contents" } });
+}
+//# sourceMappingURL=DopamineSuccess.js.map

package/dist/DopamineSuccess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DopamineSuccess.js","sourceRoot":"","sources":["../src/DopamineSuccess.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAqB,MAAM,qBAAqB,CAAC;AAgBnE;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,MAAM,GACe;IACrB,MAAM,GAAG,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,MAAM,MAAM,GAAG,EAAE;YACf,CAAC,CAAC,CAAC,GAAG,EAAE;gBACJ,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBACrC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC9D,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,SAAS,CAAC;QACd,KAAK,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACjF,oDAAoD;QACpD,uDAAuD;IACzD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,eAAM,GAAG,EAAE,GAAG,uBAAc,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,GAAI,CAAC;AACxE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { DopamineSuccess, type DopamineSuccessProps } from "./DopamineSuccess.js";
+export { useDopamine } from "./useDopamine.js";
+export type { DopamineMood, DopamineSuccessOptions } from "@dopaminefx/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { DopamineSuccess } from "./DopamineSuccess.js";
+export { useDopamine } from "./useDopamine.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/useDopamine.d.ts

@@ -0,0 +1,11 @@
+import { type DopamineSuccessOptions } from "@dopaminefx/effects";
+/**
+ * Returns a stable `celebrate` function for imperative use:
+ *
+ * ```tsx
+ * const celebrate = useDopamine();
+ * <button onClick={() => celebrate({ mood: "electric" })}>Done</button>
+ * ```
+ */
+export declare function useDopamine(): (options?: DopamineSuccessOptions) => Promise<void>;
+//# sourceMappingURL=useDopamine.d.ts.map

package/dist/useDopamine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDopamine.d.ts","sourceRoot":"","sources":["../src/useDopamine.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7E;;;;;;;GAOG;AACH,wBAAgB,WAAW,IAAI,CAAC,OAAO,CAAC,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAEjF"}

package/dist/useDopamine.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { celebrate } from "@dopaminefx/effects";
+/**
+ * Returns a stable `celebrate` function for imperative use:
+ *
+ * ```tsx
+ * const celebrate = useDopamine();
+ * <button onClick={() => celebrate({ mood: "electric" })}>Done</button>
+ * ```
+ */
+export function useDopamine() {
+    return useCallback((options) => celebrate(options), []);
+}
+//# sourceMappingURL=useDopamine.js.map

package/dist/useDopamine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDopamine.js","sourceRoot":"","sources":["../src/useDopamine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,SAAS,EAA+B,MAAM,qBAAqB,CAAC;AAE7E;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAC,CAAC,OAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACnF,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@dopaminefx/react",
+  "version": "0.1.0",
+  "description": "React bindings for Dopamine visual effects.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@dopaminefx/core": "^0.1.0",
+    "@dopaminefx/effects": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1"
+  },
+  "license": "MIT",
+  "author": "10in30",
+  "homepage": "https://github.com/10in30/dopamine#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/10in30/dopamine.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/10in30/dopamine/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DopamineSuccess.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import { celebrate, type DopamineMood } from "@dopaminefx/effects";
+
+export interface DopamineSuccessProps {
+  /**
+   * Change this value to fire the celebration. The effect plays whenever
+   * `trigger` changes to a new value (the initial mount does not fire).
+   */
+  trigger: unknown;
+  mood?: DopamineMood;
+  intensity?: number;
+  whimsy?: number;
+  seed?: number;
+  /** Called when the animation finishes. */
+  onDone?: () => void;
+}
+
+/**
+ * Declarative success effect. Drops an invisible marker into the layout and
+ * anchors the full-page bloom at its center.
+ *
+ * ```tsx
+ * <DopamineSuccess trigger={orderId} mood="celebratory" intensity={0.8} />
+ * ```
+ */
+export function DopamineSuccess({
+  trigger,
+  mood,
+  intensity,
+  whimsy,
+  seed,
+  onDone,
+}: DopamineSuccessProps): JSX.Element {
+  const ref = useRef<HTMLSpanElement>(null);
+  const first = useRef(true);
+
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    const el = ref.current;
+    const origin = el
+      ? (() => {
+          const r = el.getBoundingClientRect();
+          return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+        })()
+      : undefined;
+    void celebrate({ mood, intensity, whimsy, seed, origin }).then(() => onDone?.());
+    // Intentionally only re-run when `trigger` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [trigger]);
+
+  return <span ref={ref} aria-hidden style={{ display: "contents" }} />;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { DopamineSuccess, type DopamineSuccessProps } from "./DopamineSuccess.js";
+export { useDopamine } from "./useDopamine.js";
+export type { DopamineMood, DopamineSuccessOptions } from "@dopaminefx/core";

package/src/useDopamine.ts

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { celebrate, type DopamineSuccessOptions } from "@dopaminefx/effects";
+
+/**
+ * Returns a stable `celebrate` function for imperative use:
+ *
+ * ```tsx
+ * const celebrate = useDopamine();
+ * <button onClick={() => celebrate({ mood: "electric" })}>Done</button>
+ * ```
+ */
+export function useDopamine(): (options?: DopamineSuccessOptions) => Promise<void> {
+  return useCallback((options?: DopamineSuccessOptions) => celebrate(options), []);
+}