@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/Badge/Badge.js

@@ -28,47 +28,74 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
+import { useBadgeDisplay } from "./hooks/useBadgeDisplay";
+import { useBadgeA11y } from "./hooks/useBadgeA11y";
 import "./index.css";
 const prefixCls = "bui-badge";
 const Badge = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    onClick,
     children,
     content,
     color = "primary",
-    maxCount,
+    max,
+    showZero = false,
+    invisible = false,
     variant = "contained",
-    type = "standard"
+    type = "standard",
+    // 无障碍功能相关属性
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role = "status",
+    "aria-hidden": ariaHidden = false
   } = _a, others = __objRest(_a, [
     "className",
-    "onClick",
     "children",
     "content",
     "color",
-    "maxCount",
+    "max",
+    "showZero",
+    "invisible",
     "variant",
-    "type"
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "role",
+    "aria-hidden"
   ]);
-  const displayValue = Number(content) > Number(maxCount) ? `${maxCount}+` : type !== "dot" && content;
+  const { displayValue, shouldShowBadge } = useBadgeDisplay({
+    content,
+    max,
+    showZero,
+    type
+  });
+  const { ariaAttributes } = useBadgeA11y({
+    displayValue,
+    type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role,
+    "aria-hidden": ariaHidden
+  });
+  if (invisible)
+    return null;
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(`${prefixCls}`, className, {
         [`${prefixCls}-position`]: children
       }),
-      onClick,
       ref
     }, others),
-    (content || type === "dot") && /* @__PURE__ */ React.createElement(
+    shouldShowBadge && /* @__PURE__ */ React.createElement(
       "div",
-      {
+      __spreadValues({
         className: clsx(
           `${prefixCls}-${color}`,
           `${prefixCls}-${variant}`,
           `${prefixCls}-${type}`
         )
-      },
+      }, ariaAttributes),
       displayValue
     ),
     children

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

@@ -13,7 +13,16 @@ export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverridePr
         /**
          * 最大值
          */
-        maxCount?: number;
+        max?: number;
+        /**
+         * content为0时是否展示
+         */
+        showZero?: boolean;
+        /**
+         * 是否隐藏badge
+         * @default false
+         */
+        invisible?: boolean;
         /**
          *徽章类型
          */
@@ -22,6 +31,26 @@ export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 徽章形状
          */
         type?: 'dot' | 'standard' | 'bubble';
+        /**
+         * 无障碍功能：为Badge提供可访问的标签
+         * 如果不提供，将根据content和type自动生成
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：引用描述此Badge的元素ID
+         */
+        'aria-describedby'?: string;
+        /**
+         * 无障碍功能：Badge的角色
+         * @default 'status'
+         */
+        role?: 'status' | 'img' | 'presentation';
+        /**
+         * 无障碍功能：是否对屏幕阅读器隐藏Badge
+         * 当为true时，Badge将被屏幕阅读器忽略
+         * @default false
+         */
+        'aria-hidden'?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/es/Badge/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Badge 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicBadgeDemo: () => React.JSX.Element;
+export declare const colorBadgeDemo: () => React.JSX.Element;
+export declare const typeBadgeDemo: () => React.JSX.Element;
+export declare const maxBadgeDemo: () => React.JSX.Element;
+export declare const accessibilityBadgeDemo: () => React.JSX.Element;
+export declare const invisibilityBadgeDemo: () => React.JSX.Element;
+export declare const complexInteractionBadgeDemo: () => React.JSX.Element;
+export declare const specialContentBadgeDemo: () => React.JSX.Element;
+declare const _default: {
+    basicBadgeDemo: () => React.JSX.Element;
+    colorBadgeDemo: () => React.JSX.Element;
+    typeBadgeDemo: () => React.JSX.Element;
+    maxBadgeDemo: () => React.JSX.Element;
+    accessibilityBadgeDemo: () => React.JSX.Element;
+    invisibilityBadgeDemo: () => React.JSX.Element;
+    complexInteractionBadgeDemo: () => React.JSX.Element;
+    specialContentBadgeDemo: () => React.JSX.Element;
+};
+export default _default;

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.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface UseBadgeA11yProps {
+    displayValue: React.ReactNode;
+    type?: 'dot' | 'standard' | 'bubble';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: 'status' | 'img' | 'presentation';
+    'aria-hidden'?: boolean;
+}
+export interface UseBadgeA11yResult {
+    accessibilityLabel: string | undefined;
+    ariaAttributes: {
+        role?: string;
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-hidden'?: boolean;
+    };
+}
+/**
+ * Badge 无障碍功能的自定义 Hook
+ * 负责处理可访问性标签和ARIA属性
+ */
+export declare const useBadgeA11y: ({ displayValue, type, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, role, "aria-hidden": ariaHidden, }: UseBadgeA11yProps) => UseBadgeA11yResult;

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.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface UseBadgeDisplayProps {
+    content?: React.ReactNode;
+    max?: number;
+    showZero?: boolean;
+    type?: 'dot' | 'standard' | 'bubble';
+}
+export interface UseBadgeDisplayResult {
+    displayValue: React.ReactNode;
+    shouldShowBadge: boolean;
+}
+/**
+ * Badge 显示逻辑的自定义 Hook
+ * 负责计算显示值和判断是否应该显示徽章
+ */
+export declare const useBadgeDisplay: ({ content, max, showZero, type, }: UseBadgeDisplayProps) => UseBadgeDisplayResult;

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/Button/Button.js

@@ -69,7 +69,8 @@ const Button = /* @__PURE__ */ React.forwardRef(
           className
         ),
         ref,
-        disabled
+        disabled,
+        "aria-disabled": disabled ? "true" : void 0
       }, others),
       startIcon && /* @__PURE__ */ React.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,

