@yusufceng1z/ding-react 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,37 @@
+# @yusufceng1z/ding-react
+
+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

@@ -27,11 +27,11 @@ 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 }) {
+function Item({ t, i, labels }) {
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: slot, className: "tst-slot", tabIndex: -1, style: { "--tst-i": i }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: "tst",
@@ -67,16 +67,19 @@ function Item({ t, i }) {
               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" }) }) })
+          sticky && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tst-close", "aria-label": labels.dismiss, 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 }) {
+function Toaster({ position, theme, labels }) {
   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]);
+  const region = labels?.region;
+  const dismiss = labels?.dismiss;
+  (0, import_react.useEffect)(() => import_ding.toast.configure({ labels: { region, dismiss } }), [region, dismiss]);
   (0, import_react.useEffect)(() => {
     document.addEventListener("keydown", import_ding.onToastKey);
     return () => document.removeEventListener("keydown", import_ding.onToastKey);
@@ -87,7 +90,7 @@ function Toaster({ position, theme }) {
     {
       className: "tst-viewport",
       role: "region",
-      "aria-label": "Notifications",
+      "aria-label": state.labels.region,
       "data-position": state.position,
       "data-theme": state.theme,
       onPointerEnter: () => import_ding.toast.pause(),
@@ -97,7 +100,7 @@ function Toaster({ position, theme }) {
       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))
+        state.toasts.map((t, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { t, i: n - 1 - idx, labels: state.labels }, t.id))
       ]
     }
   );

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,12 +1,18 @@
 // src/index.tsx
 import { useEffect, useRef, useSyncExternalStore } from "react";
-import { toast, injectStyles, bindToast, onToastKey, ICONS } from "@yusufceng1z/ding";
+import {
+  toast,
+  injectStyles,
+  bindToast,
+  onToastKey,
+  ICONS
+} from "@yusufceng1z/ding";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Item({ t, i }) {
+function Item({ t, i, labels }) {
   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(
+  return /* @__PURE__ */ jsx("div", { ref: slot, className: "tst-slot", tabIndex: -1, style: { "--tst-i": i }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "tst",
@@ -42,16 +48,19 @@ function Item({ t, i }) {
               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" }) }) })
+          sticky && /* @__PURE__ */ jsx("button", { type: "button", className: "tst-close", "aria-label": labels.dismiss, 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 }) {
+function Toaster({ position, theme, labels }) {
   const state = useSyncExternalStore(toast.subscribe, toast.getState, toast.getState);
   useEffect(() => injectStyles(), []);
   useEffect(() => toast.configure({ position, theme }), [position, theme]);
+  const region = labels?.region;
+  const dismiss = labels?.dismiss;
+  useEffect(() => toast.configure({ labels: { region, dismiss } }), [region, dismiss]);
   useEffect(() => {
     document.addEventListener("keydown", onToastKey);
     return () => document.removeEventListener("keydown", onToastKey);
@@ -62,7 +71,7 @@ function Toaster({ position, theme }) {
     {
       className: "tst-viewport",
       role: "region",
-      "aria-label": "Notifications",
+      "aria-label": state.labels.region,
       "data-position": state.position,
       "data-theme": state.theme,
       onPointerEnter: () => toast.pause(),
@@ -72,7 +81,7 @@ function Toaster({ position, theme }) {
       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))
+        state.toasts.map((t, idx) => /* @__PURE__ */ jsx(Item, { t, i: n - 1 - idx, labels: state.labels }, t.id))
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufceng1z/ding-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@yusufceng1z/ding": "0.0.1"
+    "@yusufceng1z/ding": "0.0.3"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -32,6 +32,10 @@
     "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",