Socket
Socket
Sign inDemoInstall

@uiw/react-button

Package Overview
Dependencies
Maintainers
2
Versions
172
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-button - npm Package Compare versions

Comparing version 5.0.0-bate-1 to 5.0.0-bate-10

cjs/style/theme.d.ts
cjs/style/theme.js
cjs/style/theme.js.map
esm/style/theme.d.ts
esm/style/theme.js
esm/style/theme.js.map
src/style/theme.ts

2

cjs/index.d.ts

@@ -29,4 +29,4 @@ import React from 'react';

/**@internal */
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "focus" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "focus" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
export default Button;
//# sourceMappingURL=index.d.ts.map

57

cjs/index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {

@@ -10,11 +9,6 @@ value: true

exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _style = require("./style");
Object.keys(_style).forEach(function (key) {

@@ -31,31 +25,29 @@ if (key === "default" || key === "__esModule") return;

});
var _reactIcon = require("@uiw/react-icon");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "disabled", "active", "loading", "block", "basic", "htmlType", "type", "size", "icon", "className", "children"];
/**@internal */
var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-btn' : _props$prefixCls,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$active = props.active,
active = _props$active === void 0 ? false : _props$active,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$block = props.block,
block = _props$block === void 0 ? false : _props$block,
_props$basic = props.basic,
basic = _props$basic === void 0 ? false : _props$basic,
_props$htmlType = props.htmlType,
htmlType = _props$htmlType === void 0 ? 'button' : _props$htmlType,
_props$type = props.type,
type = _props$type === void 0 ? 'light' : _props$type,
_props$size = props.size,
size = _props$size === void 0 ? 'default' : _props$size,
icon = props.icon,
className = props.className,
children = props.children,
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
prefixCls = _props$prefixCls === void 0 ? 'w-btn' : _props$prefixCls,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$active = props.active,
active = _props$active === void 0 ? false : _props$active,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$block = props.block,
block = _props$block === void 0 ? false : _props$block,
_props$basic = props.basic,
basic = _props$basic === void 0 ? false : _props$basic,
_props$htmlType = props.htmlType,
htmlType = _props$htmlType === void 0 ? 'button' : _props$htmlType,
_props$type = props.type,
type = _props$type === void 0 ? 'light' : _props$type,
_props$size = props.size,
size = _props$size === void 0 ? 'default' : _props$size,
icon = props.icon,
className = props.className,
children = props.children,
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
var cls = [className, prefixCls, size ? "".concat(prefixCls, "-size-").concat(size) : null, type ? "".concat(prefixCls, "-").concat(type) : null, basic ? "".concat(prefixCls, "-basic") : null, loading ? "".concat(prefixCls, "-loading") : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim();

@@ -78,3 +70,5 @@ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ButtonStyleWarp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {

},
children: [icon, children && _react["default"].Children.map(children, function (child) {
children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon.IconStyleBase, {
children: icon
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {}), children && _react["default"].Children.map(children, function (child) {
if (!child) return child;

@@ -88,5 +82,4 @@ if ( /*#__PURE__*/_react["default"].isValidElement(child)) return child;

});
var _default = Button;
exports["default"] = _default;
//# sourceMappingURL=index.js.map

92

cjs/style/base.d.ts
import { ThemeVariantValueOptions } from '@uiw/utils';
import { ButtonType, ButtonSize } from '../';
export declare const ButtonStyleTheme: {
colorButtonStyleBase: string;
fontSizeSmall: string;
fontSizeDefault: string;
fontSizeLarge: string;
minHeightButtonSmall: string;
minHeightButtonDefault: string;
minHeightButtonLarge: string;
fontSizeButtonIconSmall: string;
fontSizeButtonIcontDefault: string;
fontSizeButtonIconLarge: string;
borderColorLinghtLoadingBefore: string;
colorButtonLoadingBefore: string;
colorPrimary: string;
backgroundColorPrimary: string;
backgroundColorPrimaryHover: string;
boxShadowColorPrimaryFocus: string;
backgroundColorPrimaryActive: string;
backgroundColorPrimaryDisabled: string;
boxShadowColorPrimaryBasic: string;
backgroundColorPrimaryBasicHover: string;
colorPrimaryBasicDisabled: string;
backgroundColorPrimaryBasicActive: string;
colorSuccess: string;
backgroundColorSuccess: string;
backgroundColorSuccessHover: string;
boxShadowColorSuccessFocus: string;
backgroundColorSuccessActive: string;
backgroundColorSuccessDisabled: string;
boxShadowColorSuccessBasic: string;
backgroundColorSuccessBasicHover: string;
colorSuccessBasicDisabled: string;
backgroundColorSuccessBasicActive: string;
colorWarning: string;
backgroundColorWarning: string;
backgroundColorWarningHover: string;
boxShadowColorWarningFocus: string;
backgroundColorWarningActive: string;
backgroundColorWarningDisabled: string;
boxShadowColorWarningBasic: string;
backgroundColorWarningBasicHover: string;
colorWarningBasicDisabled: string;
backgroundColorWarningBasicActive: string;
colorError: string;
backgroundColorError: string;
backgroundColorErrorHover: string;
boxShadowColorErrorFocus: string;
backgroundColorErrorActive: string;
backgroundColorErrorDisabled: string;
boxShadowColorErrorBasic: string;
backgroundColorErrorBasicHover: string;
colorErrorBasicDisabled: string;
backgroundColorErrorBasicActive: string;
colorLight: string;
backgroundColorLight: string;
backgroundColorLightHover: string;
boxShadowColorLightFocus: string;
backgroundColorLightActive: string;
backgroundColorLightDisabled: string;
boxShadowColorLightBasic: string;
backgroundColorLightBasicHover: string;
colorLightBasicDisabled: string;
colorLightBasic: string;
backgroundColorLightBasicActive: string;
boxShadowColorLightDefault: string;
boxShadowColorLight4: string;
colorDark: string;
backgroundColorDark: string;
backgroundColorDarkHover: string;
boxShadowColorDarkFocus: string;
backgroundColorDarkActive: string;
backgroundColorDarkDisabled: string;
boxShadowColorDarkBasic: string;
backgroundColorDarkBasicHover: string;
colorDarkBasicDisabled: string;
backgroundColorDarkBasicActive: string;
colorLink: string;
colorLinkHover: string;
backgroundColorLink: string;
backgroundColorLinkHover: string;
boxShadowColorLinkFocus: string;
backgroundColorLinkActive: string;
backgroundColorLinkDisabled: string;
boxShadowColorLinkBasic: string;
backgroundColorLinkBasicHover: string;
colorLinkBasicDisabled: string;
backgroundColorLinkBasicActive: string;
colorLinkNotDisabled: string;
colorLinkNotDisabledActive: string;
};
import { ButtonStyleTheme } from './theme';
export * from './theme';
export interface ButtonStyleBaseProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ThemeVariantValueOptions<typeof ButtonStyleTheme> {

@@ -94,0 +6,0 @@ param?: {

195

cjs/style/base.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ButtonStyleTheme = exports.ButtonStyleBaseWarning = exports.ButtonStyleBaseSuccess = exports.ButtonStyleBasePrimary = exports.ButtonStyleBaseLink = exports.ButtonStyleBaseLight = exports.ButtonStyleBaseDark = exports.ButtonStyleBaseDangers = exports.ButtonStyleBase = void 0;
var _exportNames = {
ButtonStyleBase: true,
ButtonStyleBasePrimary: true,
ButtonStyleBaseSuccess: true,
ButtonStyleBaseDangers: true,
ButtonStyleBaseDark: true,
ButtonStyleBaseLight: true,
ButtonStyleBaseLink: true,
ButtonStyleBaseWarning: true
};
exports.ButtonStyleBaseWarning = exports.ButtonStyleBaseSuccess = exports.ButtonStyleBasePrimary = exports.ButtonStyleBaseLink = exports.ButtonStyleBaseLight = exports.ButtonStyleBaseDark = exports.ButtonStyleBaseDangers = exports.ButtonStyleBase = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _utils = require("@uiw/utils");
var _Variant = require("./Variant");
var _theme = require("./theme");
Object.keys(_theme).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _theme[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _theme[key];
}
});
});
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
var ButtonStyleTheme = {
colorButtonStyleBase: '#fff',
// 大小设置
fontSizeSmall: '12px',
fontSizeDefault: '14px',
fontSizeLarge: '16px',
// 最小高度
minHeightButtonSmall: '24px',
minHeightButtonDefault: '30px',
minHeightButtonLarge: '36px',
// 按钮中图标大小
fontSizeButtonIconSmall: '14px',
fontSizeButtonIcontDefault: '16px',
fontSizeButtonIconLarge: '20px',
// 边框颜色 + 组件 + 组件属性 + 伪类
borderColorLinghtLoadingBefore: '#666f81',
colorButtonLoadingBefore: '#fff',
// 颜色设置
// Primary
colorPrimary: '#fff',
backgroundColorPrimary: '#008ef0',
backgroundColorPrimaryHover: '#0070bd',
boxShadowColorPrimaryFocus: 'rgba(0, 142, 240, 0.26)',
backgroundColorPrimaryActive: '#00528a',
backgroundColorPrimaryDisabled: '#57baff',
boxShadowColorPrimaryBasic: '#000',
backgroundColorPrimaryBasicHover: '#c7e8ff',
colorPrimaryBasicDisabled: '#24a6ff',
backgroundColorPrimaryBasicActive: '#94d3ff',
// Success
colorSuccess: '#fff',
backgroundColorSuccess: '#28a745',
backgroundColorSuccessHover: '#1e7e34',
boxShadowColorSuccessFocus: 'rgba(40, 167, 69, 0.26)',
backgroundColorSuccessActive: '#145523',
backgroundColorSuccessDisabled: '#5dd879',
boxShadowColorSuccessBasic: '#000',
backgroundColorSuccessBasicHover: '#b7eec4',
colorSuccessBasicDisabled: '#34ce57',
backgroundColorSuccessBasicActive: '#8ee4a2',
// Warning
colorWarning: '#fff',
backgroundColorWarning: '#ffc107',
backgroundColorWarningHover: '#d39e00',
boxShadowColorWarningFocus: 'rgba(255, 193, 7, 0.26)',
backgroundColorWarningActive: '#a07800',
backgroundColorWarningDisabled: '#ffdb6d',
boxShadowColorWarningBasic: '#000',
backgroundColorWarningBasicHover: '#fff7dd',
colorWarningBasicDisabled: '#ffce3a',
backgroundColorWarningBasicActive: '#ffeaaa',
// Error
colorError: '#fff',
backgroundColorError: '#dc3545',
backgroundColorErrorHover: '#bd2130',
boxShadowColorErrorFocus: 'rgba(220, 53, 69, 0.26)',
backgroundColorErrorActive: '#921925',
backgroundColorErrorDisabled: '#eb8c95',
boxShadowColorErrorBasic: '#000',
backgroundColorErrorBasicHover: '#fceced',
colorErrorBasicDisabled: '#e4606d',
backgroundColorErrorBasicActive: '#f4c0c5',
// Light
colorLight: '#393e48',
backgroundColorLight: '#f8f9fa',
backgroundColorLightHover: '#dae0e5',
boxShadowColorLightFocus: 'rgba(248, 249, 250, 0.26)',
backgroundColorLightActive: '#bcc6cf',
backgroundColorLightDisabled: '#ffffff',
boxShadowColorLightBasic: '#000',
backgroundColorLightBasicHover: '#ecedf0',
colorLightBasicDisabled: '#adb3be',
colorLightBasic: '#9199a7',
backgroundColorLightBasicActive: '#d5d8dd',
boxShadowColorLightDefault: 'rgba(0, 0, 0, 0.17)',
boxShadowColorLight4: 'rgba(0, 0, 0, 0.1)',
// Dark
colorDark: '#fff',
backgroundColorDark: '#393e48',
backgroundColorDarkHover: '#22252c',
boxShadowColorDarkFocus: 'rgba(57, 62, 72, 0.26)',
backgroundColorDarkActive: '#0c0d0f',
backgroundColorDarkDisabled: '#666f81',
boxShadowColorDarkBasic: '#000',
backgroundColorDarkBasicHover: '#a2a8b5',
colorDarkBasicDisabled: '#505764',
backgroundColorDarkBasicActive: '#858e9f',
// Link
colorLink: '#008ef0',
colorLinkHover: '#008ef0',
backgroundColorLink: 'transparent',
backgroundColorLinkHover: 'rgba(0, 0, 0, 0)',
boxShadowColorLinkFocus: 'rgba(0, 0, 0, 0)',
backgroundColorLinkActive: 'rgba(0, 0, 0, 0)',
backgroundColorLinkDisabled: 'rgba(51, 51, 51, 0)',
boxShadowColorLinkBasic: '#000',
backgroundColorLinkBasicHover: 'rgba(107, 107, 107, 0)',
colorLinkBasicDisabled: 'rgba(26, 26, 26, 0)',
backgroundColorLinkBasicActive: 'rgba(82, 82, 82, 0)',
colorLinkNotDisabled: '#006ab3',
colorLinkNotDisabledActive: '#002d4d'
var propsTheme = {
defaultTheme: (0, _objectSpread2["default"])({}, _theme.ButtonStyleTheme)
};
exports.ButtonStyleTheme = ButtonStyleTheme;
var ButtonStyleBase = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n padding: 5px 7px;\n position: relative;\n vertical-align: middle;\n text-align: left;\n line-height: ", ";\n font-size: ", ";\n min-width: ", ";\n min-height: ", ";\n text-align: center;\n color: ", ";\n transition: background-color 0.5s, opacity 1s;\n & > *:not(:last-child) {\n margin-right: 5px;\n }\n & + & {\n margin-left: 5px;\n }\n ", "\n ", "\n &[disabled] {\n cursor: not-allowed;\n }\n"])), function (props) {
return (0, _utils.getThemeVariantValue)(props, 'fontSizeDefault');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'fontSizeDefault');
}, function (props) {
return (0, _utils.getThemeVariantValue)(props, 'fontSizeDefault');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'fontSizeDefault');
}, function (props) {
return (0, _utils.getThemeVariantValue)(props, 'minHeightButtonDefault');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'minHeightButtonDefault');
}, function (props) {
return (0, _utils.getThemeVariantValue)(props, 'minHeightButtonDefault');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'minHeightButtonDefault');
}, function (props) {
return (0, _utils.getThemeVariantValue)(props, 'colorButtonStyleBase');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorButtonStyleBase');
}, function (props) {
var _props$param;
return ((_props$param = props.param) === null || _props$param === void 0 ? void 0 : _props$param.block) && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: block;\n width: 100%;\n }\n & + && {\n margin-left: 0;\n }\n "])));
}, function (props) {
var _props$param2;
return ((_props$param2 = props.param) === null || _props$param2 === void 0 ? void 0 : _props$param2.disabled) && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: not-allowed;\n "])));
});
exports.ButtonStyleBase = ButtonStyleBase;

