omui-lib 1.0.0 → 1.0.3

package/dist/index.js

@@ -29,283 +29,867 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  AnimatedProgressBar: () => AnimatedProgressBar,
+  Box: () => Box,
   Button: () => Button,
-  Card: () => Card
+  CommentCard: () => CommentCard,
+  Graph: () => Graph,
+  HoverCard: () => HoverCard,
+  Loader: () => Loader,
+  PricingCard: () => PricingCard,
+  SliderCard: () => SliderCard,
+  SwipeCard: () => SwipeCard,
+  ThumbnailCard: () => ThumbnailCard
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button/Button.jsx
+// src/components/PricingCard/PricingCard.jsx
 var import_react = __toESM(require("react"));
+var PricingCard = ({
+  title = "Premium Plan",
+  price = 49,
+  currency = "$",
+  period = "/month",
+  features = ["Unlimited projects", "Priority support", "Advanced analytics", "Custom integrations"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  popular = true,
+  onCtaClick = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "20px",
+    padding: "32px 28px",
+    width: "320px",
+    position: "relative",
+    border: "1px solid " + alpha(accent, 0.2),
+    boxShadow: "0 15px 40px rgba(0,0,0,0.4)",
+    fontFamily: "system-ui, sans-serif"
+  } }, popular && /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    position: "absolute",
+    top: "16px",
+    right: "16px",
+    background: accent,
+    color: "white",
+    fontSize: "12px",
+    fontWeight: "700",
+    padding: "4px 12px",
+    borderRadius: "20px",
+    textTransform: "uppercase"
+  } }, "Popular"), /* @__PURE__ */ import_react.default.createElement("h3", { style: {
+    fontSize: "22px",
+    fontWeight: "800",
+    color: "white",
+    margin: "0 0 8px"
+  } }, title), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.6)",
+    margin: "0 0 24px"
+  } }, "Perfect for growing businesses"), /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "4px",
+    marginBottom: "8px"
+  } }, /* @__PURE__ */ import_react.default.createElement("span", { style: {
+    fontSize: "14px",
+    fontWeight: "600",
+    color: "rgba(255,255,255,0.7)"
+  } }, currency), /* @__PURE__ */ import_react.default.createElement("span", { style: {
+    fontSize: "48px",
+    fontWeight: "800",
+    color: "white"
+  } }, price), /* @__PURE__ */ import_react.default.createElement("span", { style: {
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.5)"
+  } }, period)), /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    height: "1px",
+    background: "rgba(255,255,255,0.1)",
+    margin: "24px 0"
+  } }), /* @__PURE__ */ import_react.default.createElement("ul", { style: {
+    listStyle: "none",
+    padding: 0,
+    margin: "0 0 32px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  } }, features.map((feature, i) => /* @__PURE__ */ import_react.default.createElement("li", { key: i, style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.8)"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    background: alpha(accent, 0.2),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  } }, /* @__PURE__ */ import_react.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: accent, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("polyline", { points: "20 6 9 17 4 12" }))), feature))), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick: onCtaClick,
+      style: {
+        width: "100%",
+        padding: "14px",
+        borderRadius: "12px",
+        border: "none",
+        background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+        color: "white",
+        fontSize: "15px",
+        fontWeight: "700",
+        cursor: "pointer",
+        transition: "transform 0.2s, box-shadow 0.2s"
+      }
+    },
+    ctaText
+  ));
+};
+
+// src/components/CommentCard/CommentCard.jsx
+var import_react2 = __toESM(require("react"));
+var CommentCard = ({
+  avatar = "https://i.pravatar.cc/150?img=68",
+  name = "John Doe",
+  timestamp = "2 hours ago",
+  comment = "This is an insightful comment that adds value to the discussion.",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onReplyClick = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "16px",
+    border: "1px solid " + alpha(accent, 0.1),
+    fontFamily: "system-ui,sans-serif",
+    width: "320px"
+  } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react2.default.createElement("img", { src: avatar, alt: name, style: { width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" } }), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.4)" } }, timestamp))), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "16px" } }, comment), /* @__PURE__ */ import_react2.default.createElement("button", { onClick: onReplyClick, style: {
+    padding: "6px 12px",
+    borderRadius: "8px",
+    border: "1px solid " + alpha(accent, 0.2),
+    background: "transparent",
+    color: accent,
+    fontSize: "12px",
+    fontWeight: "600",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  } }, "Reply"));
+};
+
+// src/components/ThumbnailCard/ThumbnailCard.jsx
+var import_react3 = __toESM(require("react"));
+var ThumbnailCard = ({
+  image = "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=600&q=80",
+  title = "Modern UI Design",
+  views = 1243,
+  duration = "2:45",
+  channel = "Design Mastery",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "12px",
+        overflow: "hidden",
+        width: "280px",
+        cursor: "pointer",
+        transition: "transform 0.2s",
+        transform: hovered ? "scale(1.02)" : "scale(1)",
+        fontFamily: "system-ui,sans-serif"
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: { position: "relative", width: "100%", height: "160px" } }, /* @__PURE__ */ import_react3.default.createElement(
+      "img",
+      {
+        src: image,
+        alt: title,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transition: "transform 0.3s",
+          transform: hovered ? "scale(1.05)" : "scale(1)"
+        }
+      }
+    ), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
+      position: "absolute",
+      bottom: "8px",
+      right: "8px",
+      padding: "3px 6px",
+      borderRadius: "4px",
+      background: "rgba(0,0,0,0.8)",
+      color: "#fff",
+      fontSize: "10px",
+      fontWeight: "600"
+    } }, duration)),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("h3", { style: {
+      fontSize: "14px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 6px",
+      lineHeight: 1.4,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    } }, title), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
+      fontSize: "12px",
+      color: "rgba(255,255,255,0.5)",
+      margin: "0 0 4px"
+    } }, channel), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
+      fontSize: "11px",
+      color: "rgba(255,255,255,0.35)",
+      margin: 0
+    } }, views.toLocaleString(), " views"))
+  );
+};
+
+// src/components/Loader/Loader.jsx
+var import_react4 = __toESM(require("react"));
+var Loader = ({
+  size = "48px",
+  color = "#6366f1",
+  bg = "rgba(255,255,255,0.1)",
+  speed = "1s",
+  thickness = "4px"
+}) => {
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: thickness + " solid " + bg,
+    borderTop: thickness + " solid " + color,
+    animation: "spin " + speed + " linear infinite",
+    display: "inline-block"
+  } }), /* @__PURE__ */ import_react4.default.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"));
+};
+
+// src/components/Button/Button.jsx
+var import_react5 = __toESM(require("react"));
 var Button = ({
-  text = "Button",
-  variant = "solid",
-  // solid | outline | ghost
+  text = "Click me",
+  bg = "#6366f1",
+  color = "#ffffff",
   size = "md",
-  // sm | md | lg
-  palette = "primary",
-  // primary | secondary | danger | success
+  radius = "10px",
   disabled = false,
-  fullWidth = false,
+  loading = false,
   onClick = () => {
-  }
+  },
+  shadow = true
 }) => {
-  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
-  const [isActive, setIsActive] = (0, import_react.useState)(false);
-  const palettes = {
-    primary: {
-      bg: "#4CAF50",
-      text: "#ffffff",
-      border: "#4CAF50",
-      hover: "#45a049",
-      active: "#3e8e41"
-    },
-    secondary: {
-      bg: "#2196F3",
-      text: "#ffffff",
-      border: "#2196F3",
-      hover: "#1976d2",
-      active: "#1565c0"
-    },
-    danger: {
-      bg: "#f44336",
-      text: "#ffffff",
-      border: "#f44336",
-      hover: "#d32f2f",
-      active: "#b71c1c"
-    },
-    success: {
-      bg: "#00897b",
-      text: "#ffffff",
-      border: "#00897b",
-      hover: "#00695c",
-      active: "#004d40"
-    }
-  };
   const sizes = {
-    sm: {
-      padding: "6px 12px",
-      fontSize: "12px"
-    },
-    md: {
-      padding: "10px 18px",
-      fontSize: "14px"
+    sm: { padding: "8px 16px", fontSize: "13px" },
+    md: { padding: "12px 24px", fontSize: "15px" },
+    lg: { padding: "16px 32px", fontSize: "17px" }
+  };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      style: {
+        background: bg,
+        color,
+        padding: sizes[size].padding,
+        borderRadius: radius,
+        border: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontWeight: "700",
+        fontSize: sizes[size].fontSize,
+        fontFamily: "system-ui, sans-serif",
+        boxShadow: shadow ? "0 4px 14px " + alpha(bg, 0.4) : "none",
+        opacity: disabled ? 0.7 : 1,
+        transition: "all 0.2s ease",
+        position: "relative",
+        overflow: "hidden",
+        transform: "translateY(0)",
+        "&:hover": {
+          transform: "translateY(-1px)"
+        }
+      }
     },
-    lg: {
-      padding: "14px 26px",
-      fontSize: "16px"
-    }
+    loading ? /* @__PURE__ */ import_react5.default.createElement("span", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px", borderRadius: "50%", border: "2px solid " + color, borderTopColor: "transparent", animation: "spin 0.8s linear infinite" } }), "Loading...") : text
+  );
+};
+
+// src/components/Graph/Graph.jsx
+var import_react6 = __toESM(require("react"));
+var Graph = ({
+  data = [25, 50, 75, 100, 75, 50, 25],
+  labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  width = 600,
+  height = 300,
+  bg = "#0f172a",
+  accent = "#6366f1",
+  gridColor = "rgba(255,255,255,0.05)",
+  textColor = "rgba(255,255,255,0.5)",
+  showDots = true,
+  showArea = true
+}) => {
+  const canvasRef = (0, import_react6.useRef)(null);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
-  const selectedPalette = palettes[palette] || palettes.primary;
-  const selectedSize = sizes[size] || sizes.md;
-  const getVariantStyles = () => {
-    if (variant === "outline") {
-      return {
-        backgroundColor: "transparent",
-        color: selectedPalette.border,
-        border: `2px solid ${selectedPalette.border}`
-      };
+  (0, import_react6.useEffect)(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = gridColor;
+    ctx.lineWidth = 1;
+    const gridLines = 5;
+    for (let i = 0; i <= gridLines; i++) {
+      const y = (height - 40) * (i / gridLines) + 20;
+      ctx.beginPath();
+      ctx.moveTo(40, y);
+      ctx.lineTo(width - 20, y);
+      ctx.stroke();
+      ctx.fillStyle = textColor;
+      ctx.font = "10px system-ui, sans-serif";
+      ctx.textAlign = "right";
+      ctx.fillText(String(100 - i * 20), 35, y + 4);
     }
-    if (variant === "ghost") {
-      return {
-        backgroundColor: "transparent",
-        color: selectedPalette.border,
-        border: "none"
-      };
+    const step = (width - 60) / (data.length - 1);
+    for (let i = 0; i < data.length; i++) {
+      const x = 40 + i * step;
+      ctx.beginPath();
+      ctx.moveTo(x, 20);
+      ctx.lineTo(x, height - 20);
+      ctx.stroke();
+      ctx.fillStyle = textColor;
+      ctx.font = "11px system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(labels[i], x, height - 5);
     }
-    return {
-      backgroundColor: selectedPalette.bg,
-      color: selectedPalette.text,
-      border: "none"
-    };
-  };
-  const getStateStyles = () => {
-    if (disabled) {
-      return {
-        backgroundColor: "#ccc",
-        color: "#666",
-        cursor: "not-allowed"
-      };
+    const points = data.map((value, i) => {
+      const x = 40 + i * step;
+      const y = height - 20 - value / 100 * (height - 40);
+      return { x, y };
+    });
+    if (showArea) {
+      ctx.fillStyle = alpha(accent, 0.15);
+      ctx.beginPath();
+      ctx.moveTo(40, height - 20);
+      points.forEach((point) => ctx.lineTo(point.x, point.y));
+      ctx.lineTo(width - 20, height - 20);
+      ctx.closePath();
+      ctx.fill();
     }
-    if (isActive) {
-      return {
-        backgroundColor: variant === "solid" ? selectedPalette.active : "#e0e0e0",
-        transform: "scale(0.96)"
-      };
+    ctx.strokeStyle = accent;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    points.slice(1).forEach((point) => ctx.lineTo(point.x, point.y));
+    ctx.stroke();
+    if (showDots) {
+      points.forEach((point) => {
+        ctx.fillStyle = accent;
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = bg;
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
+        ctx.fill();
+      });
     }
-    if (isHovered) {
-      return {
-        backgroundColor: variant === "solid" ? selectedPalette.hover : "#f5f5f5"
-      };
+  }, [data, labels, width, height, bg, accent, gridColor, textColor, showDots, showArea]);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "20px",
+    width: width + "px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
+  } }, /* @__PURE__ */ import_react6.default.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height,
+      style: { display: "block" }
     }
-    return {};
+  ));
+};
+
+// src/components/SwipeCard/SwipeCard.jsx
+var import_react7 = __toESM(require("react"));
+var SwipeCard = ({
+  title = "Swipe to Unlock",
+  description = "Slide the button to confirm your action",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onSwipeComplete = () => {
+  },
+  successText = "Success!"
+}) => {
+  const [position, setPosition] = (0, import_react7.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react7.useState)(false);
+  const containerRef = (0, import_react7.useRef)(null);
+  const maxWidth = 300;
+  const threshold = maxWidth * 0.8;
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
-  const baseStyles = {
-    display: "inline-block",
-    width: fullWidth ? "100%" : "auto",
-    borderRadius: "8px",
-    fontWeight: "600",
-    transition: "all 0.25s ease",
-    cursor: disabled ? "not-allowed" : "pointer",
-    outline: "none",
-    userSelect: "none"
+  const handleMouseDown = () => {
+    setIsDragging(true);
   };
-  const combinedStyles = {
-    ...baseStyles,
-    ...selectedSize,
-    ...getVariantStyles(),
-    ...getStateStyles()
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newPosition = e.clientX - containerRect.left;
+    if (newPosition >= 0 && newPosition <= maxWidth) {
+      setPosition(newPosition);
+    }
   };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "button",
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    if (position >= threshold) {
+      setPosition(maxWidth);
+      setIsComplete(true);
+      onSwipeComplete();
+    } else {
+      setPosition(0);
+    }
+  };
+  (0, import_react7.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, position]);
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "24px",
+    width: "340px",
+    fontFamily: "system-ui,sans-serif",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    border: "1px solid rgba(255,255,255,0.08)"
+  } }, /* @__PURE__ */ import_react7.default.createElement("h3", { style: {
+    fontSize: "18px",
+    fontWeight: "700",
+    color: "#fff",
+    margin: "0 0 8px"
+  } }, title), /* @__PURE__ */ import_react7.default.createElement("p", { style: {
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.5)",
+    margin: "0 0 24px",
+    lineHeight: 1.5
+  } }, description), /* @__PURE__ */ import_react7.default.createElement(
+    "div",
     {
-      style: combinedStyles,
-      disabled,
-      onClick: (e) => !disabled && onClick(e),
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => {
-        setIsHovered(false);
-        setIsActive(false);
-      },
-      onMouseDown: () => setIsActive(true),
-      onMouseUp: () => setIsActive(false)
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "50px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        position: "relative",
+        overflow: "hidden"
+      }
     },
