@bifrostui/react 0.0.5

package/es/Avatar/Avatar.types.d.ts

@@ -0,0 +1,46 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+import { ImageProps } from '../Image/Image.types';
+export type AvatarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 图像地址 */
+        src?: ImageProps['src'];
+        /**
+         * 图像无法显示时的替代文本
+         */
+        alt?: ImageProps['alt'];
+        /**
+         * 加载时占位
+         */
+        placeholder?: ImageProps['placeholder'];
+        /**
+         * 懒加载
+         */
+        lazy?: ImageProps['lazy'];
+        /**
+         * 图片裁剪、缩放的模式
+         */
+        fit?: ImageProps['fit'];
+        /**
+         * 透传ImageProps
+         */
+        ImageProps?: ImageProps;
+        /**
+         * 头像形状
+         */
+        variant?: 'rounded' | 'square';
+        /**
+         * 头像大小
+         */
+        size?: 'large' | 'medium' | 'small' | 'xsmall';
+        /**
+         * 图像头像加载失败回调
+         */
+        onError?: ImageProps['onError'];
+        /**
+         * 图像头像加载回调
+         */
+        onLoad?: ImageProps['onLoad'];
+    };
+    defaultComponent: D;
+}, D>;

package/es/Avatar/Avatar.types.js

@@ -0,0 +1 @@
+export {};

package/es/Avatar/AvatarGroup.css

@@ -0,0 +1,31 @@
+.bui-avatar-group {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--bui-font-family);
+}
+.bui-avatar-group-avatar,
+.bui-avatar-group-extra {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+}
+.bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
+  margin-left: -5px;
+}
+.bui-avatar-group .bui-avatar-small {
+  box-shadow: 0 0 0 1px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-small:not(:first-child) {
+  margin-left: -9px;
+}
+.bui-avatar-group .bui-avatar-large {
+  box-shadow: 0 0 0 3px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-large:not(:first-child) {
+  margin-left: -21px;
+}
+.bui-avatar-group .bui-avatar-medium {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-medium:not(:first-child) {
+  margin-left: -13px;
+}

package/es/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './AvatarGroup.less';
+import { AvatarGroupProps } from './AvatarGroup.types';
+declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default AvatarGroup;

package/es/Avatar/AvatarGroup.js

@@ -0,0 +1,65 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "maxCount", "variant", "spacing", "size", "orientation", "children", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React, { cloneElement } from 'react';
+import Avatar from "./Avatar";
+import "./AvatarGroup.css";
+var prefixCls = 'bui-avatar-group';
+var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    maxCount = props.maxCount,
+    variant = props.variant,
+    spacing = props.spacing,
+    size = props.size,
+    orientation = props.orientation,
+    children = props.children,
+    onClick = props.onClick,
+    others = _objectWithoutProperties(props, _excluded);
+  var avatarChildrenCount = React.Children.count(children);
+  var extraAvatarNum = avatarChildrenCount - Number(maxCount);
+  var AvatarGroupItem = children ? React.Children.map(children, function (child, index) {
+    var _child$props, _child$props2;
+    if (maxCount && index > Number(maxCount)) return null;
+    var zIndex = orientation === 'right' ? -index + avatarChildrenCount : index;
+    if (maxCount && index === Number(maxCount)) {
+      return /*#__PURE__*/React.createElement(Avatar, {
+        variant: variant,
+        size: size,
+        className: "".concat(prefixCls, "-extra"),
+        style: {
+          marginLeft: "-".concat(spacing),
+          zIndex: zIndex
+        },
+        onClick: onClick
+      }, "+".concat(extraAvatarNum));
+    }
+    var childStyle = {
+      className: clsx("".concat(prefixCls, "-avatar"), child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className),
+      style: _objectSpread(_objectSpread({}, child === null || child === void 0 || (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style), {}, {
+        marginLeft: "-".concat(spacing),
+        zIndex: zIndex
+      }),
+      size: size,
+      variant: variant
+    };
+    return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/cloneElement(child, _objectSpread({}, childStyle)) : child;
+  }) : '';
+  return AvatarGroupItem ? /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className),
+    ref: ref
+  }, others), AvatarGroupItem) : null;
+});
+AvatarGroup.displayName = 'BuiAvatarGroup';
+AvatarGroup.defaultProps = {
+  size: 'medium',
+  orientation: 'right'
+};
+export default AvatarGroup;

