virtual-ui-lib 1.0.15 → 1.0.17

package/dist/index.js

@@ -31,7 +31,9 @@ var index_exports = {};
 __export(index_exports, {
   AlertBanner: () => AlertBanner,
   Button: () => Button,
-  Card: () => Card
+  Card: () => Card,
+  Dropdown: () => Dropdown,
+  EmptyState: () => EmptyState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -201,9 +203,126 @@ var Card = ({
     )
   );
 };
+
+// src/components/Dropdown/Dropdown.jsx
+var import_react4 = __toESM(require("react"));
+var Dropdown = ({
+  options = ["Option 1", "Option 2", "Option 3"],
+  defaultValue = "Option 1",
+  bg = "#1e293b",
+  accent = "#7c3aed",
+  textColor = "#f1f5f9",
+  borderColor = "rgba(255,255,255,0.1)",
+  radius = "10px",
+  onSelect
+}) => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [selected, setSelected] = (0, import_react4.useState)(defaultValue);
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  const handleOptionSelect = (option) => {
+    setSelected(option);
+    onSelect && onSelect(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "relative", display: "inline-block", fontFamily: "system-ui, sans-serif" }, ref: dropdownRef }, /* @__PURE__ */ import_react4.default.createElement("button", { onClick: () => setOpen((prev) => !prev), style: {
+    background: bg,
+    color: textColor,
+    border: `1px solid ${borderColor}`,
+    borderRadius: radius,
+    padding: "10px 16px",
+    cursor: "pointer",
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center",
+    gap: "5px"
+  } }, selected, " ", /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginLeft: "auto" } }, "\u25BC")), open && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    background: bg,
+    border: `1px solid ${borderColor}`,
+    borderRadius: radius,
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    zIndex: 100,
+    marginTop: "4px",
+    animation: "fadeIn 0.3s ease, slideDown 0.3s ease"
+  } }, options.map((option) => /* @__PURE__ */ import_react4.default.createElement("div", { key: option, onClick: () => handleOptionSelect(option), style: {
+    padding: "10px 15px",
+    color: option === selected ? accent : textColor,
+    background: option === selected ? "rgba(124,58,237,0.1)" : "transparent",
+    borderRadius: radius,
+    cursor: "pointer",
+    transition: "background 0.2s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(124,58,237,0.05)", onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, option))));
+};
+
+// src/components/EmptyState/EmptyState.jsx
+var import_react5 = __toESM(require("react"));
+var EmptyState = ({
+  mode = "default",
+  icon = "https://i.imgur.com/E9Gdppt.png",
+  message = "No data available. Please check back later.",
+  actionText = "Try Again",
+  onAction
+}) => {
+  const [isVisible, setIsVisible] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    setIsVisible(true);
+  }, []);
+  const renderModeContent = () => {
+    switch (mode) {
+      case "action available":
+        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: {
+          marginTop: "20px",
+          padding: "10px 20px",
+          background: "#7c3aed",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: "600",
+          transition: "background 0.3s ease, transform 0.3s ease",
+          boxShadow: "0 4px 14px rgba(124,58,237,0.4)"
+        }, onMouseEnter: (e) => e.currentTarget.style.background = "#6d28d9", onMouseLeave: (e) => e.currentTarget.style.background = "#7c3aed" }, actionText));
+      case "illustration mode":
+        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));
+      default:
+        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));
+    }
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.5s ease-in-out"
+  } }, renderModeContent());
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
   Button,
-  Card
+  Card,
+  Dropdown,
+  EmptyState
 });

package/dist/index.mjs

@@ -164,8 +164,125 @@ var Card = ({
     )
   );
 };
+
+// src/components/Dropdown/Dropdown.jsx
+import React4, { useRef, useState as useState2, useEffect as useEffect2 } from "react";
+var Dropdown = ({
+  options = ["Option 1", "Option 2", "Option 3"],
+  defaultValue = "Option 1",
+  bg = "#1e293b",
+  accent = "#7c3aed",
+  textColor = "#f1f5f9",
+  borderColor = "rgba(255,255,255,0.1)",
+  radius = "10px",
+  onSelect
+}) => {
+  const [open, setOpen] = useState2(false);
+  const [selected, setSelected] = useState2(defaultValue);
+  const dropdownRef = useRef(null);
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+    }
+  };
+  useEffect2(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  const handleOptionSelect = (option) => {
+    setSelected(option);
+    onSelect && onSelect(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React4.createElement("div", { style: { position: "relative", display: "inline-block", fontFamily: "system-ui, sans-serif" }, ref: dropdownRef }, /* @__PURE__ */ React4.createElement("button", { onClick: () => setOpen((prev) => !prev), style: {
+    background: bg,
+    color: textColor,
+    border: `1px solid ${borderColor}`,
+    borderRadius: radius,
+    padding: "10px 16px",
+    cursor: "pointer",
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center",
+    gap: "5px"
+  } }, selected, " ", /* @__PURE__ */ React4.createElement("span", { style: { marginLeft: "auto" } }, "\u25BC")), open && /* @__PURE__ */ React4.createElement("div", { style: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    background: bg,
+    border: `1px solid ${borderColor}`,
+    borderRadius: radius,
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    zIndex: 100,
+    marginTop: "4px",
+    animation: "fadeIn 0.3s ease, slideDown 0.3s ease"
+  } }, options.map((option) => /* @__PURE__ */ React4.createElement("div", { key: option, onClick: () => handleOptionSelect(option), style: {
+    padding: "10px 15px",
+    color: option === selected ? accent : textColor,
+    background: option === selected ? "rgba(124,58,237,0.1)" : "transparent",
+    borderRadius: radius,
+    cursor: "pointer",
+    transition: "background 0.2s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(124,58,237,0.05)", onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, option))));
+};
+
+// src/components/EmptyState/EmptyState.jsx
+import React5, { useEffect as useEffect3, useState as useState3 } from "react";
+var EmptyState = ({
+  mode = "default",
+  icon = "https://i.imgur.com/E9Gdppt.png",
+  message = "No data available. Please check back later.",
+  actionText = "Try Again",
+  onAction
+}) => {
+  const [isVisible, setIsVisible] = useState3(false);
+  useEffect3(() => {
+    setIsVisible(true);
+  }, []);
+  const renderModeContent = () => {
+    switch (mode) {
+      case "action available":
+        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: {
+          marginTop: "20px",
+          padding: "10px 20px",
+          background: "#7c3aed",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: "600",
+          transition: "background 0.3s ease, transform 0.3s ease",
+          boxShadow: "0 4px 14px rgba(124,58,237,0.4)"
+        }, onMouseEnter: (e) => e.currentTarget.style.background = "#6d28d9", onMouseLeave: (e) => e.currentTarget.style.background = "#7c3aed" }, actionText));
+      case "illustration mode":
+        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));
+      default:
+        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));
+    }
+  };
+  return /* @__PURE__ */ React5.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.5s ease-in-out"
+  } }, renderModeContent());
+};
 export {
   AlertBanner,
   Button,
-  Card
+  Card,
+  Dropdown,
+  EmptyState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",