omui-lib 1.0.0 → 1.0.3

package/dist/index.mjs

@@ -1,274 +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))
-  );
-};
+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
+  CommentCard,
+  Graph,
+  HoverCard,
+  Loader,
+  PricingCard,
+  SliderCard,
+  SwipeCard,
+  ThumbnailCard
 };

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "omui-lib",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "omUI react component library",
   "license": "ISC",
   "author": "Om Mohanty",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "tsup": "^8.5.1",
     "typescript": "^6.0.3"
   }
-}
+}