package/es/Button/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * 自定义 Button 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicButtonDemo: () => React.JSX.Element;
+export declare const variantButtonDemo: () => React.JSX.Element;
+export declare const colorButtonDemo: () => React.JSX.Element;
+export declare const sizeButtonDemo: () => React.JSX.Element;
+export declare const disabledButtonDemo: () => React.JSX.Element;
+export declare const iconButtonDemo: () => React.JSX.Element;
+export declare const ariaLabelButtonDemo: () => React.JSX.Element;
+declare const _default: {
+    basicButtonDemo: () => React.JSX.Element;
+    variantButtonDemo: () => React.JSX.Element;
+    colorButtonDemo: () => React.JSX.Element;
+    sizeButtonDemo: () => React.JSX.Element;
+    disabledButtonDemo: () => React.JSX.Element;
+    iconButtonDemo: () => React.JSX.Element;
+    ariaLabelButtonDemo: () => React.JSX.Element;
+};
+export default _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

@@ -8,7 +8,7 @@ xhs-page {
   --bui-btn-large-border-radius: 120px;
   --bui-btn-full-border-radius: 120px;
   --bui-btn-color: var(--bui-color-fg-muted);
-  --bui-btn-background: var(--bui-color-bg-view);
+  --bui-btn-bg: var(--bui-color-bg-view);
   --bui-btn-border: 0;
   --bui-btn-height: 27px;
   --bui-btn-small-height: 24px;
@@ -20,8 +20,8 @@ xhs-page {
   --bui-btn-small-padding: 0 11px;
   --bui-btn-padding: 0 14px;
   --bui-btn-large-padding: 0 14px;
+  --bui-btn-large-font-size: var(--bui-text-size-2);
   --bui-btn-full-font-size: var(--bui-title-size-4);
-  --bui-btn-full-font-family: var(--bui-font-family);
 }
 .bui-btn {
   outline: 0;
@@ -34,7 +34,7 @@ xhs-page {
   justify-content: center;
   white-space: nowrap;
   color: var(--bui-btn-color);
-  background: var(--bui-btn-background);
+  background: var(--bui-btn-bg);
   font-size: var(--bui-btn-font-size);
   font-weight: var(--bui-btn-font-weight);
   border: var(--bui-btn-border);
@@ -95,13 +95,12 @@ xhs-page {
   border-radius: var(--bui-btn-small-border-radius);
 }
 .bui-btn-large {
-  font-size: var(--bui-text-size-2);
+  font-size: var(--bui-btn-large-font-size);
   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);

package/es/CSSTransition/CSSTransition.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CSSTransitionProps } from './CSSTransition.types';
+declare const CSSTransition: React.ForwardRefExoticComponent<CSSTransitionProps & React.RefAttributes<HTMLElement>>;
+export default CSSTransition;

package/es/CSSTransition/CSSTransition.js

@@ -0,0 +1,153 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useRef } from "react";
+import {
+  addClass as addOneClass,
+  removeClass as removeOneClass
+} from "@bifrostui/utils";
+import Transition from "../Transition";
+const forceReflow = (node) => node.scrollTop;
+const benchAddClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => addOneClass(node, c));
+const benchRemoveClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => removeOneClass(node, c));
+const CSSTransition = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, { classNames = "" } = _a, others = __objRest(_a, ["classNames"]);
+    const appliedClasses = useRef({
+      appear: {},
+      enter: {},
+      exit: {}
+    });
+    const getClassNames = (type) => {
+      const isStringClassNames = typeof classNames === "string";
+      const prefix = isStringClassNames && classNames ? `${classNames}-` : "";
+      if (isStringClassNames) {
+        return {
+          baseClassName: `${prefix}${type}`,
+          activeClassName: `${prefix}${type}-active`,
+          doneClassName: `${prefix}${type}-done`
+        };
+      }
+      return {
+        baseClassName: classNames == null ? void 0 : classNames[type],
+        activeClassName: classNames == null ? void 0 : classNames[`${type}Active`],
+        doneClassName: classNames == null ? void 0 : classNames[`${type}Done`]
+      };
+    };
+    const addClass = (node, type, phase) => {
+      const className = getClassNames(type)[`${phase}ClassName`];
+      if (phase === "active") {
+        if (node)
+          forceReflow(node);
+      }
+      if (className) {
+        appliedClasses.current[type][phase] = className;
+        benchAddClass(node, className);
+      }
+    };
+    const removeClasses = (node, type) => {
+      const {
+        base: baseClassName,
+        active: activeClassName,
+        done: doneClassName
+      } = appliedClasses.current[type];
+      appliedClasses.current[type] = {};
+      if (baseClassName) {
+        benchRemoveClass(node, baseClassName);
+      }
+      if (activeClassName) {
+        benchRemoveClass(node, activeClassName);
+      }
+      if (doneClassName) {
+        benchRemoveClass(node, doneClassName);
+      }
+    };
+    const onEnter = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "enter", "base");
+      if (props.onEnter) {
+        props.onEnter(node);
+      }
+    };
+    const onEntering = (node) => {
+      addClass(node, "enter", "active");
+      if (props.onEntering) {
+        props.onEntering(node);
+      }
+    };
+    const onEntered = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "enter", "done");
+      if (props.onEntered) {
+        props.onEntered(node);
+      }
+    };
+    const onExit = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "exit", "base");
+      if (props.onExit) {
+        props.onExit(node);
+      }
+    };
+    const onExiting = (node) => {
+      addClass(node, "exit", "active");
+      if (props.onExiting) {
+        props.onExiting(node);
+      }
+    };
+    const onExited = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "exit", "done");
+      if (props.onExited) {
+        props.onExited(node);
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      Transition,
+      __spreadProps(__spreadValues({
+        ref,
+        delay: 0
+      }, others), {
+        onEnter,
+        onEntered,
+        onEntering,
+        onExit,
+        onExiting,
+        onExited
+      })
+    );
+  }
+);
+CSSTransition.displayName = "BuiCSSTransition";
+var CSSTransition_default = CSSTransition;
+export {
+  CSSTransition_default as default
+};

package/es/CSSTransition/CSSTransition.types.d.ts

@@ -0,0 +1,13 @@
+import { TransitionProps } from '../Transition';
+type IClassNames = string | {
+    enter?: string;
+    enterActive?: string;
+    enterDone?: string;
+    exit?: string;
+    exitActive?: string;
+    exitDone?: string;
+};
+export interface CSSTransitionProps extends TransitionProps {
+    classNames?: IClassNames;
+}
+export {};

package/es/CSSTransition/CSSTransition.types.js

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

package/es/CSSTransition/demo/CSSTransitionDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const StackDemo: () => React.JSX.Element;
+export default StackDemo;