virtual-ui-lib 1.0.36 → 1.0.38

package/dist/index.js

@@ -29,1168 +29,141 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
-  AlertBanner: () => AlertBanner,
-  AnimatedNavbar: () => AnimatedNavbar,
-  AnimatedProgressBar: () => AnimatedProgressBar,
-  Button: () => Button,
-  Card: () => Card,
-  CopyButton: () => CopyButton,
-  DateRangePicker: () => DateRangePicker,
-  Dropdown: () => Dropdown,
-  EmptyState: () => EmptyState,
-  Footer: () => Footer,
-  FormInput: () => FormInput,
-  GridLayout: () => GridLayout,
-  ImageUploadPreview: () => ImageUploadPreview,
-  Loader: () => Loader,
-  LoadingSkeleton: () => LoadingSkeleton,
-  MultiStepProgress: () => MultiStepProgress,
-  Navbar: () => Navbar,
-  OTPInput: () => OTPInput,
-  Rating: () => Rating,
-  RatingStars: () => RatingStars,
   StatCard: () => StatCard,
-  UserAvatar: () => UserAvatar,
-  WishlistButton: () => WishlistButton
+  ToastNotification: () => ToastNotification
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/AlertBanner/AlertBanner.jsx
+// src/components/ToastNotification/ToastNotification.jsx
 var import_react = __toESM(require("react"));
-var AlertBanner = ({
-  message = "This is an alert message.",
-  type = "info",
-  onDismiss
-}) => {
-  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" }
-  };
+var ToastNotification = ({
+  type = "success",
+  title = "Success",
+  message = "Your action was successful!",
+  duration = 4e3,
+  onClose
+}) => {
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [progress, setProgress] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => {
-    if (!visible) {
-      setFade(true);
-      const timeout = setTimeout(() => onDismiss && onDismiss(), 300);
-      return () => clearTimeout(timeout);
-    }
-  }, [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"));
-};
-
-// src/components/Button/Button.jsx
-var import_react2 = __toESM(require("react"));
-var Button = ({
-  text = "Button",
-  variant = "primary",
-  color = "white",
-  bg = "#2563eb",
-  outlineColor = "#2563eb",
-  ghostColor = "#2563eb",
-  width = "auto",
-  radius = "8px",
-  weight = "600",
-  iconLeft = null,
-  iconRight = null,
-  onClick,
-  loading = false,
-  disabled = false
-}) => {
-  const variants = {
-    primary: { background: bg, color, border: "none" },
-    secondary: { background: "#7c3aed", color, border: "none" },
-    outline: { background: "transparent", color, border: `2px solid ${outlineColor}` },
-    ghost: { background: "transparent", color: ghostColor, border: "none" }
-  };
-  const { background, border } = variants[variant];
-  return /* @__PURE__ */ import_react2.default.createElement(
-    "button",
-    {
-      onClick,
-      disabled: disabled || loading,
-      style: {
-        background,
-        color: variants[variant].color,
-        width,
-        border,
-        borderRadius: radius,
-        cursor: disabled ? "not-allowed" : "pointer",
-        fontWeight: weight,
-        padding: "10px 20px",
-        opacity: disabled ? 0.6 : 1,
-        transition: "transform 0.2s ease, background 0.2s ease"
-      },
-      onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)",
-      onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
-      onMouseDown: (e) => e.currentTarget.style.transform = "scale(0.95)",
-      onMouseUp: (e) => e.currentTarget.style.transform = "scale(1)"
-    },
-    loading ? "Loading..." : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, iconLeft, text, iconRight))
-  );
-};
-
-// src/components/Card/Card.jsx
-var import_react3 = __toESM(require("react"));
-var Card = ({
-  image = "https://via.placeholder.com/300x200",
-  title = "Card Title",
-  description = "This is a description of the card content. It should be concise and informative.",
-  onClick,
-  loading = false,
-  disabled = false,
-  bg = "#f9fafb",
-  textColor = "#0f172a",
-  hoverBg = "#e5e7eb",
-  radius = "12px",
-  shadow = "0 4px 14px rgba(0,0,0,0.1)",
-  hoverShadow = "0 8px 28px rgba(0,0,0,0.2)",
-  transition = "transform 0.3s, box-shadow 0.3s"
-}) => {
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "div",
-    {
-      style: {
-        background: bg,
-        borderRadius: radius,
-        boxShadow: shadow,
-        padding: "16px",
-        transition,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
-        position: "relative",
-        overflow: "hidden"
-      },
-      onClick: disabled ? null : onClick,
-      onMouseEnter: (e) => {
-        e.currentTarget.style.boxShadow = hoverShadow;
-        e.currentTarget.style.transform = "translateY(-4px)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.boxShadow = shadow;
-        e.currentTarget.style.transform = "translateY(0)";
-      }
-    },
-    loading ? /* @__PURE__ */ import_react3.default.createElement("div", { style: {
-      background: "#e0e0e0",
-      height: "200px",
-      borderRadius: radius,
-      marginBottom: "12px"
-    } }) : /* @__PURE__ */ import_react3.default.createElement("img", { src: image, alt: title, style: { width: "100%", borderRadius: radius } }),
-    /* @__PURE__ */ import_react3.default.createElement("h3", { style: { margin: "12px 0 4px", fontSize: "16px", color: textColor } }, title),
-    /* @__PURE__ */ import_react3.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#374151" } }, description),
-    /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        style: {
-          padding: "10px 16px",
-          background: "#2563eb",
-          color: "white",
-          border: "none",
-          borderRadius: "8px",
-          cursor: "pointer",
-          fontWeight: "600",
-          transition: "background 0.3s"
-        },
-        onClick,
-        disabled
-      },
-      "Action"
-    )
-  );
-};
-
-// 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));
+    setVisible(true);
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          onClose();
+          return 100;
+        }
+        return prev + 100 / (duration / 100);
+      });
+    }, 100);
+    return () => clearInterval(interval);
+  }, [duration, onClose]);
+  const getStyles = () => {
+    let bg, icon;
+    switch (type) {
+      case "success":
+        bg = "#059669";
+        icon = "\u2713";
+        break;
+      case "error":
+        bg = "#dc2626";
+        icon = "\u2716";
+        break;
+      case "warning":
+        bg = "#eab308";
+        icon = "\u26A0\uFE0F";
+        break;
+      case "info":
+        bg = "#2563eb";
+        icon = "\u2139\uFE0F";
+        break;
       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));
