virtual-ui-lib 1.0.11 → 1.0.13

package/dist/index.js

@@ -29,369 +29,56 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
-  Alert: () => Alert,
-  AnimatedButton: () => AnimatedButton,
-  Avatar: () => Avatar,
-  Badge: () => Badge,
-  Button: () => Button,
-  Card: () => Card,
-  Input: () => Input,
-  Modal: () => Modal,
-  ProgressBar: () => ProgressBar,
-  Spinner: () => Spinner
+  AlertBanner: () => AlertBanner
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button/Button.jsx
+// src/components/AlertBanner/AlertBanner.jsx
 var import_react = __toESM(require("react"));
-var Button = ({
-  text = "Button",
-  bg = "#2563eb",
-  color = "white",
-  size = "md",
-  width = "auto",
-  radius = "6px",
-  border = "none",
-  weight = "500",
-  shadow = "none",
-  disabled = false,
-  loading = false,
-  icon = null,
-  onClick
+var AlertBanner = ({
+  message = "This is an alert message.",
+  type = "info",
+  onDismiss
 }) => {
-  const sizes = {
-    sm: "6px 12px",
-    md: "8px 16px",
-    lg: "12px 20px"
+  const [visible, setVisible] = (0, import_react.useState)(true);
+  const [fade, setFade] = (0, import_react.useState)(false);
+  const colors = {
+    success: { background: "#059669", color: "white" },
+    error: { background: "#dc2626", color: "white" },
+    warning: { background: "#f59e0b", color: "black" },
+    info: { background: "#2563eb", color: "white" }
   };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      onClick,
-      disabled: disabled || loading,
-      style: {
-        background: bg,
-        color,
-        padding: sizes[size],
-        width,
-        border,
-        borderRadius: radius,
-        cursor: disabled ? "not-allowed" : "pointer",
-        fontWeight: weight,
-        boxShadow: shadow,
-        opacity: disabled ? 0.6 : 1,
-        display: "flex",
-        alignItems: "center",
-        gap: "6px",
-        justifyContent: "center"
-      }
-    },
-    loading ? "Loading..." : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, icon, text)
-  );
-};
-
-// src/components/Card/Card.jsx
-var import_react2 = __toESM(require("react"));
-var Card = ({
-  title = "Card Title",
-  text = "Card description",
-  width = "250px",
-  bg = "white",
-  border = "1px solid #eee",
-  radius = "8px",
-  padding = "16px",
-  shadow = "0 2px 6px rgba(0,0,0,0.05)",
-  titleSize = "18px",
-  textSize = "14px",
-  align = "left",
-  children
-}) => {
-  return /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      style: {
-        width,
-        background: bg,
-        border,
-        borderRadius: radius,
-        padding,
-        boxShadow: shadow,
-        textAlign: align
-      }
-    },
-    /* @__PURE__ */ import_react2.default.createElement("h3", { style: { fontSize: titleSize, marginBottom: "8px" } }, title),
-    /* @__PURE__ */ import_react2.default.createElement("p", { style: { fontSize: textSize, marginBottom: "10px" } }, text),
-    children
-  );
-};
-
-// src/components/Input/Input.jsx
-var import_react3 = __toESM(require("react"));
-var Input = ({
-  placeholder = "Enter text",
-  type = "text",
-  width = "200px",
-  bg = "white",
-  color = "#111",
-  border = "1px solid #ccc",
-  radius = "6px",
-  shadow = "none",
-  size = "md",
-  disabled = false,
-  value,
-  onChange
-}) => {
-  const sizes = {
-    sm: "6px",
-    md: "8px",
-    lg: "12px"
-  };
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "input",
-    {
-      type,
-      placeholder,
-      value,
-      onChange,
-      disabled,
-      style: {
-        width,
-        padding: sizes[size],
-        background: bg,
-        color,
-        border,
-        borderRadius: radius,
-        boxShadow: shadow,
-        outline: "none",
-        opacity: disabled ? 0.6 : 1
-      }
-    }
-  );
-};
-
-// src/components/Badge/Badge.jsx
-var import_react4 = __toESM(require("react"));
-var Badge = ({
-  text = "NEW",
-  color = "#ffffff",
-  bgColor = "#2563eb",
-  radius = "12px"
-}) => {
-  return /* @__PURE__ */ import_react4.default.createElement("div", { style: {
-    background: bgColor,
-    color,
-    borderRadius: radius,
-    padding: "8px 12px",
-    fontSize: "14px",
-    fontWeight: "600",
-    display: "inline-block",
-    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
-    fontFamily: "system-ui, sans-serif"
-  } }, text);
-};
-
-// src/components/Alert/Alert.jsx
-var import_react5 = __toESM(require("react"));
-var Alert = ({
-  text = "Alert message",
-  bg = "#facc15",
-  color = "#111",
-  radius = "6px",
-  padding = "10px",
-  width = "auto"
-}) => {
-  return /* @__PURE__ */ import_react5.default.createElement(
-    "div",
-    {
-      style: {
-        background: bg,
-        color,
-        padding,
-        borderRadius: radius,
-        width
-      }
-    },
-    text
-  );
-};
-
-// src/components/Avatar/Avatar.jsx
-var import_react6 = __toESM(require("react"));
-var Avatar = ({
-  src = "\u{1F464}",
-  size = "40px",
-  radius = "50%"
-}) => {
-  return /* @__PURE__ */ import_react6.default.createElement(
-    "img",
-    {
-      src,
-      alt: "avatar",
-      style: {
-        width: size,
-        height: size,
-        borderRadius: radius,
-        objectFit: "cover"
-      }
-    }
-  );
-};
-
-// src/components/Spinner/Spinner.jsx
-var import_react7 = __toESM(require("react"));
-var Spinner = ({
-  size = "30px",
-  color = "#2563eb",
-  border = "3px"
-}) => {
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("style", null, `
-        @keyframes vui-spin {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        `), /* @__PURE__ */ import_react7.default.createElement(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        border: `${border} solid #eee`,
-        borderTop: `${border} solid ${color}`,
-        borderRadius: "50%",
-        animation: "vui-spin 1s linear infinite"
-      }
+  (0, import_react.useEffect)(() => {
+    if (!visible) {
+      setFade(true);
+      const timeout = setTimeout(() => onDismiss && onDismiss(), 300);
+      return () => clearTimeout(timeout);
     }
-  ));
-};
-
-// src/components/Modal/Modal.jsx
-var import_react8 = __toESM(require("react"));
-var Modal = ({
-  open = false,
-  title = "Modal Title",
-  children,
-  width = "300px",
-  bg = "white",
-  radius = "8px",
-  onClose
-}) => {
-  if (!open) return null;
-  return /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        background: "rgba(0,0,0,0.3)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      "div",
-      {
-        style: {
-          width,
-          background: bg,
-          borderRadius: radius,
-          padding: "20px"
-        }
-      },
-      /* @__PURE__ */ import_react8.default.createElement("h3", null, title),
-      children,
-      /* @__PURE__ */ import_react8.default.createElement("button", { onClick: onClose }, "Close")
-    )
-  );
-};
-
-// src/components/ProgressBar/ProgressBar.jsx
-var import_react9 = __toESM(require("react"));
-var ProgressBar = ({
-  progress = 50,
-  height = "20px",
-  bgColor = "#2563eb",
-  trackColor = "#d1d5db",
-  radius = "10px",
-  label = "Progress",
-  textColor = "#ffffff"
-}) => {
-  return /* @__PURE__ */ import_react9.default.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement("div", { style: {
-    width: progress + "%",
-    height,
-    background: bgColor,
-    borderRadius: radius,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    position: "relative"
-  } }, /* @__PURE__ */ import_react9.default.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
-};
-
-// src/components/AnimatedButton/AnimatedButton.jsx
-var import_react10 = __toESM(require("react"));
-var AnimatedButton = ({
-  text = "Click Me",
-  gradient = "linear-gradient(45deg, #2563eb, #7c3aed)",
-  color = "white",
-  size = "md",
-  width = "auto",
-  radius = "12px",
-  shadow = "0 4px 14px rgba(0, 0, 0, 0.2)",
-  loading = false,
-  onClick
-}) => {
-  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const handleMouseEnter = (e) => {
-    e.target.style.transform = "scale(1.05)";
-  };
-  const handleMouseLeave = (e) => {
-    e.target.style.transform = "scale(1)";
-  };
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      disabled: loading,
-      style: {
-        background: gradient,
-        color,
-        padding: sizes[size],
-        width,
-        border: "none",
-        borderRadius: radius,
-        boxShadow: shadow,
-        cursor: loading ? "not-allowed" : "pointer",
-        fontWeight: "600",
-        fontSize: "15px",
-        transition: "transform 0.3s, box-shadow 0.3s",
-        fontFamily: "system-ui, sans-serif",
-        opacity: loading ? 0.6 : 1,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "8px"
-      }
-    },
-    loading ? "Loading..." : text
-  );
+  }, [visible, onDismiss]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    position: "relative",
+    width: "100%",
+    background: colors[type].background,
+    color: colors[type].color,
+    padding: "16px 24px",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
+    transition: "opacity 0.3s ease, transform 0.3s ease",
+    transform: `translateY(${visible ? "0" : "-20px"})`,
+    opacity: fade ? 0 : 1,
+    zIndex: 1e3
+  }, className: visible ? "slide-down" : "fade-out" }, message, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setVisible(false), style: {
+    position: "absolute",
+    top: "10px",
+    right: "10px",
+    background: "transparent",
+    color: "inherit",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px"
+  } }, "\u2715"));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Alert,
-  AnimatedButton,
-  Avatar,
-  Badge,
-  Button,
-  Card,
-  Input,
-  Modal,
-  ProgressBar,
-  Spinner
+  AlertBanner
 });