package/es/Avatar/AvatarGroup.types.d.ts

@@ -0,0 +1,27 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type AvatarGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 最多可显示的头像个数
+         */
+        maxCount?: string;
+        /**
+         * 头像模式
+         */
+        variant?: 'rounded' | 'square';
+        /**
+         * 头像间的间距
+         */
+        spacing?: string | number;
+        /**
+         * 头像朝向
+         */
+        orientation?: 'left' | 'right';
+        /**
+         * 头像大小
+         */
+        size?: 'large' | 'medium' | 'small' | 'xsmall';
+    };
+    defaultComponent: D;
+}, D>;

package/es/Avatar/AvatarGroup.types.js

@@ -0,0 +1 @@
+export {};

package/es/Avatar/index.d.ts

@@ -0,0 +1,6 @@
+import AvatarGroup from './AvatarGroup';
+export * from './Avatar.types';
+export * from './AvatarGroup.types';
+export { default } from './Avatar';
+export { default as Avatar } from './Avatar';
+export { AvatarGroup };

package/es/Avatar/index.js

@@ -0,0 +1,6 @@
+import AvatarGroup from "./AvatarGroup";
+export * from "./Avatar.types";
+export * from "./AvatarGroup.types";
+export { default } from "./Avatar";
+export { default as Avatar } from "./Avatar";
+export { AvatarGroup };

package/es/Backdrop/Backdrop.css

@@ -0,0 +1,14 @@
+.bui-backdrop {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.68);
+}
+.bui-backdrop-invisible {
+  background-color: transparent;
+}

package/es/Backdrop/Backdrop.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Backdrop.less';
+import { BackdropProps } from './Backdrop.types';
+declare const Backdrop: React.ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Backdrop;

package/es/Backdrop/Backdrop.js

@@ -0,0 +1,30 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "className", "invisible", "open", "transitionDuration"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React from 'react';
+import Fade from "../Fade";
+import "./Backdrop.css";
+var prefixCls = 'bui-backdrop';
+var Backdrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    invisible = props.invisible,
+    open = props.open,
+    transitionDuration = props.transitionDuration,
+    others = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Fade, _extends({
+    in: open,
+    timeout: transitionDuration
+  }, others), /*#__PURE__*/React.createElement("div", {
+    className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-invisible"), invisible), className),
+    ref: ref
+  }, children));
+});
+Backdrop.displayName = 'Backdrop';
+export default Backdrop;

package/es/Backdrop/Backdrop.types.d.ts

@@ -0,0 +1,17 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+import { TransitionProps } from '../Transition';
+export interface BackdropTypeMap<D extends React.ElementType = 'div', P = {}> {
+    props: P & {
+        open?: boolean;
+        /**
+         * 是否透明不可见
+         * - default:false
+         */
+        invisible?: boolean;
+        transitionDuration?: TransitionProps['timeout'];
+    } & Omit<FadeProps, 'children'>;
+    defaultComponent: D;
+}
+export type BackdropProps<D extends React.ElementType = BackdropTypeMap['defaultComponent'], P = {}> = OverrideProps<BackdropTypeMap<D, P>, D>;

package/es/Backdrop/Backdrop.types.js

@@ -0,0 +1 @@
+export {};

package/es/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Backdrop, default } from './Backdrop';
+export * from './Backdrop.types';

package/es/Backdrop/index.js

@@ -0,0 +1,2 @@
+export { default as Backdrop, default } from "./Backdrop";
+export * from "./Backdrop.types";

package/es/Badge/Badge.css

