@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/chunk-2EC4F7VG.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Affix.tsx
+var Affix = ({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  style,
+  children,
+  onChange,
+  ...props
+}) => {
+  const wrapperRef = react.useRef(null);
+  const sentinelRef = react.useRef(null);
+  const originalRectRef = react.useRef(null);
+  const [state, setState] = react.useState({ affixed: false, style: {} });
+  const stateRef = react.useRef(state);
+  stateRef.current = state;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const recalcStyle = react.useCallback(
+    (affixed) => {
+      const el = wrapperRef.current;
+      if (!el) return;
+      if (!stateRef.current.affixed) {
+        const rect = el.getBoundingClientRect();
+        originalRectRef.current = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      if (!originalRectRef.current) return;
+      const resolved = tigercatCore.resolveAffixTarget(target);
+      const containerRect = resolved.getRect();
+      if (!affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          onChangeRef.current?.(false);
+        }
+        return;
+      }
+      const next = tigercatCore.calculateAffixState(
+        {
+          top: -1,
+          left: originalRectRef.current.left,
+          width: originalRectRef.current.width,
+          height: originalRectRef.current.height
+        },
+        containerRect,
+        offsetBottom !== void 0 ? void 0 : offsetTop,
+        offsetBottom,
+        zIndex
+      );
+      if (!next.affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          onChangeRef.current?.(false);
+        }
+        return;
+      }
+      const wasAffixed = stateRef.current.affixed;
+      setState(next);
+      if (!wasAffixed) onChangeRef.current?.(true);
+    },
+    [offsetTop, offsetBottom, target, zIndex]
+  );
+  react.useEffect(() => {
+    if (!sentinelRef.current) return void 0;
+    const resolved = tigercatCore.resolveAffixTarget(target);
+    const root = resolved.element === window ? null : resolved.element;
+    const stop = tigercatCore.createAffixObserver(sentinelRef.current, {
+      offsetTop,
+      offsetBottom,
+      root,
+      onToggle: (affixed) => recalcStyle(affixed)
+    });
+    let resizeObs = null;
+    const onResize = () => {
+      if (stateRef.current.affixed) recalcStyle(true);
+    };
+    if (typeof ResizeObserver !== "undefined" && wrapperRef.current) {
+      resizeObs = new ResizeObserver(() => onResize());
+      resizeObs.observe(wrapperRef.current);
+    }
+    window.addEventListener("resize", onResize, { passive: true });
+    return () => {
+      stop();
+      resizeObs?.disconnect();
+      window.removeEventListener("resize", onResize);
+    };
+  }, [offsetTop, offsetBottom, target, recalcStyle]);
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(className), [className]);
+  const wrapperStyle = react.useMemo(
+    () => state.affixed ? { ...state.style, ...style } : style,
+    [state.affixed, state.style, style]
+  );
+  const sentinel = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      "aria-hidden": "true",
+      style: { display: "block", width: 0, height: 0, pointerEvents: "none" }
+    }
+  );
+  if (state.affixed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      sentinel,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            width: originalRectRef.current?.width ?? 0,
+            height: originalRectRef.current?.height ?? 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    sentinel,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+  ] });
+};
+
+exports.Affix = Affix;

package/dist/{chunk-NZNSUKPT.js → chunk-2HDQRMGU.js}

@@ -85,27 +85,9 @@ var Select = (props) => {
     return props.value === option.value;
   };
   const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex = () => flatFilteredOptions.findIndex((opt) => !opt.disabled);
