virtual-ui-lib 1.0.16 → 1.0.17
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.
- package/dist/index.js +49 -2
- package/dist/index.mjs +47 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -32,7 +32,8 @@ __export(index_exports, {
|
|
|
32
32
|
AlertBanner: () => AlertBanner,
|
|
33
33
|
Button: () => Button,
|
|
34
34
|
Card: () => Card,
|
|
35
|
-
Dropdown: () => Dropdown
|
|
35
|
+
Dropdown: () => Dropdown,
|
|
36
|
+
EmptyState: () => EmptyState
|
|
36
37
|
});
|
|
37
38
|
module.exports = __toCommonJS(index_exports);
|
|
38
39
|
|
|
@@ -272,10 +273,56 @@ var Dropdown = ({
|
|
|
272
273
|
transition: "background 0.2s"
|
|
273
274
|
}, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(124,58,237,0.05)", onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, option))));
|
|
274
275
|
};
|
|
276
|
+
|
|
277
|
+
// src/components/EmptyState/EmptyState.jsx
|
|
278
|
+
var import_react5 = __toESM(require("react"));
|
|
279
|
+
var EmptyState = ({
|
|
280
|
+
mode = "default",
|
|
281
|
+
icon = "https://i.imgur.com/E9Gdppt.png",
|
|
282
|
+
message = "No data available. Please check back later.",
|
|
283
|
+
actionText = "Try Again",
|
|
284
|
+
onAction
|
|
285
|
+
}) => {
|
|
286
|
+
const [isVisible, setIsVisible] = (0, import_react5.useState)(false);
|
|
287
|
+
(0, import_react5.useEffect)(() => {
|
|
288
|
+
setIsVisible(true);
|
|
289
|
+
}, []);
|
|
290
|
+
const renderModeContent = () => {
|
|
291
|
+
switch (mode) {
|
|
292
|
+
case "action available":
|
|
293
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react5.default.createElement("img", { src: icon, alt: "Empty State Icon", style: { width: "60px", marginBottom: "16px" } }), /* @__PURE__ */ import_react5.default.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message), /* @__PURE__ */ import_react5.default.createElement("button", { onClick: onAction, style: {
|
|
294
|
+
marginTop: "20px",
|
|
295
|
+
padding: "10px 20px",
|
|
296
|
+
background: "#7c3aed",
|
|
297
|
+
color: "white",
|
|
298
|
+
border: "none",
|
|
299
|
+
borderRadius: "8px",
|
|
300
|
+
cursor: "pointer",
|
|
301
|
+
fontSize: "14px",
|
|
302
|
+
fontWeight: "600",
|
|
303
|
+
transition: "background 0.3s ease, transform 0.3s ease",
|
|
304
|
+
boxShadow: "0 4px 14px rgba(124,58,237,0.4)"
|
|
305
|
+
}, onMouseEnter: (e) => e.currentTarget.style.background = "#6d28d9", onMouseLeave: (e) => e.currentTarget.style.background = "#7c3aed" }, actionText));
|
|
306
|
+
case "illustration mode":
|
|
307
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react5.default.createElement("img", { src: icon, alt: "Illustration", style: { width: "80px", marginBottom: "16px" } }), /* @__PURE__ */ import_react5.default.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message));
|
|
308
|
+
default:
|
|
309
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react5.default.createElement("img", { src: icon, alt: "Default Icon", style: { width: "60px", marginBottom: "16px" } }), /* @__PURE__ */ import_react5.default.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message));
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
313
|
+
display: "flex",
|
|
314
|
+
justifyContent: "center",
|
|
315
|
+
alignItems: "center",
|
|
316
|
+
height: "100vh",
|
|
317
|
+
opacity: isVisible ? 1 : 0,
|
|
318
|
+
transition: "opacity 0.5s ease-in-out"
|
|
319
|
+
} }, renderModeContent());
|
|
320
|
+
};
|
|
275
321
|
// Annotate the CommonJS export names for ESM import in node:
|
|
276
322
|
0 && (module.exports = {
|
|
277
323
|
AlertBanner,
|
|
278
324
|
Button,
|
|
279
325
|
Card,
|
|
280
|
-
Dropdown
|
|
326
|
+
Dropdown,
|
|
327
|
+
EmptyState
|
|
281
328
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -234,9 +234,55 @@ var Dropdown = ({
|
|
|
234
234
|
transition: "background 0.2s"
|
|
235
235
|
}, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(124,58,237,0.05)", onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, option))));
|
|
236
236
|
};
|
|
237
|
+
|
|
238
|
+
// src/components/EmptyState/EmptyState.jsx
|
|
239
|
+
import React5, { useEffect as useEffect3, useState as useState3 } from "react";
|
|
240
|
+
var EmptyState = ({
|
|
241
|
+
mode = "default",
|
|
242
|
+
icon = "https://i.imgur.com/E9Gdppt.png",
|
|
243
|
+
message = "No data available. Please check back later.",
|
|
244
|
+
actionText = "Try Again",
|
|
245
|
+
onAction
|
|
246
|
+
}) => {
|
|
247
|
+
const [isVisible, setIsVisible] = useState3(false);
|
|
248
|
+
useEffect3(() => {
|
|
249
|
+
setIsVisible(true);
|
|
250
|
+
}, []);
|
|
251
|
+
const renderModeContent = () => {
|
|
252
|
+
switch (mode) {
|
|
253
|
+
case "action available":
|
|
254
|
+
return /* @__PURE__ */ React5.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React5.createElement("img", { src: icon, alt: "Empty State Icon", style: { width: "60px", marginBottom: "16px" } }), /* @__PURE__ */ React5.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message), /* @__PURE__ */ React5.createElement("button", { onClick: onAction, style: {
|
|
255
|
+
marginTop: "20px",
|
|
256
|
+
padding: "10px 20px",
|
|
257
|
+
background: "#7c3aed",
|
|
258
|
+
color: "white",
|
|
259
|
+
border: "none",
|
|
260
|
+
borderRadius: "8px",
|
|
261
|
+
cursor: "pointer",
|
|
262
|
+
fontSize: "14px",
|
|
263
|
+
fontWeight: "600",
|
|
264
|
+
transition: "background 0.3s ease, transform 0.3s ease",
|
|
265
|
+
boxShadow: "0 4px 14px rgba(124,58,237,0.4)"
|
|
266
|
+
}, onMouseEnter: (e) => e.currentTarget.style.background = "#6d28d9", onMouseLeave: (e) => e.currentTarget.style.background = "#7c3aed" }, actionText));
|
|
267
|
+
case "illustration mode":
|
|
268
|
+
return /* @__PURE__ */ React5.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React5.createElement("img", { src: icon, alt: "Illustration", style: { width: "80px", marginBottom: "16px" } }), /* @__PURE__ */ React5.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message));
|
|
269
|
+
default:
|
|
270
|
+
return /* @__PURE__ */ React5.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React5.createElement("img", { src: icon, alt: "Default Icon", style: { width: "60px", marginBottom: "16px" } }), /* @__PURE__ */ React5.createElement("p", { style: { fontSize: "16px", color: "#64748b", margin: 0 } }, message));
|
|
271
|
+
}
|
|
272
|
+
};
|
|
273
|
+
return /* @__PURE__ */ React5.createElement("div", { style: {
|
|
274
|
+
display: "flex",
|
|
275
|
+
justifyContent: "center",
|
|
276
|
+
alignItems: "center",
|
|
277
|
+
height: "100vh",
|
|
278
|
+
opacity: isVisible ? 1 : 0,
|
|
279
|
+
transition: "opacity 0.5s ease-in-out"
|
|
280
|
+
} }, renderModeContent());
|
|
281
|
+
};
|
|
237
282
|
export {
|
|
238
283
|
AlertBanner,
|
|
239
284
|
Button,
|
|
240
285
|
Card,
|
|
241
|
-
Dropdown
|
|
286
|
+
Dropdown,
|
|
287
|
+
EmptyState
|
|
242
288
|
};
|