+        bg = "#059669";
+        icon = "\u2713";
     }
+    return { background: bg, icon };
   };
-  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; } }`));
-};
-
-// src/components/GridLayout/GridLayout.jsx
-var import_react7 = __toESM(require("react"));
-var GridLayout = ({
-  items = [],
-  cols = 3,
-  loading = false,
-  emptyMessage = "No items available",
-  itemBg = "#1f2937",
-  itemColor = "#f1f5f9",
-  spacing = "16px",
-  radius = "8px"
-}) => {
-  const renderItem = (item, index) => /* @__PURE__ */ import_react7.default.createElement("div", { key: index, style: {
-    background: itemBg,
-    color: itemColor,
-    borderRadius: radius,
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    position: "fixed",
+    bottom: "20px",
+    right: "20px",
+    opacity: visible ? 1 : 0,
+    transform: visible ? "translateY(0)" : "translateY(20px)",
+    transition: "opacity 0.3s, transform 0.3s",
+    background: getStyles().background,
+    borderRadius: "12px",
     padding: "16px",
-    margin: spacing,
-    transition: "transform 0.3s, box-shadow 0.3s",
-    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.15)",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    cursor: "pointer"
-  }, onMouseEnter: (e) => {
-    e.currentTarget.style.transform = "scale(1.05)";
-  }, onMouseLeave: (e) => {
-    e.currentTarget.style.transform = "scale(1)";
-  } }, item);
-  if (loading) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, Array.from({ length: cols * 3 }).map((_, index) => /* @__PURE__ */ import_react7.default.createElement("div", { key: index, style: { background: "#334155", height: "100px", borderRadius: radius } })));
-  }
-  if (items.length === 0) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: itemColor, textAlign: "center", padding: "20px" } }, emptyMessage);
-  }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, items.map(renderItem));
-};
-
-// src/components/ImageUploadPreview/ImageUploadPreview.jsx
-var import_react8 = __toESM(require("react"));
-var ImageUploadPreview = ({
-  width = "300px",
-  height = "200px",
-  bg = "#1e293b",
-  borderColor = "#7c3aed",
-  errorColor = "#dc2626",
-  borderRadius = "12px",
-  onImageChange
-}) => {
-  const [image, setImage] = (0, import_react8.useState)(null);
-  const [error, setError] = (0, import_react8.useState)(false);
-  const handleImageChange = (e) => {
-    const file = e.target.files[0];
-    const validTypes = ["image/png", "image/jpeg", "image/jpg"];
-    if (validTypes.includes(file.type)) {
-      setError(false);
-      const reader = new FileReader();
-      reader.onload = () => {
-        setImage(reader.result);
-        if (onImageChange) onImageChange(reader.result);
-      };
-      reader.readAsDataURL(file);
-    } else {
-      setError(true);
-    }
-  };
-  const handleRemove = () => {
-    setImage(null);
-    setError(false);
-  };
-  return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width,
-    height,
-    background: bg,
-    border: `2px solid ${error ? errorColor : borderColor}`,
-    borderRadius,
-    position: "relative",
-    overflow: "hidden",
-    transition: "border-color 0.3s"
-  } }, !image && !error && /* @__PURE__ */ import_react8.default.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ import_react8.default.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ import_react8.default.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    background: "rgba(0,0,0,0.6)",
-    transition: "opacity 0.3s",
-    opacity: 1
-  } }, /* @__PURE__ */ import_react8.default.createElement("img", { src: image, alt: "Preview", style: {
-    maxWidth: "100%",
-    maxHeight: "100%",
-    objectFit: "cover",
-    transition: "transform 0.3s",
-    borderRadius,
-    cursor: "zoom-in"
-  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ import_react8.default.createElement("button", { onClick: handleRemove, style: {
-    position: "absolute",
-    top: "10px",
-    right: "10px",
-    background: "rgba(255,255,255,0.8)",
-    color: "#dc2626",
-    border: "none",
+    width: "300px",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+    fontFamily: "system-ui, sans-serif",
+    zIndex: 9999
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    width: "24px",
+    height: "24px",
     borderRadius: "50%",
-    width: "30px",
-    height: "30px",
-    cursor: "pointer",
-    fontSize: "16px",
-    transition: "background 0.3s"
-  }, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,1)", onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.8)" }, "\xD7"));
-};
-
-// src/components/CopyButton/CopyButton.jsx
-var import_react9 = __toESM(require("react"));
-var CopyButton = ({
-  text = "Copy",
-  bg = "#2563eb",
-  color = "white",
-  radius = "8px",
-  icon = /* @__PURE__ */ import_react9.default.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
-  padding = "10px 15px",
-  shadow = "0 4px 14px rgba(37,99,235,0.4)"
-}) => {
-  const [copied, setCopied] = (0, import_react9.useState)(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  };
-  return /* @__PURE__ */ import_react9.default.createElement(
-    "button",
-    {
-      onClick: handleCopy,
-      style: {
-        background: bg,
-        color,
-        border: "none",
-        borderRadius: radius,
-        padding,
-        cursor: "pointer",
-        fontWeight: "600",
-        boxShadow: shadow,
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        transition: "background 0.3s"
-      }
-    },
-    icon,
-    copied ? "Copied!" : text
-  );
-};
-
-// src/components/Loader/Loader.jsx
-var import_react10 = __toESM(require("react"));
-var Loader = ({
-  size = "medium",
-  fullScreen = false,
-  color = "#7c3aed",
-  backgroundColor = "#0f172a",
-  duration = "1s"
-}) => {
-  const sizes = { small: "40px", medium: "60px", large: "80px" };
-  const [fadeIn, setFadeIn] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    setFadeIn(true);
-  }, []);
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: fullScreen ? "100vh" : "auto",
-        background: fullScreen ? backgroundColor : "transparent",
-        transition: "opacity 0.5s",
-        opacity: fadeIn ? 1 : 0
-      }
-    },
-    /* @__PURE__ */ import_react10.default.createElement(
-      "div",
-      {
-        style: {
-          width: sizes[size],
-          height: sizes[size],
-          border: `8px solid ${color}`,
-          borderTop: `8px solid transparent`,
-          borderRadius: "50%",
-          animation: `spin ${duration} linear infinite`
-        }
-      }
-    ),
-    /* @__PURE__ */ import_react10.default.createElement("style", null, `
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-      `)
-  );
-};
-
-// src/components/OTPInput/OTPInput.jsx
-var import_react11 = __toESM(require("react"));
-var OTPInput = ({
-  length = 4,
-  bg = "#0f172a",
-  borderColorDefault = "#4b5563",
-  borderColorFocus = "#2563eb",
-  borderColorError = "#e11d48",
-  borderColorSuccess = "#059669",
-  color = "#f1f5f9",
-  radius = "8px",
-  onChange,
-  error = false,
-  success = false
-}) => {
-  const [otp, setOtp] = (0, import_react11.useState)(Array(length).fill(""));
-  const inputRefs = (0, import_react11.useRef)(Array(length).fill().map(() => import_react11.default.createRef()));
-  (0, import_react11.useEffect)(() => {
-    inputRefs.current[0].current.focus();
-  }, []);
-  const handleChange = (index, value) => {
-    if (/[^0-9]/.test(value)) return;
-    const newOtp = [...otp];
-    newOtp[index] = value;
-    setOtp(newOtp);
-    onChange(newOtp.join(""));
-    if (value && index < length - 1) {
-      inputRefs.current[index + 1].current.focus();
-    }
-  };
-  const handleKeyDown = (index, event) => {
-    if (event.key === "Backspace" && !otp[index] && index > 0) {
-      inputRefs.current[index - 1].current.focus();
-    }
-  };
-  const handlePaste = (event) => {
-    const pastedData = event.clipboardData.getData("text").split("").slice(0, length);
-    const newOtp = pastedData.map((char, index) => char.match(/\d/) ? char : "");
-    setOtp(newOtp);
-    newOtp.forEach((_, index) => {
-      if (inputRefs.current[index]) {
-        inputRefs.current[index].current.focus();
-      }
-    });
-    onChange(newOtp.join(""));
-    event.preventDefault();
-  };
-  return /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ import_react11.default.createElement(
-    "input",
-    {
-      key: index,
-      ref: inputRefs.current[index],
-      value,
-      onChange: (e) => handleChange(index, e.target.value),
-      onKeyDown: (event) => handleKeyDown(index, event),
-      style: {
-        width: "40px",
-        height: "50px",
-        borderRadius: radius,
-        border: `2px solid ${error ? borderColorError : success ? borderColorSuccess : index === otp.findIndex((v) => v !== "") ? borderColorFocus : borderColorDefault}`,
-        background: bg,
-        color,
-        fontSize: "20px",
-        textAlign: "center",
-        outline: "none",
-        transition: "border-color 0.3s ease, transform 0.2s ease",
-        transform: `scale(${index === otp.findIndex((v) => v !== "") ? 1.05 : 1})`
-      },
-      autoFocus: index === 0
-    }
-  )));
-};
-
-// src/components/RatingStars/RatingStars.jsx
-var import_react12 = __toESM(require("react"));
-var RatingStars = ({
-  totalStars = 5,
-  selectedColor = "#ffc107",
-  defaultColor = "#e4e5e9",
-  size = "24px",
-  onSelect
-}) => {
-  const [hovered, setHovered] = (0, import_react12.useState)(0);
-  const [selected, setSelected] = (0, import_react12.useState)(0);
-  const handleMouseEnter = (index) => {
-    setHovered(index + 1);
-  };
-  const handleMouseLeave = () => {
-    setHovered(0);
-  };
-  const handleClick = (index) => {
-    setSelected(index + 1);
-    if (onSelect) onSelect(index + 1);
-  };
-  return /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ import_react12.default.createElement(
-    "svg",
-    {
-      key: index,
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: index < (hovered || selected) ? selectedColor : defaultColor,
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      onMouseEnter: () => handleMouseEnter(index),
-      onMouseLeave: handleMouseLeave,
-      onClick: () => handleClick(index),
-      style: { transition: "color 0.2s ease" }
-    },
-    /* @__PURE__ */ import_react12.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2" })
-  )));
-};
-
-// src/components/UserAvatar/UserAvatar.jsx
-var import_react13 = __toESM(require("react"));
-var UserAvatar = ({
-  size = "50px",
-  src = "",
-  initials = "AB",
-  online = false,
-  busy = false,
-  showStatus = true,
-  bgColor = "#1e293b",
-  textColor = "#f1f5f9",
-  statusColor = "#22c55e",
-  borderColor = "#7c3aed"
-}) => {
-  return /* @__PURE__ */ import_react13.default.createElement(
-    "div",
-    {
-      style: {
-        position: "relative",
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        backgroundColor: bgColor,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "transform 0.2s",
-        cursor: "pointer",
-        overflow: "hidden",
-        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.transform = "scale(1.1)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.transform = "scale(1)";
-      }
-    },
-    src ? /* @__PURE__ */ import_react13.default.createElement("img", { src, alt: initials, style: {
-      width: "100%",
-      height: "100%",
-      borderRadius: "50%",
-      objectFit: "cover"
-    } }) : /* @__PURE__ */ import_react13.default.createElement("span", { style: {
-      color: textColor,
-      fontSize: "20px",
-      fontWeight: "700"
-    } }, initials),
-    showStatus && /* @__PURE__ */ import_react13.default.createElement("span", { style: {
-      position: "absolute",
-      bottom: "0",
-      right: "0",
-      width: "12px",
-      height: "12px",
-      borderRadius: "50%",
-      backgroundColor: busy ? "#fbbf24" : online ? statusColor : "#9ca3af",
-      border: "2px solid " + borderColor
-    } })
-  );
-};
-
-// src/components/Navbar/Navbar.jsx
-var import_react14 = __toESM(require("react"));
-var Navbar = ({
-  logo = "https://via.placeholder.com/150",
-  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
-  bgColor = "#0f172a",
-  textColor = "#f1f5f9",
-  linkColor = "#7c3aed",
-  hoverColor = "#818cf8",
-  sticky = false,
-  radius = "8px"
-}) => {
-  const [scrolled, setScrolled] = (0, import_react14.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
-    const handleScroll = () => {
-      setScrolled(window.scrollY > 50);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-  return /* @__PURE__ */ import_react14.default.createElement("nav", { style: {
-    position: sticky || scrolled ? "sticky" : "relative",
-    top: 0,
-    background: bgColor,
-    padding: "10px 20px",
-    borderRadius: radius,
-    boxShadow: scrolled ? "0 4px 10px rgba(0,0,0,0.2)" : "none",
+    background: "white",
     display: "flex",
-    justifyContent: "space-between",
     alignItems: "center",
-    transition: "box-shadow 0.3s ease"
-  } }, /* @__PURE__ */ import_react14.default.createElement("img", { src: logo, alt: "Logo", style: { width: "120px" } }), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "none", gap: "20px", fontFamily: "system-ui, sans-serif", color: textColor, fontSize: "16px", cursor: "pointer" }, id: "nav-links" }, links.map((link) => /* @__PURE__ */ import_react14.default.createElement("a", { key: link.name, href: link.href, style: {
-    color: textColor,
-    textDecoration: "none",
-    position: "relative"
-  }, onMouseEnter: (e) => e.target.style.color = hoverColor, onMouseLeave: (e) => e.target.style.color = textColor }, link.name, /* @__PURE__ */ import_react14.default.createElement("span", { style: {
-    position: "absolute",
-    width: "100%",
-    height: "2px",
-    background: hoverColor,
-    bottom: "-4px",
-    left: 0,
-    transform: "scaleX(0)",
-    transition: "transform 0.3s ease"
-  }, className: "underline" })))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react14.default.createElement("button", { onClick: () => setIsOpen(true), style: {
+    justifyContent: "center",
+    marginRight: "8px"
+  } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ import_react.default.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onClose, style: {
     background: "transparent",
+    color: "white",
     border: "none",
-    color: textColor,
     cursor: "pointer",
-    fontSize: "16px"
-  } }, "\u2630")), isOpen && /* @__PURE__ */ import_react14.default.createElement("div", { style: {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    width: "250px",
-    height: "100%",
-    background: bgColor,
-    transform: isOpen ? "translateX(0)" : "translateX(100%)",
-    transition: "transform 0.3s ease",
-    padding: "20px",
-    boxShadow: "-3px 0 10px rgba(0,0,0,0.5)",
-    zIndex: 1e3
-  } }, /* @__PURE__ */ import_react14.default.createElement("button", { onClick: () => setIsOpen(false), style: {
-    color: textColor,
-    background: "none",
-    border: "none",
-    fontSize: "24px",
-    cursor: "pointer"
-  } }, "\u2716"), /* @__PURE__ */ import_react14.default.createElement("div", { style: { marginTop: "30px" } }, links.map((link) => /* @__PURE__ */ import_react14.default.createElement("a", { key: link.name, href: link.href, style: {
-    display: "block",
-    color: textColor,
-    textDecoration: "none",
-    margin: "15px 0"
-  } }, link.name)))));
-};
-
-// src/components/WishlistButton/WishlistButton.jsx
-var import_react15 = __toESM(require("react"));
-var WishlistButton = ({
-  isActive = false,
-  size = "40px",
-  inactiveColor = "#d1d5db",
-  activeColor = "#ff3e30",
-  onToggle
-}) => {
-  const [active, setActive] = (0, import_react15.useState)(isActive);
-  const handleClick = () => {
-    setActive((prev) => !prev);
-    if (onToggle) onToggle(!active);
-  };
-  return /* @__PURE__ */ import_react15.default.createElement("div", { onClick: handleClick, style: { cursor: "pointer", width: size, height: size, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react15.default.createElement(
-    "svg",
-    {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      style: {
-        transition: "transform 0.2s",
-        transform: active ? "scale(1.2)" : "scale(1)",
-        fill: active ? activeColor : inactiveColor
-      }
-    },
-    /* @__PURE__ */ import_react15.default.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
-  ));
-};
-
-// src/components/Footer/Footer.jsx
-var import_react16 = __toESM(require("react"));
-var Footer = ({
-  bg = "#1e293b",
-  textColor = "#f1f5f9",
-  links = [{ text: "Home", url: "/" }, { text: "About", url: "/about" }, { text: "Services", url: "/services" }, { text: "Contact", url: "/contact" }],
-  brandTitle = "Company Name",
-  description = "Your reliable partner in success.",
-  socialLinks = [{ icon: "\u{1F3E0}", url: "https://facebook.com" }, { icon: "\u{1F426}", url: "https://twitter.com" }, { icon: "\u{1F4F8}", url: "https://instagram.com" }]
-}) => {
-  return /* @__PURE__ */ import_react16.default.createElement("footer", { style: { background: bg, color: textColor, padding: "20px 40px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react16.default.createElement("h2", { style: { margin: "0 0 10px", fontSize: "24px", fontWeight: "700" } }, brandTitle), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0 0 20px", fontSize: "14px", textAlign: "center" } }, description), /* @__PURE__ */ import_react16.default.createElement("nav", { style: { display: "flex", justifyContent: "center", gap: "20px", marginBottom: "20px" } }, links.map((link) => /* @__PURE__ */ import_react16.default.createElement("a", { key: link.text, href: link.url, style: { color: textColor, textDecoration: "none", fontSize: "16px", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, link.text))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "20px" } }, socialLinks.map((social) => /* @__PURE__ */ import_react16.default.createElement("a", { key: social.url, href: social.url, style: { color: textColor, fontSize: "24px", textDecoration: "none", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, social.icon)))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { marginTop: "20px", fontSize: "12px", textAlign: "center", color: "#94a3b8" } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandTitle, ". All rights reserved."));
-};
-
-// src/components/AnimatedProgressBar/AnimatedProgressBar.jsx
-var import_react17 = __toESM(require("react"));
-var AnimatedProgressBar = ({
-  percentage = 75,
-  bgColor = "linear-gradient(135deg, #2563eb, #7c3aed)",
-  height = "24px",
-  borderRadius = "12px",
-  textColor = "#ffffff",
-  fontSize = "14px"
-}) => {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { width: "100%", background: "#e5e7eb", borderRadius, overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
-    width: percentage + "%",
-    height,
-    background: bgColor,
-    borderRadius,
-    transition: "width 0.5s ease-in-out"
-  } }), /* @__PURE__ */ import_react17.default.createElement("span", { style: {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    color: textColor,
-    fontSize,
+    fontSize: "14px",
     fontWeight: "600"
-  } }, percentage, "%"));
-};
-
-// src/components/MultiStepProgress/MultiStepProgress.jsx
-var import_react18 = __toESM(require("react"));
-var MultiStepProgress = ({
-  steps = ["Step 1", "Step 2", "Step 3"],
-  activeStep = 0,
-  onStepChange
-}) => {
-  const [currentStep, setCurrentStep] = (0, import_react18.useState)(activeStep);
-  const handleNext = () => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep((prev) => prev + 1);
-      if (onStepChange) onStepChange(currentStep + 1);
-    }
-  };
-  const handlePrevious = () => {
-    if (currentStep > 0) {
-      setCurrentStep((prev) => prev - 1);
-      if (onStepChange) onStepChange(currentStep - 1);
-    }
-  };
-  return /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontFamily: "system-ui, sans-serif", width: "100%", maxWidth: "700px", margin: "0 auto" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" } }, steps.map((step, index) => /* @__PURE__ */ import_react18.default.createElement("div", { key: index, style: { flex: 1, textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
-    width: "40px",
-    height: "40px",
-    margin: "0 auto",
-    borderRadius: "50%",
-    background: index < currentStep ? "#059669" : index === currentStep ? "#2563eb" : "#cbd5e1",
-    color: index <= currentStep ? "white" : "#0f172a",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontWeight: "bold"
-  } }, index + 1), /* @__PURE__ */ import_react18.default.createElement("p", { style: { color: index <= currentStep ? "#f1f5f9" : "#64748b", marginTop: "8px", fontSize: "14px" } }, step)))), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", position: "relative", height: "4px", background: "#cbd5e1", borderRadius: "2px" } }, /* @__PURE__ */ import_react18.default.createElement(
-    "div",
-    {
-      style: {
-        height: "100%",
-        width: currentStep / (steps.length - 1) * 100 + "%",
-        background: "#2563eb",
-        borderRadius: "2px"
-      }
-    }
-  )), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "24px" } }, /* @__PURE__ */ import_react18.default.createElement("button", { onClick: handlePrevious, disabled: currentStep === 0, style: {
-    padding: "10px 20px",
+  } }, "Close"), /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    height: "4px",
+    background: "rgba(255, 255, 255, 0.3)",
     borderRadius: "8px",
-    background: currentStep === 0 ? "#cbd5e1" : "#7c3aed",
-    color: "white",
-    border: "none",
-    cursor: currentStep === 0 ? "not-allowed" : "pointer"
-  } }, "Previous"), /* @__PURE__ */ import_react18.default.createElement("button", { onClick: handleNext, disabled: currentStep === steps.length - 1, style: {
-    padding: "10px 20px",
-    borderRadius: "8px",
-    background: currentStep === steps.length - 1 ? "#cbd5e1" : "#7c3aed",
-    color: "white",
-    border: "none",
-    cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer"
-  } }, "Next")));
-};
-
-// src/components/DateRangePicker/DateRangePicker.jsx
-var import_react19 = __toESM(require("react"));
-var DateRangePicker = ({
-  startDate = /* @__PURE__ */ new Date(),
-  endDate = new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7)),
-  onChange,
-  bg = "#0f172a",
-  highlightColor = "#2563eb",
-  borderColor = "#7c3aed",
-  borderRadius = "12px",
-  textColor = "#f1f5f9"
-}) => {
-  const [selectedStart, setSelectedStart] = (0, import_react19.useState)(startDate);
-  const [selectedEnd, setSelectedEnd] = (0, import_react19.useState)(endDate);
-  const daysArray = Array.from({ length: 30 }, (_, i) => new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + i)));
-  const handleSelect = (date) => {
-    if (!selectedStart || selectedEnd && date < selectedStart) {
-      setSelectedStart(date);
-      setSelectedEnd(null);
-    } else {
-      setSelectedEnd(date);
-    }
-    onChange && onChange(selectedStart, selectedEnd);
-  };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", flexDirection: "column", background: bg, padding: "16px", borderRadius, border: `1px solid ${borderColor}`, boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react19.default.createElement("h3", { style: { color: textColor, margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, "Select Date Range"), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "8px" } }, daysArray.map((date, index) => /* @__PURE__ */ import_react19.default.createElement("button", { key: index, onClick: () => handleSelect(date), style: {
-    background: date >= selectedStart && date <= selectedEnd ? highlightColor : "#334155",
-    color: textColor,
-    padding: "10px 0",
-    borderRadius,
-    border: "none",
-    cursor: "pointer",
-    transition: "background 0.3s",
-    fontSize: "14px"
-  } }, date.getDate()))));
-};
-
-// src/components/LoadingSkeleton/LoadingSkeleton.jsx
-var import_react20 = __toESM(require("react"));
-var LoadingSkeleton = ({
-  type = "card",
-  width = "300px",
-  height = "200px",
-  bg = "#334155",
-  shimmerColor = "#7c3aed",
-  radius = "12px",
-  speed = "1.5s"
-}) => {
-  const shimmer = {
-    background: `linear-gradient(90deg, ${shimmerColor} 25%, rgba(255, 255, 255, 0.2) 50%, ${shimmerColor} 75%)`,
-    backgroundSize: "200% 100%",
-    animation: `shimmer ${speed} infinite`
-  };
-  return /* @__PURE__ */ import_react20.default.createElement("div", { style: { width, height, borderRadius: radius, position: "relative", overflow: "hidden", background: bg } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { width: "100%", height: "100%", ...shimmer } }), /* @__PURE__ */ import_react20.default.createElement("style", null, `@keyframes shimmer { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }`));
-};
-
-// src/components/Rating/Rating.jsx
-var import_react21 = __toESM(require("react"));
-var Rating = ({
-  value = 3.5,
-  count = 5,
-  size = 24,
-  activeColor = "#fbbf24",
-  inactiveColor = "#374151",
-  spacing = 4,
-  onSelect
-}) => {
-  const [hoverValue, setHoverValue] = (0, import_react21.useState)(null);
-  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(value);
-  const handleClick = (val) => {
-    setSelectedValue(val);
-    if (onSelect) onSelect(val);
-  };
-  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", gap: spacing } }, [...Array(count)].map((_, i) => {
-    const starValue = i + 1;
-    const isActive = hoverValue ? hoverValue >= starValue : selectedValue >= starValue;
-    const isHalf = hoverValue === null && selectedValue + 0.5 >= starValue && selectedValue < starValue;
-    return /* @__PURE__ */ import_react21.default.createElement(
-      "div",
-      {
-        key: i,
-        style: { position: "relative", cursor: "pointer" },
-        onClick: () => handleClick(starValue),
-        onMouseEnter: () => setHoverValue(starValue),
-        onMouseLeave: () => setHoverValue(null)
-      },
-      /* @__PURE__ */ import_react21.default.createElement(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: isActive ? activeColor : inactiveColor,
-          width: size,
-          height: size
-        },
-        /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
-      ),
-      isHalf && /* @__PURE__ */ import_react21.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, width: size / 2, height: size, overflow: "hidden" } }, /* @__PURE__ */ import_react21.default.createElement(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: activeColor,
-          width: size,
-          height: size
-        },
-        /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
-      ))
-    );
-  }));
-};
-
-// src/components/AnimatedNavbar/AnimatedNavbar.jsx
-var import_react22 = __toESM(require("react"));
-var AnimatedNavbar = ({
-  logo = "https://via.placeholder.com/100",
-  links = [{ text: "Home", href: "#" }, { text: "About", href: "#" }, { text: "Services", href: "#" }, { text: "Contact", href: "#" }],
-  bgColor = "#0f172a",
-  textColor = "#f1f5f9",
-  accentColor = "#7c3aed",
-  radius = "8px"
-}) => {
-  const [isOpen, setIsOpen] = import_react22.default.useState(false);
-  return /* @__PURE__ */ import_react22.default.createElement("nav", { style: {
-    background: bgColor,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "10px 20px",
-    borderRadius: radius,
-    position: "relative",
-    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
-    transition: "background 0.3s"
-  } }, /* @__PURE__ */ import_react22.default.createElement("img", { src: logo, alt: "Logo", style: { width: "100px" } }), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "15px" } }, /* @__PURE__ */ import_react22.default.createElement("button", { onClick: () => setIsOpen(!isOpen), style: {
-    background: accentColor,
-    color: textColor,
-    border: "none",
-    borderRadius: radius,
-    padding: "8px 16px",
-    fontWeight: "600",
-    transition: "background 0.3s"
-  } }, "Menu")), isOpen && /* @__PURE__ */ import_react22.default.createElement("div", { style: {
-    position: "absolute",
-    top: "100%",
-    right: "0",
-    background: bgColor,
-    borderRadius: radius,
-    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
-    zIndex: 10,
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-    padding: "10px"
-  } }, links.map((link) => /* @__PURE__ */ import_react22.default.createElement("a", { key: link.text, href: link.href, style: {
-    color: textColor,
-    textDecoration: "none",
-    padding: "8px 12px",
-    borderRadius: radius,
-    transition: "background 0.3s"
-  }, onMouseEnter: (e) => e.currentTarget.style.background = accentColor, onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, link.text))));
+    overflow: "hidden",
+    marginTop: "12px"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    width: progress + "%",
+    height: "100%",
+    background: "white",
+    transition: "width 0.1s linear"
+  } })));
 };
 
 // src/components/StatCard/StatCard.jsx
-var import_react23 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var StatCard = ({
-  title = "Total Sales",
-  value = 1e3,
-  change = 5,
+  title = "Revenue",
+  metric = 1200,
+  change = 15,
   bg = "#0f172a",
-  accent = "#0f766e",
-  negativeAccent = "#dc2626",
+  accent = "#059669",
+  negativeAccent = "#ef4444",
   radius = "16px"
 }) => {
-  const [count, setCount] = (0, import_react23.useState)(0);
-  (0, import_react23.useEffect)(() => {
-    let start = 0;
-    const end = value;
-    const duration = 2;
-    const increment = end / (duration * 60);
-    const timer = setInterval(() => {
-      start += increment;
-      if (start >= end) {
-        clearInterval(timer);
-        setCount(end);
+  const [count, setCount] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    let countUp = 0;
+    const interval = setInterval(() => {
+      if (countUp < metric) {
+        countUp += Math.ceil(metric / 100);
+        setCount(countUp);
       } else {
-        setCount(Math.floor(start));
+        clearInterval(interval);
       }
-    }, 1e3 / 60);
-    return () => clearInterval(timer);
-  }, [value]);
-  return /* @__PURE__ */ import_react23.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "280px", fontFamily: "system-ui, sans-serif", color: "#f1f5f9", position: "relative", boxShadow: "0 10px 30px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ import_react23.default.createElement("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react23.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700", margin: "0 0 8px" } }, count), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+    }, 30);
+    return () => clearInterval(interval);
+  }, [metric]);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+    display: "inline-block",
+    padding: "5px 12px",
+    borderRadius: "10px",
     background: change >= 0 ? accent : negativeAccent,
     color: "white",
-    padding: "4px 8px",
-    borderRadius: "12px",
-    fontSize: "12px",
-    position: "absolute",
-    top: "24px",
-    right: "24px"
-  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", height: "20", viewBox: "0 0 100 20", style: { marginTop: "10px" } }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "0,15 20,10 40,12 60,5 80,8 100,0", stroke: accent, fill: "none", strokeWidth: "2" })));
+    fontSize: "14px",
+    margin: "10px 0"
+  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react2.default.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AlertBanner,
-  AnimatedNavbar,
-  AnimatedProgressBar,
-  Button,
-  Card,
-  CopyButton,
-  DateRangePicker,
-  Dropdown,
-  EmptyState,
-  Footer,
-  FormInput,
-  GridLayout,
-  ImageUploadPreview,
-  Loader,
-  LoadingSkeleton,
-  MultiStepProgress,
-  Navbar,
-  OTPInput,
-  Rating,
-  RatingStars,
   StatCard,
-  UserAvatar,
-  WishlistButton
+  ToastNotification
 });