-  const findLastEnabledIndex = () => {
-    for (let i = flatFilteredOptions.length - 1; i >= 0; i--) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return -1;
-  };
-  const findNextEnabledIndex = (current, direction) => {
-    if (flatFilteredOptions.length === 0) {
-      return -1;
-    }
-    const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.length - 1 : current + direction;
-    for (let i = start; i >= 0 && i < flatFilteredOptions.length; i += direction) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return current;
-  };
+  const findFirstEnabledIndex = () => tigercatCore.findFirstEnabledIndex(flatFilteredOptions);
+  const findLastEnabledIndex = () => tigercatCore.findLastEnabledIndex(flatFilteredOptions);
+  const findNextEnabledIndex = (current, direction) => tigercatCore.findNextEnabledIndex(flatFilteredOptions, current, direction);
   const focusOptionAt = (index) => {
     if (index < 0) {
       return;

package/dist/{chunk-LVC43YX2.mjs → chunk-2IUTFPQQ.mjs}

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { classNames } from '@expcat/tigercat-core';
+import { classNames, getChartTooltipTransform } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/ChartTooltip.tsx
@@ -17,7 +17,7 @@ var ChartTooltip = ({
     if (!visible) return;
     let newX = x + 12;
     let newY = y - 8;
-    requestAnimationFrame(() => {
+    const frameHandle = requestAnimationFrame(() => {
       if (!tooltipRef.current) return;
       const rect = tooltipRef.current.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
@@ -33,11 +33,12 @@ var ChartTooltip = ({
       setAdjustedPosition({ x: newX, y: newY });
     });
     setAdjustedPosition({ x: newX, y: newY });
+    return () => cancelAnimationFrame(frameHandle);
   }, [x, y, visible]);
   const tooltipClasses = useMemo(
     () => classNames(
-      "fixed z-[9999] pointer-events-none",
-      "px-3 py-2 rounded-md shadow-lg",
+      "fixed left-0 top-0 z-[9999] pointer-events-none will-change-transform",
+      "px-3 py-2 rounded-[var(--tiger-radius-md,0.375rem)] shadow-[var(--tiger-shadow-glass,0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1))]",
       "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
       "text-[color:var(--tiger-text-inverse,#f9fafb)]",
       "text-sm whitespace-nowrap",
@@ -54,8 +55,7 @@ var ChartTooltip = ({
       ref: tooltipRef,
       className: tooltipClasses,
       style: {
-        left: `${adjustedPosition.x}px`,
-        top: `${adjustedPosition.y}px`
+        transform: getChartTooltipTransform(adjustedPosition)
       },
       role: "tooltip",
       "data-chart-tooltip": "true",

package/dist/{chunk-LPNHBHS2.mjs → chunk-2LER76UK.mjs}

@@ -1,8 +1,9 @@
+import { VirtualList } from './chunk-SXNHXUUF.mjs';
 import { Input } from './chunk-WNLUUD5N.mjs';
 import { Textarea } from './chunk-7QZ4XT2P.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
 import { Avatar } from './chunk-FE7PEZTI.mjs';
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { classNames, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -30,6 +31,10 @@ var ChatWindow = ({
   allowEmpty = false,
   clearOnSend = true,
   statusVariant: _sv,
+  virtual = false,
+  virtualItemHeight = 88,
+  virtualHeight = 400,
+  autoScrollToBottom = true,
   onChange,
   onSend,
   renderMessage,
@@ -45,7 +50,7 @@ var ChatWindow = ({
   const inputValue = value !== void 0 ? value : innerValue;
   const wrapperClasses = useMemo(
     () => classNames(
-      "tiger-chat-window flex flex-col w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
+      "tiger-chat-window flex flex-col w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
       className
     ),
     [className]
@@ -125,7 +130,7 @@ var ChatWindow = ({
                 "div",
                 {
                   className: classNames(
-                    "rounded-lg px-3 py-2 text-sm break-words",
+                    "rounded-[var(--tiger-radius-md,0.5rem)] px-3 py-2 text-sm break-words",
                     isSelf ? "bg-[var(--tiger-primary,#2563eb)] text-white rounded-tr-none" : "bg-[var(--tiger-surface-muted,#f3f4f6)] text-[var(--tiger-text,#111827)] rounded-tl-none"
                   ),
                   "data-tiger-chat-bubble": true,
@@ -142,10 +147,40 @@ var ChatWindow = ({
     },
     [renderMessage, showAvatar, showName, showTime]
   );
+  const messageListRef = useRef(null);
+  useEffect(() => {
+    if (!autoScrollToBottom) return;
+    const raf = requestAnimationFrame(() => {
+      const el = messageListRef.current;
+      if (!el) return;
+      const target = (virtual ? el.firstElementChild : el) ?? el;
+      target.scrollTop = target.scrollHeight;
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [messages.length, autoScrollToBottom, virtual]);
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-tiger-chat-window": true, ...props, children: [
-    /* @__PURE__ */ jsx(
+    virtual && messages.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: messageListRef,
+        role: "log",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        "aria-label": messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868",
+        children: /* @__PURE__ */ jsx(
+          VirtualList,
+          {
+            itemCount: messages.length,
+            itemHeight: virtualItemHeight,
+            height: virtualHeight,
+            renderItem: ({ index }) => renderMessageItem(messages[index], index)
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
       "div",
       {
+        ref: messageListRef,
         className: "flex-1 overflow-auto p-4 space-y-3",
         role: "log",
         "aria-live": "polite",

package/dist/{chunk-PXPUPQRO.js → chunk-2N3CQT4X.js}

@@ -16,12 +16,18 @@ var CollapsePanel = ({
   children
 }) => {
   const collapseContext = chunkQ2GPRAF4_js.useCollapseContext();
+  const contentRef = react.useRef(null);
+  const transitionControllerRef = react.useRef(null);
+  const initialContentStyleRef = react.useRef(tigercatCore.getInitialCollapseContentStyle(false));
   if (!collapseContext) {
     throw new Error("CollapsePanel must be used within a Collapse component");
   }
   const isActive = react.useMemo(() => {
     return tigercatCore.isPanelActive(panelKey, collapseContext.activeKeys);
   }, [panelKey, collapseContext.activeKeys]);
+  if (!transitionControllerRef.current) {
+    initialContentStyleRef.current = tigercatCore.getInitialCollapseContentStyle(isActive);
+  }
   const panelClasses = react.useMemo(() => {
     return tigercatCore.classNames(tigercatCore.getCollapsePanelClasses(collapseContext.ghost, className));
   }, [collapseContext.ghost, className]);
@@ -48,6 +54,20 @@ var CollapsePanel = ({
     },
     [disabled, collapseContext.handlePanelClick, panelKey]
   );
+  react.useLayoutEffect(() => {
+    if (!contentRef.current) return void 0;
+    const controller = tigercatCore.createCollapseTransitionController(contentRef.current, {
+      expanded: isActive
+    });
+    transitionControllerRef.current = controller;
+    return () => {
+      transitionControllerRef.current = null;
+      controller.dispose();
+    };
+  }, []);
+  react.useLayoutEffect(() => {
+    transitionControllerRef.current?.update(isActive);
+  }, [isActive]);
   const arrowIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -91,11 +111,10 @@ var CollapsePanel = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: contentRef,
+        "data-tiger-collapse-content": "",
         className: tigercatCore.collapsePanelContentWrapperClasses,
-        style: {
-          maxHeight: isActive ? "none" : "0",
-          opacity: isActive ? "1" : "0"
-        },
+        style: initialContentStyleRef.current,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.collapsePanelContentBaseClasses, children })
       }
     )

package/dist/{chunk-BJ2GUKPU.mjs → chunk-2PLPUM5J.mjs}

@@ -1,8 +1,7 @@
-import { useEscapeKey } from './chunk-WLIFEALE.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
+import { useEscapeKey, useBodyScrollLock, useFocusTrap, renderBodyPortal } from './chunk-XTSG362L.mjs';
 import React, { useEffect, useCallback, useMemo, useId, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { getModalContentClasses, getModalContainerClasses, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, getFocusableElements, getFocusTrapNavigation, classNames, modalMaskClasses, modalHeaderClasses, modalTitleClasses, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { shouldCloseOnMaskClick, getModalContentClasses, getModalContainerClasses, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, classNames, modalMaskClasses, modalHeaderClasses, modalTitleClasses, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Modal = ({
@@ -80,7 +79,7 @@ var Modal = ({
   }, [onOk, onOpenChange]);
   const handleMaskClick = useCallback(
     (event) => {
-      if (maskClosable && event.target === event.currentTarget) {
+      if (shouldCloseOnMaskClick(event, maskClosable)) {
         handleClose();
       }
     },
@@ -130,16 +129,8 @@ var Modal = ({
     restoreFocus(previousActiveElementRef.current);
   }, [open]);
   useEscapeKey({ enabled: open, onEscape: handleClose });
-  const handleKeyDown = useCallback((event) => {
-    if (event.key === "Tab" && dialogRef.current) {
-      const focusables = getFocusableElements(dialogRef.current);
-      const result = getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
-      if (result.shouldHandle && result.next) {
-        event.preventDefault();
-        result.next.focus();
-      }
-    }
-  }, []);
+  useBodyScrollLock({ enabled: open });
+  useFocusTrap({ enabled: open, containerRef: dialogRef });
   const CloseIcon = /* @__PURE__ */ jsx(
     "svg",
     {
@@ -194,7 +185,6 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
-            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxs(
@@ -230,7 +220,7 @@ var Modal = ({
       ]
     }
   );
-  return createPortal(modalContent, document.body);
+  return renderBodyPortal(modalContent);
 };
 
 export { Modal };

package/dist/{chunk-C443YA4U.js → chunk-2QV56L36.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -79,7 +79,7 @@ var BarChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -184,7 +184,7 @@ var BarChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -260,9 +260,13 @@ var BarChart = ({
               "transition-[opacity,filter] duration-200",
               (hoverable || selectable) && "cursor-pointer hover:brightness-110"
             ),
-            style: animated ? {
-              transition: "y 600ms cubic-bezier(.4,0,.2,1), height 600ms cubic-bezier(.4,0,.2,1), opacity 200ms ease-out, filter 200ms ease-out"
-            } : void 0,
+            style: {
+              rx: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
+              ry: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
+              ...animated ? {
+                transition: "y var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), height var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), opacity 200ms ease-out, filter 200ms ease-out"
+              } : null
+            },
             tabIndex: selectable ? 0 : void 0,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
@@ -295,7 +299,7 @@ var BarChart = ({
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -312,7 +316,7 @@ var BarChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-M375I56K.js → chunk-36ATCHP4.js}

@@ -19,7 +19,7 @@ var ChartTooltip = ({
     if (!visible) return;
     let newX = x + 12;
     let newY = y - 8;
-    requestAnimationFrame(() => {
+    const frameHandle = requestAnimationFrame(() => {
       if (!tooltipRef.current) return;
       const rect = tooltipRef.current.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
@@ -35,11 +35,12 @@ var ChartTooltip = ({
       setAdjustedPosition({ x: newX, y: newY });
     });
     setAdjustedPosition({ x: newX, y: newY });
+    return () => cancelAnimationFrame(frameHandle);
   }, [x, y, visible]);
   const tooltipClasses = react.useMemo(
     () => tigercatCore.classNames(
-      "fixed z-[9999] pointer-events-none",
-      "px-3 py-2 rounded-md shadow-lg",
+      "fixed left-0 top-0 z-[9999] pointer-events-none will-change-transform",
+      "px-3 py-2 rounded-[var(--tiger-radius-md,0.375rem)] shadow-[var(--tiger-shadow-glass,0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1))]",
       "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
       "text-[color:var(--tiger-text-inverse,#f9fafb)]",
       "text-sm whitespace-nowrap",
@@ -56,8 +57,7 @@ var ChartTooltip = ({
       ref: tooltipRef,
       className: tooltipClasses,
       style: {
-        left: `${adjustedPosition.x}px`,
-        top: `${adjustedPosition.y}px`
+        transform: tigercatCore.getChartTooltipTransform(adjustedPosition)
       },
       role: "tooltip",
       "data-chart-tooltip": "true",

package/dist/{chunk-AUP3PMDD.mjs → chunk-36WZNVQ5.mjs}

@@ -1,54 +1,12 @@
-import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishChar } from '@expcat/tigercat-core';
 import React, { createContext, useContext, useMemo, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { calculateStepStatus, classNames, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, getStepsContainerClasses, stepFinishChar } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/StepsItem.tsx
+// src/components/Steps.tsx
 var StepsContext = createContext(null);
 function useStepsContext() {
   return useContext(StepsContext);
 }
-var Steps = ({
-  current = 0,
-  status = "process",
-  direction = "horizontal",
-  size = "default",
-  simple = false,
-  clickable = false,
-  className,
-  style,
-  onChange,
-  children,
-  ...props
-}) => {
-  const containerClasses = useMemo(
-    () => classNames(getStepsContainerClasses(direction), className),
-    [direction, className]
-  );
-  const handleStepClick = useCallback((index) => {
-    if (!clickable) return;
-    onChange?.(index);
-  }, [clickable, onChange]);
-  const contextValue = useMemo(() => ({
-    current,
-    status,
-    direction,
-    size,
-    simple,
-    clickable,
-    handleStepClick: clickable ? handleStepClick : void 0
-  }), [current, status, direction, size, simple, clickable, handleStepClick]);
-  const totalCount = React.Children.count(children);
-  const stepsWithProps = React.Children.map(children, (child, index) => {
-    if (React.isValidElement(child) && child.type === StepsItem) {
-      return React.cloneElement(child, {
-        stepIndex: index,
-        isLast: index === totalCount - 1
-      });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style, children: stepsWithProps }) });
-};
 var StepsItem = ({
   title,
   description,
@@ -76,12 +34,15 @@ var StepsItem = ({
     customStatus
   );
   const isClickable = !!stepsContext.handleStepClick && !disabled;
-  const itemClasses = classNames(
-    getStepItemClasses(stepsContext.direction, isLast),
-    className
-  );
+  const itemClasses = classNames(getStepItemClasses(stepsContext.direction, isLast), className);
   const iconClasses = getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
-  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast, stepsContext.size, stepsContext.simple);
+  const tailClasses = getStepTailClasses(
+    stepsContext.direction,
+    stepStatus,
+    isLast,
+    stepsContext.size,
+    stepsContext.simple
+  );
   const contentClasses = getStepContentClasses(stepsContext.direction);
   const titleClasses = getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
   const descriptionClasses = getStepDescriptionClasses(stepStatus, stepsContext.size);
@@ -149,5 +110,53 @@ var StepsItem = ({
     }
   );
 };
+var Steps = ({
+  current = 0,
+  status = "process",
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  clickable = false,
+  className,
+  style,
+  onChange,
+  children,
+  ...props
+}) => {
+  const containerClasses = useMemo(
+    () => classNames(getStepsContainerClasses(direction), className),
+    [direction, className]
+  );
+  const handleStepClick = useCallback(
+    (index) => {
+      if (!clickable) return;
+      onChange?.(index);
+    },
+    [clickable, onChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      current,
+      status,
+      direction,
+      size,
+      simple,
+      clickable,
+      handleStepClick: clickable ? handleStepClick : void 0
+    }),
+    [current, status, direction, size, simple, clickable, handleStepClick]
+  );
+  const totalCount = React.Children.count(children);
+  const stepsWithProps = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child) && child.type === StepsItem) {
+      return React.cloneElement(child, {
+        stepIndex: index,
+        isLast: index === totalCount - 1
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style, children: stepsWithProps }) });
+};
 
 export { Steps, StepsItem, useStepsContext };