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

@launchpad-ui/button

Package Overview
Dependencies
Maintainers
1
Versions
144
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@launchpad-ui/button - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/style.css

10

dist/Button.d.ts

@@ -1,6 +0,6 @@

/// <reference types="react" />
import type { ButtonSize } from './types';
import type { ButtonHTMLAttributes, ReactElement } from 'react';
import './styles/Button.css';
import { ButtonKind } from './types';
declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
isLoading?: boolean;

@@ -12,3 +12,3 @@ loadingText?: string | JSX.Element;

disabled?: boolean;
icon?: React.ReactElement<{
icon?: ReactElement<{
size?: string;

@@ -21,3 +21,3 @@ key: string;

};
declare const Button: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
declare const Button: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
isLoading?: boolean | undefined;

@@ -29,3 +29,3 @@ loadingText?: string | JSX.Element | undefined;

disabled?: boolean | undefined;
icon?: import("react").ReactElement<{
icon?: ReactElement<{
size?: string | undefined;

@@ -32,0 +32,0 @@ key: string;

@@ -1,2 +0,2 @@

/// <reference types="react" />
import type { ReactNode } from 'react';
import './styles/ButtonGroup.css';

@@ -8,3 +8,3 @@ import { ButtonGroupSpacing } from './types';

testId?: string;
children: React.ReactNode;
children: ReactNode;
};

@@ -11,0 +11,0 @@ declare const ButtonGroup: ({ spacing, className, testId, children, ...rest }: ButtonGroupProps) => JSX.Element;

@@ -1,7 +0,7 @@

/// <reference types="react" />
import type { ButtonHTMLAttributes, ReactElement } from 'react';
import './styles/Button.css';
import { ButtonKind, IconButtonSize } from './types';
declare type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
declare type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
kind?: ButtonKind;
icon: React.ReactElement<{
icon: ReactElement<{
size?: string;

@@ -16,5 +16,5 @@ key: string;

};
declare const IconButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
declare const IconButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
kind?: ButtonKind | undefined;
icon: React.ReactElement<{
icon: ReactElement<{
size?: string;

@@ -21,0 +21,0 @@ key: string;

@@ -1,8 +0,7 @@

// src/Button.tsx
import './style.css';
import { Slot } from "@radix-ui/react-slot";
import { cx } from "classix";
import { isValidElement, cloneElement, forwardRef, memo } from "react";
import "./styles/Button.css";
// src/types.ts
import { forwardRef, cloneElement, memo, isValidElement, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
const Button$1 = "";
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {

@@ -40,6 +39,3 @@ ButtonType2["BUTTON"] = "button";

})(ButtonGroupSpacing || {});
// src/Button.tsx
import { jsx } from "react/jsx-runtime";
var ButtonComponent = forwardRef((props, ref) => {
const ButtonComponent = forwardRef((props, ref) => {
const {

@@ -51,3 +47,3 @@ icon,

fit,
kind = "default" /* DEFAULT */,
kind = ButtonKind.DEFAULT,
isLoading = false,

@@ -63,10 +59,3 @@ loadingText,

const Component = asChild ? Slot : "button";
const classes = cx(
"Button",
`Button--${kind}`,
disabled && "Button--disabled",
size && `Button--${size}`,
fit && "Button--fit",
className
);
const classes = cx("Button", `Button--${kind}`, disabled && "Button--disabled", size && `Button--${size}`, fit && "Button--fit", className);
const renderIcon = icon && cloneElement(icon, {

@@ -77,15 +66,9 @@ key: "icon",

});
const getFinalChildren = (c) => [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ jsx("span", {
children: loadingText || c
}, "text"),
!isLoading && c && /* @__PURE__ */ jsx("span", {
children: c
}, "text"),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ jsx("span", {
children: "\u2026"
}, "spinner")
];
const getFinalChildren = (c) => [renderIconFirst && renderIcon, isLoading && /* @__PURE__ */ jsx("span", {
children: loadingText || c
}, "text"), !isLoading && c && /* @__PURE__ */ jsx("span", {
children: c
}, "text"), !renderIconFirst && renderIcon, isLoading && /* @__PURE__ */ jsx("span", {
children: "\u2026"
}, "spinner")];
const renderChildren = () => {

@@ -124,10 +107,6 @@ if (asChild && isValidElement(children)) {

ButtonComponent.displayName = "Button";
var Button = memo(ButtonComponent);
// src/ButtonGroup.tsx
import { cx as cx2 } from "classix";
import "./styles/ButtonGroup.css";
import { jsx as jsx2 } from "react/jsx-runtime";
var ButtonGroup = ({
spacing = "normal" /* NORMAL */,
const Button = memo(ButtonComponent);
const ButtonGroup$1 = "";
const ButtonGroup = ({
spacing = ButtonGroupSpacing.NORMAL,
className,

@@ -138,4 +117,4 @@ testId,

}) => {
const classes = cx2("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ jsx2("div", {
const classes = cx("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ jsx("div", {
className: classes,

@@ -147,8 +126,3 @@ "data-test-id": testId,

};
// src/UploadButton.tsx
import { cx as cx3 } from "classix";
import { useRef } from "react";
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var UploadButton = ({
const UploadButton = ({
id,

@@ -164,18 +138,21 @@ className,

const inputRef = useRef(null);
const classes = cx3("UploadButton", className);
const classes = cx("UploadButton", className);
const handleClick = () => {
inputRef.current?.click();
var _a;
(_a = inputRef.current) == null ? void 0 : _a.click();
};
const handleKeyDown = (event) => {
var _a;
const actionKeys = ["Spacebar", " ", "Enter"];
if (actionKeys.includes(event.key)) {
event.preventDefault();
inputRef.current?.click();
(_a = inputRef.current) == null ? void 0 : _a.click();
}
};
const handleChange = (event) => {
var _a;
let file;
if (event) {
const e = event;
file = e.target.files?.[0];
file = (_a = e.target.files) == null ? void 0 : _a[0];
}

@@ -185,3 +162,3 @@ if (file && file.size > maxSize) {

}
event?.persist();
event == null ? void 0 : event.persist();
onSelect(file);

@@ -194,38 +171,30 @@ if (inputRef.current) {

className: classes,
children: [
/* @__PURE__ */ jsx3("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: { display: "none" },
type: "file",
onChange: handleChange,
children: [/* @__PURE__ */ jsx("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: {
display: "none"
},
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}), /* @__PURE__ */ jsx("label", {
htmlFor: id,
className: "UploadButton-label",
children: /* @__PURE__ */ jsx(Button, {
...rest,
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
})
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick,
children
})
]
})]
});
};
// src/IconButton.tsx
import { Slot as Slot2 } from "@radix-ui/react-slot";
import { cx as cx4 } from "classix";
import { isValidElement as isValidElement2, cloneElement as cloneElement2, forwardRef as forwardRef2, memo as memo2 } from "react";
import "./styles/Button.css";
import { jsx as jsx4 } from "react/jsx-runtime";
var IconButtonComponent = forwardRef2((props, ref) => {
const IconButtonComponent = forwardRef((props, ref) => {
const {

@@ -235,4 +204,4 @@ icon,

className,
size = "normal" /* NORMAL */,
kind = "minimal" /* MINIMAL */,
size = IconButtonSize.NORMAL,
kind = ButtonKind.MINIMAL,
disabled = false,

@@ -244,13 +213,5 @@ asChild = false,

} = props;
const Component = asChild ? Slot2 : "button";
const classes = cx4(
"IconButton",
"Button",
"Button--icon",
`Button--${kind}`,
disabled && "Button--disabled",
size && `Button--${size}`,
className
);
const clonedIcon = cloneElement2(icon, {
const Component = asChild ? Slot : "button";
const classes = cx("IconButton", "Button", "Button--icon", `Button--${kind}`, disabled && "Button--disabled", size && `Button--${size}`, className);
const clonedIcon = cloneElement(icon, {
key: "icon",

@@ -261,4 +222,4 @@ size: icon.props.size || "medium",

const renderChildren = () => {
if (asChild && isValidElement2(children)) {
return cloneElement2(children, void 0, clonedIcon);
if (asChild && isValidElement(children)) {
return cloneElement(children, void 0, clonedIcon);
}

@@ -282,3 +243,3 @@ return clonedIcon;

};
return /* @__PURE__ */ jsx4(Component, {
return /* @__PURE__ */ jsx(Component, {
className: classes,

@@ -294,3 +255,3 @@ ref,

IconButtonComponent.displayName = "IconButton";
var IconButton = memo2(IconButtonComponent);
const IconButton = memo(IconButtonComponent);
export {

@@ -297,0 +258,0 @@ Button,

@@ -0,42 +1,9 @@

require('./style.css');
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Button: () => Button,
ButtonGroup: () => ButtonGroup,
ButtonGroupSpacing: () => ButtonGroupSpacing,
ButtonKind: () => ButtonKind,
ButtonSize: () => ButtonSize,
ButtonType: () => ButtonType,
IconButton: () => IconButton,
IconButtonSize: () => IconButtonSize,
UploadButton: () => UploadButton
});
module.exports = __toCommonJS(src_exports);
// src/Button.tsx
var import_react_slot = require("@radix-ui/react-slot");
var import_classix = require("classix");
var import_react = require("react");
var import_Button = require("./styles/Button.css");
// src/types.ts
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const reactSlot = require("@radix-ui/react-slot");
const classix = require("classix");
const react = require("react");
const jsxRuntime = require("react/jsx-runtime");
const Button$1 = "";
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {

@@ -74,6 +41,3 @@ ButtonType2["BUTTON"] = "button";

})(ButtonGroupSpacing || {});
// src/Button.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
const ButtonComponent = react.forwardRef((props, ref) => {
const {

@@ -85,3 +49,3 @@ icon,

fit,
kind = "default" /* DEFAULT */,
kind = ButtonKind.DEFAULT,
isLoading = false,

@@ -96,12 +60,5 @@ loadingText,

} = props;
const Component = asChild ? import_react_slot.Slot : "button";
const classes = (0, import_classix.cx)(
"Button",
`Button--${kind}`,
disabled && "Button--disabled",
size && `Button--${size}`,
fit && "Button--fit",
className
);
const renderIcon = icon && (0, import_react.cloneElement)(icon, {
const Component = asChild ? reactSlot.Slot : "button";
const classes = classix.cx("Button", `Button--${kind}`, disabled && "Button--disabled", size && `Button--${size}`, fit && "Button--fit", className);
const renderIcon = icon && react.cloneElement(icon, {
key: "icon",

@@ -111,18 +68,12 @@ size: icon.props.size || "small",

});
const getFinalChildren = (c) => [
renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children: loadingText || c
}, "text"),
!isLoading && c && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children: c
}, "text"),
!renderIconFirst && renderIcon,
isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
children: "\u2026"
}, "spinner")
];
const getFinalChildren = (c) => [renderIconFirst && renderIcon, isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", {
children: loadingText || c
}, "text"), !isLoading && c && /* @__PURE__ */ jsxRuntime.jsx("span", {
children: c
}, "text"), !renderIconFirst && renderIcon, isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", {
children: "\u2026"
}, "spinner")];
const renderChildren = () => {
if (asChild && (0, import_react.isValidElement)(children)) {
return (0, import_react.cloneElement)(children, void 0, getFinalChildren(children.props.children));
if (asChild && react.isValidElement(children)) {
return react.cloneElement(children, void 0, getFinalChildren(children.props.children));
}

@@ -147,3 +98,3 @@ return getFinalChildren(children);

};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
className: classes,

@@ -159,10 +110,6 @@ ref,

ButtonComponent.displayName = "Button";
var Button = (0, import_react.memo)(ButtonComponent);
// src/ButtonGroup.tsx
var import_classix2 = require("classix");
var import_ButtonGroup = require("./styles/ButtonGroup.css");
var import_jsx_runtime = require("react/jsx-runtime");
var ButtonGroup = ({
spacing = "normal" /* NORMAL */,
const Button = react.memo(ButtonComponent);
const ButtonGroup$1 = "";
const ButtonGroup = ({
spacing = ButtonGroupSpacing.NORMAL,
className,

@@ -173,4 +120,4 @@ testId,

}) => {
const classes = (0, import_classix2.cx)("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
const classes = classix.cx("ButtonGroup", `ButtonGroup--${spacing}`, className);
return /* @__PURE__ */ jsxRuntime.jsx("div", {
className: classes,

@@ -182,8 +129,3 @@ "data-test-id": testId,

};
// src/UploadButton.tsx
var import_classix3 = require("classix");
var import_react2 = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var UploadButton = ({
const UploadButton = ({
id,

@@ -198,19 +140,22 @@ className,

}) => {
const inputRef = (0, import_react2.useRef)(null);
const classes = (0, import_classix3.cx)("UploadButton", className);
const inputRef = react.useRef(null);
const classes = classix.cx("UploadButton", className);
const handleClick = () => {
inputRef.current?.click();
var _a;
(_a = inputRef.current) == null ? void 0 : _a.click();
};
const handleKeyDown = (event) => {
var _a;
const actionKeys = ["Spacebar", " ", "Enter"];
if (actionKeys.includes(event.key)) {
event.preventDefault();
inputRef.current?.click();
(_a = inputRef.current) == null ? void 0 : _a.click();
}
};
const handleChange = (event) => {
var _a;
let file;
if (event) {
const e = event;
file = e.target.files?.[0];
file = (_a = e.target.files) == null ? void 0 : _a[0];
}

@@ -220,3 +165,3 @@ if (file && file.size > maxSize) {

}
event?.persist();
event == null ? void 0 : event.persist();
onSelect(file);

@@ -227,40 +172,32 @@ if (inputRef.current) {

};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
return /* @__PURE__ */ jsxRuntime.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,
children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
ref: inputRef,
className: "UploadButton-input",
id,
style: {
display: "none"
},
type: "file",
onChange: handleChange,
disabled,
accept,
"data-test-id": "upload-button-input"
}), /* @__PURE__ */ jsxRuntime.jsx("label", {
htmlFor: id,
className: "UploadButton-label",
children: /* @__PURE__ */ jsxRuntime.jsx(Button, {
...rest,
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
})
tabIndex: disabled ? -1 : 0,
role: "button",
onKeyDown: handleKeyDown,
onClick: handleClick,
children
})
]
})]
});
};
// src/IconButton.tsx
var import_react_slot2 = require("@radix-ui/react-slot");
var import_classix4 = require("classix");
var import_react3 = require("react");
var import_Button2 = require("./styles/Button.css");
var import_jsx_runtime = require("react/jsx-runtime");
var IconButtonComponent = (0, import_react3.forwardRef)((props, ref) => {
const IconButtonComponent = react.forwardRef((props, ref) => {
const {

@@ -270,4 +207,4 @@ icon,

className,
size = "normal" /* NORMAL */,
kind = "minimal" /* MINIMAL */,
size = IconButtonSize.NORMAL,
kind = ButtonKind.MINIMAL,
disabled = false,

@@ -279,13 +216,5 @@ asChild = false,

} = props;
const Component = asChild ? import_react_slot2.Slot : "button";
const classes = (0, import_classix4.cx)(
"IconButton",
"Button",
"Button--icon",
`Button--${kind}`,
disabled && "Button--disabled",
size && `Button--${size}`,
className
);
const clonedIcon = (0, import_react3.cloneElement)(icon, {
const Component = asChild ? reactSlot.Slot : "button";
const classes = classix.cx("IconButton", "Button", "Button--icon", `Button--${kind}`, disabled && "Button--disabled", size && `Button--${size}`, className);
const clonedIcon = react.cloneElement(icon, {
key: "icon",

@@ -296,4 +225,4 @@ size: icon.props.size || "medium",

const renderChildren = () => {
if (asChild && (0, import_react3.isValidElement)(children)) {
return (0, import_react3.cloneElement)(children, void 0, clonedIcon);
if (asChild && react.isValidElement(children)) {
return react.cloneElement(children, void 0, clonedIcon);
}

@@ -317,3 +246,3 @@ return clonedIcon;

};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
className: classes,

@@ -329,15 +258,12 @@ ref,

IconButtonComponent.displayName = "IconButton";
var IconButton = (0, import_react3.memo)(IconButtonComponent);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Button,
ButtonGroup,
ButtonGroupSpacing,
ButtonKind,
ButtonSize,
ButtonType,
IconButton,
IconButtonSize,
UploadButton
});
const IconButton = react.memo(IconButtonComponent);
exports.Button = Button;
exports.ButtonGroup = ButtonGroup;
exports.ButtonGroupSpacing = ButtonGroupSpacing;
exports.ButtonKind = ButtonKind;
exports.ButtonSize = ButtonSize;
exports.ButtonType = ButtonType;
exports.IconButton = IconButton;
exports.IconButtonSize = IconButtonSize;
exports.UploadButton = UploadButton;
//# sourceMappingURL=index.js.map
/// <reference types="react" />
import type { ButtonProps } from './';
import type { ButtonProps } from './Button';
declare type UploadButtonProps = ButtonProps & {

@@ -4,0 +4,0 @@ onSelect(file?: File | null): void;

{
"name": "@launchpad-ui/button",
"version": "0.5.0",
"version": "0.6.0",
"status": "beta",

@@ -25,3 +25,3 @@ "publishConfig": {

"./package.json": "./package.json",
"./styles/*": "./dist/styles/*"
"./style.css": "./dist/style.css"
},

@@ -43,3 +43,3 @@ "source": "src/index.ts",

"scripts": {
"build": "tsc --project tsconfig.build.json && node ../../scripts/build.js",
"build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
"clean": "rm -rf dist",

@@ -46,0 +46,0 @@ "e2e": "playwright test --config=../../playwright.config.ct.ts",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc