Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@launchpad-ui/button

Package Overview
Dependencies
Maintainers
1
Versions
145
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@launchpad-ui/button - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

292

dist/index.es.js

@@ -41,117 +41,122 @@ // ../../scripts/react-shim.js

// src/Button.tsx
var ButtonComponent = forwardRef((props, ref) => {
const {
className,
size = "normal" /* NORMAL */,
fit,
kind = "default" /* DEFAULT */,
icon,
outlined = false,
type,
children,
isLoading,
loadingText,
renderIconFirst = false,
onKeyDown,
disabled = false,
href,
target,
onClick = () => void 0,
to
} = props;
const kindClass = `Button--${kind}`;
const sizeClass = `Button--${size}`;
const classes = cx("Button", className, kindClass, sizeClass, {
"Button--fit": fit,
"Button--icon": type === "icon",
"Button--outlined": type === "icon" && outlined,
"Button--borderless": type === "borderless"
});
const handleClick = (event) => {
if (disabled) {
event.preventDefault();
return;
}
onClick && onClick(event);
};
const handleKeyDown = (event) => {
const spacebarKeys = ["Spacebar", " "];
if (!!to || !!href || !!target) {
if (spacebarKeys.includes(event.key)) {
import { jsx } from "react/jsx-runtime";
var ButtonComponent = forwardRef(
(props, ref) => {
const {
className,
size = "normal" /* NORMAL */,
fit,
kind = "default" /* DEFAULT */,
icon,
outlined = false,
type,
children,
isLoading,
loadingText,
renderIconFirst = false,
onKeyDown,
disabled = false,
href,
target,
onClick = () => void 0,
to
} = props;
const kindClass = `Button--${kind}`;
const sizeClass = `Button--${size}`;
const classes = cx("Button", className, kindClass, sizeClass, {
"Button--fit": fit,
"Button--icon": type === "icon",
"Button--outlined": type === "icon" && outlined,
"Button--borderless": type === "borderless"
});
const handleClick = (event) => {
if (disabled) {
event.preventDefault();
const link = event.target;
link.click();
return;
}
}
};
const extraProps = {
disabled: disabled || isLoading,
className: classes,
onClick: handleClick,
ref,
onKeyDown: onKeyDown || handleKeyDown
};
const renderIcon = icon && cloneElement(icon, {
key: "icon",
size: icon.props.size || "small",
"aria-hidden": true
});
const finalChildren = [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ React.createElement("span", {
key: "text"
}, loadingText || children),
!isLoading && children && /* @__PURE__ */ React.createElement("span", {
key: "text"
}, children),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ React.createElement("span", {
key: "spinner"
}, "\u2026")
];
const renderAnchor = (extraProps2, children2) => {
const {
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
return /* @__PURE__ */ React.createElement("a", {
...otherProps,
...extraProps2,
"data-test-id": testId
}, children2);
};
const renderButton = (extraProps2, children2) => {
const {
type: type2,
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
const buttonType = type2 && type2 !== "icon" /* ICON */ && type2 !== "borderless" /* BORDERLESS */ ? type2 : "button" /* BUTTON */;
return /* @__PURE__ */ React.createElement("button", {
...otherProps,
...extraProps2,
type: buttonType,
"data-test-id": testId
}, children2);
};
const renderFunc = href || target ? renderAnchor : renderButton;
const content = renderFunc(extraProps, finalChildren);
return content;
});
onClick && onClick(event);
};
const handleKeyDown = (event) => {
const spacebarKeys = ["Spacebar", " "];
if (!!to || !!href || !!target) {
if (spacebarKeys.includes(event.key)) {
event.preventDefault();
const link = event.target;
link.click();
}
}
};
const extraProps = {
disabled: disabled || isLoading,
className: classes,
onClick: handleClick,
ref,
onKeyDown: onKeyDown || handleKeyDown
};
const renderIcon = icon && cloneElement(icon, {
key: "icon",
size: icon.props.size || "small",
"aria-hidden": true
});
const finalChildren = [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ jsx("span", {
children: loadingText || children
}, "text"),
!isLoading && children && /* @__PURE__ */ jsx("span", {
children
}, "text"),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ jsx("span", {
children: "\u2026"
}, "spinner")
];
const renderAnchor = (extraProps2, children2) => {
const {
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
return /* @__PURE__ */ jsx("a", {
...otherProps,
...extraProps2,
"data-test-id": testId,
children: children2
});
};
const renderButton = (extraProps2, children2) => {
const {
type: type2,
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
const buttonType = type2 && type2 !== "icon" /* ICON */ && type2 !== "borderless" /* BORDERLESS */ ? type2 : "button" /* BUTTON */;
return /* @__PURE__ */ jsx("button", {
...otherProps,
...extraProps2,
type: buttonType,
"data-test-id": testId,
children: children2
});
};
const renderFunc = href || target ? renderAnchor : renderButton;
const content = renderFunc(extraProps, finalChildren);
return content;
}
);
ButtonComponent.displayName = "Button";

@@ -163,2 +168,3 @@ var Button = memo(ButtonComponent);

import "./styles/ButtonGroup.css";
import { jsx as jsx2 } from "react/jsx-runtime";
var ButtonGroup = ({

@@ -172,7 +178,8 @@ spacing = "normal" /* NORMAL */,

const classes = cx2("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ React.createElement("div", {
return /* @__PURE__ */ jsx2("div", {
className: classes,
"data-test-id": testId,
...rest
}, children);
...rest,
children
});
};

@@ -183,2 +190,3 @@

import { useRef } from "react";
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var UploadButton = ({

@@ -221,25 +229,31 @@ id,

};
return /* @__PURE__ */ React.createElement("span", {
className: classes
}, /* @__PURE__ */ React.createElement("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: { display: "none" },
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}), /* @__PURE__ */ React.createElement("label", {
htmlFor: id,
className: "UploadButton-label"
}, /* @__PURE__ */ React.createElement(Button, {
...rest,
disabled,
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick
}, children)));
return /* @__PURE__ */ jsxs("span", {
className: classes,
children: [
/* @__PURE__ */ jsx3("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: { display: "none" },
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}),
/* @__PURE__ */ jsx3("label", {
htmlFor: id,
className: "UploadButton-label",
children: /* @__PURE__ */ jsx3(Button, {
...rest,
disabled,
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick,
children
})
})
]
});
};

@@ -246,0 +260,0 @@ export {

297

dist/index.js

@@ -20,3 +20,6 @@ "use strict";

};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

@@ -77,117 +80,122 @@

// src/Button.tsx
var ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
const {
className,
size = "normal" /* NORMAL */,
fit,
kind = "default" /* DEFAULT */,
icon,
outlined = false,
type,
children,
isLoading,
loadingText,
renderIconFirst = false,
onKeyDown,
disabled = false,
href,
target,
onClick = () => void 0,
to
} = props;
const kindClass = `Button--${kind}`;
const sizeClass = `Button--${size}`;
const classes = (0, import_clsx.default)("Button", className, kindClass, sizeClass, {
"Button--fit": fit,
"Button--icon": type === "icon",
"Button--outlined": type === "icon" && outlined,
"Button--borderless": type === "borderless"
});
const handleClick = (event) => {
if (disabled) {
event.preventDefault();
return;
}
onClick && onClick(event);
};
const handleKeyDown = (event) => {
const spacebarKeys = ["Spacebar", " "];
if (!!to || !!href || !!target) {
if (spacebarKeys.includes(event.key)) {
var import_jsx_runtime = require("react/jsx-runtime");
var ButtonComponent = (0, import_react.forwardRef)(
(props, ref) => {
const {
className,
size = "normal" /* NORMAL */,
fit,
kind = "default" /* DEFAULT */,
icon,
outlined = false,
type,
children,
isLoading,
loadingText,
renderIconFirst = false,
onKeyDown,
disabled = false,
href,
target,
onClick = () => void 0,
to
} = props;
const kindClass = `Button--${kind}`;
const sizeClass = `Button--${size}`;
const classes = (0, import_clsx.default)("Button", className, kindClass, sizeClass, {
"Button--fit": fit,
"Button--icon": type === "icon",
"Button--outlined": type === "icon" && outlined,
"Button--borderless": type === "borderless"
});
const handleClick = (event) => {
if (disabled) {
event.preventDefault();
const link = event.target;
link.click();
return;
}
}
};
const extraProps = {
disabled: disabled || isLoading,
className: classes,
onClick: handleClick,
ref,
onKeyDown: onKeyDown || handleKeyDown
};
const renderIcon = icon && (0, import_react.cloneElement)(icon, {
key: "icon",
size: icon.props.size || "small",
"aria-hidden": true
});
const finalChildren = [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ React.createElement("span", {
key: "text"
}, loadingText || children),
!isLoading && children && /* @__PURE__ */ React.createElement("span", {
key: "text"
}, children),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ React.createElement("span", {
key: "spinner"
}, "\u2026")
];
const renderAnchor = (extraProps2, children2) => {
const {
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
return /* @__PURE__ */ React.createElement("a", {
...otherProps,
...extraProps2,
"data-test-id": testId
}, children2);
};
const renderButton = (extraProps2, children2) => {
const {
type: type2,
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
const buttonType = type2 && type2 !== "icon" /* ICON */ && type2 !== "borderless" /* BORDERLESS */ ? type2 : "button" /* BUTTON */;
return /* @__PURE__ */ React.createElement("button", {
...otherProps,
...extraProps2,
type: buttonType,
"data-test-id": testId
}, children2);
};
const renderFunc = href || target ? renderAnchor : renderButton;
const content = renderFunc(extraProps, finalChildren);
return content;
});
onClick && onClick(event);
};
const handleKeyDown = (event) => {
const spacebarKeys = ["Spacebar", " "];
if (!!to || !!href || !!target) {
if (spacebarKeys.includes(event.key)) {
event.preventDefault();
const link = event.target;
link.click();
}
}
};
const extraProps = {
disabled: disabled || isLoading,
className: classes,
onClick: handleClick,
ref,
onKeyDown: onKeyDown || handleKeyDown
};
const renderIcon = icon && (0, import_react.cloneElement)(icon, {
key: "icon",
size: icon.props.size || "small",
"aria-hidden": true
});
const finalChildren = [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children: loadingText || children
}, "text"),
!isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children
}, "text"),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children: "\u2026"
}, "spinner")
];
const renderAnchor = (extraProps2, children2) => {
const {
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
...otherProps,
...extraProps2,
"data-test-id": testId,
children: children2
});
};
const renderButton = (extraProps2, children2) => {
const {
type: type2,
isLoading: isLoading2,
loadingText: loadingText2,
size: size2,
kind: kind2,
fit: fit2,
icon: icon2,
outlined: outlined2,
renderIconFirst: renderIconFirst2,
testId,
...otherProps
} = props;
const buttonType = type2 && type2 !== "icon" /* ICON */ && type2 !== "borderless" /* BORDERLESS */ ? type2 : "button" /* BUTTON */;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
...otherProps,
...extraProps2,
type: buttonType,
"data-test-id": testId,
children: children2
});
};
const renderFunc = href || target ? renderAnchor : renderButton;
const content = renderFunc(extraProps, finalChildren);
return content;
}
);
ButtonComponent.displayName = "Button";

