virtuo-ui-library 1.0.0

package/dist/index.js

@@ -0,0 +1,267 @@
+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 = "Click me",
+  onClick = () => {
+  },
+  color = "#6366f1",
+  textColor = "#ffffff",
+  size = "md",
+  variant = "filled",
+  disabled = false,
+  fullWidth = false,
+  icon = null
+}) => {
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [pressed, setPressed] = (0, import_react.useState)(false);
+  const sizes = {
+    sm: { padding: "7px 14px", fontSize: "13px", borderRadius: "7px" },
+    md: { padding: "10px 22px", fontSize: "15px", borderRadius: "9px" },
+    lg: { padding: "14px 30px", fontSize: "17px", borderRadius: "11px" }
+  };
+  const getVariantStyle = () => {
+    if (variant === "outline") {
+      return {
+        background: hovered ? color + "12" : "transparent",
+        color,
+        border: `2px solid ${color}`
+      };
+    }
+    if (variant === "ghost") {
+      return {
+        background: hovered ? color + "18" : "transparent",
+        color,
+        border: "none"
+      };
+    }
+    return {
+      background: hovered ? shadeColor(color, -15) : color,
+      color: textColor,
+      border: "none"
+    };
+  };
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    fontFamily: "system-ui, sans-serif",
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.45 : 1,
+    width: fullWidth ? "100%" : "auto",
+    boxShadow: variant === "filled" && !disabled && !pressed ? `0 4px 14px ${color}44` : "none",
+    transform: pressed && !disabled ? "scale(0.96)" : "scale(1)",
+    transition: "all 0.15s ease",
+    ...sizes[size],
+    ...getVariantStyle()
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      style,
+      onClick: !disabled ? onClick : void 0,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => {
+        setHovered(false);
+        setPressed(false);
+      },
+      onMouseDown: () => !disabled && setPressed(true),
+      onMouseUp: () => setPressed(false),
+      disabled
+    },
+    icon && /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, icon),
+    text
+  );
+};
+function shadeColor(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
+  const b = Math.min(255, Math.max(0, (num & 255) + percent));
+  return `rgb(${r},${g},${b})`;
+}
+
+// src/components/Card/Card.jsx
+var import_react2 = __toESM(require("react"));
+var Card = ({
+  title = "Card Title",
+  description = "This is a simple, reusable card component you can customize with props.",
+  image = null,
+  badge = null,
+  badgeColor = "#6366f1",
+  accentColor = "#6366f1",
+  actions = [],
+  footer = null,
+  width = "320px",
+  onClick = null
+}) => {
+  const [hovered, setHovered] = (0, import_react2.useState)(false);
+  const [liked, setLiked] = (0, import_react2.useState)(false);
+  const style = {
+    width,
+    borderRadius: "16px",
+    background: "#ffffff",
+    boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
+    transform: hovered ? "translateY(-4px)" : "translateY(0)",
+    transition: "all 0.22s ease",
+    overflow: "hidden",
+    fontFamily: "system-ui, sans-serif",
+    cursor: onClick ? "pointer" : "default",
+    border: "1px solid #f1f5f9"
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick
+    },
+    image && /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
+      "img",
+      {
+        src: image,
+        alt: title,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transform: hovered ? "scale(1.04)" : "scale(1)",
+          transition: "transform 0.35s ease"
+        }
+      }
+    ), badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+      position: "absolute",
+      top: "12px",
+      left: "12px",
+      background: badgeColor,
+      color: "#fff",
+      fontSize: "11px",
+      fontWeight: 700,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
+      padding: "4px 10px",
+      borderRadius: "99px"
+    } }, badge)),
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+      display: "inline-block",
+      background: badgeColor + "18",
+      color: badgeColor,
+      fontSize: "11px",
+      fontWeight: 700,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
+      padding: "3px 10px",
+      borderRadius: "99px",
+      marginBottom: "10px"
+    } }, badge), /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
+    (actions.length > 0 || true) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ import_react2.default.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setLiked(!liked);
+        },
+        style: {
+          marginLeft: "auto",
+          background: liked ? "#fef2f2" : "#f8fafc",
+          border: "none",
+          borderRadius: "8px",
+          padding: "8px 10px",
+          cursor: "pointer",
+          fontSize: "16px",
+          transition: "all 0.15s",
+          transform: liked ? "scale(1.15)" : "scale(1)"
+        },
+        title: liked ? "Unlike" : "Like"
+      },
+      liked ? "\u2764\uFE0F" : "\u{1F90D}"
+    )),
+    footer && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+      borderTop: "1px solid #f1f5f9",
+      padding: "12px 20px",
+      fontSize: "12px",
+      color: "#94a3b8",
+      display: "flex",
+      alignItems: "center",
+      gap: "6px"
+    } }, footer)
+  );
+};
+var ActionButton = ({ label = "Action", onClick = () => {
+}, accentColor = "#6366f1", primary = false }) => {
+  const [hovered, setHovered] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        padding: "8px 18px",
+        borderRadius: "8px",
+        fontSize: "13px",
+        fontWeight: 600,
+        cursor: "pointer",
+        transition: "all 0.15s",
+        background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
+        color: primary ? "#fff" : accentColor,
+        border: primary ? "none" : `1.5px solid ${accentColor}`,
+        boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
+      }
+    },
+    label
+  );
+};
+function shadeColor2(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
+  const b = Math.min(255, Math.max(0, (num & 255) + percent));
+  return `rgb(${r},${g},${b})`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card
+});

package/dist/index.mjs

@@ -0,0 +1,230 @@
+// src/components/Button/Button.jsx
+import React, { useState } from "react";
+var Button = ({
+  text = "Click me",
+  onClick = () => {
+  },
+  color = "#6366f1",
+  textColor = "#ffffff",
+  size = "md",
+  variant = "filled",
+  disabled = false,
+  fullWidth = false,
+  icon = null
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const sizes = {
+    sm: { padding: "7px 14px", fontSize: "13px", borderRadius: "7px" },
+    md: { padding: "10px 22px", fontSize: "15px", borderRadius: "9px" },
+    lg: { padding: "14px 30px", fontSize: "17px", borderRadius: "11px" }
+  };
+  const getVariantStyle = () => {
+    if (variant === "outline") {
+      return {
+        background: hovered ? color + "12" : "transparent",
+        color,
+        border: `2px solid ${color}`
+      };
+    }
+    if (variant === "ghost") {
+      return {
+        background: hovered ? color + "18" : "transparent",
+        color,
+        border: "none"
+      };
+    }
+    return {
+      background: hovered ? shadeColor(color, -15) : color,
+      color: textColor,
+      border: "none"
+    };
+  };
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    fontFamily: "system-ui, sans-serif",
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.45 : 1,
+    width: fullWidth ? "100%" : "auto",
+    boxShadow: variant === "filled" && !disabled && !pressed ? `0 4px 14px ${color}44` : "none",
+    transform: pressed && !disabled ? "scale(0.96)" : "scale(1)",
+    transition: "all 0.15s ease",
+    ...sizes[size],
+    ...getVariantStyle()
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style,
+      onClick: !disabled ? onClick : void 0,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => {
+        setHovered(false);
+        setPressed(false);
+      },
+      onMouseDown: () => !disabled && setPressed(true),
+      onMouseUp: () => setPressed(false),
+      disabled
+    },
+    icon && /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center" } }, icon),
+    text
+  );
+};
+function shadeColor(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
+  const b = Math.min(255, Math.max(0, (num & 255) + percent));
+  return `rgb(${r},${g},${b})`;
+}
+
+// src/components/Card/Card.jsx
+import React2, { useState as useState2 } from "react";
+var Card = ({
+  title = "Card Title",
+  description = "This is a simple, reusable card component you can customize with props.",
+  image = null,
+  badge = null,
+  badgeColor = "#6366f1",
+  accentColor = "#6366f1",
+  actions = [],
+  footer = null,
+  width = "320px",
+  onClick = null
+}) => {
+  const [hovered, setHovered] = useState2(false);
+  const [liked, setLiked] = useState2(false);
+  const style = {
+    width,
+    borderRadius: "16px",
+    background: "#ffffff",
+    boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
+    transform: hovered ? "translateY(-4px)" : "translateY(0)",
+    transition: "all 0.22s ease",
+    overflow: "hidden",
+    fontFamily: "system-ui, sans-serif",
+    cursor: onClick ? "pointer" : "default",
+    border: "1px solid #f1f5f9"
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick
+    },
+    image && /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ React2.createElement(
+      "img",
+      {
+        src: image,
+        alt: title,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transform: hovered ? "scale(1.04)" : "scale(1)",
+          transition: "transform 0.35s ease"
+        }
+      }
+    ), badge && /* @__PURE__ */ React2.createElement("span", { style: {
+      position: "absolute",
+      top: "12px",
+      left: "12px",
+      background: badgeColor,
+      color: "#fff",
+      fontSize: "11px",
+      fontWeight: 700,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
+      padding: "4px 10px",
+      borderRadius: "99px"
+    } }, badge)),
+    /* @__PURE__ */ React2.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ React2.createElement("span", { style: {
+      display: "inline-block",
+      background: badgeColor + "18",
+      color: badgeColor,
+      fontSize: "11px",
+      fontWeight: 700,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
+      padding: "3px 10px",
+      borderRadius: "99px",
+      marginBottom: "10px"
+    } }, badge), /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
+    (actions.length > 0 || true) && /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ React2.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setLiked(!liked);
+        },
+        style: {
+          marginLeft: "auto",
+          background: liked ? "#fef2f2" : "#f8fafc",
+          border: "none",
+          borderRadius: "8px",
+          padding: "8px 10px",
+          cursor: "pointer",
+          fontSize: "16px",
+          transition: "all 0.15s",
+          transform: liked ? "scale(1.15)" : "scale(1)"
+        },
+        title: liked ? "Unlike" : "Like"
+      },
+      liked ? "\u2764\uFE0F" : "\u{1F90D}"
+    )),
+    footer && /* @__PURE__ */ React2.createElement("div", { style: {
+      borderTop: "1px solid #f1f5f9",
+      padding: "12px 20px",
+      fontSize: "12px",
+      color: "#94a3b8",
+      display: "flex",
+      alignItems: "center",
+      gap: "6px"
+    } }, footer)
+  );
+};
+var ActionButton = ({ label = "Action", onClick = () => {
+}, accentColor = "#6366f1", primary = false }) => {
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        padding: "8px 18px",
+        borderRadius: "8px",
+        fontSize: "13px",
+        fontWeight: 600,
+        cursor: "pointer",
+        transition: "all 0.15s",
+        background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
+        color: primary ? "#fff" : accentColor,
+        border: primary ? "none" : `1.5px solid ${accentColor}`,
+        boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
+      }
+    },
+    label
+  );
+};
+function shadeColor2(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
+  const b = Math.min(255, Math.max(0, (num & 255) + percent));
+  return `rgb(${r},${g},${b})`;
+}
+export {
+  Button,
+  Card
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "virtuo-ui-library",
+  "version": "1.0.0",
+  "description": "Virtual UI React Component Library",
+  "license": "ISC",
+  "author": "Ritik Saini",
+  "main": "dist/index.js",
+  "module" : "dist/index.mjs",
+  "files": ["dist"],
+
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.2"
+  }
+}