omui-lib 1.0.0

package/dist/index.js

@@ -0,0 +1,311 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.jsx
+var import_react = __toESM(require("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] = (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"
+    },
+    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__ */ import_react.default.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
+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"
+    },
+    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__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: containerStyles,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: (e) => clickable && onClick(e)
+    },
+    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))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card
+});

package/dist/index.mjs

@@ -0,0 +1,274 @@
+// 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))
+  );
+};
+export {
+  Button,
+  Card
+};

package/package.json

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