omui-lib 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1,451 +1,46 @@
-// src/components/Button/Button.jsx
-import React, { useState } from "react";
-var Button = ({
-  text = "Button",
-  variant = "solid",
-  // solid | outline | ghost
-  size = "md",
-  // sm | md | lg
-  palette = "primary",
-  // primary | secondary | danger | success
-  disabled = false,
-  fullWidth = false,
-  onClick = () => {
-  }
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isActive, setIsActive] = 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"
-    },
-    lg: {
-      padding: "14px 26px",
-      fontSize: "16px"
-    }
-  };
-  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}`
-      };
-    }
-    if (variant === "ghost") {
-      return {
-        backgroundColor: "transparent",
-        color: selectedPalette.border,
-        border: "none"
-      };
-    }
-    return {
-      backgroundColor: selectedPalette.bg,
-      color: selectedPalette.text,
-      border: "none"
-    };
-  };
-  const getStateStyles = () => {
-    if (disabled) {
-      return {
-        backgroundColor: "#ccc",
-        color: "#666",
-        cursor: "not-allowed"
-      };
-    }
-    if (isActive) {
-      return {
-        backgroundColor: variant === "solid" ? selectedPalette.active : "#e0e0e0",
-        transform: "scale(0.96)"
-      };
-    }
-    if (isHovered) {
-      return {
-        backgroundColor: variant === "solid" ? selectedPalette.hover : "#f5f5f5"
-      };
-    }
-    return {};
-  };
-  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 combinedStyles = {
-    ...baseStyles,
-    ...selectedSize,
-    ...getVariantStyles(),
-    ...getStateStyles()
-  };
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      style: combinedStyles,
-      disabled,
-      onClick: (e) => !disabled && onClick(e),
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => {
-        setIsHovered(false);
-        setIsActive(false);
-      },
-      onMouseDown: () => setIsActive(true),
-      onMouseUp: () => setIsActive(false)
-    },
-    text
-  );
-};
-
-// src/components/Card/Card.jsx
-import React2, { useState as useState2 } from "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] = useState2(false);
-  const palettes = {
-    primary: {
-      bg: "#ffffff",
-      border: "#4CAF50",
-      title: "#333",
-      text: "#555"
-    },
-    secondary: {
-      bg: "#ffffff",
-      border: "#2196F3",
-      title: "#333",
-      text: "#555"
-    },
-    danger: {
-      bg: "#ffffff",
-      border: "#f44336",
-      title: "#333",
-      text: "#555"
-    },
-    success: {
-      bg: "#ffffff",
-      border: "#00897b",
-      title: "#333",
-      text: "#555"
-    }
-  };
-  const sizes = {
-    sm: {
-      padding: "10px",
-      titleSize: "14px",
-      textSize: "12px"
-    },
-    md: {
-      padding: "16px",
-      titleSize: "18px",
-      textSize: "14px"
-    },
-    lg: {
-      padding: "20px",
-      titleSize: "22px",
-      textSize: "16px"
-    }
-  };
-  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 {
-          border: "none",
-          boxShadow: "none"
-        };
-      default:
-        return {
-          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
-  };
-  const textStyles = {
-    fontSize: selectedSize.textSize,
-    color: selectedPalette.text,
-    lineHeight: "1.5"
-  };
-  const imageStyles = {
-    width: "100%",
-    height: "160px",
-    objectFit: "cover"
-  };
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      style: containerStyles,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      onClick: (e) => clickable && onClick(e)
-    },
-    image && /* @__PURE__ */ React2.createElement("img", { src: image, alt: "card", style: imageStyles }),
-    /* @__PURE__ */ React2.createElement("div", { style: contentStyles }, /* @__PURE__ */ React2.createElement("div", { style: titleStyles }, title), /* @__PURE__ */ React2.createElement("div", { style: textStyles }, description))
-  );
-};
-
-// src/components/ProfileCard/ProfileCard.jsx
-import React3, { useState as useState3 } from "react";
-var ProfileCard = ({
-  name = "John Doe",
-  role = "Frontend Developer",
-  bio = "Passionate developer who loves building clean UI components.",
-  avatar = "https://via.placeholder.com/150",
-  variant = "elevated",
-  // elevated | outlined | flat
-  size = "md",
-  // sm | md | lg
-  palette = "primary",
-  // primary | secondary | danger | success
-  clickable = false,
-  hoverable = true,
-  fullWidth = false,
-  onFollow = () => {
-  },
-  onMessage = () => {
-  }
-}) => {
-  const [isHovered, setIsHovered] = useState3(false);
-  const [isFollowing, setIsFollowing] = useState3(false);
-  const palettes = {
-    primary: {
-      border: "#4CAF50",
-      accent: "#4CAF50",
-      text: "#333",
-      subText: "#666",
-      bg: "#ffffff"
-    },
-    secondary: {
-      border: "#2196F3",
-      accent: "#2196F3",
-      text: "#333",
-      subText: "#666",
-      bg: "#ffffff"
-    },
-    danger: {
-      border: "#f44336",
-      accent: "#f44336",
-      text: "#333",
-      subText: "#666",
-      bg: "#ffffff"
-    },
-    success: {
-      border: "#00897b",
-      accent: "#00897b",
-      text: "#333",
-      subText: "#666",
-      bg: "#ffffff"
-    }
-  };
-  const sizes = {
-    sm: {
-      padding: "12px",
-      name: "14px",
-      role: "12px",
-      bio: "12px",
-      avatar: "60px"
-    },
-    md: {
-      padding: "16px",
-      name: "18px",
-      role: "14px",
-      bio: "13px",
-      avatar: "80px"
-    },
-    lg: {
-      padding: "20px",
-      name: "22px",
-      role: "16px",
-      bio: "14px",
-      avatar: "100px"
-    }
-  };
-  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 {
-          border: "none",
-          boxShadow: "none"
-        };
-      default:
-        return {
-          border: "none",
-          boxShadow: "0 6px 16px rgba(0,0,0,0.15)"
-        };
-    }
-  };
-  const hoverStyles = hoverable && isHovered ? {
-    transform: "translateY(-6px)",
-    boxShadow: "0 10px 22px rgba(0,0,0,0.2)"
-  } : {};
-  const containerStyles = {
-    width: fullWidth ? "100%" : "300px",
-    backgroundColor: selectedPalette.bg,
-    borderRadius: "14px",
-    textAlign: "center",
-    padding: selectedSize.padding,
-    cursor: clickable ? "pointer" : "default",
-    transition: "all 0.3s ease",
-    ...getVariantStyles(),
-    ...hoverStyles
-  };
-  const avatarStyles = {
-    width: selectedSize.avatar,
-    height: selectedSize.avatar,
-    borderRadius: "50%",
-    objectFit: "cover",
-    marginBottom: "12px",
-    border: `3px solid ${selectedPalette.border}`
-  };
-  const nameStyles = {
-    fontSize: selectedSize.name,
-    fontWeight: "600",
-    color: selectedPalette.text
-  };
-  const roleStyles = {
-    fontSize: selectedSize.role,
-    color: selectedPalette.accent,
-    marginBottom: "8px"
-  };
-  const bioStyles = {
-    fontSize: selectedSize.bio,
-    color: selectedPalette.subText,
-    marginBottom: "12px",
-    lineHeight: "1.4"
-  };
-  const buttonBase = {
-    padding: "8px 14px",
-    margin: "4px",
-    borderRadius: "6px",
-    border: "none",
-    cursor: "pointer",
-    fontSize: "12px",
-    fontWeight: "500",
-    transition: "0.2s"
-  };
-  const followBtn = {
-    ...buttonBase,
-    backgroundColor: isFollowing ? "#ccc" : selectedPalette.accent,
-    color: isFollowing ? "#333" : "#fff"
-  };
-  const messageBtn = {
-    ...buttonBase,
-    backgroundColor: "transparent",
-    border: `1px solid ${selectedPalette.accent}`,
-    color: selectedPalette.accent
-  };
-  const handleFollow = () => {
-    setIsFollowing(!isFollowing);
-    onFollow();
-  };
-  return /* @__PURE__ */ React3.createElement(
-    "div",
-    {
-      style: containerStyles,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false)
-    },
-    /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: "avatar", style: avatarStyles }),
-    /* @__PURE__ */ React3.createElement("div", { style: nameStyles }, name),
-    /* @__PURE__ */ React3.createElement("div", { style: roleStyles }, role),
-    /* @__PURE__ */ React3.createElement("div", { style: bioStyles }, bio),
-    /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("button", { style: followBtn, onClick: handleFollow }, isFollowing ? "Following" : "Follow"), /* @__PURE__ */ React3.createElement("button", { style: messageBtn, onClick: onMessage }, "Message"))
-  );
-};
+import {
+  PricingCard
+} from "./chunk-FGTNFYFJ.mjs";
+import {
+  SliderCard
+} from "./chunk-NJSJATQ6.mjs";
+import {
+  SwipeCard
+} from "./chunk-XD6E2QQI.mjs";
+import {
+  ThumbnailCard
+} from "./chunk-57QJO5RD.mjs";
+import {
+  AnimatedProgressBar
+} from "./chunk-VA6HDMVP.mjs";
+import {
+  Box
+} from "./chunk-UVOXBLXP.mjs";
+import {
+  Button
+} from "./chunk-5LA6VVEY.mjs";
+import {
+  CommentCard
+} from "./chunk-EWRW432G.mjs";
+import {
+  Graph
+} from "./chunk-SJ4MEFAG.mjs";
+import {
+  HoverCard
+} from "./chunk-MQOZXOBV.mjs";
+import {
+  Loader
+} from "./chunk-XGVKPI3O.mjs";
 export {
+  AnimatedProgressBar,
+  Box,
   Button,
-  Card,
-  ProfileCard
+  CommentCard,
+  Graph,
+  HoverCard,
+  Loader,
+  PricingCard,
+  SliderCard,
+  SwipeCard,
+  ThumbnailCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omui-lib",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "omUI react component library",
   "license": "ISC",
   "author": "Om Mohanty",
@@ -13,10 +13,11 @@
     "build": "tsup"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "tsup": "^8.5.1",
     "typescript": "^6.0.3"
   }
-}
+}