@bifrostui/react 1.5.3 → 2.0.0-alpha.1

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

@@ -0,0 +1,81 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaLabelButtonDemo: () => ariaLabelButtonDemo,
+  basicButtonDemo: () => basicButtonDemo,
+  colorButtonDemo: () => colorButtonDemo,
+  default: () => A11yDemos_default,
+  disabledButtonDemo: () => disabledButtonDemo,
+  iconButtonDemo: () => iconButtonDemo,
+  sizeButtonDemo: () => sizeButtonDemo,
+  variantButtonDemo: () => variantButtonDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("../../Button"));
+const basicButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, null, "\u57FA\u7840\u6309\u94AE"));
+};
+const variantButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "text" }, "\u6587\u5B57\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "outlined" }, "\u7EBF\u6846\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "contained" }, "\u586B\u5145\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "subtle" }, "\u67D4\u548C\u6309\u94AE"));
+};
+const colorButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "primary" }, "\u4E3B\u8981\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "success" }, "\u6210\u529F\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "warning" }, "\u8B66\u544A\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "danger" }, "\u5371\u9669\u6309\u94AE"));
+};
+const sizeButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "small" }, "\u5C0F\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "medium" }, "\u4E2D\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "large" }, "\u5927\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "full", style: { width: "200px" } }, "\u5168\u5BBD\u6309\u94AE"));
+};
+const disabledButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { disabled: true }, "\u7981\u7528\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "contained", disabled: true }, "\u7981\u7528\u586B\u5145\u6309\u94AE"));
+};
+const iconButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { startIcon: /* @__PURE__ */ import_react.default.createElement("span", null, "\u{1F31F}") }, "\u5E26\u524D\u7F00\u56FE\u6807"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { endIcon: /* @__PURE__ */ import_react.default.createElement("span", null, "\u{1F4C5}") }, "\u5E26\u540E\u7F00\u56FE\u6807"));
+};
+const ariaLabelButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { "aria-label": "\u63D0\u4EA4\u8868\u5355" }, "\u63D0\u4EA4"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { "aria-label": "\u53D6\u6D88\u64CD\u4F5C" }, "\u53D6\u6D88"));
+};
+var A11yDemos_default = {
+  basicButtonDemo,
+  variantButtonDemo,
+  colorButtonDemo,
+  sizeButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  ariaLabelButtonDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelButtonDemo,
+  basicButtonDemo,
+  colorButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  sizeButtonDemo,
+  variantButtonDemo
+});

package/dist/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);
+}

package/dist/CSSTransition/CSSTransition.js

@@ -0,0 +1,177 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransition_exports = {};
+__export(CSSTransition_exports, {
+  default: () => CSSTransition_default
+});
+module.exports = __toCommonJS(CSSTransition_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Transition = __toESM(require("../Transition"));
+const forceReflow = (node) => node.scrollTop;
+const benchAddClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => (0, import_utils.addClass)(node, c));
+const benchRemoveClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => (0, import_utils.removeClass)(node, c));
+const CSSTransition = /* @__PURE__ */ import_react.default.forwardRef(
+  (props, ref) => {
+    const _a = props, { classNames = "" } = _a, others = __objRest(_a, ["classNames"]);
+    const appliedClasses = (0, import_react.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__ */ import_react.default.createElement(
+      import_Transition.default,
+      __spreadProps(__spreadValues({
+        ref,
+        delay: 0
+      }, others), {
+        onEnter,
+        onEntered,
+        onEntering,
+        onExit,
+        onExiting,
+        onExited
+      })
+    );
+  }
+);
+CSSTransition.displayName = "BuiCSSTransition";
+var CSSTransition_default = CSSTransition;

package/dist/CSSTransition/CSSTransition.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransition_types_exports = {};
+module.exports = __toCommonJS(CSSTransition_types_exports);

package/dist/CSSTransition/demo/CSSTransitionDemo.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransitionDemo_exports = {};
+__export(CSSTransitionDemo_exports, {
+  default: () => CSSTransitionDemo_default
+});
+module.exports = __toCommonJS(CSSTransitionDemo_exports);
+var import_react = __toESM(require("react"));
+var import_react2 = require("@bifrostui/react");
+var import_index = require("./index.css");
+const StackDemo = () => {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const transitionClasses = {
+    enter: "slide-enter",
+    enterActive: "slide-enter-active",
+    enterDone: "slide-enter-done",
+    exit: "slide-exit",
+    exitActive: "slide-exit-active",
+    exitDone: "slide-exit-done"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width: "300px",
+        height: "100px",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react2.Button,
+      {
+        onClick: () => {
+          setOpen((prev) => !prev);
+        }
+      },
+      open ? "Exit" : "Enter"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react2.CSSTransition,
+      {
+        in: open,
+        timeout: 300,
+        unmountOnExit: false,
+        classNames: transitionClasses
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_react2.Alert, { className: "my-node", color: "success" }, "\u8FC7\u6E21\u8FC7\u7A0B\u4E2D\u4F1A\u4FEE\u6539className")
+    )
+  );
+};
+var CSSTransitionDemo_default = StackDemo;

package/dist/CSSTransition/demo/index.css

@@ -0,0 +1,25 @@
+.bui-btn {
+  margin-bottom: 18px;
+}
+.slide-enter {
+  transform: translate3d(-100%, 0, 0);
+}
+.slide-enter-active {
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-enter-done {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit-active {
+  will-change: transform;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-exit-done {
+  transform: translate3d(-100%, 0, 0);
+}

package/dist/CSSTransition/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransition_exports = {};
+__export(CSSTransition_exports, {
+  CSSTransition: () => import_CSSTransition.default,
+  default: () => import_CSSTransition.default
+});
+module.exports = __toCommonJS(CSSTransition_exports);
+var import_CSSTransition = __toESM(require("./CSSTransition"));
+__reExport(CSSTransition_exports, require("./CSSTransition.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSSTransition,
+  ...require("./CSSTransition.types")
+});