@@ -175,10 +84,9 @@ var ButtonStyleBasePrimary = (0, _styledComponents["default"])(ButtonStyleBase)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (props) {

var _ref = props.param || {},
focus = _ref.focus,
basic = _ref.basic,
active = _ref.active,
disabled = _ref.disabled;
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), (0, _Variant.buttonVariant)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
focus = _ref.focus,
basic = _ref.basic,
active = _ref.active,
disabled = _ref.disabled;
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), (0, _Variant.buttonVariant)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
type: 'Light'
})), (0, _Variant.getCommonCss)("\n outline: 0;\n box-shadow: inset 0 1px 0 0 ".concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n inset 1px -1px 0 0 ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n inset -1px 0px 0 0 ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n 0 0 0 2px ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLight4'), ";\n "), '&:focus', focus), basic && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)(props, 'colorLightBasic'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), focus && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault')), (0, _utils.getThemeVariantValue)(props, 'backgroundColorLightBasicHover'), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasic'), ";\n background-color: ").concat((0, _utils.getThemeVariantValue)(props, 'backgroundColorLightBasicActive'), " !important;\n background-image: none;\n "), '&:active', active), (0, _Variant.getCommonCss)("\n background-color: transparent !important;\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasicDisabled'), ";\n "), '&[disabled]', disabled)), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasicDisabled'), ";\n z-index: 0;\n "), '&[disabled]', disabled), function () {
})), (0, _Variant.getCommonCss)("\n outline: 0;\n box-shadow: inset 0 1px 0 0 ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n inset 1px -1px 0 0 ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n inset -1px 0px 0 0 ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n 0 0 0 2px ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLight4'), ";\n "), '&:focus', focus), basic && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasic'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), focus && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault')), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'backgroundColorLightBasicHover'), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasic'), ";\n background-color: ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'backgroundColorLightBasicActive'), " !important;\n background-image: none;\n "), '&:active', active), (0, _Variant.getCommonCss)("\n background-color: transparent !important;\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasicDisabled'), ";\n "), '&[disabled]', disabled)), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasicDisabled'), ";\n z-index: 0;\n "), '&[disabled]', disabled), function () {
return (0, _Variant.getIconAndSizeCss)(props);

@@ -192,7 +100,6 @@ }, function () {

var _ref2 = props.param || {},
disabled = _ref2.disabled;
disabled = _ref2.disabled;
return (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n color: ", " !important;\n &:hover:not([disabled]) {\n color: ", ";\n text-decoration: underline;\n }\n ", "\n &[disabled] {\n z-index: 0;\n }\n ", "\n "])), (0, _Variant.buttonVariant)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
type: 'Link'
})), (0, _utils.getThemeVariantValue)(props, 'colorLink'), (0, _utils.getThemeVariantValue)(props, 'colorLinkNotDisabled'), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLinkNotDisabledActive'), ";\n box-shadow: none;\n text-decoration: underline;\n "), '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 0;\n "]))));
})), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLink'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLinkNotDisabled'), (0, _Variant.getCommonCss)("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLinkNotDisabledActive'), ";\n box-shadow: none;\n text-decoration: underline;\n "), '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 0;\n "]))));
});

@@ -206,26 +113,2 @@ exports.ButtonStyleBaseLink = ButtonStyleBaseLink;

exports.ButtonStyleBaseWarning = ButtonStyleBaseWarning;
ButtonStyleBase.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBasePrimary.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseSuccess.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseDangers.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseDark.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseLight.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseLink.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
ButtonStyleBaseWarning.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, ButtonStyleTheme)
};
//# sourceMappingURL=base.js.map

13

