@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-PNSWIJG3.mjs → chunk-2WBFUUVP.mjs}

@@ -1,8 +1,15 @@
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { resizePanes, classNames, getSplitterContainerClasses, getPaneStyle, getSplitterGutterClasses, getSplitterGutterHandleClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
 // src/components/Splitter.tsx
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import {
+  classNames,
+  getSplitterContainerClasses,
+  getSplitterGutterClasses,
+  getSplitterGutterHandleClasses,
+  getPaneStyle,
+  resizePanes,
+  createDocumentDragSession
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Splitter = ({
   direction = "horizontal",
   sizes: controlledSizes,
@@ -19,14 +26,20 @@ var Splitter = ({
   children
 }) => {
   const containerRef = useRef(null);
+  const dragSessionRef = useRef(null);
   const [paneSizes, setPaneSizes] = useState([]);
   const draggingRef = useRef(null);
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
-    const paneCount = React.Children.count(children);
-    if (paneCount === 0) return;
-    const totalGutter = (paneCount - 1) * gutterSize;
+    const paneCount2 = React.Children.count(children);
+    if (paneCount2 === 0) return;
+    const totalGutter = (paneCount2 - 1) * gutterSize;
     const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
     if (controlledSizes && controlledSizes.length > 0) {
       if (total > 0) {
@@ -39,49 +52,53 @@ var Splitter = ({
       }
     } else {
       if (total > 0) {
-        const eachSize = total / paneCount;
-        setPaneSizes(Array.from({ length: paneCount }, () => eachSize));
+        const eachSize = total / paneCount2;
+        setPaneSizes(Array.from({ length: paneCount2 }, () => eachSize));
       }
     }
   }, [children, direction, gutterSize, controlledSizes]);
-  const mins = useMemo(() => paneSizes.map(() => min), [paneSizes.length, min]);
-  const maxes = useMemo(() => paneSizes.map(() => max), [paneSizes.length, max]);
+  const paneCount = paneSizes.length;
+  const mins = useMemo(() => Array.from({ length: paneCount }, () => min), [paneCount, min]);
+  const maxes = useMemo(() => Array.from({ length: paneCount }, () => max), [paneCount, max]);
   const handleMouseDown = useCallback(
     (index, e) => {
       if (disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingRef.current = {
         index,
         startPos: direction === "horizontal" ? e.clientX : e.clientY,
         startSizes: [...paneSizes]
       };
       onResizeStart?.({ index, sizes: [...paneSizes] });
-      const onMouseMove = (ev) => {
-        const drag = draggingRef.current;
-        if (!drag) return;
-        const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
-        const delta = currentPos - drag.startPos;
-        const newSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
-        if (newSizes) {
-          setPaneSizes(newSizes);
-          onSizesChange?.(newSizes);
-          onResize?.({ index: drag.index, sizes: newSizes });
-        }
-      };
-      const onMouseUp = (ev) => {
-        const drag = draggingRef.current;
-        if (drag) {
-          const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
+      dragSessionRef.current = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (!drag) return;
+          const currentPos = direction === "horizontal" ? currentX : currentY;
           const delta = currentPos - drag.startPos;
-          const finalSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
-          onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+          const newSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
+          if (newSizes) {
+            setPaneSizes(newSizes);
+            onSizesChange?.(newSizes);
+            onResize?.({ index: drag.index, sizes: newSizes });
+          }
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (drag) {
+            const currentPos = direction === "horizontal" ? currentX : currentY;
+            const delta = currentPos - drag.startPos;
+            const finalSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
+            onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+          }
+          draggingRef.current = null;
+          dragSessionRef.current = null;
         }
-        draggingRef.current = null;
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      });
     },
     [
       disabled,
@@ -89,6 +106,7 @@ var Splitter = ({
       paneSizes,
       mins,
       maxes,
+      cleanupDragSession,
       onResizeStart,
       onResize,
       onResizeEnd,
@@ -154,4 +172,7 @@ var Splitter = ({
 };
 var Splitter_default = Splitter;
 
-export { Splitter, Splitter_default };
+export {
+  Splitter,
+  Splitter_default
+};

package/dist/{chunk-FXX3GD35.mjs → chunk-2Y5NIPHB.mjs}

@@ -1,12 +1,42 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
-import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
-import { useMemo, useState, useCallback } from 'react';
-import { resolveSeriesData, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useChartInteraction
+} from "./chunk-6QML6T3Y.mjs";
+import {
+  ChartLegend
+} from "./chunk-UBP7HZSU.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
+import {
+  ChartTooltip
+} from "./chunk-NASC6XHN.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
 
+// src/components/RadarChart.tsx
+import { useId, useMemo, useState, useCallback } from "react";
+import {
+  chartAxisTickTextClasses,
+  chartGridLineClasses,
+  classNames,
+  createPolygonPath,
+  getChartGridLineDasharray,
+  getChartInnerRect,
+  getRadarAngles,
+  getStableChartGradientPrefix,
+  getRadarLabelAlign,
+  getRadarPoints,
+  polarToCartesian,
+  RADAR_SPLIT_AREA_COLORS,
+  resolveChartPalette,
+  buildChartLegendItems,
+  buildChartSeriesKeys,
+  resolveMultiSeriesTooltipContent,
+  resolveSeriesData,
+  defaultRadarTooltipFormatter
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var RadarChart = ({
   width = 320,
   height = 200,
@@ -55,8 +85,11 @@ var RadarChart = ({
   showSplitArea = false,
   splitAreaOpacity = 0.06,
   splitAreaColors,
+  gradient = false,
+  strokeGradient = false,
+  pointGradient = false,
   pointBorderWidth = 2,
-  pointBorderColor = "#fff",
+  pointBorderColor = "var(--tiger-surface,#ffffff)",
   pointHoverSize,
   labelAutoAlign = true,
   title,
@@ -69,6 +102,10 @@ var RadarChart = ({
     }),
     [series, data]
   );
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "radar-" }),
+    [resolvedSeries]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -146,8 +183,9 @@ var RadarChart = ({
     [axisData.length, startAngle]
   );
   const seriesPoints = useMemo(
-    () => resolvedSeries.map((item) => ({
+    () => resolvedSeries.map((item, seriesIndex) => ({
       series: item,
+      seriesKey: seriesKeys[seriesIndex],
       points: getRadarPoints(item.data, {
         cx,
         cy,
@@ -156,7 +194,7 @@ var RadarChart = ({
         maxValue: resolvedMaxValue
       })
     })),
-    [resolvedSeries, cx, cy, radius, startAngle, resolvedMaxValue]
+    [resolvedSeries, seriesKeys, cx, cy, radius, startAngle, resolvedMaxValue]
   );
   const gridPaths = useMemo(() => {
     if (!showGrid || angles.length === 0) return [];
@@ -186,7 +224,7 @@ var RadarChart = ({
       const innerPoints = outerIndex > 0 ? angles.map((angle) => polarToCartesian(cx, cy, innerRadius, angle)) : [];
       return { type: "polygon-ring", outerPoints, innerPoints, color };
     });
-  }, [showSplitArea, levels, angles, radius, cx, cy, gridShape, splitAreaColors, splitAreaOpacity]);
+  }, [showSplitArea, levels, angles, radius, cx, cy, gridShape, splitAreaColors]);
   const axisLines = useMemo(() => {
     if (!showAxis || angles.length === 0) return [];
     return angles.map((angle) => {
@@ -244,6 +282,11 @@ var RadarChart = ({
   ]);
   const dasharray = getChartGridLineDasharray(gridLineStyle);
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("radar", gradientId),
+    [gradientId]
+  );
   const tooltipContent = useMemo(
     () => resolveMultiSeriesTooltipContent(
       hoveredPoint,
@@ -273,6 +316,98 @@ var RadarChart = ({
       desc,
       className: classNames(className),
       children: [
+        (gradient || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
+          gradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor ?? palette[0];
+            const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: resolvedFillColor,
+                      stopOpacity: resolvedFillOpacity
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: resolvedFillColor, stopOpacity: 0.02 })
+                ]
+              },
+              `radar-grad-${item.seriesKey}`
+            );
+          }),
+          strokeGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor ?? palette[0];
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-stroke-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, white 12%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: resolvedStrokeColor }),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, black 8%)`
+                    }
+                  )
+                ]
+              },
+              `radar-stroke-grad-${item.seriesKey}`
+            );
+          }),
+          pointGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedPointColor = item.series.pointColor ?? seriesColor ?? pointColor ?? palette[0];
+            return /* @__PURE__ */ jsxs(
+              "radialGradient",
+              {
+                id: `${gradientPrefix}-point-${item.seriesKey}`,
+                cx: "0.5",
+                cy: "0.5",
+                r: "0.5",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, white 30%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: resolvedPointColor }),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, black 12%)`
+                    }
+                  )
+                ]
+              },
+              `radar-point-grad-${item.seriesKey}`
+            );
+          })
+        ] }),
         splitAreaPaths.map((area, index) => {
           if (area.type === "circle-ring") {
             return /* @__PURE__ */ jsxs("g", { children: [
@@ -374,6 +509,7 @@ var RadarChart = ({
           return /* @__PURE__ */ jsxs(
             ChartSeries,
             {
+              "data-series-key": item.seriesKey,
               data: item.series.data,
               name: item.series.name,
               type: "radar",
@@ -395,15 +531,16 @@ var RadarChart = ({
                   "path",
                   {
                     d: areaPath,
-                    fill: resolvedFillColor,
-                    fillOpacity: resolvedFillOpacity,
-                    stroke: resolvedStrokeColor,
+                    fill: gradient ? `url(#${gradientPrefix}-${item.seriesKey})` : resolvedFillColor,
+                    fillOpacity: gradient ? 1 : resolvedFillOpacity,
+                    stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${item.seriesKey})` : resolvedStrokeColor,
                     strokeWidth: resolvedStrokeWidth,
                     strokeLinejoin: "round",
                     className: "transition-[fill-opacity,filter] duration-200 ease-out",
                     style: resolvedActiveIndex === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                     "data-radar-area": "true",
-                    "data-series-index": seriesIndex
+                    "data-series-index": seriesIndex,
+                    "data-series-key": item.seriesKey
                   }
                 ) : null,
                 resolvedShowPoints ? item.points.map((point) => {
@@ -418,7 +555,7 @@ var RadarChart = ({
                       cx: point.x,
                       cy: point.y,
                       r: currentSize,
-                      fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                      fill: pointGradient ? `url(#${gradientPrefix}-point-${item.seriesKey})` : point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
                       stroke: resolvedBorderColor,
                       strokeWidth: resolvedBorderWidth,
                       className: classNames(
@@ -427,17 +564,18 @@ var RadarChart = ({
                       ),
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
+                      "data-series-key": item.seriesKey,
                       "data-point-index": point.index,
                       onMouseEnter: showTooltip && hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                       onMouseMove: showTooltip && hoverable ? handlePointMove : void 0,
                       onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0
                     },
-                    `point-${seriesIndex}-${point.index}`
+                    `point-${item.seriesKey}-${point.index}`
                   );
                 }) : null
               ]
             },
-            `series-${seriesIndex}`
+            item.seriesKey
           );
         }),
         labels.map((label, index) => /* @__PURE__ */ jsx(
@@ -503,4 +641,7 @@ var RadarChart = ({
 };
 var RadarChart_default = RadarChart;
 
-export { RadarChart, RadarChart_default };
+export {
+  RadarChart,
+  RadarChart_default
+};

package/dist/chunk-32PAZTVF.mjs

@@ -1,8 +1,19 @@
-import { useState, useRef, useMemo, useEffect } from 'react';
-import { hexToRgb, rgbToHsv, classNames, getColorPickerTriggerClasses, colorPickerPanelClasses, colorPickerInputClasses, colorPickerPresetClasses, colorPickerBaseClasses, hsvToRgb, rgbToHex, isValidHex } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/ColorPicker.tsx
+import { useState, useMemo, useRef, useEffect } from "react";
+import {
+  colorPickerBaseClasses,
+  getColorPickerTriggerClasses,
+  colorPickerPanelClasses,
+  colorPickerInputClasses,
+  colorPickerPresetClasses,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  isValidHex,
+  classNames
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ColorPicker = ({
   value = "#2563eb",
   disabled = false,
@@ -120,4 +131,6 @@ var ColorPicker = ({
   ] });
 };
 
-export { ColorPicker };
+export {
+  ColorPicker
+};

package/dist/chunk-34VGG7AK.mjs

@@ -1,8 +1,11 @@
-import { createContext, useContext, useMemo } from 'react';
-import { classNames, getInputGroupClasses, getInputGroupAddonClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/InputGroup.tsx
+import { createContext, useContext, useMemo } from "react";
+import {
+  classNames,
+  getInputGroupClasses,
+  getInputGroupAddonClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var InputGroupContext = createContext(null);
 function useInputGroupContext() {
   return useContext(InputGroupContext);
@@ -37,4 +40,9 @@ var InputGroupAddon = ({
   return /* @__PURE__ */ jsx("span", { ...rest, className: addonClasses, children });
 };
 
-export { InputGroup, InputGroupAddon, InputGroupContext, useInputGroupContext };
+export {
+  InputGroupContext,
+  useInputGroupContext,
+  InputGroup,
+  InputGroupAddon
+};

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

@@ -1,54 +1,22 @@
-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';
-
-// src/components/StepsItem.tsx
+// src/components/Steps.tsx
+import React, { createContext, useContext, useMemo, useCallback } from "react";
+import {
+  classNames,
+  getStepContentClasses,
+  getStepDescriptionClasses,
+  getStepIconClasses,
+  getStepItemClasses,
+  getStepTailClasses,
+  getStepTitleClasses,
+  getStepsContainerClasses,
+  calculateStepStatus,
+  stepFinishChar
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 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 +44,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 +120,57 @@ 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 };
+export {
+  useStepsContext,
+  StepsItem,
+  Steps
+};