@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Badge/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,70 @@
+import React from "react";
+import Badge from "../../Badge";
+const basicBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Badge, { content: "12" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")));
+};
+const colorBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: "1", color: "primary" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Primary")), /* @__PURE__ */ React.createElement(Badge, { content: "2", color: "success" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Success")), /* @__PURE__ */ React.createElement(Badge, { content: "3", color: "warning" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Warning")), /* @__PURE__ */ React.createElement(Badge, { content: "4", color: "danger" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Danger")));
+};
+const typeBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: "99", type: "standard" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Standard")), /* @__PURE__ */ React.createElement(Badge, { type: "dot" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Dot")), /* @__PURE__ */ React.createElement(Badge, { content: "NEW", type: "bubble" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Bubble")));
+};
+const maxBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: 99, max: 50 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "50+")), /* @__PURE__ */ React.createElement(Badge, { content: 150, max: 99 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")));
+};
+const accessibilityBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(Badge, { content: 5, "aria-label": "\u81EA\u5B9A\u4E49\u6807\u7B7E" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u6807\u7B7E")), /* @__PURE__ */ React.createElement(Badge, { content: 3, role: "img" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u89D2\u8272")), /* @__PURE__ */ React.createElement(Badge, { content: 1, "aria-hidden": true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF\u89D2\u8272")), /* @__PURE__ */ React.createElement(Badge, { content: 2, "aria-hidden": true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF")));
+};
+const invisibilityBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: 0, showZero: true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "ShowZero")), /* @__PURE__ */ React.createElement(Badge, { content: 0, showZero: false }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "HideZero")), /* @__PURE__ */ React.createElement(Badge, { content: 5, invisible: false }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Visible")));
+};
+const complexInteractionBadgeDemo = () => {
+  const ComplexInteractionBadgeDemo = () => {
+    const [count, setCount] = React.useState(1);
+    const [visible, setVisible] = React.useState(true);
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Badge, { content: count, invisible: !visible }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCount(count + 1),
+        style: { padding: "4px 8px" }
+      },
+      "\u589E\u52A0(",
+      count,
+      ")"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisible(!visible),
+        style: { padding: "4px 8px" }
+      },
+      visible ? "\u9690\u85CF" : "\u663E\u793A"
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionBadgeDemo, null);
+};
+const specialContentBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" } }, /* @__PURE__ */ React.createElement(Badge, { content: "NEW" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u6587\u672C")), /* @__PURE__ */ React.createElement(Badge, { content: "99+" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")), /* @__PURE__ */ React.createElement(Badge, { content: 1 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5355\u6570")), /* @__PURE__ */ React.createElement(Badge, { content: "" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u7A7A\u5185\u5BB9")));
+};
+var A11yDemos_default = {
+  basicBadgeDemo,
+  colorBadgeDemo,
+  typeBadgeDemo,
+  maxBadgeDemo,
+  accessibilityBadgeDemo,
+  invisibilityBadgeDemo,
+  complexInteractionBadgeDemo,
+  specialContentBadgeDemo
+};
+export {
+  accessibilityBadgeDemo,
+  basicBadgeDemo,
+  colorBadgeDemo,
+  complexInteractionBadgeDemo,
+  A11yDemos_default as default,
+  invisibilityBadgeDemo,
+  maxBadgeDemo,
+  specialContentBadgeDemo,
+  typeBadgeDemo
+};

package/es/Badge/hooks/useBadgeA11y.js

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+const useBadgeA11y = ({
+  displayValue,
+  type = "standard",
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby,
+  role = "status",
+  "aria-hidden": ariaHidden = false
+}) => {
+  const accessibilityLabel = useMemo(() => {
+    if (ariaLabel)
+      return ariaLabel;
+    if (ariaHidden)
+      return void 0;
+    if (type === "dot") {
+      return "\u6709\u65B0\u901A\u77E5";
+    }
+    if (displayValue !== null && displayValue !== void 0) {
+      if (String(displayValue).includes("+")) {
+        return `\u8D85\u8FC7${String(displayValue).replace("+", "")}\u6761\u901A\u77E5`;
+      }
+      const numValue = Number(displayValue);
+      if (!Number.isNaN(numValue)) {
+        if (numValue === 0)
+          return "\u65E0\u901A\u77E5";
+        if (numValue === 1)
+          return "1\u6761\u901A\u77E5";
+        return `${displayValue}\u6761\u901A\u77E5`;
+      }
+      return `\u901A\u77E5\uFF1A${displayValue}`;
+    }
+    return void 0;
+  }, [ariaLabel, ariaHidden, type, displayValue]);
+  const ariaAttributes = useMemo(() => {
+    if (ariaHidden) {
+      return {
+        "aria-hidden": true
+      };
+    }
+    return {
+      role,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": ariaDescribedby
+    };
+  }, [ariaHidden, role, accessibilityLabel, ariaDescribedby]);
+  return {
+    accessibilityLabel,
+    ariaAttributes
+  };
+};
+export {
+  useBadgeA11y
+};

package/es/Badge/hooks/useBadgeDisplay.js

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+const useBadgeDisplay = ({
+  content,
+  max,
+  showZero = false,
+  type = "standard"
+}) => {
+  const displayValue = useMemo(() => {
+    if (type === "dot") {
+      return null;
+    }
+    if (!Number.isNaN(Number(content)) && typeof max === "number") {
+      return Number(content) > Number(max) ? `${max}+` : content;
+    }
+    return content;
+  }, [content, max, type]);
+  const shouldShowBadge = useMemo(() => {
+    if (type === "dot") {
+      return true;
+    }
+    if (content === 0 && !showZero) {
+      return false;
+    }
+    return !!content || content === 0;
+  }, [content, showZero, type]);
+  return {
+    displayValue,
+    shouldShowBadge
+  };
+};
+export {
+  useBadgeDisplay
+};

package/es/Badge/index.css

@@ -0,0 +1,125 @@
+:root,
+page,
+xhs-page {
+  --bui-badge-position: 14%;
+  --bui-badge-min-width: 15px;
+  --bui-badge-height: 15px;
+  --bui-badge-line-height: 15px;
+  --bui-badge-padding: 0 3px;
+  --bui-badge-border-radius: 8px;
+  --bui-badge-outlined-padding: 0 2px;
+  --bui-badge-dot-size: 9px;
+  --bui-badge-bubble-padding: 0 5px;
+  --bui-badge-bubble-border-radius: 6px 6px 6px 0;
+}
+.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: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-dot {
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-bubble {
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  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: var(--bui-badge-min-width);
+  height: var(--bui-badge-height);
+  line-height: var(--bui-badge-line-height);
+  padding: var(--bui-badge-padding);
+  font-size: var(--bui-text-size-4);
+  border-radius: var(--bui-badge-border-radius);
+  color: var(--bui-color-bg-view);
+  white-space: nowrap;
+  z-index: 1;
+}
+.bui-badge-outlined {
+  padding: var(--bui-badge-outlined-padding);
+}
+.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-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-badge-dark {
+  background-color: var(--bui-color-fg-default);
+}
+.bui-badge-dot {
+  width: var(--bui-badge-dot-size);
+  min-width: 0;
+  height: var(--bui-badge-dot-size);
+  padding: 0;
+  border-radius: 100%;
+}
+.bui-badge-bubble {
+  border-radius: var(--bui-badge-bubble-border-radius);
+  padding: var(--bui-badge-bubble-padding);
+}
+.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-light {
+  background: var(--bui-color-bg-default);
+  border: 1px solid var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-dark {
+  border: 1px solid var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
+}
+.bui-badge-outlined.bui-badge-bubble {
+  border-radius: var(--bui-badge-bubble-border-radius);
+}

package/es/Breadcrumb/Breadcrumb.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import clsx from "clsx";
 import BreadcrumbItem from "./BreadcrumbItem";
-import "./Breadcrumb.css";
+import "./index.css";
 const prefixCls = "bui-breadcrumb";
 const Breadcrumb = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/es/Breadcrumb/index.css

@@ -0,0 +1,38 @@
+:root,
+page,
+xhs-page {
+  --bui-breadcrumb-margin: 0;
+  --bui-breadcrumb-padding: 0;
+  --bui-breadcrumb-color: rgba(0, 0, 0, 0.45);
+  --bui-breadcrumb-item-separator-margin: 0 8px;
+  --bui-breadcrumb-last-item-color: rgba(0, 0, 0, 0.88);
+}
+.bui-breadcrumb {
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  color: var(--bui-breadcrumb-color);
+  list-style: none;
+  font-size: var(--bui-text-size-1);
+  line-height: var(--bui-line-height);
+}
+.bui-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  list-style: none;
+}
+.bui-breadcrumb-list a {
+  color: var(--bui-breadcrumb-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.bui-breadcrumb-list li:last-child {
+  color: var(--bui-breadcrumb-last-item-color);
+}
+.bui-breadcrumb-item {
+  cursor: pointer;
+}
+.bui-breadcrumb-item-separator {
+  margin: var(--bui-breadcrumb-item-separator-margin);
+}

package/es/Button/Button.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Button.css";
+import "./index.css";
 const prefixCls = "bui-btn";
 const ButtonIcon = ({ children, iconPosition }) => {
   return /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -40,10 +40,10 @@ const Button = /* @__PURE__ */ React.forwardRef(
       children,
       startIcon,
       endIcon,
-      size,
-      variant,
+      size = "medium",
+      variant = "outlined",
       color,
-      disabled
+      disabled = false
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -68,7 +68,9 @@ const Button = /* @__PURE__ */ React.forwardRef(
           },
           className
         ),
-        ref
+        ref,
+        disabled,
+        "aria-disabled": disabled ? "true" : void 0
       }, others),
       startIcon && /* @__PURE__ */ React.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,
@@ -77,12 +79,6 @@ const Button = /* @__PURE__ */ React.forwardRef(
   }
 );
 Button.displayName = "BuiButton";
-Button.defaultProps = {
-  size: "medium",
-  variant: "outlined",
-  color: "default",
-  disabled: false
-};
 var Button_default = Button;
 export {
   Button_default as default

package/es/Button/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Button from "../../Button";
+const basicButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, null, "\u57FA\u7840\u6309\u94AE"));
+};
+const variantButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { variant: "text" }, "\u6587\u5B57\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "outlined" }, "\u7EBF\u6846\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "contained" }, "\u586B\u5145\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "subtle" }, "\u67D4\u548C\u6309\u94AE"));
+};
+const colorButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { color: "primary" }, "\u4E3B\u8981\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "success" }, "\u6210\u529F\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "warning" }, "\u8B66\u544A\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "danger" }, "\u5371\u9669\u6309\u94AE"));
+};
+const sizeButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { size: "small" }, "\u5C0F\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "medium" }, "\u4E2D\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "large" }, "\u5927\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "full", style: { width: "200px" } }, "\u5168\u5BBD\u6309\u94AE"));
+};
+const disabledButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { disabled: true }, "\u7981\u7528\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "contained", disabled: true }, "\u7981\u7528\u586B\u5145\u6309\u94AE"));
+};
+const iconButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement("span", null, "\u{1F31F}") }, "\u5E26\u524D\u7F00\u56FE\u6807"), /* @__PURE__ */ React.createElement(Button, { endIcon: /* @__PURE__ */ React.createElement("span", null, "\u{1F4C5}") }, "\u5E26\u540E\u7F00\u56FE\u6807"));
+};
+const ariaLabelButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { "aria-label": "\u63D0\u4EA4\u8868\u5355" }, "\u63D0\u4EA4"), /* @__PURE__ */ React.createElement(Button, { "aria-label": "\u53D6\u6D88\u64CD\u4F5C" }, "\u53D6\u6D88"));
+};
+var A11yDemos_default = {
+  basicButtonDemo,
+  variantButtonDemo,
+  colorButtonDemo,
+  sizeButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  ariaLabelButtonDemo
+};
+export {
+  ariaLabelButtonDemo,
+  basicButtonDemo,
+  colorButtonDemo,
+  A11yDemos_default as default,
+  disabledButtonDemo,
+  iconButtonDemo,
+  sizeButtonDemo,
+  variantButtonDemo
+};

