@pittorica/toast-react 0.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Davide Di Criscito
+
+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

@@ -0,0 +1,24 @@
+# @pittorica/toast-react
+
+The `Toast` component.
+
+## Installation
+
+```bash
+npm install @pittorica/toast-react
+```
+
+## Usage
+
+```jsx
+import { Toast } from '@pittorica/toast-react';
+// TODO: Add usage example
+```
+
+## License
+
+This project is licensed under the MIT License.
+
+**Copyright (c) 2025 Davide Di Criscito**
+
+For the full details, see the [LICENSE](LICENSE) file.

package/dist/Toast.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface ToastData {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    duration?: number;
+}
+/**
+ * Dispatches a global toast notification.
+ */
+export declare const toast: (data: Omit<ToastData, "id">) => void;
+/**
+ * ToastProvider renders notifications sent via the toast() function.
+ */
+export declare const ToastProvider: () => import("react").ReactPortal | null;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAIhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,0CAuEzB,CAAC"}

package/dist/Toast.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Interactive: StoryObj;
+//# sourceMappingURL=Toast.stories.d.ts.map

package/dist/Toast.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../src/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,WAAW,EAAE,QA6BzB,CAAC"}

package/dist/Toast.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @vitest-environment jsdom
+ */
+import '@testing-library/jest-dom';
+//# sourceMappingURL=Toast.test.d.ts.map