@@ -0,0 +1,95 @@
+.bui-badge {
+  display: inline-block;
+  font-family: var(--bui-font-family);
+}
+.bui-badge-position {
+  position: relative;
+}
+.bui-badge-position .bui-badge-contained,
+.bui-badge-position .bui-badge-outlined {
+  position: absolute;
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-dot {
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-bubble {
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-contained,
+.bui-badge-outlined {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-width: 15px;
+  height: 15px;
+  line-height: 15px;
+  padding: 0 3px;
+  font-size: var(--bui-text-size-4);
+  border-radius: 8px;
+  color: var(--bui-color-bg-view);
+  white-space: nowrap;
+  z-index: 1;
+}
+.bui-badge-outlined {
+  padding: 0 2px;
+}
+.bui-badge-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-badge-success {
+  background-color: var(--bui-color-success);
+}
+.bui-badge-info {
+  background-color: var(--bui-color-info);
+}
+.bui-badge-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-badge-danger {
+  background-color: var(--bui-color-danger);
+}
+.bui-badge-dot {
+  width: 9px;
+  min-width: 0;
+  height: 9px;
+  padding: 0;
+  border-radius: 100%;
+}
+.bui-badge-bubble {
+  border-radius: 6px 6px 6px 0;
+  padding: 0 5px;
+}
+.bui-badge-outlined {
+  background: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-primary {
+  border: 1px solid var(--bui-color-primary);
+  color: var(--bui-color-primary);
+}
+.bui-badge-outlined.bui-badge-success {
+  border: 1px solid var(--bui-color-success);
+  color: var(--bui-color-success);
+}
+.bui-badge-outlined.bui-badge-info {
+  border: 1px solid var(--bui-color-info);
+  color: var(--bui-color-info);
+}
+.bui-badge-outlined.bui-badge-warning {
+  border: 1px solid var(--bui-color-warning);
+  color: var(--bui-color-warning);
+}
+.bui-badge-outlined.bui-badge-danger {
+  border: 1px solid var(--bui-color-danger);
+  color: var(--bui-color-danger);
+}
+.bui-badge-outlined.bui-badge-bubble {
+  border-radius: 6px 6px 6px 0;
+}

package/es/Badge/Badge.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BadgeProps } from './Badge.types';
+import './Badge.less';
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Badge;

package/es/Badge/Badge.js

@@ -0,0 +1,38 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "onClick", "children", "content", "color", "maxCount", "variant", "type"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React from 'react';
+import "./Badge.css";
+var prefixCls = 'bui-badge';
+var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    onClick = props.onClick,
+    children = props.children,
+    content = props.content,
+    color = props.color,
+    maxCount = props.maxCount,
+    variant = props.variant,
+    type = props.type,
+    others = _objectWithoutProperties(props, _excluded);
+  var displayValue = Number(content) > Number(maxCount) ? "".concat(maxCount, "+") : type !== 'dot' && content;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx("".concat(prefixCls), className, _defineProperty({}, "".concat(prefixCls, "-position"), children)),
+    onClick: onClick,
+    ref: ref
+  }, others), (content || type === 'dot') && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-").concat(color), "".concat(prefixCls, "-").concat(variant), "".concat(prefixCls, "-").concat(type))
+  }, displayValue), children);
+});
+Badge.displayName = 'BuiBadge';
+Badge.defaultProps = {
+  color: 'primary',
+  variant: 'contained',
+  type: 'standard'
+};
+export default Badge;

package/es/Badge/Badge.types.d.ts

@@ -0,0 +1,27 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React, { ReactNode } from 'react';
+export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         *徽章内容
+         */
+        content?: ReactNode;
+        /**
+         * 颜色
+         */
+        color?: ThemeColor;
+        /**
+         * 最大值
+         */
+        maxCount?: number;
+        /**
+         *徽章类型
+         */
+        variant?: 'contained' | 'outlined';
+        /**
+         * 徽章形状
+         */
+        type?: 'dot' | 'standard' | 'bubble';
+    };
+    defaultComponent: D;
+}, D>;

package/es/Badge/Badge.types.js

@@ -0,0 +1 @@
+export {};

package/es/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge, default } from './Badge';
+export * from './Badge.types';

package/es/Badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge, default } from "./Badge";
+export * from "./Badge.types";

package/es/Button/Button.css