cjs/style/index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {

@@ -12,13 +11,6 @@ value: true

exports.ButtonStyleWarp = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Variant = require("./Variant");
var _base = require("./base");
Object.keys(_base).forEach(function (key) {

@@ -35,5 +27,3 @@ if (key === "default" || key === "__esModule") return;

});
var _templateObject;
var ButtonStyleWarp = (0, _styledComponents["default"])(_base.ButtonStyleBase)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n ", "\n"])), _Variant.buttonTypes, function (props) {

@@ -45,5 +35,2 @@ return (0, _Variant.getIconAndSizeCss)(props);

exports.ButtonStyleWarp = ButtonStyleWarp;
ButtonStyleWarp.defaultProps = {
defaultTheme: (0, _objectSpread2["default"])({}, _base.ButtonStyleTheme)
};
//# sourceMappingURL=index.js.map

109

cjs/style/Variant.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {

@@ -9,15 +8,12 @@ value: true

exports.getloadingCss = exports.getIconAndSizeCss = exports.getCommonCss = exports.buttonVariant = exports.buttonTypes = exports.buttonSizeCss = exports.buttonSize = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _utils = require("@uiw/utils");
var _styledComponents = require("styled-components");
var _reactIcon = require("@uiw/react-icon");
var _theme = require("./theme");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
var propsTheme = {
defaultTheme: (0, _objectSpread2["default"])({}, _theme.ButtonStyleTheme)
};
/**

@@ -34,38 +30,31 @@ * @description: 生成公共css

};
exports.getCommonCss = getCommonCss;
var buttonVariant = function buttonVariant(options) {
var type = options.type,
param = options.param;
param = options.param;
var _ref = param || {},
basic = _ref.basic,
focus = _ref.focus,
active = _ref.active,
disabled = _ref.disabled;
var color = (0, _utils.getThemeVariantValue)(options, "color".concat(type));
var backgroundColor = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type));
var backgroundColorHover = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type, "Hover"));
var boxShadowColorFocus = (0, _utils.getThemeVariantValue)(options, "boxShadowColor".concat(type, "Focus"));
var backgroundColorActive = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type, "Active"));
var backgroundColorDisabled = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type, "Disabled"));
var boxShadowColorBasic = (0, _utils.getThemeVariantValue)(options, "boxShadowColor".concat(type, "Basic"));
var backgroundColorBasicHover = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type, "BasicHover"));
var colorBasicDisabled = (0, _utils.getThemeVariantValue)(options, "color".concat(type, "BasicDisabled"));
var backgroundColorBasicActive = (0, _utils.getThemeVariantValue)(options, "backgroundColor".concat(type, "BasicActive"));
basic = _ref.basic,
focus = _ref.focus,
active = _ref.active,
disabled = _ref.disabled;
var color = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "color".concat(type));
var backgroundColor = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type));
var backgroundColorHover = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type, "Hover"));
var boxShadowColorFocus = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "boxShadowColor".concat(type, "Focus"));
var backgroundColorActive = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type, "Active"));
var backgroundColorDisabled = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type, "Disabled"));
var boxShadowColorBasic = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "boxShadowColor".concat(type, "Basic"));
var backgroundColorBasicHover = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type, "BasicHover"));
var colorBasicDisabled = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "color".concat(type, "BasicDisabled"));
var backgroundColorBasicActive = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), propsTheme), "backgroundColor".concat(type, "BasicActive"));
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background-color: ", ";\n z-index: 1;\n &:hover {\n background-color: ", ";\n z-index: 2;\n }\n ", "\n ", "\n &.disabled,\n &[disabled] {\n background-color: ", ";\n z-index: 0;\n }\n ", "\n ", "\n "])), color, backgroundColor, backgroundColorHover, getCommonCss("\n outline: 0;\n box-shadow: 0 0 0 2px ".concat(boxShadowColorFocus, ";\n "), '&:focus', focus), getCommonCss("\n color: ".concat(color, ";\n background-color: ").concat(backgroundColorActive, ";\n background-image: none;\n "), ' &:active', active), backgroundColorDisabled, getCommonCss("\n background-color: ".concat(backgroundColorDisabled, ";\n z-index: 0;\n "), ' &[disabled]', disabled), basic && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n background-color: transparent !important;\n box-shadow: inset 0 0 0 ", ";\n color: ", ";\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n }\n "])), boxShadowColorBasic, backgroundColor, backgroundColorBasicHover, getCommonCss("\n color: ".concat(backgroundColor, ";\n background-color: ").concat(backgroundColorBasicActive, " !important;\n background-image: none;\n "), ' &:active', active), getCommonCss("\n background-color: transparent !important;\n color: ".concat(colorBasicDisabled, ";\n "), '&[disabled]', disabled)));
};
exports.buttonVariant = buttonVariant;
var buttonTypes = function buttonTypes(props) {
var _ref2 = props.param || {},
type = _ref2.type,
focus = _ref2.focus,
basic = _ref2.basic,
active = _ref2.active,
disabled = _ref2.disabled;
type = _ref2.type,
focus = _ref2.focus,
basic = _ref2.basic,
active = _ref2.active,
disabled = _ref2.disabled;
switch (type) {

@@ -76,3 +65,2 @@ case 'primary':

}));
case 'success':

@@ -82,3 +70,2 @@ return buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {

}));
case 'danger':

@@ -88,3 +75,2 @@ return buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {

}));
case 'dark':

@@ -94,13 +80,10 @@ return buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {

}));
case 'light':
return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
type: 'Light'
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 ".concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n inset 1px -1px 0 0 ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n inset -1px 0px 0 0 ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), ",\n 0 0 0 2px ").concat((0, _utils.getThemeVariantValue)(props, 'boxShadowColorLight4'), ";\n "), '&:focus', focus), basic && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)(props, 'colorLightBasic'), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault'), focus && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), (0, _utils.getThemeVariantValue)(props, 'boxShadowColorLightDefault')), (0, _utils.getThemeVariantValue)(props, 'backgroundColorLightBasicHover'), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasic'), ";\n background-color: ").concat((0, _utils.getThemeVariantValue)(props, 'backgroundColorLightBasicActive'), " !important;\n background-image: none;\n "), '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasicDisabled'), ";\n "), '&[disabled]', disabled)), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLightBasicDisabled'), ";\n z-index: 0;\n "), '&[disabled]', disabled));
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n inset 1px -1px 0 0 ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n inset -1px 0px 0 0 ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), ",\n 0 0 0 2px ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLight4'), ";\n "), '&:focus', focus), basic && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasic'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault'), focus && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'boxShadowColorLightDefault')), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'backgroundColorLightBasicHover'), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasic'), ";\n background-color: ").concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'backgroundColorLightBasicActive'), " !important;\n background-image: none;\n "), '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasicDisabled'), ";\n "), '&[disabled]', disabled)), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLightBasicDisabled'), ";\n z-index: 0;\n "), '&[disabled]', disabled));
case 'link':
return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n color: ", " !important;\n &:hover:not([disabled]) {\n color: ", ";\n text-decoration: underline;\n }\n ", "\n &[disabled] {\n z-index: 0;\n }\n ", "\n "])), buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
type: 'Link'
})), (0, _utils.getThemeVariantValue)(props, 'colorLink'), (0, _utils.getThemeVariantValue)(props, 'colorLinkNotDisabled'), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)(props, 'colorLinkNotDisabledActive'), ";\n box-shadow: none;\n text-decoration: underline;\n "), '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 0;\n "]))));
})), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLink'), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLinkNotDisabled'), getCommonCss("\n color: ".concat((0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorLinkNotDisabledActive'), ";\n box-shadow: none;\n text-decoration: underline;\n "), '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 0;\n "]))));
case 'warning':

@@ -110,3 +93,2 @@ return buttonVariant((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {

}));
default:

@@ -116,49 +98,37 @@ return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));

};
exports.buttonTypes = buttonTypes;
var getloadingCss = function getloadingCss(props) {
return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n "])), function () {
var _props$param;
return ((_props$param = props.param) === null || _props$param === void 0 ? void 0 : _props$param.loading) && props.param.type === 'light' && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n &::before {\n border: 1.2px solid ", ";\n }\n "])), function () {
return (0, _utils.getThemeVariantValue)(props, 'borderColorLinghtLoadingBefore');
return ((_props$param = props.param) === null || _props$param === void 0 ? void 0 : _props$param.loading) && props.param.type === 'light' && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n &::before {\n border: 1.2px solid\n ", ";\n }\n "])), function () {
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'borderColorLinghtLoadingBefore');
});
}, function () {
var _props$param2;
return ((_props$param2 = props.param) === null || _props$param2 === void 0 ? void 0 : _props$param2.loading) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n &::before {\n content: '';\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n border: 1.2px solid ", ";\n color: ", ";\n margin: 0 3px 0 0;\n clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%);\n animation: rotate 0.5s linear infinite;\n @keyframes rotate {\n from {\n transform: rotateZ(0deg);\n }\n to {\n transform: rotateZ(360deg);\n }\n }\n }\n "])), function () {
return (0, _utils.getThemeVariantValue)(props, 'colorButtonLoadingBefore');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorButtonLoadingBefore');
}, function () {
return (0, _utils.getThemeVariantValue)(props, 'colorButtonLoadingBefore');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'colorButtonLoadingBefore');
});
});
};
exports.getloadingCss = getloadingCss;
var buttonSize = function buttonSize(fontSize, iconSize, lineHeight, minHeight) {
return (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n line-height: ", ";\n min-height: ", ";\n ", " {\n font-size: ", ";\n }\n "])), fontSize, lineHeight, minHeight, _reactIcon.IconStyleBase, iconSize);
};
exports.buttonSize = buttonSize;
var getSize = function getSize(props, type) {
var fontSize = (0, _utils.getThemeVariantValue)(props, "fontSize".concat(type));
var minHeight = (0, _utils.getThemeVariantValue)(props, "minHeightButton".concat(type));
var fontSizeIcon = (0, _utils.getThemeVariantValue)(props, "fontSizeButtonIcon".concat(type));
var fontSize = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), "fontSize".concat(type));
var minHeight = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), "minHeightButton".concat(type));
var fontSizeIcon = (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), "fontSizeButtonIcon".concat(type));
return buttonSize("".concat(fontSize), "".concat(fontSizeIcon), fontSize, "".concat(minHeight));
};
var buttonSizeCss = function buttonSizeCss(props) {
var _ref3 = props.param || {},
size = _ref3.size;
size = _ref3.size;
switch (size) {
case 'large':
return getSize(props, 'Large');
case 'small':
return (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 6px;\n min-width: ", ";\n ", "\n "])), (0, _utils.getThemeVariantValue)(props, 'minHeightButtonSmall'), getSize(props, 'Small'));
return (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 6px;\n min-width: ", ";\n ", "\n "])), (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'minHeightButtonSmall'), getSize(props, 'Small'));
default:

@@ -168,8 +138,6 @@ return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([""])));

};
exports.buttonSizeCss = buttonSizeCss;
var getIconAndSizeCss = function getIconAndSizeCss(props) {
return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n ", " {\n font-size: ", ";\n }\n ", "\n ", ":not(:last-child) {\n margin-right: 5px;\n }\n "])), _reactIcon.IconStyleBase, function () {
return (0, _utils.getThemeVariantValue)(props, 'fontSizeButtonIcontDefault');
return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), propsTheme), 'fontSizeButtonIcontDefault');
}, function () {

@@ -179,4 +147,3 @@ return buttonSizeCss(props);

};
exports.getIconAndSizeCss = getIconAndSizeCss;
//# sourceMappingURL=Variant.js.map

2

esm/index.d.ts

@@ -29,4 +29,4 @@ import React from 'react';

/**@internal */
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "focus" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "focus" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
export default Button;
//# sourceMappingURL=index.d.ts.map

35

esm/index.js

@@ -6,24 +6,23 @@ import _extends from "@babel/runtime/helpers/extends";

import { ButtonStyleWarp, ButtonStyleBaseLight } from './style';
import { IconStyleBase } from '@uiw/react-icon';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export * from './style';
/**@internal */
var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
var {
prefixCls = 'w-btn',
disabled = false,
active = false,
loading = false,
block = false,
basic = false,
htmlType = 'button',
type = 'light',
size = 'default',
icon,
className,
children
} = props,
others = _objectWithoutPropertiesLoose(props, _excluded);
prefixCls = 'w-btn',
disabled = false,
active = false,
loading = false,
block = false,
basic = false,
htmlType = 'button',
type = 'light',
size = 'default',
icon,
className,
children
} = props,
others = _objectWithoutPropertiesLoose(props, _excluded);
var cls = [className, prefixCls, size ? prefixCls + "-size-" + size : null, type ? prefixCls + "-" + type : null, basic ? prefixCls + "-basic" : null, loading ? prefixCls + "-loading" : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim();

@@ -46,3 +45,5 @@ return /*#__PURE__*/_jsxs(ButtonStyleWarp, _extends({}, others, {

},
children: [icon, children && React.Children.map(children, child => {
children: [icon ? /*#__PURE__*/_jsx(IconStyleBase, {
children: icon
}) : /*#__PURE__*/_jsx(React.Fragment, {}), children && React.Children.map(children, child => {
if (!child) return child;

@@ -49,0 +50,0 @@ if ( /*#__PURE__*/React.isValidElement(child)) return child;

92

esm/style/base.d.ts
import { ThemeVariantValueOptions } from '@uiw/utils';
import { ButtonType, ButtonSize } from '../';
export declare const ButtonStyleTheme: {
colorButtonStyleBase: string;
fontSizeSmall: string;
fontSizeDefault: string;
fontSizeLarge: string;
minHeightButtonSmall: string;
minHeightButtonDefault: string;
minHeightButtonLarge: string;
fontSizeButtonIconSmall: string;
fontSizeButtonIcontDefault: string;
fontSizeButtonIconLarge: string;
borderColorLinghtLoadingBefore: string;
colorButtonLoadingBefore: string;
colorPrimary: string;
backgroundColorPrimary: string;
backgroundColorPrimaryHover: string;
boxShadowColorPrimaryFocus: string;
backgroundColorPrimaryActive: string;
backgroundColorPrimaryDisabled: string;
boxShadowColorPrimaryBasic: string;
backgroundColorPrimaryBasicHover: string;
colorPrimaryBasicDisabled: string;
backgroundColorPrimaryBasicActive: string;
colorSuccess: string;
backgroundColorSuccess: string;
backgroundColorSuccessHover: string;
boxShadowColorSuccessFocus: string;
backgroundColorSuccessActive: string;
backgroundColorSuccessDisabled: string;
boxShadowColorSuccessBasic: string;
backgroundColorSuccessBasicHover: string;
colorSuccessBasicDisabled: string;
backgroundColorSuccessBasicActive: string;
colorWarning: string;
backgroundColorWarning: string;
backgroundColorWarningHover: string;
boxShadowColorWarningFocus: string;
backgroundColorWarningActive: string;
backgroundColorWarningDisabled: string;
boxShadowColorWarningBasic: string;
backgroundColorWarningBasicHover: string;
colorWarningBasicDisabled: string;
backgroundColorWarningBasicActive: string;
colorError: string;
backgroundColorError: string;
backgroundColorErrorHover: string;
boxShadowColorErrorFocus: string;
backgroundColorErrorActive: string;
backgroundColorErrorDisabled: string;
boxShadowColorErrorBasic: string;
backgroundColorErrorBasicHover: string;
colorErrorBasicDisabled: string;
backgroundColorErrorBasicActive: string;
colorLight: string;
backgroundColorLight: string;
backgroundColorLightHover: string;
boxShadowColorLightFocus: string;
backgroundColorLightActive: string;
backgroundColorLightDisabled: string;
boxShadowColorLightBasic: string;
backgroundColorLightBasicHover: string;
colorLightBasicDisabled: string;
colorLightBasic: string;
backgroundColorLightBasicActive: string;
boxShadowColorLightDefault: string;
boxShadowColorLight4: string;
colorDark: string;
backgroundColorDark: string;
backgroundColorDarkHover: string;
boxShadowColorDarkFocus: string;
backgroundColorDarkActive: string;
backgroundColorDarkDisabled: string;
boxShadowColorDarkBasic: string;
backgroundColorDarkBasicHover: string;
colorDarkBasicDisabled: string;
backgroundColorDarkBasicActive: string;
colorLink: string;
colorLinkHover: string;
backgroundColorLink: string;
backgroundColorLinkHover: string;
boxShadowColorLinkFocus: string;
backgroundColorLinkActive: string;
backgroundColorLinkDisabled: string;
boxShadowColorLinkBasic: string;
backgroundColorLinkBasicHover: string;
colorLinkBasicDisabled: string;
backgroundColorLinkBasicActive: string;
colorLinkNotDisabled: string;
colorLinkNotDisabledActive: string;
};
import { ButtonStyleTheme } from './theme';
export * from './theme';
export interface ButtonStyleBaseProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ThemeVariantValueOptions<typeof ButtonStyleTheme> {

@@ -94,0 +6,0 @@ param?: {

143

esm/style/base.js

@@ -0,118 +1,17 @@

import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
import styled, { css } from 'styled-components';
import { getThemeVariantValue } from '@uiw/utils';
import { buttonVariant, getCommonCss, getloadingCss, getIconAndSizeCss } from './Variant';
export var ButtonStyleTheme = {
colorButtonStyleBase: '#fff',
// 大小设置
fontSizeSmall: '12px',
fontSizeDefault: '14px',
fontSizeLarge: '16px',
// 最小高度
minHeightButtonSmall: '24px',
minHeightButtonDefault: '30px',
minHeightButtonLarge: '36px',
// 按钮中图标大小
fontSizeButtonIconSmall: '14px',
fontSizeButtonIcontDefault: '16px',
fontSizeButtonIconLarge: '20px',
// 边框颜色 + 组件 + 组件属性 + 伪类
borderColorLinghtLoadingBefore: '#666f81',
colorButtonLoadingBefore: '#fff',
// 颜色设置
// Primary
colorPrimary: '#fff',
backgroundColorPrimary: '#008ef0',
backgroundColorPrimaryHover: '#0070bd',
boxShadowColorPrimaryFocus: 'rgba(0, 142, 240, 0.26)',
backgroundColorPrimaryActive: '#00528a',
backgroundColorPrimaryDisabled: '#57baff',
boxShadowColorPrimaryBasic: '#000',
backgroundColorPrimaryBasicHover: '#c7e8ff',
colorPrimaryBasicDisabled: '#24a6ff',
backgroundColorPrimaryBasicActive: '#94d3ff',
// Success
colorSuccess: '#fff',
backgroundColorSuccess: '#28a745',
backgroundColorSuccessHover: '#1e7e34',
boxShadowColorSuccessFocus: 'rgba(40, 167, 69, 0.26)',
backgroundColorSuccessActive: '#145523',
backgroundColorSuccessDisabled: '#5dd879',
boxShadowColorSuccessBasic: '#000',
backgroundColorSuccessBasicHover: '#b7eec4',
colorSuccessBasicDisabled: '#34ce57',
backgroundColorSuccessBasicActive: '#8ee4a2',
// Warning
colorWarning: '#fff',
backgroundColorWarning: '#ffc107',
backgroundColorWarningHover: '#d39e00',
boxShadowColorWarningFocus: 'rgba(255, 193, 7, 0.26)',
backgroundColorWarningActive: '#a07800',
backgroundColorWarningDisabled: '#ffdb6d',
boxShadowColorWarningBasic: '#000',
backgroundColorWarningBasicHover: '#fff7dd',
colorWarningBasicDisabled: '#ffce3a',
backgroundColorWarningBasicActive: '#ffeaaa',
// Error
colorError: '#fff',
backgroundColorError: '#dc3545',
backgroundColorErrorHover: '#bd2130',
boxShadowColorErrorFocus: 'rgba(220, 53, 69, 0.26)',
backgroundColorErrorActive: '#921925',
backgroundColorErrorDisabled: '#eb8c95',
boxShadowColorErrorBasic: '#000',
backgroundColorErrorBasicHover: '#fceced',
colorErrorBasicDisabled: '#e4606d',
backgroundColorErrorBasicActive: '#f4c0c5',
// Light
colorLight: '#393e48',
backgroundColorLight: '#f8f9fa',
backgroundColorLightHover: '#dae0e5',
boxShadowColorLightFocus: 'rgba(248, 249, 250, 0.26)',
backgroundColorLightActive: '#bcc6cf',
backgroundColorLightDisabled: '#ffffff',
boxShadowColorLightBasic: '#000',
backgroundColorLightBasicHover: '#ecedf0',
colorLightBasicDisabled: '#adb3be',
colorLightBasic: '#9199a7',
backgroundColorLightBasicActive: '#d5d8dd',
boxShadowColorLightDefault: 'rgba(0, 0, 0, 0.17)',
boxShadowColorLight4: 'rgba(0, 0, 0, 0.1)',
// Dark
colorDark: '#fff',
backgroundColorDark: '#393e48',
backgroundColorDarkHover: '#22252c',
boxShadowColorDarkFocus: 'rgba(57, 62, 72, 0.26)',
backgroundColorDarkActive: '#0c0d0f',
backgroundColorDarkDisabled: '#666f81',
boxShadowColorDarkBasic: '#000',
backgroundColorDarkBasicHover: '#a2a8b5',
colorDarkBasicDisabled: '#505764',
backgroundColorDarkBasicActive: '#858e9f',
// Link
colorLink: '#008ef0',
colorLinkHover: '#008ef0',
backgroundColorLink: 'transparent',
backgroundColorLinkHover: 'rgba(0, 0, 0, 0)',
boxShadowColorLinkFocus: 'rgba(0, 0, 0, 0)',
backgroundColorLinkActive: 'rgba(0, 0, 0, 0)',
backgroundColorLinkDisabled: 'rgba(51, 51, 51, 0)',
boxShadowColorLinkBasic: '#000',
backgroundColorLinkBasicHover: 'rgba(107, 107, 107, 0)',
colorLinkBasicDisabled: 'rgba(26, 26, 26, 0)',
backgroundColorLinkBasicActive: 'rgba(82, 82, 82, 0)',
colorLinkNotDisabled: '#006ab3',
colorLinkNotDisabledActive: '#002d4d'
import { ButtonStyleTheme } from './theme';
export * from './theme';
var propsTheme = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
var ButtonStyleBase = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n padding: 5px 7px;\n position: relative;\n vertical-align: middle;\n text-align: left;\n line-height: ", ";\n font-size: ", ";\n min-width: ", ";\n min-height: ", ";\n text-align: center;\n color: ", ";\n transition: background-color 0.5s, opacity 1s;\n & > *:not(:last-child) {\n margin-right: 5px;\n }\n & + & {\n margin-left: 5px;\n }\n ", "\n ", "\n &[disabled] {\n cursor: not-allowed;\n }\n"])), props => getThemeVariantValue(props, 'fontSizeDefault'), props => getThemeVariantValue(props, 'fontSizeDefault'), props => getThemeVariantValue(props, 'minHeightButtonDefault'), props => getThemeVariantValue(props, 'minHeightButtonDefault'), props => getThemeVariantValue(props, 'colorButtonStyleBase'), props => {
var ButtonStyleBase = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n padding: 5px 7px;\n position: relative;\n vertical-align: middle;\n text-align: left;\n line-height: ", ";\n font-size: ", ";\n min-width: ", ";\n min-height: ", ";\n text-align: center;\n color: ", ";\n transition: background-color 0.5s, opacity 1s;\n & > *:not(:last-child) {\n margin-right: 5px;\n }\n & + & {\n margin-left: 5px;\n }\n ", "\n ", "\n &[disabled] {\n cursor: not-allowed;\n }\n"])), props => getThemeVariantValue(_extends({}, props, propsTheme), 'fontSizeDefault'), props => getThemeVariantValue(_extends({}, props, propsTheme), 'fontSizeDefault'), props => getThemeVariantValue(_extends({}, props, propsTheme), 'minHeightButtonDefault'), props => getThemeVariantValue(_extends({}, props, propsTheme), 'minHeightButtonDefault'), props => getThemeVariantValue(_extends({}, props, propsTheme), 'colorButtonStyleBase'), props => {
var _props$param;
return ((_props$param = props.param) == null ? void 0 : _props$param.block) && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n & {\n display: block;\n width: 100%;\n }\n & + && {\n margin-left: 0;\n }\n "])));
}, props => {
var _props$param2;
return ((_props$param2 = props.param) == null ? void 0 : _props$param2.disabled) && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "])));

@@ -139,5 +38,5 @@ });

} = props.param || {};
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), getThemeVariantValue(props, 'boxShadowColorLightDefault'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), buttonVariant(_extends({}, props, {
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), buttonVariant(_extends({}, props, {
type: 'Light'
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n inset 1px -1px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n inset -1px 0px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n 0 0 0 2px " + getThemeVariantValue(props, 'boxShadowColorLight4') + ";\n ", '&:focus', focus), basic && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), getThemeVariantValue(props, 'colorLightBasic'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), focus && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), getThemeVariantValue(props, 'boxShadowColorLightDefault')), getThemeVariantValue(props, 'backgroundColorLightBasicHover'), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLightBasic') + ";\n background-color: " + getThemeVariantValue(props, 'backgroundColorLightBasicActive') + " !important;\n background-image: none;\n ", '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: " + getThemeVariantValue(props, 'colorLightBasicDisabled') + ";\n ", '&[disabled]', disabled)), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLightBasicDisabled') + ";\n z-index: 0;\n ", '&[disabled]', disabled), () => getIconAndSizeCss(props), () => getloadingCss(props));
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n inset 1px -1px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n inset -1px 0px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n 0 0 0 2px " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLight4') + ";\n ", '&:focus', focus), basic && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasic'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), focus && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault')), getThemeVariantValue(_extends({}, props, propsTheme), 'backgroundColorLightBasicHover'), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasic') + ";\n background-color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'backgroundColorLightBasicActive') + " !important;\n background-image: none;\n ", '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasicDisabled') + ";\n ", '&[disabled]', disabled)), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasicDisabled') + ";\n z-index: 0;\n ", '&[disabled]', disabled), () => getIconAndSizeCss(props), () => getloadingCss(props));
});

@@ -150,3 +49,3 @@ var ButtonStyleBaseLink = styled(ButtonStyleBase)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n ", "\n"])), props => {

type: 'Link'
})), getThemeVariantValue(props, 'colorLink'), getThemeVariantValue(props, 'colorLinkNotDisabled'), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLinkNotDisabledActive') + ";\n box-shadow: none;\n text-decoration: underline;\n ", '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n z-index: 0;\n "]))));
})), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLink'), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLinkNotDisabled'), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLinkNotDisabledActive') + ";\n box-shadow: none;\n text-decoration: underline;\n ", '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n z-index: 0;\n "]))));
});