package/es/Button/index.css

@@ -0,0 +1,267 @@
+:root,
+page,
+xhs-page {
+  --bui-btn-font-size: var(--bui-text-size-3);
+  --bui-btn-font-weight: var(--bui-font-weight-medium);
+  --bui-btn-border-radius: 120px;
+  --bui-btn-small-border-radius: 120px;
+  --bui-btn-large-border-radius: 120px;
+  --bui-btn-full-border-radius: 120px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-bg: var(--bui-color-bg-view);
+  --bui-btn-border: 0;
+  --bui-btn-height: 27px;
+  --bui-btn-small-height: 24px;
+  --bui-btn-large-height: 33px;
+  --bui-btn-full-height: 42px;
+  --bui-btn-subtle-border: 0;
+  --bui-btn-outlined-border: 1px solid var(--bui-color-neutral-4);
+  --bui-btn-disabled-opacity: 0.5;
+  --bui-btn-small-padding: 0 11px;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-large-padding: 0 14px;
+  --bui-btn-full-font-size: var(--bui-title-size-4);
+  --bui-btn-full-font-family: var(--bui-font-family);
+}
+.bui-btn {
+  outline: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  color: var(--bui-btn-color);
+  background: var(--bui-btn-bg);
+  font-size: var(--bui-btn-font-size);
+  font-weight: var(--bui-btn-font-weight);
+  border: var(--bui-btn-border);
+  border-radius: var(--bui-btn-border-radius);
+  height: var(--bui-btn-height);
+  padding: var(--bui-btn-padding);
+  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: var(--bui-btn-disabled-opacity);
+}
+.bui-btn-small {
+  font-size: var(--bui-text-size-4);
+  padding: var(--bui-btn-small-padding);
+  height: var(--bui-btn-small-height);
+  border-radius: var(--bui-btn-small-border-radius);
+}
+.bui-btn-large {
+  font-size: var(--bui-text-size-2);
+  padding: var(--bui-btn-large-padding);
+  height: var(--bui-btn-large-height);
+  border-radius: var(--bui-btn-large-border-radius);
+}
+.bui-btn-full {
+  font-family: var(--bui-btn-full-font-family);
+  font-size: var(--bui-btn-full-font-size);
+  width: 100%;
+  height: var(--bui-btn-full-height);
+  border-radius: var(--bui-btn-full-border-radius);
+}
+.bui-btn-text {
+  background: none;
+}
+.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-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-btn-text.bui-btn-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-btn-text.bui-btn-vip {
+  color: var(--bui-color-vip);
+}
+.bui-btn-contained {
+  background: var(--bui-color-neutral-5);
+}
+.bui-btn-contained.bui-btn-primary {
+  color: var(--bui-color-white);
+  background-image:
+    linear-gradient(
+      90deg,
+      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(
+      90deg,
+      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(
+      90deg,
+      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(
+      90deg,
+      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(
+      90deg,
+      var(--bui-color-danger-start) 0%,
+      var(--bui-color-danger-end) 100%);
+}
+.bui-btn-contained.bui-btn-light {
+  color: var(--bui-color-fg-default);
+  background: var(--bui-color-bg-view);
+}
+.bui-btn-contained.bui-btn-dark {
+  color: var(--bui-color-bg-view);
+  background: var(--bui-color-fg-default);
+}
+.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 {
+  background: none;
+  border: var(--bui-btn-outlined-border);
+}
+.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-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-btn-outlined.bui-btn-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
+}
+.bui-btn-outlined.bui-btn-vip {
+  color: var(--bui-color-vip);
+  border-color: var(--bui-color-vip);
+}
+.bui-btn-subtle {
+  background-image: none;
+  background-color: var(--bui-color-gray-light);
+  border: var(--bui-btn-subtle-border);
+}
+.bui-btn-subtle.bui-btn-warning {
+  color: var(--bui-color-warning);
+  background: var(--bui-color-warning-light);
+}
+.bui-btn-subtle.bui-btn-primary {
+  color: var(--bui-color-primary);
+  background: var(--bui-color-primary-light);
+}
+.bui-btn-subtle.bui-btn-info {
+  color: var(--bui-color-info);
+  background: var(--bui-color-info-light);
+}
+.bui-btn-subtle.bui-btn-success {
+  color: var(--bui-color-success);
+  background: var(--bui-color-success-light);
+}
+.bui-btn-subtle.bui-btn-danger {
+  color: var(--bui-color-danger);
+  background: var(--bui-color-danger-light);
+}
+.bui-btn-subtle.bui-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-btn-subtle.bui-btn-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-btn-subtle.bui-btn-vip {
+  color: var(--bui-color-vip);
+  position: relative;
+  background-color: rgba(255, 134, 110, 0.3);
+}