your-toast 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +8 -0
  2. package/dist/index.cjs +61 -34
  3. package/dist/index.js +61 -34
  4. package/package.json +24 -6
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # your-toast 🍞
2
2
 
3
+ ![npm](https://img.shields.io/npm/v/your-toast)
4
+ ![GitHub stars](https://img.shields.io/github/stars/masaudahmod/your-toast)
5
+
3
6
  Modern toast notification library for React apps.
4
7
 
5
8
  ✨ Clean & intuitive API
@@ -144,3 +147,8 @@ MIT
144
147
  ## 👨‍💻 Author
145
148
 
146
149
  Masaud Ahmod
150
+
151
+ ## ⭐ Support
152
+
153
+ If you find this useful, consider giving a ⭐ on GitHub:
154
+ 👉 https://github.com/your-username/your-toast
package/dist/index.cjs CHANGED
@@ -105,6 +105,9 @@ var toast = Object.assign(
105
105
  }
106
106
  );
107
107
 
108
+ // src/components/YourToastProvider.tsx
109
+ var import_react2 = require("react");
110
+
108
111
  // src/hooks/useToast.ts
109
112
  var import_react = require("react");
110
113
  function useToast() {
@@ -124,6 +127,33 @@ var YourToastProvider = ({
124
127
  children
125
128
  }) => {
126
129
  const { toasts: toasts2 } = useToast();
130
+ const [mounted, setMounted] = (0, import_react2.useState)(false);
131
+ (0, import_react2.useEffect)(() => {
132
+ setMounted(true);
133
+ if (typeof document !== "undefined") {
134
+ const style = document.createElement("style");
135
+ style.innerHTML = `
136
+ @keyframes yt-slide-in {
137
+ from {
138
+ opacity: 0;
139
+ transform: translateY(-10px) translateX(10px);
140
+ }
141
+
142
+ to {
143
+ opacity: 1;
144
+ transform: translateY(0) translateX(0);
145
+ }
146
+ }
147
+ `;
148
+ document.head.appendChild(style);
149
+ return () => {
150
+ document.head.removeChild(style);
151
+ };
152
+ }
153
+ }, []);
154
+ if (!mounted) {
155
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
156
+ }
127
157
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
128
158
  children,
129
159
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: containerStyle, children: toasts2.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -136,30 +166,31 @@ var YourToastProvider = ({
136
166
  children: [
137
167
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
138
168
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600 }, children: toast2.title }),
139
- toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7, fontSize: "13px" }, children: toast2.description })
169
+ toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
170
+ "span",
171
+ {
172
+ style: {
173
+ opacity: 0.7,
174
+ fontSize: "13px"
175
+ },
176
+ children: toast2.description
177
+ }
178
+ )
140
179
  ] }),
141
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
180
+ toast2.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
142
181
  "button",
143
182
  {
144
- onClick: () => toastStore.remove(toast2.id),
145
- style: closeBtn,
146
- children: "\u2715"
183
+ onClick: toast2.action.onClick,
184
+ style: actionBtn,
185
+ children: toast2.action.label
147
186
  }
148
187
  ),
149
- toast2.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
150
189
  "button",
151
190
  {
152
- onClick: toast2.action.onClick,
153
- style: {
154
- background: "rgba(255,255,255,0.1)",
155
- border: "none",
156
- padding: "6px 10px",
157
- borderRadius: "8px",
158
- color: "#fff",
159
- cursor: "pointer",
160
- fontSize: "12px"
161
- },
162
- children: toast2.action.label
191
+ onClick: () => toastStore.remove(toast2.id),
192
+ style: closeBtn,
193
+ children: "\u2715"
163
194
  }
164
195
  )
165
196
  ]
@@ -179,7 +210,9 @@ function getVariantStyle(type) {
179
210
  case "action":
180
211
  return { background: "#7c3aed" };
181
212
  default:
182
- return { background: "#111" };
213
+ return {
214
+ background: "rgba(255,255,255,0.08)"
215
+ };
183
216
  }
184
217
  }
185
218
  var containerStyle = {
@@ -193,13 +226,12 @@ var containerStyle = {
193
226
  };
194
227
  var toastStyle = {
195
228
  backdropFilter: "blur(16px)",
196
- background: "rgba(255, 255, 255, 0.08)",
197
229
  color: "#fff",
198
230
  padding: "14px 16px",
199
231
  borderRadius: "14px",
200
232
  display: "flex",
201
233
  justifyContent: "space-between",
202
- alignItems: "flex-start",
234
+ alignItems: "center",
203
235
  minWidth: "260px",
204
236
  gap: "10px",
205
237
  border: "1px solid rgba(255,255,255,0.1)",
@@ -212,20 +244,15 @@ var closeBtn = {
212
244
  color: "#fff",
213
245
  cursor: "pointer"
214
246
  };
215
- var style = document.createElement("style");
216
- style.innerHTML = `
217
- @keyframes yt-slide-in {
218
- from {
219
- opacity: 0;
220
- transform: translateY(-10px) translateX(10px);
221
- }
222
- to {
223
- opacity: 1;
224
- transform: translateY(0) translateX(0);
225
- }
226
- }
227
- `;
228
- document.head.appendChild(style);
247
+ var actionBtn = {
248
+ background: "rgba(255,255,255,0.1)",
249
+ border: "none",
250
+ padding: "6px 10px",
251
+ borderRadius: "8px",
252
+ color: "#fff",
253
+ cursor: "pointer",
254
+ fontSize: "12px"
255
+ };
229
256
  // Annotate the CommonJS export names for ESM import in node:
230
257
  0 && (module.exports = {
231
258
  YourToastProvider,
package/dist/index.js CHANGED
@@ -78,6 +78,9 @@ var toast = Object.assign(
78
78
  }
79
79
  );
80
80
 
81
+ // src/components/YourToastProvider.tsx
82
+ import { useEffect as useEffect2, useState as useState2 } from "react";
83
+
81
84
  // src/hooks/useToast.ts
82
85
  import { useEffect, useState } from "react";
83
86
  function useToast() {
@@ -97,6 +100,33 @@ var YourToastProvider = ({
97
100
  children
98
101
  }) => {
99
102
  const { toasts: toasts2 } = useToast();
103
+ const [mounted, setMounted] = useState2(false);
104
+ useEffect2(() => {
105
+ setMounted(true);
106
+ if (typeof document !== "undefined") {
107
+ const style = document.createElement("style");
108
+ style.innerHTML = `
109
+ @keyframes yt-slide-in {
110
+ from {
111
+ opacity: 0;
112
+ transform: translateY(-10px) translateX(10px);
113
+ }
114
+
115
+ to {
116
+ opacity: 1;
117
+ transform: translateY(0) translateX(0);
118
+ }
119
+ }
120
+ `;
121
+ document.head.appendChild(style);
122
+ return () => {
123
+ document.head.removeChild(style);
124
+ };
125
+ }
126
+ }, []);
127
+ if (!mounted) {
128
+ return /* @__PURE__ */ jsx(Fragment, { children });
129
+ }
100
130
  return /* @__PURE__ */ jsxs(Fragment, { children: [
101
131
  children,
102
132
  /* @__PURE__ */ jsx("div", { style: containerStyle, children: toasts2.map((toast2) => /* @__PURE__ */ jsxs(
@@ -109,30 +139,31 @@ var YourToastProvider = ({
109
139
  children: [
110
140
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
111
141
  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: toast2.title }),
112
- toast2.description && /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "13px" }, children: toast2.description })
142
+ toast2.description && /* @__PURE__ */ jsx(
143
+ "span",
144
+ {
145
+ style: {
146
+ opacity: 0.7,
147
+ fontSize: "13px"
148
+ },
149
+ children: toast2.description
150
+ }
151
+ )
113
152
  ] }),
114
- /* @__PURE__ */ jsx(
153
+ toast2.action && /* @__PURE__ */ jsx(
115
154
  "button",
116
155
  {
117
- onClick: () => toastStore.remove(toast2.id),
118
- style: closeBtn,
119
- children: "\u2715"
156
+ onClick: toast2.action.onClick,
157
+ style: actionBtn,
158
+ children: toast2.action.label
120
159
  }
121
160
  ),
122
- toast2.action && /* @__PURE__ */ jsx(
161
+ /* @__PURE__ */ jsx(
123
162
  "button",
124
163
  {
125
- onClick: toast2.action.onClick,
126
- style: {
127
- background: "rgba(255,255,255,0.1)",
128
- border: "none",
129
- padding: "6px 10px",
130
- borderRadius: "8px",
131
- color: "#fff",
132
- cursor: "pointer",
133
- fontSize: "12px"
134
- },
135
- children: toast2.action.label
164
+ onClick: () => toastStore.remove(toast2.id),
165
+ style: closeBtn,
166
+ children: "\u2715"
136
167
  }
137
168
  )
138
169
  ]
@@ -152,7 +183,9 @@ function getVariantStyle(type) {
152
183
  case "action":
153
184
  return { background: "#7c3aed" };
154
185
  default:
155
- return { background: "#111" };
186
+ return {
187
+ background: "rgba(255,255,255,0.08)"
188
+ };
156
189
  }
157
190
  }
158
191
  var containerStyle = {
@@ -166,13 +199,12 @@ var containerStyle = {
166
199
  };
167
200
  var toastStyle = {
168
201
  backdropFilter: "blur(16px)",
169
- background: "rgba(255, 255, 255, 0.08)",
170
202
  color: "#fff",
171
203
  padding: "14px 16px",
172
204
  borderRadius: "14px",
173
205
  display: "flex",
174
206
  justifyContent: "space-between",
175
- alignItems: "flex-start",
207
+ alignItems: "center",
176
208
  minWidth: "260px",
177
209
  gap: "10px",
178
210
  border: "1px solid rgba(255,255,255,0.1)",
@@ -185,20 +217,15 @@ var closeBtn = {
185
217
  color: "#fff",
186
218
  cursor: "pointer"
187
219
  };
188
- var style = document.createElement("style");
189
- style.innerHTML = `
190
- @keyframes yt-slide-in {
191
- from {
192
- opacity: 0;
193
- transform: translateY(-10px) translateX(10px);
194
- }
195
- to {
196
- opacity: 1;
197
- transform: translateY(0) translateX(0);
198
- }
199
- }
200
- `;
201
- document.head.appendChild(style);
220
+ var actionBtn = {
221
+ background: "rgba(255,255,255,0.1)",
222
+ border: "none",
223
+ padding: "6px 10px",
224
+ borderRadius: "8px",
225
+ color: "#fff",
226
+ cursor: "pointer",
227
+ fontSize: "12px"
228
+ };
202
229
  export {
203
230
  YourToastProvider,
204
231
  toast
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "your-toast",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "type": "module",
5
- "description": "Modern toast notification library for React (coming soon)",
5
+ "description": "Modern toast notification library for React and Next.js with glass UI, promise support, and clean API",
6
6
  "main": "dist/index.cjs",
7
7
  "module": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -15,11 +15,21 @@
15
15
  ],
16
16
  "sideEffects": false,
17
17
  "keywords": [
18
- "react",
18
+ "your-toast",
19
19
  "toast",
20
- "notification",
21
- "ui",
22
- "toast-library"
20
+ "my-toast",
21
+ "react-toast",
22
+ "toast-notification",
23
+ "react-notification",
24
+ "toast-library",
25
+ "react-toast-library",
26
+ "nextjs-toast",
27
+ "toast-ui",
28
+ "notification-library",
29
+ "lightweight-toast",
30
+ "modern-toast",
31
+ "react-alert",
32
+ "ui-notification"
23
33
  ],
24
34
  "peerDependencies": {
25
35
  "react": ">=18",
@@ -34,5 +44,13 @@
34
44
  "react-dom": "^19.2.5",
35
45
  "tsup": "^8.5.1",
36
46
  "typescript": "^6.0.3"
47
+ },
48
+ "homepage": "https://github.com/masaudahmod/your-toast",
49
+ "repository": {
50
+ "type": "git",
51
+ "url": "https://github.com/masaudahmod/your-toast.git"
52
+ },
53
+ "bugs": {
54
+ "url": "https://github.com/masaudahmod/your-toast/issues"
37
55
  }
38
56
  }