-    text
-  );
+    /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: position + "px",
+          height: "100%",
+          background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          borderRadius: "12px",
+          transition: isDragging ? "none" : "width 0.3s ease"
+        }
+      }
+    ),
+    isComplete ? /* @__PURE__ */ import_react7.default.createElement("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#fff",
+      fontWeight: "700",
+      fontSize: "14px"
+    } }, successText) : /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        onMouseDown: handleMouseDown,
+        style: {
+          position: "absolute",
+          left: position + "px",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "60px",
+          height: "60px",
+          borderRadius: "12px",
+          background: "#fff",
+          cursor: "grab",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+          userSelect: "none",
+          zIndex: 2
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react7.default.createElement("polyline", { points: "9 18 15 12 9 6" }))
+    )
+  ));
 };
 
-// src/components/Card/Card.jsx
-var import_react2 = __toESM(require("react"));
-var Card = ({
-  title = "Card Title",
-  description = "This is a simple card description.",
-  image = "",
-  variant = "elevated",
-  // elevated | outlined | flat
-  size = "md",
-  // sm | md | lg
-  palette = "primary",
-  // primary | secondary | danger | success
-  hoverable = true,
-  clickable = false,
-  fullWidth = false,
-  onClick = () => {
-  }
-}) => {
-  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
-  const palettes = {
-    primary: {
-      bg: "#ffffff",
-      border: "#4CAF50",
-      title: "#333",
-      text: "#555"
-    },
-    secondary: {
-      bg: "#ffffff",
-      border: "#2196F3",
-      title: "#333",
-      text: "#555"
+// src/components/SliderCard/SliderCard.jsx
+var import_react8 = __toESM(require("react"));
+var SliderCard = ({
+  items = [
+    {
+      title: "Mountain Retreat",
+      description: "Escape to the serene mountains for a peaceful getaway.",
+      image: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&q=80",
+      buttonText: "Book Now"
     },
-    danger: {
-      bg: "#ffffff",
-      border: "#f44336",
-      title: "#333",
-      text: "#555"
+    {
+      title: "Beach Paradise",
+      description: "Relax on pristine beaches with crystal clear waters.",
+      image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&q=80",
+      buttonText: "Explore"
     },
-    success: {
-      bg: "#ffffff",
-      border: "#00897b",
-      title: "#333",
-      text: "#555"
+    {
+      title: "City Adventure",
+      description: "Experience the vibrant energy of urban landscapes.",
+      image: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=600&q=80",
+      buttonText: "Discover"
     }
+  ],
+  accent = "#6366f1",
+  bg = "#0f172a",
+  autoSlide = true,
+  slideInterval = 5e3,
+  onButtonClick = () => {
+  }
+}) => {
+  const [currentIndex, setCurrentIndex] = (0, import_react8.useState)(0);
+  const [hovered, setHovered] = (0, import_react8.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
-  const sizes = {
-    sm: {
-      padding: "10px",
-      titleSize: "14px",
-      textSize: "12px"
-    },
-    md: {
-      padding: "16px",
-      titleSize: "18px",
-      textSize: "14px"
-    },
-    lg: {
-      padding: "20px",
-      titleSize: "22px",
-      textSize: "16px"
-    }
+  (0, import_react8.useEffect)(() => {
+    if (!autoSlide || hovered) return;
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => prev === items.length - 1 ? 0 : prev + 1);
+    }, slideInterval);
+    return () => clearInterval(interval);
+  }, [currentIndex, autoSlide, hovered, items.length, slideInterval]);
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
   };
-  const selectedPalette = palettes[palette] || palettes.primary;
-  const selectedSize = sizes[size] || sizes.md;
-  const getVariantStyles = () => {
-    switch (variant) {
-      case "outlined":
-        return {
-          border: `2px solid ${selectedPalette.border}`,
-          boxShadow: "none"
-        };
-      case "flat":
-        return {
+  const currentItem = items[currentIndex];
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        position: "relative",
+        width: "400px",
+        height: "500px",
+        borderRadius: "20px",
+        overflow: "hidden",
+        background: bg,
+        boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+        border: "1px solid rgba(255,255,255,0.08)",
+        fontFamily: "system-ui,sans-serif"
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "relative", width: "100%", height: "60%" } }, /* @__PURE__ */ import_react8.default.createElement(
+      "img",
+      {
+        src: currentItem.image,
+        alt: currentItem.title,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transition: "opacity 0.5s ease",
+          opacity: hovered ? 0.9 : 1
+        }
+      }
+    ), /* @__PURE__ */ import_react8.default.createElement("div", { style: {
+      position: "absolute",
+      bottom: "20px",
+      left: "0",
+      right: "0",
+      display: "flex",
+      justifyContent: "center",
+      gap: "8px"
+    } }, items.map((_, index) => /* @__PURE__ */ import_react8.default.createElement(
+      "button",
+      {
+        key: index,
+        onClick: () => goToSlide(index),
+        style: {
+          width: "10px",
+          height: "10px",
+          borderRadius: "50%",
           border: "none",
-          boxShadow: "none"
-        };
-      default:
-        return {
+          cursor: "pointer",
+          background: currentIndex === index ? accent : "rgba(255,255,255,0.2)",
+          transition: "background 0.3s"
+        }
+      }
+    )))),
+    /* @__PURE__ */ import_react8.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react8.default.createElement("h3", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, currentItem.title), /* @__PURE__ */ import_react8.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.6)", lineHeight: 1.5, margin: "0 0 20px" } }, currentItem.description), /* @__PURE__ */ import_react8.default.createElement(
+      "button",
+      {
+        onClick: () => onButtonClick(currentIndex),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
           border: "none",
-          boxShadow: "0 4px 10px rgba(0,0,0,0.15)"
-        };
-    }
-  };
-  const hoverStyles = hoverable && isHovered ? {
-    transform: "translateY(-5px)",
-    boxShadow: "0 8px 18px rgba(0,0,0,0.2)"
-  } : {};
-  const baseStyles = {
-    width: fullWidth ? "100%" : "280px",
-    backgroundColor: selectedPalette.bg,
-    borderRadius: "12px",
-    overflow: "hidden",
-    cursor: clickable ? "pointer" : "default",
-    transition: "all 0.3s ease"
-  };
-  const containerStyles = {
-    ...baseStyles,
-    ...getVariantStyles(),
-    ...hoverStyles
-  };
-  const contentStyles = {
-    padding: selectedSize.padding
-  };
-  const titleStyles = {
-    fontSize: selectedSize.titleSize,
-    fontWeight: "600",
-    marginBottom: "8px",
-    color: selectedPalette.title
+          background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          color: "#fff",
+          fontSize: "14px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "transform 0.2s",
+          transform: hovered ? "scale(1.02)" : "scale(1)"
+        }
+      },
+      currentItem.buttonText
+    ))
+  );
+};
+
+// src/components/HoverCard/HoverCard.jsx
+var import_react9 = __toESM(require("react"));
+var HoverCard = ({
+  title = "Premium Features",
+  description = "Unlock powerful tools to boost your productivity",
+  icon = "\u{1F680}",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  width = "280px",
+  onHover = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react9.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
-  const textStyles = {
-    fontSize: selectedSize.textSize,
-    color: selectedPalette.text,
-    lineHeight: "1.5"
+  return /* @__PURE__ */ import_react9.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => {
+        setHovered(true);
+        onHover();
+      },
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "16px",
+        padding: "24px",
+        width,
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.08)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "all 0.25s ease",
+        transform: hovered ? "translateY(-8px)" : "translateY(0)",
+        boxShadow: hovered ? "0 20px 50px rgba(0,0,0,0.5)" : "0 10px 30px rgba(0,0,0,0.3)",
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+      position: "absolute",
+      top: "-50px",
+      right: "-50px",
+      width: "100px",
+      height: "100px",
+      borderRadius: "50%",
+      background: alpha(accent, 0.1),
+      filter: "blur(40px)",
+      transition: "all 0.4s ease",
+      opacity: hovered ? 1 : 0
+    } }),
+    /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+      width: "48px",
+      height: "48px",
+      borderRadius: "12px",
+      background: alpha(accent, 0.15),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "20px",
+      marginBottom: "16px",
+      border: "1px solid " + alpha(accent, 0.3)
+    } }, icon),
+    /* @__PURE__ */ import_react9.default.createElement("h3", { style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.3
+    } }, title),
+    /* @__PURE__ */ import_react9.default.createElement("p", { style: {
+      fontSize: "14px",
+      color: "rgba(255,255,255,0.6)",
+      lineHeight: 1.5,
+      margin: 0
+    } }, description),
+    /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      height: "3px",
+      background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")",
+      transform: hovered ? "scaleX(1)" : "scaleX(0)",
+      transformOrigin: "left",
+      transition: "transform 0.4s cubic-bezier(0.65, 0, 0.35, 1)"
+    } })
+  );
+};
+
+// src/components/AnimatedProgressBar/AnimatedProgressBar.jsx
+var import_react10 = __toESM(require("react"));
+var AnimatedProgressBar = ({
+  progress = 75,
+  height = "12px",
+  width = "300px",
+  bg = "#1e293b",
+  color = "#6366f1",
+  showPercentage = true,
+  borderRadius = "20px",
+  animationDuration = "1s"
+}) => {
+  const [animatedProgress, setAnimatedProgress] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setAnimatedProgress(progress);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [progress]);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
-  const imageStyles = {
+  return /* @__PURE__ */ import_react10.default.createElement("div", { style: { width, fontFamily: "system-ui,sans-serif" } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: {
     width: "100%",
-    height: "160px",
-    objectFit: "cover"
-  };
-  return /* @__PURE__ */ import_react2.default.createElement(
+    height,
+    background: bg,
+    borderRadius,
+    overflow: "hidden",
+    position: "relative",
+    boxShadow: "inset 0 1px 3px rgba(0,0,0,0.2)"
+  } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: {
+    width: animatedProgress + "%",
+    height: "100%",
+    background: "linear-gradient(90deg, " + color + ", " + alpha(color, 0.7) + ")",
+    borderRadius,
+    transition: "width " + animationDuration + " cubic-bezier(0.65, 0, 0.35, 1)",
+    boxShadow: "0 2px 10px " + alpha(color, 0.4)
+  } })), showPercentage && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "8px",
+    fontSize: "12px",
+    color: "rgba(255,255,255,0.6)"
+  } }, /* @__PURE__ */ import_react10.default.createElement("span", null, "Progress"), /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontWeight: "700", color } }, animatedProgress, "%")));
+};
+
+// src/components/Box/Box.jsx
+var import_react11 = __toESM(require("react"));
+var Box = ({
+  width = "300px",
+  height = "200px",
+  bg = "#1e293b",
+  color = "#fff",
+  borderRadius = "16px",
+  padding = "20px",
+  border = "1px solid rgba(255,255,255,0.08)",
+  shadow = "0 10px 40px rgba(0,0,0,0.4)",
+  children = "Box Content"
+}) => {
+  return /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
-      style: containerStyles,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      onClick: (e) => clickable && onClick(e)
+      style: {
+        width,
+        height,
+        background: bg,
+        color,
+        borderRadius,
+        padding,
+        border,
+        boxShadow: shadow,
+        fontFamily: "system-ui, sans-serif",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
     },
-    image && /* @__PURE__ */ import_react2.default.createElement("img", { src: image, alt: "card", style: imageStyles }),
-    /* @__PURE__ */ import_react2.default.createElement("div", { style: contentStyles }, /* @__PURE__ */ import_react2.default.createElement("div", { style: titleStyles }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: textStyles }, description))
+    children
   );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedProgressBar,
+  Box,
   Button,
-  Card
+  CommentCard,
+  Graph,
+  HoverCard,
+  Loader,
+  PricingCard,
+  SliderCard,
+  SwipeCard,
+  ThumbnailCard
 });