@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Tooltip/useTooltip.js

@@ -0,0 +1,313 @@
+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 __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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var useTooltip_exports = {};
+__export(useTooltip_exports, {
+  useTooltip: () => useTooltip
+});
+module.exports = __toCommonJS(useTooltip_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+function useTooltip(parameters) {
+  const {
+    defaultOpen = false,
+    open,
+    offset,
+    placement = "top",
+    trigger = "click",
+    onOpenChange,
+    autoFocus = false,
+    closeOnEscape = false,
+    children,
+    rootRef
+  } = parameters;
+  const controlByUser = typeof open !== "undefined";
+  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
+  const childrenRef = (0, import_react.useRef)();
+  const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
+  const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
+  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
+  const [toolStyles, setToolStyles] = (0, import_react.useState)({});
+  const tipRef = (0, import_react.useRef)(null);
+  const tooltipId = (0, import_utils.useUniqueId)();
+  (0, import_react.useEffect)(() => {
+    setArrowDirection(direction);
+    setArrowLocation(location);
+  }, [direction, location]);
+  const isOpen = open || openStatus;
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    clearRef(status);
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hideTooltip = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showTooltip = (event) => {
+    changeOpenStatus(event, true);
+  };
+  const handleKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        hideTooltip(event);
+        if (childrenRef.current && "focus" in childrenRef.current) {
+          childrenRef.current.focus();
+        }
+      }
+    },
+    [closeOnEscape, isOpen, hideTooltip]
+  );
+  (0, import_react.useEffect)(() => {
+    if (isOpen && autoFocus && tipRef.current) {
+      const timer = setTimeout(() => {
+        if (tipRef.current && "focus" in tipRef.current) {
+          tipRef.current.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [isOpen, autoFocus]);
+  (0, import_react.useEffect)(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open != null ? open : false);
+    clearRef(open != null ? open : false);
+  }, [open, controlByUser]);
+  (0, import_react.useEffect)(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
+  const shouldListenGlobalClick = (0, import_react.useCallback)(() => {
+    if (typeof trigger === "string") {
+      return trigger === "click";
+    }
+    if (Array.isArray(trigger)) {
+      return trigger.includes("click");
+    }
+    return true;
+  }, [trigger]);
+  const clickEventHandler = (0, import_react.useCallback)(
+    (event) => {
+      if (!shouldListenGlobalClick()) {
+        return;
+      }
+      hideTooltip(event);
+    },
+    [shouldListenGlobalClick, hideTooltip]
+  );
+  const onMounted = (0, import_utils.throttle)(() => __async(this, null, function* () {
+    if (!tipRef.current)
+      return;
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = (0, import_utils.parsePlacement)(placement);
+    const result = yield (0, import_utils.getStylesAndLocation)({
+      childrenRef,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing: offset || 0,
+      tipRef
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setToolStyles(styles);
+  }), 100);
+  (0, import_react.useEffect)(() => {
+    const bindEvent = () => {
+      if (!openStatus)
+        return;
+      if (!controlByUser && shouldListenGlobalClick() && !import_utils.isMini) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!import_utils.isMini) {
+        window.addEventListener("resize", onMounted);
+      }
+      if (isOpen && !import_utils.isMini) {
+        document.addEventListener("keydown", handleKeyDown);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser && shouldListenGlobalClick() && !import_utils.isMini) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!import_utils.isMini) {
+        window.removeEventListener("resize", onMounted);
+      }
+      if (!import_utils.isMini) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, [
+    openStatus,
+    controlByUser,
+    shouldListenGlobalClick,
+    clickEventHandler,
+    onMounted,
+    isOpen,
+    handleKeyDown
+  ]);
+  const tooltipRef = (0, import_utils.useForkRef)(tipRef, rootRef);
+  const getTooltipProps = (0, import_react.useCallback)(
+    (otherProps = {}) => {
+      return __spreadValues({
+        id: tooltipId,
+        ref: tooltipRef,
+        tabIndex: autoFocus ? -1 : void 0
+      }, otherProps);
+    },
+    [tooltipId, tooltipRef, autoFocus]
+  );
+  const getChildProps = (0, import_react.useCallback)(() => {
+    var _a;
+    let triggerEventOption = {};
+    if (!controlByUser) {
+      triggerEventOption = (0, import_utils.triggerEventTransform)({
+        trigger,
+        click: triggerClick,
+        show: showTooltip,
+        hide: hideTooltip
+      });
+    }
+    const childProps = __spreadProps(__spreadValues({
+      ref: childrenRef
+    }, triggerEventOption), {
+      "aria-describedby": isOpen ? tooltipId : void 0
+    });
+    if (import_react.default.isValidElement(children)) {
+      const elementType = typeof children.type === "string" ? children.type : ((_a = children.type) == null ? void 0 : _a.displayName) || "";
+      const interactiveElements = [
+        "button",
+        "a",
+        "input",
+        "select",
+        "textarea"
+      ];
+      const childElementProps = children.props;
+      const isInteractive = interactiveElements.includes(elementType.toLowerCase()) || (childElementProps == null ? void 0 : childElementProps.role) === "button" || (childElementProps == null ? void 0 : childElementProps.role) === "menuitem" || (childElementProps == null ? void 0 : childElementProps.role) === "tab" || (childElementProps == null ? void 0 : childElementProps.tabIndex) !== void 0;
+      if (isInteractive) {
+        childProps["aria-expanded"] = isOpen;
+      }
+    }
+    return childProps;
+  }, [
+    controlByUser,
+    trigger,
+    triggerClick,
+    showTooltip,
+    hideTooltip,
+    isOpen,
+    tooltipId,
+    children
+  ]);
+  const getPortalProps = (0, import_react.useCallback)(() => {
+    return {
+      onMounted
+    };
+  }, [onMounted]);
+  return {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    tooltipRef,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation,
+    tooltipId
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTooltip
+});

package/dist/Transition/TransitionCore.js

@@ -89,17 +89,17 @@ const TransitionCore = (0, import_react.forwardRef)(
       children,
       mountOnEnter,
       unmountOnExit,
-      enter,
-      exit,
+      enter = true,
+      exit = true,
       timeout: _timeout,
-      delay: _delay,
+      delay: _delay = 0,
       onEnter,
       onEntering,
       onEntered,
       onExit,
       onExiting,
       onExited,
-      nextTick
+      nextTick = setTimeout
     } = _a, childProps = __objRest(_a, [
       "appear",
       "in",
@@ -130,13 +130,16 @@ const TransitionCore = (0, import_react.forwardRef)(
     });
     const innerNodeRef = (0, import_react.useRef)();
     const nodeRef = (0, import_utils.useForkRef)(innerNodeRef, ref);
-    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout };
-    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay };
-    timeout.enter += delay.enter;
-    timeout.exit += delay.exit;
+    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout, appear: _timeout };
+    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay, appear: _delay };
+    if (timeout.enter !== void 0)
+      timeout.enter += delay.enter || 0;
+    if (timeout.exit !== void 0)
+      timeout.exit += delay.exit || 0;
+    if (timeout.appear !== void 0)
+      timeout.appear += delay.appear || 0;
     const nextCallback = (0, import_react.useRef)(null);
     const appearStatus = (0, import_react.useRef)(inProp && appear ? ENTERING : null);
-    const isFirstRender = (0, import_react.useRef)(false);
     const cancelNextCallback = () => {
       var _a2;
       if (nextCallback.current !== null) {
@@ -193,7 +196,9 @@ const TransitionCore = (0, import_react.forwardRef)(
     });
     const performExit = () => __async(void 0, null, function* () {
       if (!exit) {
-        safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+        safeSetState(EXITED, () => __async(void 0, null, function* () {
+          if (unmountOnExit)
+            setStatus(UNMOUNTED);
           yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
         }));
         return;
@@ -202,7 +207,9 @@ const TransitionCore = (0, import_react.forwardRef)(
       safeSetState(EXITING, () => __async(void 0, null, function* () {
         yield onExiting == null ? void 0 : onExiting(innerNodeRef == null ? void 0 : innerNodeRef.current);
         onTransitionEnd(timeout.exit, () => {
-          safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+          safeSetState(EXITED, () => __async(void 0, null, function* () {
+            if (unmountOnExit)
+              setStatus(UNMOUNTED);
             yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
           }));
         });
@@ -212,6 +219,9 @@ const TransitionCore = (0, import_react.forwardRef)(
       if (nextStatus !== null) {
         cancelNextCallback();
         if (nextStatus === ENTERING) {
+          if (unmountOnExit || mountOnEnter) {
+            forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
+          }
           performEnter(mounting);
         } else if (nextStatus === EXITING) {
           performExit();
@@ -224,12 +234,7 @@ const TransitionCore = (0, import_react.forwardRef)(
         cancelNextCallback();
       };
     }, []);
-    (0, import_react.useEffect)(() => {
-      const isMounted = status !== UNMOUNTED;
-      if (!isFirstRender.current) {
-        isFirstRender.current = true;
-        return;
-      }
+    (0, import_utils.useDidMountEffect)(() => {
       let nextStatus = null;
       if (inProp) {
         if (status !== ENTERING && status !== ENTERED) {
@@ -238,13 +243,13 @@ const TransitionCore = (0, import_react.forwardRef)(
       } else if (status === ENTERING || status === ENTERED) {
         nextStatus = EXITING;
       }
-      if (isMounted)
-        updateStatus(nextStatus, false);
-      else
-        safeSetState(inProp ? "EXITED" : "ENTERED", () => {
-          forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
+      if (inProp && status === UNMOUNTED) {
+        safeSetState(EXITED, () => {
           updateStatus(nextStatus, false);
         });
+      } else {
+        updateStatus(nextStatus, false);
+      }
     }, [inProp]);
     if (status === UNMOUNTED)
       return null;
@@ -254,9 +259,4 @@ const TransitionCore = (0, import_react.forwardRef)(
   }
 );
 TransitionCore.displayName = "BuiTransitionCore";
-TransitionCore.defaultProps = {
-  enter: true,
-  exit: true,
-  nextTick: setTimeout
-};
 var TransitionCore_default = TransitionCore;

package/dist/TransitionGroup/TransitionGroup.js

@@ -0,0 +1,132 @@
+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 TransitionGroup_exports = {};
+__export(TransitionGroup_exports, {
+  default: () => TransitionGroup_default
+});
+module.exports = __toCommonJS(TransitionGroup_exports);
+var import_react = __toESM(require("react"));
+var import_childMapping = require("./utils/childMapping");
+const TransitionGroupContext = import_react.default.createContext(null);
+const values = Object.values || ((obj) => Object.keys(obj).map((k) => obj[k]));
+const TransitionGroup = (props) => {
+  const _a = props, {
+    component: Component = "div",
+    children,
+    appear,
+    enter,
+    exit,
+    childFactory = (child) => child
+  } = _a, restProps = __objRest(_a, [
+    "component",
+    "children",
+    "appear",
+    "enter",
+    "exit",
+    "childFactory"
+  ]);
+  const [state, setState] = (0, import_react.useState)({
+    contextValue: { isMounting: true },
+    firstRender: true,
+    children: {}
+  });
+  const mountedRef = (0, import_react.useRef)(false);
+  const handleExitedRef = (0, import_react.useRef)((child, node) => {
+    const currentChildMapping = (0, import_childMapping.getChildMapping)(children);
+    if (child.key in currentChildMapping)
+      return;
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+    if (mountedRef.current) {
+      setState((prevState) => {
+        const tempChildren = __spreadValues({}, prevState.children);
+        delete tempChildren[child.key];
+        return __spreadProps(__spreadValues({}, prevState), { children: tempChildren });
+      });
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    mountedRef.current = true;
+    setState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+      contextValue: { isMounting: false }
+    }));
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setState((prevState) => {
+      const { firstRender, children: prevChildMapping } = prevState;
+      const handleExited = handleExitedRef.current;
+      return __spreadProps(__spreadValues({}, prevState), {
+        children: firstRender ? (0, import_childMapping.getInitialChildMapping)(props, handleExited) : (0, import_childMapping.getNextChildMapping)(props, prevChildMapping, handleExited),
+        firstRender: false
+      });
+    });
+  }, [children, appear, enter, exit]);
+  const { contextValue, children: mappedChildren } = state;
+  const valuedChildren = values(mappedChildren).map(
+    childFactory
+  );
+  if (Component === null) {
+    return /* @__PURE__ */ import_react.default.createElement(TransitionGroupContext.Provider, { value: contextValue }, valuedChildren);
+  }
+  return /* @__PURE__ */ import_react.default.createElement(TransitionGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, restProps), valuedChildren));
+};
+TransitionGroup.displayName = "BuiTransitionGroup";
+var TransitionGroup_default = TransitionGroup;

package/dist/TransitionGroup/TransitionGroup.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 TransitionGroup_types_exports = {};
+module.exports = __toCommonJS(TransitionGroup_types_exports);

package/dist/TransitionGroup/demo/TransitionGroupDemo.js

@@ -0,0 +1,68 @@
+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 TransitionGroupDemo_exports = {};
+__export(TransitionGroupDemo_exports, {
+  default: () => TransitionGroupDemo_default
+});
+module.exports = __toCommonJS(TransitionGroupDemo_exports);
+var import_react = require("@bifrostui/react");
+var import_react2 = __toESM(require("react"));
+var import_index = require("./index.css");
+const TransitionGroupDemo = () => {
+  const [items, setItems] = (0, import_react2.useState)([
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 2" },
+    { id: 3, text: "Item 3" }
+  ]);
+  const handleAddItem = () => {
+    const id = items.length > 0 ? Math.max(...items.map((item) => item.id)) + 1 : 1;
+    setItems((prev) => [...prev, { id, text: `Item ${id}` }]);
+  };
+  const handleRemoveItem = (id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement(import_react.Button, { onClick: handleAddItem }, "\u6DFB\u52A0\u9879\u76EE"), /* @__PURE__ */ import_react2.default.createElement(import_react.TransitionGroup, { className: "transition-group-container" }, items.map((item) => /* @__PURE__ */ import_react2.default.createElement(
+    import_react.CSSTransition,
+    {
+      key: item.id,
+      unmountOnExit: true,
+      timeout: 300,
+      classNames: "item"
+    },
+    /* @__PURE__ */ import_react2.default.createElement("div", { className: "item-container" }, /* @__PURE__ */ import_react2.default.createElement("span", null, item.text), /* @__PURE__ */ import_react2.default.createElement(
+      import_react.Button,
+      {
+        size: "small",
+        color: "danger",
+        onClick: () => handleRemoveItem(item.id)
+      },
+      "\u5220\u9664"
+    ))
+  ))));
+};
+var TransitionGroupDemo_default = TransitionGroupDemo;

package/dist/TransitionGroup/demo/index.css

@@ -0,0 +1,33 @@
+.transition-group-container {
+  margin-top: 10px;
+}
+.transition-group-container .item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.transition-group-container .item-enter {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.transition-group-container .item-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .item-exit {
+  opacity: 1;
+  transform: translateX(0);
+}
+.transition-group-container .item-exit-active {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .bui-btn {
+  margin-bottom: 0;
+}