@@ -156,27 +55,3 @@ var ButtonStyleBaseWarning = styled(ButtonStyleBase)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n ", "\n"])), props => buttonVariant(_extends({}, props, {

})));
ButtonStyleBase.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBasePrimary.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseSuccess.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseDangers.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseDark.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseLight.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseLink.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
ButtonStyleBaseWarning.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
export { ButtonStyleBase, ButtonStyleBasePrimary, ButtonStyleBaseSuccess, ButtonStyleBaseDangers, ButtonStyleBaseDark, ButtonStyleBaseLight, ButtonStyleBaseLink, ButtonStyleBaseWarning };
//# sourceMappingURL=base.js.map

8

esm/style/index.js

@@ -1,14 +0,8 @@

import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject;
import styled from 'styled-components';
import { buttonTypes, getloadingCss, getIconAndSizeCss } from './Variant';
import { ButtonStyleTheme, ButtonStyleBase } from './base';
import { ButtonStyleBase } from './base';
export * from './base';
export var ButtonStyleWarp = styled(ButtonStyleBase)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n ", "\n"])), buttonTypes, props => getIconAndSizeCss(props), props => getloadingCss(props));
ButtonStyleWarp.defaultProps = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
//# sourceMappingURL=index.js.map

64

esm/style/Variant.js

