@redis-ui/components 39.18.0 → 41.3.2

package/dist/Stepper/components/Step/Step.d.ts

@@ -1,7 +1,9 @@
-import { StepProps } from './Step.types';
-declare const Step: (({ children, className, index, state }: StepProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ state, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Icon: ({ children, className }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, className }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+import { StepperStepProps } from './Step.types';
+import { useStepContext } from './Step.context';
+declare const Step: (({ children, ...restProps }: StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+    Icon: ({ children, ...restProps }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    useStepContext: typeof useStepContext;
 };
 export default Step;

package/dist/Stepper/components/Step/Step.js

@@ -2,27 +2,20 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import Compose from "./components/Compose/Compose.js";
 import Icon from "./components/Icon/Icon.js";
 import Label from "./components/Label/Label.js";
-import { StepState } from "./Step.types.js";
+import { useStepContext } from "./Step.context.js";
 const Step = Object.assign(({
   children,
-  className,
-  index = "",
-  state = StepState.IDLE
-}) => {
-  return jsxRuntimeExports.jsxs(Step.Compose, {
-    className,
-    state,
-    "data-state": state,
-    children: [jsxRuntimeExports.jsx(Step.Icon, {
-      children: index
-    }), jsxRuntimeExports.jsx(Step.Label, {
-      children
-    })]
-  });
-}, {
+  ...restProps
+}) => jsxRuntimeExports.jsxs(Step.Compose, {
+  ...restProps,
+  children: [jsxRuntimeExports.jsx(Step.Icon, {}), jsxRuntimeExports.jsx(Step.Label, {
+    children
+  })]
+}), {
   Compose,
   Icon,
-  Label
+  Label,
+  useStepContext
 });
 export {
   Step as default

package/dist/Stepper/components/Step/Step.types.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const StepState = {
+const StepperStepState = {
   IDLE: "idle",
   FOCUSED: "focused",
   COMPLETED: "completed"
 };
-exports.StepState = StepState;
+exports.StepperStepState = StepperStepState;

package/dist/Stepper/components/Step/Step.types.d.ts

@@ -1,14 +1,12 @@
 import { HTMLAttributes } from 'react';
-export interface StepProps extends HTMLAttributes<HTMLDivElement> {
-    state?: StepStateType;
-    index?: string;
-}
-export declare const StepState: {
+export type StepperStepProps = HTMLAttributes<HTMLDivElement>;
+export declare const StepperStepState: {
     readonly IDLE: "idle";
     readonly FOCUSED: "focused";
     readonly COMPLETED: "completed";
 };
-export type StepStateType = (typeof StepState)[keyof typeof StepState];
-export interface StepContextType {
-    state: StepStateType;
+export type StepperStepStateType = (typeof StepperStepState)[keyof typeof StepperStepState];
+export interface StepperStepContextType {
+    state: StepperStepStateType;
+    index: number;
 }

package/dist/Stepper/components/Step/Step.types.js

@@ -1,8 +1,8 @@
-const StepState = {
+const StepperStepState = {
   IDLE: "idle",
   FOCUSED: "focused",
   COMPLETED: "completed"
 };
 export {
-  StepState
+  StepperStepState
 };

package/dist/Stepper/components/Step/components/Compose/Compose.cjs

@@ -2,19 +2,51 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
-const Compose_style = require("./Compose.style.cjs");
 const Step_context = require("../../Step.context.cjs");
 const Step_types = require("../../Step.types.cjs");
+const useStepRegistration = require("../../../../hooks/useStepRegistration.cjs");
+const Stepper_context = require("../../../../Stepper.context.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
 const Compose = ({
-  state = Step_types.StepState.IDLE,
+  onClick,
+  onKeyDown,
   ...restProps
 }) => {
+  const {
+    currentStep,
+    onStepChange,
+    getIsStepInteractive
+  } = Stepper_context.useStepperContext();
+  const {
+    stepIndex
+  } = useStepRegistration.useStepRegistration();
+  let state = Step_types.StepperStepState.IDLE;
+  if (stepIndex >= 0) {
+    if (stepIndex < currentStep) {
+      state = Step_types.StepperStepState.COMPLETED;
+    } else if (stepIndex === currentStep) {
+      state = Step_types.StepperStepState.FOCUSED;
+    }
+  }
   const contextValue = React.useMemo(() => ({
+    state,
+    index: stepIndex
+  }), [state, stepIndex]);
+  if (stepIndex < 0) return null;
+  const interactiveProps = useStepperInteractive.getInteractiveStepProps({
+    onStepChange,
+    getIsStepInteractive,
+    stepIndex,
+    onClick,
+    onKeyDown,
     state
-  }), [state]);
+  });
   return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContext.Provider, {
     value: contextValue,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepCompose, {
+      "data-state": state,
+      ...interactiveProps,
       ...restProps
     })
   });

package/dist/Stepper/components/Step/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
 import { ComposeProps } from './Compose.types';
-declare const Compose: ({ state, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Compose: ({ onClick, onKeyDown, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Compose;

package/dist/Stepper/components/Step/components/Compose/Compose.js

@@ -1,18 +1,50 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { Container } from "./Compose.style.js";
 import { StepContext } from "../../Step.context.js";
-import { StepState } from "../../Step.types.js";
+import { StepperStepState } from "../../Step.types.js";
+import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
+import { useStepperContext } from "../../../../Stepper.context.js";
+import { StepCompose } from "./Compose.style.js";
+import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
 const Compose = ({
-  state = StepState.IDLE,
+  onClick,
+  onKeyDown,
   ...restProps
 }) => {
+  const {
+    currentStep,
+    onStepChange,
+    getIsStepInteractive
+  } = useStepperContext();
+  const {
+    stepIndex
+  } = useStepRegistration();
+  let state = StepperStepState.IDLE;
+  if (stepIndex >= 0) {
+    if (stepIndex < currentStep) {
+      state = StepperStepState.COMPLETED;
+    } else if (stepIndex === currentStep) {
+      state = StepperStepState.FOCUSED;
+    }
+  }
   const contextValue = useMemo(() => ({
+    state,
+    index: stepIndex
+  }), [state, stepIndex]);
+  if (stepIndex < 0) return null;
+  const interactiveProps = getInteractiveStepProps({
+    onStepChange,
+    getIsStepInteractive,
+    stepIndex,
+    onClick,
+    onKeyDown,
     state
-  }), [state]);
+  });
   return jsxRuntimeExports.jsx(StepContext.Provider, {
     value: contextValue,
-    children: jsxRuntimeExports.jsx(Container, {
+    children: jsxRuntimeExports.jsx(StepCompose, {
+      "data-state": state,
+      ...interactiveProps,
       ...restProps
     })
   });

package/dist/Stepper/components/Step/components/Compose/Compose.style.cjs

@@ -4,8 +4,12 @@ const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Container = _styled__default.default.div.withConfig({
-  displayName: "Composestyle__Container",
+const StepCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__StepCompose",
   componentId: "RedisUI__sc-1t34ip6-0"
-})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;"], () => redisUiStyles.useTheme().components.stepper.step.gap);
-exports.Container = Container;
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", " ", ""], () => redisUiStyles.useTheme().components.stepper.step.gap, redisUiStyles.getFocusStyle(), ({
+  tabIndex
+}) => tabIndex === 0 && _styled.css`
+      cursor: pointer;
+    `);
+exports.StepCompose = StepCompose;

package/dist/Stepper/components/Step/components/Compose/Compose.style.d.ts

@@ -1 +1 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepCompose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Stepper/components/Step/components/Compose/Compose.style.js

@@ -1,9 +1,13 @@
-import _styled from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
-const Container = _styled.div.withConfig({
-  displayName: "Composestyle__Container",
+import _styled, { css } from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+const StepCompose = _styled.div.withConfig({
+  displayName: "Composestyle__StepCompose",
   componentId: "RedisUI__sc-1t34ip6-0"
-})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;"], () => useTheme().components.stepper.step.gap);
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", " ", ""], () => useTheme().components.stepper.step.gap, getFocusStyle(), ({
+  tabIndex
+}) => tabIndex === 0 && css`
+      cursor: pointer;
+    `);
 export {
-  Container
+  StepCompose
 };

package/dist/Stepper/components/Step/components/Compose/Compose.types.d.ts

@@ -1,5 +1,2 @@
-import { HTMLAttributes } from 'react';
-import { StepStateType } from '../../Step.types';
-export interface ComposeProps extends HTMLAttributes<HTMLDivElement> {
-    state?: StepStateType;
-}
+import { ComposeElementProps } from '../../../../../Helpers';
+export type ComposeProps = ComposeElementProps;

package/dist/Stepper/components/Step/components/Icon/Icon.cjs

@@ -7,15 +7,20 @@ const Icon_style = require("./Icon.style.cjs");
 const Typography = require("../../../../../Typography/Typography.cjs");
 const Icon = ({
   children,
-  className
+  ...restProps
 }) => {
-  const context = Step_context.useStepContext();
+  const {
+    index,
+    state
+  } = Step_context.useStepContext();
   return jsxRuntime.jsxRuntimeExports.jsx(Icon_style.Container, {
-    className,
-    "data-state": context.state,
-    children: context.state === Step_types.StepState.COMPLETED ? jsxRuntime.jsxRuntimeExports.jsx(Icon_style.IconCheck, {}) : jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true,
+    children: state === Step_types.StepperStepState.COMPLETED ? jsxRuntime.jsxRuntimeExports.jsx(Icon_style.IconCheck, {}) : jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
       size: "S",
-      children
+      component: "div",
+      children: children || index + 1
     })
   });
 };

package/dist/Stepper/components/Step/components/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './Icon.types';
-declare const Icon: ({ children, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const Icon: ({ children, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default Icon;

package/dist/Stepper/components/Step/components/Icon/Icon.js

@@ -1,19 +1,24 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useStepContext } from "../../Step.context.js";
-import { StepState } from "../../Step.types.js";
+import { StepperStepState } from "../../Step.types.js";
 import { Container, IconCheck } from "./Icon.style.js";
 import Typography from "../../../../../Typography/Typography.js";
 const Icon = ({
   children,
-  className
+  ...restProps
 }) => {
-  const context = useStepContext();
+  const {
+    index,
+    state
+  } = useStepContext();
   return jsxRuntimeExports.jsx(Container, {
-    className,
-    "data-state": context.state,
-    children: context.state === StepState.COMPLETED ? jsxRuntimeExports.jsx(IconCheck, {}) : jsxRuntimeExports.jsx(Typography.Body, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true,
+    children: state === StepperStepState.COMPLETED ? jsxRuntimeExports.jsx(IconCheck, {}) : jsxRuntimeExports.jsx(Typography.Body, {
       size: "S",
-      children
+      component: "div",
+      children: children || index + 1
     })
   });
 };

package/dist/Stepper/components/Step/components/Icon/Icon.style.cjs

@@ -13,7 +13,7 @@ const Container = _styled__default.default.div.withConfig({
   const {
     states
   } = redisUiStyles.useTheme().components.stepper.step;
-  return Object.values(Step_types.StepState).map((state) => {
+  return Object.values(Step_types.StepperStepState).map((state) => {
     const theme = states[state].indicator;
     return _styled.css`
         &[data-state='${state}'] {

package/dist/Stepper/components/Step/components/Icon/Icon.style.js

@@ -1,7 +1,7 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { CheckBoldIcon } from "@redislabsdev/redis-ui-icons";
-import { StepState } from "../../Step.types.js";
+import { StepperStepState } from "../../Step.types.js";
 const Container = _styled.div.withConfig({
   displayName: "Iconstyle__Container",
   componentId: "RedisUI__sc-1ojkwgp-0"
@@ -9,7 +9,7 @@ const Container = _styled.div.withConfig({
   const {
     states
   } = useTheme().components.stepper.step;
-  return Object.values(StepState).map((state) => {
+  return Object.values(StepperStepState).map((state) => {
     const theme = states[state].indicator;
     return css`
         &[data-state='${state}'] {

package/dist/Stepper/components/Step/components/Label/Label.cjs

@@ -3,21 +3,19 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const Step_context = require("../../Step.context.cjs");
 const Label_style = require("./Label.style.cjs");
-const Step_types = require("../../Step.types.cjs");
-const Typography = require("../../../../../Typography/Typography.cjs");
 const Label = ({
   children,
-  className
+  ...restProps
 }) => {
-  const context = Step_context.useStepContext();
-  return jsxRuntime.jsxRuntimeExports.jsx(Label_style.Container, {
-    className,
-    "data-state": context.state,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
-      size: "M",
-      variant: context.state === Step_types.StepState.FOCUSED ? "semiBold" : "regular",
-      children
-    })
-  });
+  const {
+    state
+  } = Step_context.useStepContext();
+  return children ? jsxRuntime.jsxRuntimeExports.jsx(Label_style.StepLabel, {
+    size: "M",
+    component: "div",
+    ...restProps,
+    "data-state": state,
+    children
+  }) : null;
 };
 exports.default = Label;

package/dist/Stepper/components/Step/components/Label/Label.d.ts

@@ -1,3 +1,3 @@
 import { LabelProps } from './Label.types';
-declare const Label: ({ children, className }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Label: ({ children, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Label;

package/dist/Stepper/components/Step/components/Label/Label.js

@@ -1,22 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useStepContext } from "../../Step.context.js";
-import { Container } from "./Label.style.js";
-import { StepState } from "../../Step.types.js";
-import Typography from "../../../../../Typography/Typography.js";
+import { StepLabel } from "./Label.style.js";
 const Label = ({
   children,
-  className
+  ...restProps
 }) => {
-  const context = useStepContext();
-  return jsxRuntimeExports.jsx(Container, {
-    className,
-    "data-state": context.state,
-    children: jsxRuntimeExports.jsx(Typography.Body, {
-      size: "M",
-      variant: context.state === StepState.FOCUSED ? "semiBold" : "regular",
-      children
-    })
-  });
+  const {
+    state
+  } = useStepContext();
+  return children ? jsxRuntimeExports.jsx(StepLabel, {
+    size: "M",
+    component: "div",
+    ...restProps,
+    "data-state": state,
+    children
+  }) : null;
 };
 export {
   Label as default

package/dist/Stepper/components/Step/components/Label/Label.style.cjs

@@ -3,25 +3,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Step_types = require("../../Step.types.cjs");
+const Typography = require("../../../../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Container = _styled__default.default.div.withConfig({
-  displayName: "Labelstyle__Container",
+const StepLabel = _styled__default.default(Typography.default.Body).withConfig({
+  displayName: "Labelstyle__StepLabel",
   componentId: "RedisUI__sc-dclu3d-0"
-})(["display:flex;align-items:center;justify-content:center;", ""], () => {
+})(["display:flex;align-items:center;", ""], () => {
   const {
     states
   } = redisUiStyles.useTheme().components.stepper.step;
-  return Object.values(Step_types.StepState).map((state) => {
+  return Object.values(Step_types.StepperStepState).map((state) => {
     const theme = states[state].label;
     return _styled.css`
         &[data-state='${state}'] {
           color: ${theme.textColor};
-          > * {
-            letter-spacing: ${theme.letterSpacing};
-          }
+          letter-spacing: ${theme.letterSpacing};
+          font-weight: ${theme.fontWeight};
         }
       `;
   });
 });
-exports.Container = Container;
+exports.StepLabel = StepLabel;

package/dist/Stepper/components/Step/components/Label/Label.style.d.ts

@@ -1 +1 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepLabel: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Stepper/components/Step/components/Label/Label.style.js

@@ -1,25 +1,25 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { StepState } from "../../Step.types.js";
-const Container = _styled.div.withConfig({
-  displayName: "Labelstyle__Container",
+import { StepperStepState } from "../../Step.types.js";
+import Typography from "../../../../../Typography/Typography.js";
+const StepLabel = _styled(Typography.Body).withConfig({
+  displayName: "Labelstyle__StepLabel",
   componentId: "RedisUI__sc-dclu3d-0"
-})(["display:flex;align-items:center;justify-content:center;", ""], () => {
+})(["display:flex;align-items:center;", ""], () => {
   const {
     states
   } = useTheme().components.stepper.step;
-  return Object.values(StepState).map((state) => {
+  return Object.values(StepperStepState).map((state) => {
     const theme = states[state].label;
     return css`
         &[data-state='${state}'] {
           color: ${theme.textColor};
-          > * {
-            letter-spacing: ${theme.letterSpacing};
-          }
+          letter-spacing: ${theme.letterSpacing};
+          font-weight: ${theme.fontWeight};
         }
       `;
   });
 });
 export {
-  Container
+  StepLabel
 };

package/dist/Stepper/components/Step/components/Label/Label.types.d.ts

@@ -1,2 +1,3 @@
-import { HTMLAttributes } from 'react';
-export type LabelProps = HTMLAttributes<HTMLDivElement>;
+import { ComponentProps } from 'react';
+import { Typography } from '../../../../../Typography';
+export type LabelProps = ComponentProps<typeof Typography.Body>;

package/dist/Stepper/hooks/useStepIndexing.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useStepIndexing = () => {
+  const [stepOrder, setStepOrder] = React.useState([]);
+  const pendingStepsRef = React.useRef(/* @__PURE__ */ new Set());
+  const renderOrderRef = React.useRef([]);
+  const registerStep = React.useCallback((stepId) => {
+    pendingStepsRef.current.add(stepId);
+  }, []);
+  const unregisterStep = React.useCallback((stepId) => {
+    pendingStepsRef.current.delete(stepId);
+    setStepOrder((prev) => prev.filter((id) => id !== stepId));
+  }, []);
+  const getStepIndex = React.useCallback((stepId) => {
+    return stepOrder.indexOf(stepId);
+  }, [stepOrder]);
+  const collectStepOrder = React.useCallback((stepId) => {
+    if (!renderOrderRef.current.includes(stepId)) {
+      renderOrderRef.current.push(stepId);
+    }
+  }, []);
+  renderOrderRef.current = [];
+  React.useLayoutEffect(() => {
+    const newOrder = renderOrderRef.current.filter((id) => pendingStepsRef.current.has(id));
+    if (JSON.stringify(newOrder) !== JSON.stringify(stepOrder)) {
+      setStepOrder(newOrder);
+    }
+  });
+  return {
+    registerStep,
+    unregisterStep,
+    getStepIndex,
+    collectStepOrder,
+    totalSteps: stepOrder == null ? void 0 : stepOrder.length
+  };
+};
+exports.useStepIndexing = useStepIndexing;

package/dist/Stepper/hooks/useStepIndexing.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Concurrency safe Step indexing manager
+ */
+export declare const useStepIndexing: () => {
+    registerStep: (stepId: string) => void;
+    unregisterStep: (stepId: string) => void;
+    getStepIndex: (stepId: string) => number;
+    collectStepOrder: (stepId: string) => void;
+    totalSteps: number;
+};

package/dist/Stepper/hooks/useStepIndexing.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useCallback, useLayoutEffect } from "react";
+const useStepIndexing = () => {
+  const [stepOrder, setStepOrder] = useState([]);
+  const pendingStepsRef = useRef(/* @__PURE__ */ new Set());
+  const renderOrderRef = useRef([]);
+  const registerStep = useCallback((stepId) => {
+    pendingStepsRef.current.add(stepId);
+  }, []);
+  const unregisterStep = useCallback((stepId) => {
+    pendingStepsRef.current.delete(stepId);
+    setStepOrder((prev) => prev.filter((id) => id !== stepId));
+  }, []);
+  const getStepIndex = useCallback((stepId) => {
+    return stepOrder.indexOf(stepId);
+  }, [stepOrder]);
+  const collectStepOrder = useCallback((stepId) => {
+    if (!renderOrderRef.current.includes(stepId)) {
+      renderOrderRef.current.push(stepId);
+    }
+  }, []);
+  renderOrderRef.current = [];
+  useLayoutEffect(() => {
+    const newOrder = renderOrderRef.current.filter((id) => pendingStepsRef.current.has(id));
+    if (JSON.stringify(newOrder) !== JSON.stringify(stepOrder)) {
+      setStepOrder(newOrder);
+    }
+  });
+  return {
+    registerStep,
+    unregisterStep,
+    getStepIndex,
+    collectStepOrder,
+    totalSteps: stepOrder == null ? void 0 : stepOrder.length
+  };
+};
+export {
+  useStepIndexing
+};

package/dist/Stepper/hooks/useStepRegistration.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const index = require("../../node_modules/@radix-ui/react-id/dist/index.cjs");
+const Stepper_context = require("../Stepper.context.cjs");
+const useStepRegistration = () => {
+  const {
+    registerStep,
+    unregisterStep,
+    getStepIndex,
+    collectStepOrder
+  } = Stepper_context.useStepperContext();
+  const stepId = index.useId();
+  React.useLayoutEffect(() => {
+    registerStep(stepId);
+    return () => unregisterStep(stepId);
+  }, [stepId, registerStep, unregisterStep]);
+  collectStepOrder(stepId);
+  const stepIndex = getStepIndex(stepId);
+  return {
+    stepId,
+    stepIndex
+  };
+};
+exports.useStepRegistration = useStepRegistration;