virtual-ui-lib 1.0.16 → 1.0.18

package/dist/index.js

@@ -32,7 +32,9 @@ __export(index_exports, {
   AlertBanner: () => AlertBanner,
   Button: () => Button,
   Card: () => Card,
-  Dropdown: () => Dropdown
+  Dropdown: () => Dropdown,
+  EmptyState: () => EmptyState,
+  FormInput: () => FormInput
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -272,10 +274,98 @@ var Dropdown = ({
     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());
+};
+
+// src/components/FormInput/FormInput.jsx
+var import_react6 = __toESM(require("react"));
+var FormInput = ({
+  label = "Input Label",
+  type = "text",
+  value = "",
+  placeholder = "Enter text...",
+  errorMessage = "This field is required.",
+  isError = false,
+  isSuccess = false,
+  isDisabled = false,
+  onChange
+}) => {
+  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { style: { marginBottom: "20px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { display: "block", marginBottom: "8px", fontSize: "14px", color: isError ? "#ef4444" : "#64748b" } }, label), /* @__PURE__ */ import_react6.default.createElement(
+    "input",
+    {
+      type,
+      value,
+      placeholder,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange,
+      disabled: isDisabled,
+      style: {
+        width: "100%",
+        padding: "12px 16px",
+        border: `2px solid ${isError ? "#ef4444" : isSuccess ? "#22c55e" : isFocused ? "#2563eb" : "#d1d5db"}`,
+        borderRadius: "8px",
+        boxShadow: isFocused ? "0 4px 14px rgba(37,99,235,0.3)" : "none",
+        outline: "none",
+        transition: "border-color 0.3s, box-shadow 0.3s",
+        fontSize: "16px",
+        color: "#0f172a"
+      }
+    }
+  ), isError && /* @__PURE__ */ import_react6.default.createElement("p", { style: { marginTop: "8px", color: "#ef4444", fontSize: "12px", opacity: 0, animation: "fadeIn 0.3s forwards" } }, errorMessage), isSuccess && /* @__PURE__ */ import_react6.default.createElement("p", { style: { marginTop: "8px", color: "#22c55e", fontSize: "12px" } }, "Input is valid!"), /* @__PURE__ */ import_react6.default.createElement("style", null, `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
   Button,
   Card,
-  Dropdown
+  Dropdown,
+  EmptyState,
+  FormInput
 });

package/dist/index.mjs

@@ -234,9 +234,97 @@ var Dropdown = ({
     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());
+};
+
+// src/components/FormInput/FormInput.jsx
+import React6, { useState as useState4 } from "react";
+var FormInput = ({
+  label = "Input Label",
+  type = "text",
+  value = "",
+  placeholder = "Enter text...",
+  errorMessage = "This field is required.",
+  isError = false,
+  isSuccess = false,
+  isDisabled = false,
+  onChange
+}) => {
+  const [isFocused, setIsFocused] = useState4(false);
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  return /* @__PURE__ */ React6.createElement("div", { style: { marginBottom: "20px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React6.createElement("label", { style: { display: "block", marginBottom: "8px", fontSize: "14px", color: isError ? "#ef4444" : "#64748b" } }, label), /* @__PURE__ */ React6.createElement(
+    "input",
+    {
+      type,
+      value,
+      placeholder,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange,
+      disabled: isDisabled,
+      style: {
+        width: "100%",
+        padding: "12px 16px",
+        border: `2px solid ${isError ? "#ef4444" : isSuccess ? "#22c55e" : isFocused ? "#2563eb" : "#d1d5db"}`,
+        borderRadius: "8px",
+        boxShadow: isFocused ? "0 4px 14px rgba(37,99,235,0.3)" : "none",
+        outline: "none",
+        transition: "border-color 0.3s, box-shadow 0.3s",
+        fontSize: "16px",
+        color: "#0f172a"
+      }
+    }
+  ), isError && /* @__PURE__ */ React6.createElement("p", { style: { marginTop: "8px", color: "#ef4444", fontSize: "12px", opacity: 0, animation: "fadeIn 0.3s forwards" } }, errorMessage), isSuccess && /* @__PURE__ */ React6.createElement("p", { style: { marginTop: "8px", color: "#22c55e", fontSize: "12px" } }, "Input is valid!"), /* @__PURE__ */ React6.createElement("style", null, `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`));
+};
 export {
   AlertBanner,
   Button,
   Card,
-  Dropdown
+  Dropdown,
+  EmptyState,
+  FormInput
 };

package/package.json

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