@@ -0,10 +1,11 @@

import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
import { getThemeVariantValue } from '@uiw/utils';
import { css } from 'styled-components';
import { IconStyleBase } from '@uiw/react-icon';
import { ButtonStyleTheme } from './theme';
var propsTheme = {
defaultTheme: _extends({}, ButtonStyleTheme)
};
/**

@@ -32,12 +33,12 @@ * @description: 生成公共css

} = param || {};
var color = getThemeVariantValue(options, "color" + type);
var backgroundColor = getThemeVariantValue(options, "backgroundColor" + type);
var backgroundColorHover = getThemeVariantValue(options, "backgroundColor" + type + "Hover");
var boxShadowColorFocus = getThemeVariantValue(options, "boxShadowColor" + type + "Focus");
var backgroundColorActive = getThemeVariantValue(options, "backgroundColor" + type + "Active");
var backgroundColorDisabled = getThemeVariantValue(options, "backgroundColor" + type + "Disabled");
var boxShadowColorBasic = getThemeVariantValue(options, "boxShadowColor" + type + "Basic");
var backgroundColorBasicHover = getThemeVariantValue(options, "backgroundColor" + type + "BasicHover");
var colorBasicDisabled = getThemeVariantValue(options, "color" + type + "BasicDisabled");
var backgroundColorBasicActive = getThemeVariantValue(options, "backgroundColor" + type + "BasicActive");
var color = getThemeVariantValue(_extends({}, options, propsTheme), "color" + type);
var backgroundColor = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type);
var backgroundColorHover = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type + "Hover");
var boxShadowColorFocus = getThemeVariantValue(_extends({}, options, propsTheme), "boxShadowColor" + type + "Focus");
var backgroundColorActive = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type + "Active");
var backgroundColorDisabled = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type + "Disabled");
var boxShadowColorBasic = getThemeVariantValue(_extends({}, options, propsTheme), "boxShadowColor" + type + "Basic");
var backgroundColorBasicHover = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type + "BasicHover");
var colorBasicDisabled = getThemeVariantValue(_extends({}, options, propsTheme), "color" + type + "BasicDisabled");
var backgroundColorBasicActive = getThemeVariantValue(_extends({}, options, propsTheme), "backgroundColor" + type + "BasicActive");
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n z-index: 1;\n &:hover {\n background-color: ", ";\n z-index: 2;\n }\n ", "\n ", "\n &.disabled,\n &[disabled] {\n background-color: ", ";\n z-index: 0;\n }\n ", "\n ", "\n "])), color, backgroundColor, backgroundColorHover, getCommonCss("\n outline: 0;\n box-shadow: 0 0 0 2px " + boxShadowColorFocus + ";\n ", '&:focus', focus), getCommonCss("\n color: " + color + ";\n background-color: " + backgroundColorActive + ";\n background-image: none;\n ", ' &:active', active), backgroundColorDisabled, getCommonCss("\n background-color: " + backgroundColorDisabled + ";\n z-index: 0;\n ", ' &[disabled]', disabled), basic && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n & {\n background-color: transparent !important;\n box-shadow: inset 0 0 0 ", ";\n color: ", ";\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n }\n "])), boxShadowColorBasic, backgroundColor, backgroundColorBasicHover, getCommonCss("\n color: " + backgroundColor + ";\n background-color: " + backgroundColorBasicActive + " !important;\n background-image: none;\n ", ' &:active', active), getCommonCss("\n background-color: transparent !important;\n color: " + colorBasicDisabled + ";\n ", '&[disabled]', disabled)));

@@ -53,3 +54,2 @@ };

} = props.param || {};
switch (type) {

@@ -60,3 +60,2 @@ case 'primary':

}));
case 'success':

@@ -66,3 +65,2 @@ return buttonVariant(_extends({}, props, {

}));
case 'danger':

@@ -72,3 +70,2 @@ return buttonVariant(_extends({}, props, {

}));
case 'dark':

@@ -78,13 +75,10 @@ return buttonVariant(_extends({}, props, {

}));
case 'light':
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n "])), getThemeVariantValue(props, 'boxShadowColorLightDefault'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), buttonVariant(_extends({}, props, {
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 1px 0 0 ", ",\n inset 1px -1px 0 0 ", ",\n inset -1px 0px 0 0 ", ";\n ", "\n ", "\n ", "\n ", "\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), buttonVariant(_extends({}, props, {
type: 'Light'
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n inset 1px -1px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n inset -1px 0px 0 0 " + getThemeVariantValue(props, 'boxShadowColorLightDefault') + ",\n 0 0 0 2px " + getThemeVariantValue(props, 'boxShadowColorLight4') + ";\n ", '&:focus', focus), basic && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), getThemeVariantValue(props, 'colorLightBasic'), getThemeVariantValue(props, 'boxShadowColorLightDefault'), focus && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), getThemeVariantValue(props, 'boxShadowColorLightDefault')), getThemeVariantValue(props, 'backgroundColorLightBasicHover'), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLightBasic') + ";\n background-color: " + getThemeVariantValue(props, 'backgroundColorLightBasicActive') + " !important;\n background-image: none;\n ", '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: " + getThemeVariantValue(props, 'colorLightBasicDisabled') + ";\n ", '&[disabled]', disabled)), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLightBasicDisabled') + ";\n z-index: 0;\n ", '&[disabled]', disabled));
})), getCommonCss("\n outline: 0;\n box-shadow: inset 0 1px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n inset 1px -1px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n inset -1px 0px 0 0 " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault') + ",\n 0 0 0 2px " + getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLight4') + ";\n ", '&:focus', focus), basic && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n &:focus {\n box-shadow: inset 0 0 0 0 ", ";\n }\n ", "\n &:hover {\n background-color: ", " !important;\n }\n ", "\n ", "\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasic'), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault'), focus && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n box-shadow: inset 0 0 0 0 ", ";\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'boxShadowColorLightDefault')), getThemeVariantValue(_extends({}, props, propsTheme), 'backgroundColorLightBasicHover'), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasic') + ";\n background-color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'backgroundColorLightBasicActive') + " !important;\n background-image: none;\n ", '&:active', active), getCommonCss("\n background-color: transparent !important;\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasicDisabled') + ";\n ", '&[disabled]', disabled)), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLightBasicDisabled') + ";\n z-index: 0;\n ", '&[disabled]', disabled));
case 'link':
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n ", ";\n color: ", " !important;\n &:hover:not([disabled]) {\n color: ", ";\n text-decoration: underline;\n }\n ", "\n &[disabled] {\n z-index: 0;\n }\n ", "\n "])), buttonVariant(_extends({}, props, {
type: 'Link'
})), getThemeVariantValue(props, 'colorLink'), getThemeVariantValue(props, 'colorLinkNotDisabled'), getCommonCss("\n color: " + getThemeVariantValue(props, 'colorLinkNotDisabledActive') + ";\n box-shadow: none;\n text-decoration: underline;\n ", '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n z-index: 0;\n "]))));
})), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLink'), getThemeVariantValue(_extends({}, props, propsTheme), 'colorLinkNotDisabled'), getCommonCss("\n color: " + getThemeVariantValue(_extends({}, props, propsTheme), 'colorLinkNotDisabledActive') + ";\n box-shadow: none;\n text-decoration: underline;\n ", '&:not([disabled]):active', disabled, '&:not([disabled]) '), disabled && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n z-index: 0;\n "]))));
case 'warning':

@@ -94,3 +88,2 @@ return buttonVariant(_extends({}, props, {

}));
default:

@@ -103,8 +96,6 @@ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose([""])));

var _props$param;
return ((_props$param = props.param) == null ? void 0 : _props$param.loading) && props.param.type === 'light' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n &::before {\n border: 1.2px solid ", ";\n }\n "])), () => getThemeVariantValue(props, 'borderColorLinghtLoadingBefore'));
return ((_props$param = props.param) == null ? void 0 : _props$param.loading) && props.param.type === 'light' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n &::before {\n border: 1.2px solid\n ", ";\n }\n "])), () => getThemeVariantValue(_extends({}, props, propsTheme), 'borderColorLinghtLoadingBefore'));
}, () => {
var _props$param2;
return ((_props$param2 = props.param) == null ? void 0 : _props$param2.loading) && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n &::before {\n content: '';\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n border: 1.2px solid ", ";\n color: ", ";\n margin: 0 3px 0 0;\n clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%);\n animation: rotate 0.5s linear infinite;\n @keyframes rotate {\n from {\n transform: rotateZ(0deg);\n }\n to {\n transform: rotateZ(360deg);\n }\n }\n }\n "])), () => getThemeVariantValue(props, 'colorButtonLoadingBefore'), () => getThemeVariantValue(props, 'colorButtonLoadingBefore'));
return ((_props$param2 = props.param) == null ? void 0 : _props$param2.loading) && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n &::before {\n content: '';\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n border: 1.2px solid ", ";\n color: ", ";\n margin: 0 3px 0 0;\n clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%);\n animation: rotate 0.5s linear infinite;\n @keyframes rotate {\n from {\n transform: rotateZ(0deg);\n }\n to {\n transform: rotateZ(360deg);\n }\n }\n }\n "])), () => getThemeVariantValue(_extends({}, props, propsTheme), 'colorButtonLoadingBefore'), () => getThemeVariantValue(_extends({}, props, propsTheme), 'colorButtonLoadingBefore'));
});

@@ -115,10 +106,8 @@ };

};
var getSize = (props, type) => {
var fontSize = getThemeVariantValue(props, "fontSize" + type);
var minHeight = getThemeVariantValue(props, "minHeightButton" + type);
var fontSizeIcon = getThemeVariantValue(props, "fontSizeButtonIcon" + type);
var fontSize = getThemeVariantValue(_extends({}, props, propsTheme), "fontSize" + type);
var minHeight = getThemeVariantValue(_extends({}, props, propsTheme), "minHeightButton" + type);
var fontSizeIcon = getThemeVariantValue(_extends({}, props, propsTheme), "fontSizeButtonIcon" + type);
return buttonSize("" + fontSize, "" + fontSizeIcon, fontSize, "" + minHeight);
};
export var buttonSizeCss = props => {

@@ -128,10 +117,7 @@ var {

} = props.param || {};
switch (size) {
case 'large':
return getSize(props, 'Large');
case 'small':
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n padding: 0 6px;\n min-width: ", ";\n ", "\n "])), getThemeVariantValue(props, 'minHeightButtonSmall'), getSize(props, 'Small'));
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n padding: 0 6px;\n min-width: ", ";\n ", "\n "])), getThemeVariantValue(_extends({}, props, propsTheme), 'minHeightButtonSmall'), getSize(props, 'Small'));
default:

@@ -142,4 +128,4 @@ return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose([""])));

export var getIconAndSizeCss = props => {
return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n ", " {\n font-size: ", ";\n }\n ", "\n ", ":not(:last-child) {\n margin-right: 5px;\n }\n "])), IconStyleBase, () => getThemeVariantValue(props, 'fontSizeButtonIcontDefault'), () => buttonSizeCss(props), IconStyleBase);
return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n ", " {\n font-size: ", ";\n }\n ", "\n ", ":not(:last-child) {\n margin-right: 5px;\n }\n "])), IconStyleBase, () => getThemeVariantValue(_extends({}, props, propsTheme), 'fontSizeButtonIcontDefault'), () => buttonSizeCss(props), IconStyleBase);
};
//# sourceMappingURL=Variant.js.map

6

package.json
{
"name": "@uiw/react-button",
"version": "5.0.0-bate-1",
"version": "5.0.0-bate-10",
"description": "Button component",

@@ -49,5 +49,5 @@ "author": "Kenny Wong <wowohoo@qq.com>",

"dependencies": {
"@uiw/react-icon": "^5.0.0-bate-1",
"@uiw/utils": "^5.0.0-bate-1"
"@uiw/react-icon": "^5.0.0-bate-10",
"@uiw/utils": "^5.0.0-bate-10"
}
}

192

src/style/base.ts

@@ -5,111 +5,7 @@ import styled, { css } from 'styled-components';

import { ButtonType, ButtonSize } from '../';
export const ButtonStyleTheme = {
colorButtonStyleBase: '#fff',
// 大小设置
fontSizeSmall: '12px',
fontSizeDefault: '14px',
fontSizeLarge: '16px',
// 最小高度
minHeightButtonSmall: '24px',
minHeightButtonDefault: '30px',
minHeightButtonLarge: '36px',
// 按钮中图标大小
fontSizeButtonIconSmall: '14px',
fontSizeButtonIcontDefault: '16px',
fontSizeButtonIconLarge: '20px',
// 边框颜色 + 组件 + 组件属性 + 伪类
borderColorLinghtLoadingBefore: '#666f81',
colorButtonLoadingBefore: '#fff',
import { ButtonStyleTheme } from './theme';
export * from './theme';
// 颜色设置
// Primary
colorPrimary: '#fff',
backgroundColorPrimary: '#008ef0',
backgroundColorPrimaryHover: '#0070bd',
boxShadowColorPrimaryFocus: 'rgba(0, 142, 240, 0.26)',
backgroundColorPrimaryActive: '#00528a',
backgroundColorPrimaryDisabled: '#57baff',
boxShadowColorPrimaryBasic: '#000',
backgroundColorPrimaryBasicHover: '#c7e8ff',
colorPrimaryBasicDisabled: '#24a6ff',
backgroundColorPrimaryBasicActive: '#94d3ff',
// Success
colorSuccess: '#fff',
backgroundColorSuccess: '#28a745',
backgroundColorSuccessHover: '#1e7e34',
boxShadowColorSuccessFocus: 'rgba(40, 167, 69, 0.26)',
backgroundColorSuccessActive: '#145523',
backgroundColorSuccessDisabled: '#5dd879',
boxShadowColorSuccessBasic: '#000',
backgroundColorSuccessBasicHover: '#b7eec4',
colorSuccessBasicDisabled: '#34ce57',
backgroundColorSuccessBasicActive: '#8ee4a2',
// Warning
colorWarning: '#fff',
backgroundColorWarning: '#ffc107',
backgroundColorWarningHover: '#d39e00',
boxShadowColorWarningFocus: 'rgba(255, 193, 7, 0.26)',
backgroundColorWarningActive: '#a07800',
backgroundColorWarningDisabled: '#ffdb6d',
boxShadowColorWarningBasic: '#000',
backgroundColorWarningBasicHover: '#fff7dd',
colorWarningBasicDisabled: '#ffce3a',
backgroundColorWarningBasicActive: '#ffeaaa',
// Error
colorError: '#fff',
backgroundColorError: '#dc3545',
backgroundColorErrorHover: '#bd2130',
boxShadowColorErrorFocus: 'rgba(220, 53, 69, 0.26)',
backgroundColorErrorActive: '#921925',
backgroundColorErrorDisabled: '#eb8c95',
boxShadowColorErrorBasic: '#000',
backgroundColorErrorBasicHover: '#fceced',
colorErrorBasicDisabled: '#e4606d',
backgroundColorErrorBasicActive: '#f4c0c5',
// Light
colorLight: '#393e48',
backgroundColorLight: '#f8f9fa',
backgroundColorLightHover: '#dae0e5',
boxShadowColorLightFocus: 'rgba(248, 249, 250, 0.26)',
backgroundColorLightActive: '#bcc6cf',
backgroundColorLightDisabled: '#ffffff',
boxShadowColorLightBasic: '#000',
backgroundColorLightBasicHover: '#ecedf0',
colorLightBasicDisabled: '#adb3be',
colorLightBasic: '#9199a7',
backgroundColorLightBasicActive: '#d5d8dd',
boxShadowColorLightDefault: 'rgba(0, 0, 0, 0.17)',
boxShadowColorLight4: 'rgba(0, 0, 0, 0.1)',
// Dark
colorDark: '#fff',
backgroundColorDark: '#393e48',
backgroundColorDarkHover: '#22252c',
boxShadowColorDarkFocus: 'rgba(57, 62, 72, 0.26)',
backgroundColorDarkActive: '#0c0d0f',
backgroundColorDarkDisabled: '#666f81',
boxShadowColorDarkBasic: '#000',
backgroundColorDarkBasicHover: '#a2a8b5',
colorDarkBasicDisabled: '#505764',
backgroundColorDarkBasicActive: '#858e9f',
// Link
colorLink: '#008ef0',
colorLinkHover: '#008ef0',
backgroundColorLink: 'transparent',
backgroundColorLinkHover: 'rgba(0, 0, 0, 0)',
boxShadowColorLinkFocus: 'rgba(0, 0, 0, 0)',
backgroundColorLinkActive: 'rgba(0, 0, 0, 0)',
backgroundColorLinkDisabled: 'rgba(51, 51, 51, 0)',
boxShadowColorLinkBasic: '#000',
backgroundColorLinkBasicHover: 'rgba(107, 107, 107, 0)',
colorLinkBasicDisabled: 'rgba(26, 26, 26, 0)',
backgroundColorLinkBasicActive: 'rgba(82, 82, 82, 0)',
colorLinkNotDisabled: '#006ab3',
colorLinkNotDisabledActive: '#002d4d',
const propsTheme = {
defaultTheme: { ...ButtonStyleTheme },
};

@@ -145,8 +41,8 @@

text-align: left;
line-height: ${(props) => getThemeVariantValue(props, 'fontSizeDefault')};
font-size: ${(props) => getThemeVariantValue(props, 'fontSizeDefault')};
min-width: ${(props) => getThemeVariantValue(props, 'minHeightButtonDefault')};
min-height: ${(props) => getThemeVariantValue(props, 'minHeightButtonDefault')};
line-height: ${(props) => getThemeVariantValue({ ...props, ...propsTheme }, 'fontSizeDefault')};
font-size: ${(props) => getThemeVariantValue({ ...props, ...propsTheme }, 'fontSizeDefault')};
min-width: ${(props) => getThemeVariantValue({ ...props, ...propsTheme }, 'minHeightButtonDefault')};
min-height: ${(props) => getThemeVariantValue({ ...props, ...propsTheme }, 'minHeightButtonDefault')};
text-align: center;
color: ${(props) => getThemeVariantValue(props, 'colorButtonStyleBase')};
color: ${(props) => getThemeVariantValue({ ...props, ...propsTheme }, 'colorButtonStyleBase')};
transition: background-color 0.5s, opacity 1s;

@@ -195,5 +91,5 @@ & > *:not(:last-child) {

return css`
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
${buttonVariant({ ...props, type: 'Light' })}

@@ -203,6 +99,9 @@ ${getCommonCss(

outline: 0;
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
0 0 0 2px ${getThemeVariantValue(props, 'boxShadowColorLight4')};
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(
{ ...props, ...propsTheme },
'boxShadowColorLightDefault',
)},
inset 1px -1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
0 0 0 2px ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLight4')};
`,

@@ -214,17 +113,23 @@ '&:focus',

css`
color: ${getThemeVariantValue(props, 'colorLightBasic')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasic')} !important;
&:focus {
box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 0 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
}
${focus &&
css`
box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 0 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
`}
&:hover {
background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicHover')} !important;
background-color: ${getThemeVariantValue(
{ ...props, ...propsTheme },
'backgroundColorLightBasicHover',
)} !important;
}
${getCommonCss(
`
color: ${getThemeVariantValue(props, 'colorLightBasic')};
background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicActive')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasic')};
background-color: ${getThemeVariantValue(
{ ...props, ...propsTheme },
'backgroundColorLightBasicActive',
)} !important;
background-image: none;

@@ -238,3 +143,3 @@ `,

background-color: transparent !important;
color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasicDisabled')};
`,

@@ -247,3 +152,3 @@ '&[disabled]',

`
color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasicDisabled')};
z-index: 0;

@@ -264,5 +169,5 @@ `,

${buttonVariant({ ...props, type: 'Link' })};
color: ${getThemeVariantValue(props, 'colorLink')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLink')} !important;
&:hover:not([disabled]) {
color: ${getThemeVariantValue(props, 'colorLinkNotDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLinkNotDisabled')};
text-decoration: underline;

@@ -272,3 +177,3 @@ }

`
color: ${getThemeVariantValue(props, 'colorLinkNotDisabledActive')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLinkNotDisabledActive')};
box-shadow: none;

@@ -295,27 +200,2 @@ text-decoration: underline;

ButtonStyleBase.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBasePrimary.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseSuccess.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseDangers.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseDark.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseLight.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseLink.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
ButtonStyleBaseWarning.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};
export {

@@ -322,0 +202,0 @@ ButtonStyleBase,

5

src/style/index.ts
import styled from 'styled-components';
import { buttonTypes, getloadingCss, getIconAndSizeCss } from './Variant';
import { ButtonStyleTheme, ButtonStyleBaseProps, ButtonStyleBase } from './base';
import { ButtonStyleBaseProps, ButtonStyleBase } from './base';
export * from './base';

@@ -11,4 +11,1 @@

`;
ButtonStyleWarp.defaultProps = {
defaultTheme: { ...ButtonStyleTheme },
};

93

src/style/Variant.ts

@@ -5,3 +5,6 @@ import { getThemeVariantValue } from '@uiw/utils';

import { IconStyleBase } from '@uiw/react-icon';
import { ButtonStyleTheme } from './theme';
const propsTheme = {
defaultTheme: { ...ButtonStyleTheme },
};
type Options = {

@@ -31,12 +34,18 @@ type: string;

const color = getThemeVariantValue(options, `color${type}`);
const backgroundColor = getThemeVariantValue(options, `backgroundColor${type}`);
const backgroundColorHover = getThemeVariantValue(options, `backgroundColor${type}Hover`);
const boxShadowColorFocus = getThemeVariantValue(options, `boxShadowColor${type}Focus`);
const backgroundColorActive = getThemeVariantValue(options, `backgroundColor${type}Active`);
const backgroundColorDisabled = getThemeVariantValue(options, `backgroundColor${type}Disabled`);
const boxShadowColorBasic = getThemeVariantValue(options, `boxShadowColor${type}Basic`);
const backgroundColorBasicHover = getThemeVariantValue(options, `backgroundColor${type}BasicHover`);
const colorBasicDisabled = getThemeVariantValue(options, `color${type}BasicDisabled`);
const backgroundColorBasicActive = getThemeVariantValue(options, `backgroundColor${type}BasicActive`);
const color = getThemeVariantValue({ ...options, ...propsTheme }, `color${type}`);
const backgroundColor = getThemeVariantValue({ ...options, ...propsTheme }, `backgroundColor${type}`);
const backgroundColorHover = getThemeVariantValue({ ...options, ...propsTheme }, `backgroundColor${type}Hover`);
const boxShadowColorFocus = getThemeVariantValue({ ...options, ...propsTheme }, `boxShadowColor${type}Focus`);
const backgroundColorActive = getThemeVariantValue({ ...options, ...propsTheme }, `backgroundColor${type}Active`);
const backgroundColorDisabled = getThemeVariantValue({ ...options, ...propsTheme }, `backgroundColor${type}Disabled`);
const boxShadowColorBasic = getThemeVariantValue({ ...options, ...propsTheme }, `boxShadowColor${type}Basic`);
const backgroundColorBasicHover = getThemeVariantValue(
{ ...options, ...propsTheme },
`backgroundColor${type}BasicHover`,
);
const colorBasicDisabled = getThemeVariantValue({ ...options, ...propsTheme }, `color${type}BasicDisabled`);
const backgroundColorBasicActive = getThemeVariantValue(
{ ...options, ...propsTheme },
`backgroundColor${type}BasicActive`,
);

@@ -125,5 +134,5 @@ return css`

return css`
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
${buttonVariant({ ...props, type: 'Light' })}

@@ -133,6 +142,9 @@ ${getCommonCss(

outline: 0;
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
0 0 0 2px ${getThemeVariantValue(props, 'boxShadowColorLight4')};
box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(
{ ...props, ...propsTheme },
'boxShadowColorLightDefault',
)},
inset 1px -1px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
inset -1px 0px 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')},
0 0 0 2px ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLight4')};
`,

@@ -144,17 +156,23 @@ '&:focus',

css`
color: ${getThemeVariantValue(props, 'colorLightBasic')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasic')} !important;
&:focus {
box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 0 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
}
${focus &&
css`
box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
box-shadow: inset 0 0 0 0 ${getThemeVariantValue({ ...props, ...propsTheme }, 'boxShadowColorLightDefault')};
`}
&:hover {
background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicHover')} !important;
background-color: ${getThemeVariantValue(
{ ...props, ...propsTheme },
'backgroundColorLightBasicHover',
)} !important;
}
${getCommonCss(
`
color: ${getThemeVariantValue(props, 'colorLightBasic')};
background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicActive')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasic')};
background-color: ${getThemeVariantValue(
{ ...props, ...propsTheme },
'backgroundColorLightBasicActive',
)} !important;
background-image: none;

@@ -168,3 +186,3 @@ `,

background-color: transparent !important;
color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasicDisabled')};
`,

@@ -177,3 +195,3 @@ '&[disabled]',

`
color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLightBasicDisabled')};
z-index: 0;

@@ -188,5 +206,5 @@ `,

${buttonVariant({ ...props, type: 'Link' })};
color: ${getThemeVariantValue(props, 'colorLink')} !important;
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLink')} !important;
&:hover:not([disabled]) {
color: ${getThemeVariantValue(props, 'colorLinkNotDisabled')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLinkNotDisabled')};
text-decoration: underline;

@@ -196,3 +214,3 @@ }

`
color: ${getThemeVariantValue(props, 'colorLinkNotDisabledActive')};
color: ${getThemeVariantValue({ ...props, ...propsTheme }, 'colorLinkNotDisabledActive')};
box-shadow: none;

@@ -227,3 +245,4 @@ text-decoration: underline;

&::before {
border: 1.2px solid ${() => getThemeVariantValue(props, 'borderColorLinghtLoadingBefore')};
border: 1.2px solid
${() => getThemeVariantValue({ ...props, ...propsTheme }, 'borderColorLinghtLoadingBefore')};
}

@@ -240,4 +259,4 @@ `}

border-radius: 50%;
border: 1.2px solid ${() => getThemeVariantValue(props, 'colorButtonLoadingBefore')};
color: ${() => getThemeVariantValue(props, 'colorButtonLoadingBefore')};
border: 1.2px solid ${() => getThemeVariantValue({ ...props, ...propsTheme }, 'colorButtonLoadingBefore')};
color: ${() => getThemeVariantValue({ ...props, ...propsTheme }, 'colorButtonLoadingBefore')};
margin: 0 3px 0 0;

@@ -270,5 +289,5 @@ clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%);

const getSize = (props: ButtonStyleBaseProps, type: string) => {
const fontSize = getThemeVariantValue(props, `fontSize${type}`);
const minHeight = getThemeVariantValue(props, `minHeightButton${type}`);
const fontSizeIcon = getThemeVariantValue(props, `fontSizeButtonIcon${type}`);
const fontSize = getThemeVariantValue({ ...props, ...propsTheme }, `fontSize${type}`);
const minHeight = getThemeVariantValue({ ...props, ...propsTheme }, `minHeightButton${type}`);
const fontSizeIcon = getThemeVariantValue({ ...props, ...propsTheme }, `fontSizeButtonIcon${type}`);
return buttonSize(`${fontSize}`, `${fontSizeIcon}`, fontSize, `${minHeight}`);

@@ -285,3 +304,3 @@ };

padding: 0 6px;
min-width: ${getThemeVariantValue(props, 'minHeightButtonSmall')};
min-width: ${getThemeVariantValue({ ...props, ...propsTheme }, 'minHeightButtonSmall')};
${getSize(props, 'Small')}

@@ -297,3 +316,3 @@ `;

${IconStyleBase} {
font-size: ${() => getThemeVariantValue(props, 'fontSizeButtonIcontDefault')};
font-size: ${() => getThemeVariantValue({ ...props, ...propsTheme }, 'fontSizeButtonIcontDefault')};
}

@@ -300,0 +319,0 @@ ${() => buttonSizeCss(props)}

cjs/index.js.map

Sorry, the diff of this file is not supported yet

cjs/style/base.js.map

Sorry, the diff of this file is not supported yet

cjs/style/index.js.map

Sorry, the diff of this file is not supported yet

cjs/style/Variant.js.map

Sorry, the diff of this file is not supported yet

esm/index.js.map

Sorry, the diff of this file is not supported yet

esm/style/base.js.map

Sorry, the diff of this file is not supported yet

esm/style/index.js.map

Sorry, the diff of this file is not supported yet

esm/style/Variant.js.map

Sorry, the diff of this file is not supported yet

src/index.tsx

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