@yusufceng1z/ding-react 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yusuf Cengiz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @yusufceng1z/ding-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Toasts with real spring physics for React 18+. One toast that morphs in place. No stylesheet to import.
+
+## Install
+
+```bash
+npm i @yusufceng1z/ding-react
+```
+
+## Use
+
+Render the toaster once, then call `toast` from anywhere.
+
+```tsx
+import { Toaster, toast } from '@yusufceng1z/ding-react';
+
+export default function App() {
+  return (
+    <>
+      <Toaster position="top-center" theme="system" />
+      <button onClick={() => toast.success('Saved')}>Save</button>
+    </>
+  );
+}
+```
+
+Options, actions, progress, sound and accessibility are covered in the [docs](https://ding.yusufcengiz.dev/docs.html).
+
+## Links
+
+- [Live demo and docs](https://ding.yusufcengiz.dev)
+- [Source on GitHub](https://github.com/YusufCeng1z/ding)
+
+## License
+
+[MIT](LICENSE)

package/dist/index.cjs

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Toaster: () => Toaster,
+  toast: () => import_ding.toast
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_ding = require("@yusufceng1z/ding");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Item({ t, i }) {
+  const slot = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => slot.current ? (0, import_ding.bindToast)(slot.current, t.id) : void 0, [t.id]);
+  const sticky = t.duration === 0 && t.type !== "loading" && !t.secondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: slot, className: "tst-slot", style: { "--tst-i": i }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "tst",
+      "data-phase": t.phase,
+      "data-type": t.type,
+      style: { "--tst-life": `${t.duration}ms` },
+      children: [
+        (t.action || t.secondary) && t.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-timer" }, t.duration),
+        t.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-progress", style: { "--pg": t.progress } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-icon", children: t.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "tst-media", src: t.image, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-badge", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tst-svg", viewBox: "0 0 24 24", "aria-hidden": "true", children: import_ding.ICONS[t.type].map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d, pathLength: 1 }, d)) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tst-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tst-copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tst-title", children: [
+              t.title,
+              t.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tst-count", children: [
+                "\xD7",
+                t.count
+              ] }),
+              t.meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tst-meta", children: t.meta })
+            ] }),
+            t.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-desc", children: t.description })
+          ] }),
+          t.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tst-action tst-secondary", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => import_ding.toast.act(t.id, "secondary"), children: t.secondary.label }),
+          t.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "tst-action",
+              tabIndex: t.phase === "open" ? 0 : -1,
+              onClick: () => {
+                import_ding.toast.act(t.id);
+              },
+              children: t.action.label
+            }
+          ),
+          sticky && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tst-close", "aria-label": "Dismiss notification", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => import_ding.toast.dismiss(t.id), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function Toaster({ position, theme }) {
+  const state = (0, import_react.useSyncExternalStore)(import_ding.toast.subscribe, import_ding.toast.getState, import_ding.toast.getState);
+  (0, import_react.useEffect)(() => (0, import_ding.injectStyles)(), []);
+  (0, import_react.useEffect)(() => import_ding.toast.configure({ position, theme }), [position, theme]);
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("keydown", import_ding.onToastKey);
+    return () => document.removeEventListener("keydown", import_ding.onToastKey);
+  }, []);
+  const n = state.toasts.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "tst-viewport",
+      role: "region",
+      "aria-label": "Notifications",
+      "data-position": state.position,
+      "data-theme": state.theme,
+      onPointerEnter: () => import_ding.toast.pause(),
+      onPointerLeave: () => import_ding.toast.resume(),
+      onFocus: (e) => e.target.matches(":focus-visible") && import_ding.toast.pause(),
+      onBlur: () => import_ding.toast.resume(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-sr", role: "status", children: state.status }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-sr", role: "alert", children: state.alert }),
+        state.toasts.map((t, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { t, i: n - 1 - idx }, t.id))
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toaster,
+  toast
+});

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { Position, Theme } from '@yusufceng1z/ding';
+export { Position, Theme, toast } from '@yusufceng1z/ding';
+
+declare function Toaster({ position, theme }: {
+    position?: Position;
+    theme?: Theme;
+}): react.JSX.Element;
+
+export { Toaster };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { Position, Theme } from '@yusufceng1z/ding';
+export { Position, Theme, toast } from '@yusufceng1z/ding';
+
+declare function Toaster({ position, theme }: {
+    position?: Position;
+    theme?: Theme;
+}): react.JSX.Element;
+
+export { Toaster };