package/dist/Toast.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.test.d.ts","sourceRoot":"","sources":["../src/Toast.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { ToastData } from './Toast.js';
+export { toast, ToastProvider } from './Toast.js';
+//# 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,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,444 @@
+import { jsx as y, jsxs as E } from "react/jsx-runtime";
+import { forwardRef as P, createElement as L, useState as X, useRef as V, useCallback as D, useEffect as G } from "react";
+import { createPortal as H } from "react-dom";
+/**
+ * @license @tabler/icons-react v3.36.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var J = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+/**
+ * @license @tabler/icons-react v3.36.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const K = (e, i, r, t) => {
+  const o = P(
+    ({ color: s = "currentColor", size: n = 24, stroke: c = 2, title: l, className: p, children: d, ...f }, m) => L(
+      "svg",
+      {
+        ref: m,
+        ...J[e],
+        width: n,
+        height: n,
+        className: ["tabler-icon", `tabler-icon-${i}`, p].join(" "),
+        fill: s,
+        ...f
+      },
+      [
+        l && L("title", { key: "svg-title" }, l),
+        ...t.map(([g, u]) => L(g, u)),
+        ...Array.isArray(d) ? d : [d]
+      ]
+    )
+  );
+  return o.displayName = `${r}`, o;
+};
+/**
+ * @license @tabler/icons-react v3.36.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Q = [["path", { d: "M12 2l.324 .001l.318 .004l.616 .017l.299 .013l.579 .034l.553 .046c4.785 .464 6.732 2.411 7.196 7.196l.046 .553l.034 .579c.005 .098 .01 .198 .013 .299l.017 .616l.005 .642l-.005 .642l-.017 .616l-.013 .299l-.034 .579l-.046 .553c-.464 4.785 -2.411 6.732 -7.196 7.196l-.553 .046l-.579 .034c-.098 .005 -.198 .01 -.299 .013l-.616 .017l-.642 .005l-.642 -.005l-.616 -.017l-.299 -.013l-.579 -.034l-.553 -.046c-4.785 -.464 -6.732 -2.411 -7.196 -7.196l-.046 -.553l-.034 -.579a28.058 28.058 0 0 1 -.013 -.299l-.017 -.616c-.003 -.21 -.005 -.424 -.005 -.642l.001 -.324l.004 -.318l.017 -.616l.013 -.299l.034 -.579l.046 -.553c.464 -4.785 2.411 -6.732 7.196 -7.196l.553 -.046l.579 -.034c.098 -.005 .198 -.01 .299 -.013l.616 -.017c.21 -.003 .424 -.005 .642 -.005zm-1.489 7.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z", fill: "currentColor", key: "svg-0", strokeWidth: "0" }]], U = K("filled", "square-rounded-x-filled", "SquareRoundedXFilled", Q);
+function z(e) {
+  var i, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (i = 0; i < o; i++) e[i] && (r = z(e[i])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
+  return t;
+}
+function Y() {
+  for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = z(e)) && (t && (t += " "), t += i);
+  return t;
+}
+const C = ({
+  ref: e,
+  as: i = "div",
+  children: r,
+  display: t,
+  m: o,
+  mt: s,
+  mr: n,
+  mb: c,
+  ml: l,
+  p,
+  pt: d,
+  pr: f,
+  pb: m,
+  pl: g,
+  width: u,
+  height: h,
+  position: v,
+  style: b,
+  className: $,
+  href: w,
+  target: N,
+  rel: x,
+  htmlFor: T,
+  type: A,
+  disabled: k,
+  ...R
+}) => {
+  const a = {};
+  t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), s && (a.marginTop = `var(--pittorica-space-${s})`), n && (a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginBottom = `var(--pittorica-space-${c})`), l && (a.marginLeft = `var(--pittorica-space-${l})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), m && (a.paddingBottom = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
+  const B = {
+    ...b,
+    ...a
+  };
+  return /* @__PURE__ */ y(
+    i,
+    {
+      ref: e,
+      className: Y("pittorica-box", $),
+      style: B,
+      href: w,
+      target: N,
+      rel: x,
+      htmlFor: T,
+      type: A,
+      disabled: k,
+      ...R,
+      children: r
+    }
+  );
+};
+C.displayName = "Box";
+function S(e) {
+  var i, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (i = 0; i < o; i++) e[i] && (r = S(e[i])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
+  return t;
+}
+function Z() {
+  for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = S(e)) && (t && (t += " "), t += i);
+  return t;
+}
+function W(e) {
+  var i, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (i = 0; i < o; i++) e[i] && (r = W(e[i])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
+  return t;
+}
+function tt() {
+  for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = W(e)) && (t && (t += " "), t += i);
+  return t;
+}
+const q = ({
+  ref: e,
+  as: i = "div",
+  children: r,
+  display: t,
+  m: o,
+  mt: s,
+  mr: n,
+  mb: c,
+  ml: l,
+  p,
+  pt: d,
+  pr: f,
+  pb: m,
+  pl: g,
+  width: u,
+  height: h,
+  position: v,
+  style: b,
+  className: $,
+  href: w,
+  target: N,
+  rel: x,
+  htmlFor: T,
+  type: A,
+  disabled: k,
+  ...R
+}) => {
+  const a = {};
+  t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), s && (a.marginTop = `var(--pittorica-space-${s})`), n && (a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginBottom = `var(--pittorica-space-${c})`), l && (a.marginLeft = `var(--pittorica-space-${l})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), m && (a.paddingBottom = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
+  const B = {
+    ...b,
+    ...a
+  };
+  return /* @__PURE__ */ y(
+    i,
+    {
+      ref: e,
+      className: tt("pittorica-box", $),
+      style: B,
+      href: w,
+      target: N,
+      rel: x,
+      htmlFor: T,
+      type: A,
+      disabled: k,
+      ...R,
+      children: r
+    }
+  );
+};
+q.displayName = "Box";
+const _ = ({
+  children: e,
+  variant: i = "filled",
+  color: r = "indigo",
+  size: t = "3",
+  className: o,
+  style: s,
+  ref: n,
+  ...c
+}) => {
+  const l = r !== "inherit" && !(r != null && r.startsWith("#")) && !(r != null && r.startsWith("rgb")), p = {
+    ...s,
+    "--pittorica-source-color": l ? `var(--pittorica-${r}-9)` : r,
+    "--pittorica-on-source-color": "#ffffff"
+  };
+  return /* @__PURE__ */ y(
+    q,
+    {
+      ...c,
+      as: c.href ? "a" : "button",
+      ref: n,
+      className: Z(
+        "pittorica-icon-button",
+        `pittorica-icon-button--${i}`,
+        `pittorica-icon-button--${t}`,
+        o
+      ),
+      style: p,
+      children: e
+    }
+  );
+};
+_.displayName = "IconButton";
+function I(e) {
+  var i, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (i = 0; i < o; i++) e[i] && (r = I(e[i])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
+  return t;
+}
+function et() {
+  for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = I(e)) && (t && (t += " "), t += i);
+  return t;
+}
+function M(e) {
+  var i, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (i = 0; i < o; i++) e[i] && (r = M(e[i])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
+  return t;
+}
+function rt() {
+  for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = M(e)) && (t && (t += " "), t += i);
+  return t;
+}
+const O = ({
+  ref: e,
+  as: i = "div",
+  children: r,
+  display: t,
+  m: o,
+  mt: s,
+  mr: n,
+  mb: c,
+  ml: l,
+  p,
+  pt: d,
+  pr: f,
+  pb: m,
+  pl: g,
+  width: u,
+  height: h,
+  position: v,
+  style: b,
+  className: $,
+  href: w,
+  target: N,
+  rel: x,
+  htmlFor: T,
+  type: A,
+  disabled: k,
+  ...R
+}) => {
+  const a = {};
+  t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), s && (a.marginTop = `var(--pittorica-space-${s})`), n && (a.marginRight = `var(--pittorica-space-${n})`), c && (a.marginBottom = `var(--pittorica-space-${c})`), l && (a.marginLeft = `var(--pittorica-space-${l})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), m && (a.paddingBottom = `var(--pittorica-space-${m})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
+  const B = {
+    ...b,
+    ...a
+  };
+  return /* @__PURE__ */ y(
+    i,
+    {
+      ref: e,
+      className: rt("pittorica-box", $),
+      style: B,
+      href: w,
+      target: N,
+      rel: x,
+      htmlFor: T,
+      type: A,
+      disabled: k,
+      ...R,
+      children: r
+    }
+  );
+};
+O.displayName = "Box";
+const it = (e, i) => i ? typeof i == "string" ? [`pittorica-text--${e}-${i}`] : Object.entries(i).filter(([r, t]) => t !== void 0).map(
+  ([r, t]) => r === "initial" ? `pittorica-text--${e}-${t}` : `pittorica-text--${r}-${e}-${t}`
+) : [], F = ({
+  children: e,
+  as: i = "span",
+  size: r = "3",
+  weight: t = "regular",
+  align: o,
+  truncate: s = !1,
+  color: n,
+  className: c,
+  style: l,
+  href: p,
+  target: d,
+  rel: f,
+  htmlFor: m,
+  ...g
+}) => {
+  const u = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")), h = [
+    "danger",
+    "success",
+    "error",
+    "info",
+    "indigo",
+    "crimson",
+    "teal",
+    "amber",
+    "slate",
+    "blue",
+    "red"
+  ].includes(n), v = (() => {
+    if (n) {
+      if (n === "inherit") return "inherit";
+      if (u) return n;
+      if (h) return `var(--pittorica-${n}-9)`;
+    }
+  })(), b = {
+    ...l,
+    textAlign: o,
+    color: v
+  }, $ = it("size", r);
+  return /* @__PURE__ */ y(
+    O,
+    {
+      as: i,
+      className: et(
+        "pittorica-text",
+        { "pittorica-text--truncate": s },
+        $,
+        c
+      ),
+      "data-weight": t,
+      style: b,
+      href: p,
+      target: d,
+      rel: f,
+      htmlFor: m,
+      ...g,
+      children: e
+    }
+  );
+}, j = "pittorica-toast", st = (e) => {
+  const i = Math.random().toString(36).slice(2, 9), r = new CustomEvent(j, { detail: { ...e, id: i } });
+  globalThis.dispatchEvent(r);
+}, lt = () => {
+  const [e, i] = X([]), r = V(/* @__PURE__ */ new Set()), t = D((o) => {
+    i((s) => s.filter((n) => n.id !== o));
+  }, []);
+  return G(() => {
+    const o = (s) => {
+      const c = s.detail;
+      if (i((l) => [...l, c]), c.duration !== 0) {
+        const l = setTimeout(() => {
+          t(c.id), r.current.delete(l);
+        }, c.duration || 3e3);
+        r.current.add(l);
+      }
+    };
+    return globalThis.addEventListener(j, o), () => {
+      globalThis.removeEventListener(j, o);
+      for (const s of r.current) clearTimeout(s);
+      r.current.clear();
+    };
+  }, [t]), typeof document > "u" ? null : H(
+    /* @__PURE__ */ y(
+      C,
+      {
+        className: "pittorica-toast-viewport",
+        role: "region",
+        "aria-label": "Notifications",
+        children: e.map((o) => /* @__PURE__ */ E(
+          C,
+          {
+            className: "pittorica-toast-root",
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ E(C, { className: "pittorica-toast-content", children: [
+                /* @__PURE__ */ y(F, { size: "2", weight: "bold", style: { display: "block" }, children: o.title }),
+                o.description && /* @__PURE__ */ y(F, { size: "2", color: "slate", style: { display: "block" }, children: o.description })
+              ] }),
+              /* @__PURE__ */ y(
+                _,
+                {
+                  variant: "text",
+                  color: "slate",
+                  size: "1",
+                  onClick: () => t(o.id),
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ y(U, { size: 18 })
+                }
+              )
+            ]
+          },
+          o.id
+        ))
+      }
+    ),
+    document.body
+  );
+};
+export {
+  lt as ToastProvider,
+  st as toast
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pittorica/toast-react",
+  "version": "0.22.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tabler/icons-react": "^3.36.1",
+    "clsx": "^2.1.1",
+    "@pittorica/box-react": "0.22.0",
+    "@pittorica/icon-button-react": "0.22.0",
+    "@pittorica/text-react": "0.22.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jsdom": "^22.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^2.1.9",
+    "@pittorica/button-react": "0.22.0",
+    "@pittorica/flex-react": "0.22.0",
+    "pittorica": "0.22.0",
+    "@pittorica/theme-react": "0.22.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:js && npm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}