package/dist/index.mjs

@@ -1,352 +1,48 @@
-// src/components/Button/Button.jsx
-import React from "react";
-var Button = ({
-  text = "Button",
-  bg = "#2563eb",
-  color = "white",
-  size = "md",
-  width = "auto",
-  radius = "6px",
-  border = "none",
-  weight = "500",
-  shadow = "none",
-  disabled = false,
-  loading = false,
-  icon = null,
-  onClick
-}) => {
-  const sizes = {
-    sm: "6px 12px",
-    md: "8px 16px",
-    lg: "12px 20px"
-  };
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick,
-      disabled: disabled || loading,
-      style: {
-        background: bg,
-        color,
-        padding: sizes[size],
-        width,
-        border,
-        borderRadius: radius,
-        cursor: disabled ? "not-allowed" : "pointer",
-        fontWeight: weight,
-        boxShadow: shadow,
-        opacity: disabled ? 0.6 : 1,
-        display: "flex",
-        alignItems: "center",
-        gap: "6px",
-        justifyContent: "center"
-      }
-    },
-    loading ? "Loading..." : /* @__PURE__ */ React.createElement(React.Fragment, null, icon, text)
-  );
-};
-
-// src/components/Card/Card.jsx
-import React2 from "react";
-var Card = ({
-  title = "Card Title",
-  text = "Card description",
-  width = "250px",
-  bg = "white",
-  border = "1px solid #eee",
-  radius = "8px",
-  padding = "16px",
-  shadow = "0 2px 6px rgba(0,0,0,0.05)",
-  titleSize = "18px",
-  textSize = "14px",
-  align = "left",
-  children
-}) => {
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      style: {
-        width,
-        background: bg,
-        border,
-        borderRadius: radius,
-        padding,
-        boxShadow: shadow,
-        textAlign: align
-      }
-    },
-    /* @__PURE__ */ React2.createElement("h3", { style: { fontSize: titleSize, marginBottom: "8px" } }, title),
-    /* @__PURE__ */ React2.createElement("p", { style: { fontSize: textSize, marginBottom: "10px" } }, text),
-    children
-  );
-};
-
-// src/components/Input/Input.jsx
-import React3 from "react";
-var Input = ({
-  placeholder = "Enter text",
-  type = "text",
-  width = "200px",
-  bg = "white",
-  color = "#111",
-  border = "1px solid #ccc",
-  radius = "6px",
-  shadow = "none",
-  size = "md",
-  disabled = false,
-  value,
-  onChange
-}) => {
-  const sizes = {
-    sm: "6px",
-    md: "8px",
-    lg: "12px"
+// src/components/AlertBanner/AlertBanner.jsx
+import React, { useState, useEffect } from "react";
+var AlertBanner = ({
+  message = "This is an alert message.",
+  type = "info",
+  onDismiss
+}) => {
+  const [visible, setVisible] = useState(true);
+  const [fade, setFade] = useState(false);
+  const colors = {
+    success: { background: "#059669", color: "white" },
+    error: { background: "#dc2626", color: "white" },
+    warning: { background: "#f59e0b", color: "black" },
+    info: { background: "#2563eb", color: "white" }
   };
-  return /* @__PURE__ */ React3.createElement(
-    "input",
-    {
-      type,
-      placeholder,
-      value,
-      onChange,
-      disabled,
-      style: {
-        width,
-        padding: sizes[size],
-        background: bg,
-        color,
-        border,
-        borderRadius: radius,
-        boxShadow: shadow,
-        outline: "none",
-        opacity: disabled ? 0.6 : 1
-      }
-    }
-  );
-};
-
-// src/components/Badge/Badge.jsx
-import React4 from "react";
-var Badge = ({
-  text = "NEW",
-  color = "#ffffff",
-  bgColor = "#2563eb",
-  radius = "12px"
-}) => {
-  return /* @__PURE__ */ React4.createElement("div", { style: {
-    background: bgColor,
-    color,
-    borderRadius: radius,
-    padding: "8px 12px",
-    fontSize: "14px",
-    fontWeight: "600",
-    display: "inline-block",
-    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
-    fontFamily: "system-ui, sans-serif"
-  } }, text);
-};
-
-// src/components/Alert/Alert.jsx
-import React5 from "react";
-var Alert = ({
-  text = "Alert message",
-  bg = "#facc15",
-  color = "#111",
-  radius = "6px",
-  padding = "10px",
-  width = "auto"
-}) => {
-  return /* @__PURE__ */ React5.createElement(
-    "div",
-    {
-      style: {
-        background: bg,
-        color,
-        padding,
-        borderRadius: radius,
-        width
-      }
-    },
-    text
-  );
-};
-
-// src/components/Avatar/Avatar.jsx
-import React6 from "react";
-var Avatar = ({
-  src = "\u{1F464}",
-  size = "40px",
-  radius = "50%"
-}) => {
-  return /* @__PURE__ */ React6.createElement(
-    "img",
-    {
-      src,
-      alt: "avatar",
-      style: {
-        width: size,
-        height: size,
-        borderRadius: radius,
-        objectFit: "cover"
-      }
-    }
-  );
-};
-
-// src/components/Spinner/Spinner.jsx
-import React7 from "react";
-var Spinner = ({
-  size = "30px",
-  color = "#2563eb",
-  border = "3px"
-}) => {
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
-        @keyframes vui-spin {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        `), /* @__PURE__ */ React7.createElement(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        border: `${border} solid #eee`,
-        borderTop: `${border} solid ${color}`,
-        borderRadius: "50%",
-        animation: "vui-spin 1s linear infinite"
-      }
+  useEffect(() => {
+    if (!visible) {
+      setFade(true);
+      const timeout = setTimeout(() => onDismiss && onDismiss(), 300);
+      return () => clearTimeout(timeout);
     }
-  ));
-};
-
-// src/components/Modal/Modal.jsx
-import React8 from "react";
-var Modal = ({
-  open = false,
-  title = "Modal Title",
-  children,
-  width = "300px",
-  bg = "white",
-  radius = "8px",
-  onClose
-}) => {
-  if (!open) return null;
-  return /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        background: "rgba(0,0,0,0.3)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      "div",
-      {
-        style: {
-          width,
-          background: bg,
-          borderRadius: radius,
-          padding: "20px"
-        }
-      },
-      /* @__PURE__ */ React8.createElement("h3", null, title),
-      children,
-      /* @__PURE__ */ React8.createElement("button", { onClick: onClose }, "Close")
-    )
-  );
-};
-
-// src/components/ProgressBar/ProgressBar.jsx
-import React9 from "react";
-var ProgressBar = ({
-  progress = 50,
-  height = "20px",
-  bgColor = "#2563eb",
-  trackColor = "#d1d5db",
-  radius = "10px",
-  label = "Progress",
-  textColor = "#ffffff"
-}) => {
-  return /* @__PURE__ */ React9.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ React9.createElement("div", { style: {
-    width: progress + "%",
-    height,
-    background: bgColor,
-    borderRadius: radius,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    position: "relative"
-  } }, /* @__PURE__ */ React9.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
-};
-
-// src/components/AnimatedButton/AnimatedButton.jsx
-import React10 from "react";
-var AnimatedButton = ({
-  text = "Click Me",
-  gradient = "linear-gradient(45deg, #2563eb, #7c3aed)",
-  color = "white",
-  size = "md",
-  width = "auto",
-  radius = "12px",
-  shadow = "0 4px 14px rgba(0, 0, 0, 0.2)",
-  loading = false,
-  onClick
-}) => {
-  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const handleMouseEnter = (e) => {
-    e.target.style.transform = "scale(1.05)";
-  };
-  const handleMouseLeave = (e) => {
-    e.target.style.transform = "scale(1)";
-  };
-  return /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      disabled: loading,
-      style: {
-        background: gradient,
-        color,
-        padding: sizes[size],
-        width,
-        border: "none",
-        borderRadius: radius,
-        boxShadow: shadow,
-        cursor: loading ? "not-allowed" : "pointer",
-        fontWeight: "600",
-        fontSize: "15px",
-        transition: "transform 0.3s, box-shadow 0.3s",
-        fontFamily: "system-ui, sans-serif",
-        opacity: loading ? 0.6 : 1,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "8px"
-      }
-    },
-    loading ? "Loading..." : text
-  );
+  }, [visible, onDismiss]);
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    position: "relative",
+    width: "100%",
+    background: colors[type].background,
+    color: colors[type].color,
+    padding: "16px 24px",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
+    transition: "opacity 0.3s ease, transform 0.3s ease",
+    transform: `translateY(${visible ? "0" : "-20px"})`,
+    opacity: fade ? 0 : 1,
+    zIndex: 1e3
+  }, className: visible ? "slide-down" : "fade-out" }, message, /* @__PURE__ */ React.createElement("button", { onClick: () => setVisible(false), style: {
+    position: "absolute",
+    top: "10px",
+    right: "10px",
+    background: "transparent",
+    color: "inherit",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px"
+  } }, "\u2715"));
 };
 export {
-  Alert,
-  AnimatedButton,
-  Avatar,
-  Badge,
-  Button,
-  Card,
-  Input,
-  Modal,
-  ProgressBar,
-  Spinner
+  AlertBanner
 };

package/package.json

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