@@ -199,2 +207,3 @@ var Button = (0, import_react.memo)(ButtonComponent);

var import_ButtonGroup = require("./styles/ButtonGroup.css");
var import_jsx_runtime = require("react/jsx-runtime");
var ButtonGroup = ({

@@ -208,7 +217,8 @@ spacing = "normal" /* NORMAL */,

const classes = (0, import_clsx2.default)("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ React.createElement("div", {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
className: classes,
"data-test-id": testId,
...rest
}, children);
...rest,
children
});
};

@@ -219,2 +229,3 @@

var import_react2 = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var UploadButton = ({

@@ -257,25 +268,31 @@ id,

};
return /* @__PURE__ */ React.createElement("span", {
className: classes
}, /* @__PURE__ */ React.createElement("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: { display: "none" },
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}), /* @__PURE__ */ React.createElement("label", {
htmlFor: id,
className: "UploadButton-label"
}, /* @__PURE__ */ React.createElement(Button, {
...rest,
disabled,
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick
}, children)));
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
className: classes,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: { display: "none" },
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
htmlFor: id,
className: "UploadButton-label",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
...rest,
disabled,
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick,
children
})
})
]
});
};

@@ -282,0 +299,0 @@ // Annotate the CommonJS export names for ESM import in node:

6

package.json
{
"name": "@launchpad-ui/button",
"version": "0.3.2",
"version": "0.4.0",
"status": "beta",

@@ -33,4 +33,4 @@ "publishConfig": {

"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
"react": "^18.0.0",
"react-dom": "^18.0.0"
},

@@ -37,0 +37,0 @@ "devDependencies": {

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc