momentum-ui - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/Button.d.ts

@@ -1,7 +0,11 @@
-import React from 'react';
-export interface ButtonProps {
-    label: string;
-    onClick?: () => void;
+import React, { ButtonHTMLAttributes } from "react";
+type ButtonVariant = "primary" | "secondary" | "danger" | "transparent" | "transparent-muted";
+type ButtonSize = "small" | "medium" | "large";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    children: React.ReactNode;
 }
 declare const Button: React.FC<ButtonProps>;
 export default Button;

dist/Button.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,6 +40,46 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Button = ({ label, onClick }) => {
-    return react_1.default.createElement("button", { onClick: onClick }, label);
+const react_1 = __importStar(require("react"));
+const Spinner_1 = __importDefault(require("./Spinner"));
+const Button = (_a) => {
+    var { variant = "primary", size = "medium", loading = false, children } = _a, props = __rest(_a, ["variant", "size", "loading", "children"]);
+    const baseStyles = "h-fit box-border leading-tight font-medium rounded-[6px] px-[31px] text-[13px] inline-flex items-center justify-center shrink-0";
+    const variantStyles = {
+        primary: "bg-[#27272A] hover:bg-[#3F3F46] disabled:text-[#D4D4D8] disabled:bg-[#F4F4F5] text-[#FFFFFFE0] shadow-primary-button disabled:shadow-primary-button-disabled" +
+            (loading ? " hover:bg-[#52525B]" : ""),
+        secondary: "bg-[#FFFFFF] text-[#09090B] disabled:bg-[#F4F4F5] disabled:text-[#D4D4D8] hover:bg-[#F4F4F5] shadow-secondary-button disabled:shadow-secondary-button-disabled" +
+            (loading ? " hover:bg-[#E4E4E7]" : ""),
+        danger: "bg-[#E11D48] hover:bg-[#BE123C] disabled:bg-[#F4F4F5] text-[#FFFFFF] shadow-danger-button disabled:shadow-danger-button-disabled" +
+            (loading ? " hover:bg-[#9F1239]" : ""),
+        transparent: "bg-transparent text-[#27272A] hover:bg-[#F4F4F5] disabled:text-[#D4D4D8] disabled:bg-transparent shadow-transparent-button disabled:shadow-transparent-button-disabled" +
+            (loading ? " hover:bg-[#E4E4E7]" : ""),
+        "transparent-muted": "bg-transparent text-[#A1A1AA] hover:bg-[#F4F4F5] disabled:text-[#D4D4D8] disabled:bg-transparent shadow-transparent-button disabled:shadow-transparent-button-disabled" +
+            (loading ? " hover:bg-[#E4E4E7]" : ""),
+    };
+    const sizeStyles = {
+        small: "text-sm px-2 py-1",
+        medium: "text-md px-4 py-[6px]",
+        large: "text-lg px-6 py-[10px]",
+    };
+    const loadingStyles = {
+        primary: "bg-[#52525B]",
+        secondary: "bg-[#E4E4E7]",
+        danger: "bg-[#9F1239]",
+        transparent: "bg-[#E4E4E7]",
+        "transparent-muted": "bg-[#E4E4E7]",
+    };
+    const classes = `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${loading ? loadingStyles[variant] : ""}`;
+    const [initialWidth, setInitialWidth] = (0, react_1.useState)(null);
+    const [initialHeight, setInitialHeight] = (0, react_1.useState)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (buttonRef.current) {
+            setInitialWidth(buttonRef.current.offsetWidth);
+            setInitialHeight(buttonRef.current.offsetHeight);
+        }
+    }, []);
+    return (react_1.default.createElement("button", Object.assign({ style: {
+            width: loading ? initialWidth || "auto" : "auto",
+            height: loading ? initialHeight || "fit-content" : "fit-content",
+        }, ref: buttonRef, className: classes }, props), loading ? react_1.default.createElement(Spinner_1.default, { className: "" }) : children));
 };
 exports.default = Button;

dist/index.d.ts

 export { default as Button } from './Button';
+export { default as Spinner } from './Spinner';

dist/index.js

@@ -6,4 +6,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.Spinner = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });

package.json

 {
   "name": "momentum-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

12578

increased by110.44%

Number of package files

11

increased by22.22%

Lines of code

284

increased by76.4%

No dependency changes