@@ -0,0 +1,200 @@
+.bui-btn {
+  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
+  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
+  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
+  --border-radius: var(--bui-button-border-radius, 100px);
+  --font-weight: var(--bui-button-font-weight, var(--bui-font-weight-medium));
+  border: 1px solid transparent;
+  outline: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--text-color);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-size: var(--bui-text-size-3);
+  font-weight: var(--font-weight);
+  border-radius: var(--border-radius);
+  height: 27px;
+  line-height: var(--bui-line-height);
+  font-family: var(--bui-font-family);
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.bui-btn::after {
+  border: 0;
+}
+.bui-btn::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bui-color-black);
+  border: inherit;
+  border-color: var(--bui-color-black);
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+}
+.bui-btn:active::before {
+  opacity: 0.04;
+}
+.bui-btn-icon-start {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
+  margin-right: var(--bui-spacing-xs);
+}
+.bui-btn-icon-end {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
+  margin-left: var(--bui-spacing-xs);
+}
+.bui-btn-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-btn-small {
+  font-size: var(--bui-text-size-4);
+  padding: 0 11px;
+  height: 24px;
+}
+.bui-btn-medium {
+  padding: 0 14px;
+  height: 27px;
+}
+.bui-btn-large {
+  font-size: var(--bui-text-size-2);
+  padding: 0 14px;
+  height: 33px;
+}
+.bui-btn-full {
+  font-size: var(--bui-title-size-4);
+  width: 100%;
+  height: 42px;
+}
+.bui-btn-text.bui-btn-primary {
+  color: var(--bui-color-primary);
+}
+.bui-btn-text.bui-btn-success {
+  color: var(--bui-color-success);
+}
+.bui-btn-text.bui-btn-info {
+  color: var(--bui-color-info);
+}
+.bui-btn-text.bui-btn-warning {
+  color: var(--bui-color-warning);
+}
+.bui-btn-text.bui-btn-danger {
+  color: var(--bui-color-danger);
+}
+.bui-btn-text.bui-btn-vip {
+  color: var(--bui-color-vip);
+}
+.bui-btn-contained {
+  background-color: var(--bg-color);
+}
+.bui-btn-contained.bui-btn-primary {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-primary-start) 0%, var(--bui-color-primary-end) 100%);
+}
+.bui-btn-contained.bui-btn-success {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-success-start) 0%, var(--bui-color-success-end) 100%);
+}
+.bui-btn-contained.bui-btn-info {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-info-start) 0%, var(--bui-color-info-end) 100%);
+}
+.bui-btn-contained.bui-btn-warning {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-warning-start) 0%, var(--bui-color-warning-end) 100%);
+}
+.bui-btn-contained.bui-btn-danger {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-danger-start) 0%, var(--bui-color-danger-end) 100%);
+}
+.bui-btn-contained.bui-btn-vip {
+  color: #582331;
+  background-image: linear-gradient(90deg, var(--bui-color-vip-start) 3%, var(--bui-color-vip-end) 100%);
+}
+.bui-btn-outlined {
+  border: solid 1px var(--border-color);
+}
+.bui-btn-outlined.bui-btn-primary {
+  color: var(--bui-color-primary);
+  border-color: var(--bui-color-primary);
+}
+.bui-btn-outlined.bui-btn-success {
+  color: var(--bui-color-success);
+  border-color: var(--bui-color-success);
+}
+.bui-btn-outlined.bui-btn-info {
+  color: var(--bui-color-info);
+  border-color: var(--bui-color-info);
+}
+.bui-btn-outlined.bui-btn-warning {
+  color: var(--bui-color-warning);
+  border-color: var(--bui-color-warning);
+}
+.bui-btn-outlined.bui-btn-danger {
+  color: var(--bui-color-danger);
+  border-color: var(--bui-color-danger);
+}
+.bui-btn-outlined.bui-btn-vip {
+  color: var(--bui-color-vip);
+  border-color: var(--bui-color-vip);
+}
+.bui-btn-light {
+  background-image: none;
+  background-color: var(--bui-color-gray-light);
+  border: 1px solid transparent;
+}
+.bui-btn-light.bui-btn-warning {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-warning);
+  background-color: var(--bui-color-warning-light);
+}
+.bui-btn-light.bui-btn-primary {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-primary);
+  background-color: var(--bui-color-primary-light);
+}
+.bui-btn-light.bui-btn-info {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-info);
+  background-color: var(--bui-color-info-light);
+}
+.bui-btn-light.bui-btn-success {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-success);
+  background-color: var(--bui-color-success-light);
+}
+.bui-btn-light.bui-btn-danger {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-danger);
+  background-color: var(--bui-color-danger-light);
+}
+.bui-btn-light.bui-btn-vip {
+  color: var(--bui-color-vip);
+  position: relative;
+  background-color: rgba(255, 134, 110, 0.3);
+}