package/dist/index.js

@@ -0,0 +1,83 @@
+// src/index.tsx
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { toast, injectStyles, bindToast, onToastKey, ICONS } from "@yusufceng1z/ding";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Item({ t, i }) {
+  const slot = useRef(null);
+  useEffect(() => slot.current ? bindToast(slot.current, t.id) : void 0, [t.id]);
+  const sticky = t.duration === 0 && t.type !== "loading" && !t.secondary;
+  return /* @__PURE__ */ jsx("div", { ref: slot, className: "tst-slot", style: { "--tst-i": i }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "tst",
+      "data-phase": t.phase,
+      "data-type": t.type,
+      style: { "--tst-life": `${t.duration}ms` },
+      children: [
+        (t.action || t.secondary) && t.duration > 0 && /* @__PURE__ */ jsx("div", { className: "tst-timer" }, t.duration),
+        t.progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "tst-progress", style: { "--pg": t.progress } }),
+        /* @__PURE__ */ jsx("div", { className: "tst-icon", children: t.image ? /* @__PURE__ */ jsx("img", { className: "tst-media", src: t.image, alt: "" }) : /* @__PURE__ */ jsx("div", { className: "tst-badge", children: /* @__PURE__ */ jsx("svg", { className: "tst-svg", viewBox: "0 0 24 24", "aria-hidden": "true", children: ICONS[t.type].map((d) => /* @__PURE__ */ jsx("path", { d, pathLength: 1 }, d)) }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "tst-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tst-copy", children: [
+            /* @__PURE__ */ jsxs("div", { className: "tst-title", children: [
+              t.title,
+              t.count > 1 && /* @__PURE__ */ jsxs("span", { className: "tst-count", children: [
+                "\xD7",
+                t.count
+              ] }),
+              t.meta && /* @__PURE__ */ jsx("span", { className: "tst-meta", children: t.meta })
+            ] }),
+            t.description && /* @__PURE__ */ jsx("div", { className: "tst-desc", children: t.description })
+          ] }),
+          t.secondary && /* @__PURE__ */ jsx("button", { type: "button", className: "tst-action tst-secondary", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => toast.act(t.id, "secondary"), children: t.secondary.label }),
+          t.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "tst-action",
+              tabIndex: t.phase === "open" ? 0 : -1,
+              onClick: () => {
+                toast.act(t.id);
+              },
+              children: t.action.label
+            }
+          ),
+          sticky && /* @__PURE__ */ jsx("button", { type: "button", className: "tst-close", "aria-label": "Dismiss notification", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => toast.dismiss(t.id), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function Toaster({ position, theme }) {
+  const state = useSyncExternalStore(toast.subscribe, toast.getState, toast.getState);
+  useEffect(() => injectStyles(), []);
+  useEffect(() => toast.configure({ position, theme }), [position, theme]);
+  useEffect(() => {
+    document.addEventListener("keydown", onToastKey);
+    return () => document.removeEventListener("keydown", onToastKey);
+  }, []);
+  const n = state.toasts.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "tst-viewport",
+      role: "region",
+      "aria-label": "Notifications",
+      "data-position": state.position,
+      "data-theme": state.theme,
+      onPointerEnter: () => toast.pause(),
+      onPointerLeave: () => toast.resume(),
+      onFocus: (e) => e.target.matches(":focus-visible") && toast.pause(),
+      onBlur: () => toast.resume(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "tst-sr", role: "status", children: state.status }),
+        /* @__PURE__ */ jsx("div", { className: "tst-sr", role: "alert", children: state.alert }),
+        state.toasts.map((t, idx) => /* @__PURE__ */ jsx(Item, { t, i: n - 1 - idx }, t.id))
+      ]
+    }
+  );
+}
+export {
+  Toaster,
+  toast
+};

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@yusufceng1z/ding-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.2",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@yusufceng1z/ding": "0.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "react": ">=18"
+  },
+  "description": "React renderer for Ding spring-physics toasts.",
+  "homepage": "https://ding.yusufcengiz.dev",
+  "bugs": {
+    "url": "https://github.com/YusufCeng1z/ding/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YusufCeng1z/ding.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "toast",
+    "notification",
+    "spring",
+    "animation",
+    "react"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT",
+  "author": "Yusuf Cengiz",
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react",
+    "typecheck": "tsc -p ."
+  }
 }