@redis-ui/components 39.12.0 → 41.3.2

package/dist/SideBar/components/Header/Header.cjs

@@ -2,8 +2,10 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const React = require("react");
 const SideBar_context = require("../../SideBar.context.cjs");
 const Header_style = require("./Header.style.cjs");
+const ScreenReaderAnnounce = require("../../../ScreenReaderAnnounce/ScreenReaderAnnounce.cjs");
 const Header = ({
   children,
   onToggle,
@@ -11,23 +13,34 @@ const Header = ({
 }) => {
   const {
     isExpanded,
-    handleTransitionChange
+    handleTransitionChange,
+    sidebarId
   } = SideBar_context.useSideBarContext();
+  const isToggledRef = React.useRef(false);
   return jsxRuntime.jsxRuntimeExports.jsxs(Header_style.SideBarHeader, {
     isExpanded,
     ...rest,
     children: [jsxRuntime.jsxRuntimeExports.jsx(Header_style.ChildrenContainer, {
       children
     }), jsxRuntime.jsxRuntimeExports.jsx(Header_style.Arrow, {
+      type: "button",
       isExpanded,
       onClick: () => {
+        isToggledRef.current = true;
         handleTransitionChange(false);
         onToggle();
       },
+      "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+      "aria-controls": sidebarId,
+      "aria-expanded": isExpanded,
       children: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ChevronDownIcon, {
         size: "M",
-        customColor: "currentColor"
+        customColor: "currentColor",
+        "aria-hidden": true
       })
+    }), jsxRuntime.jsxRuntimeExports.jsx(ScreenReaderAnnounce.ScreenReaderAnnounce, {
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
+      allowAnnounce: isToggledRef.current
     })]
   });
 };

package/dist/SideBar/components/Header/Header.js

@@ -1,7 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
+import { useRef } from "react";
 import { useSideBarContext } from "../../SideBar.context.js";
 import { SideBarHeader, ChildrenContainer, Arrow } from "./Header.style.js";
+import { ScreenReaderAnnounce } from "../../../ScreenReaderAnnounce/ScreenReaderAnnounce.js";
 const Header = ({
   children,
   onToggle,
@@ -9,23 +11,34 @@ const Header = ({
 }) => {
   const {
     isExpanded,
-    handleTransitionChange
+    handleTransitionChange,
+    sidebarId
   } = useSideBarContext();
+  const isToggledRef = useRef(false);
   return jsxRuntimeExports.jsxs(SideBarHeader, {
     isExpanded,
     ...rest,
     children: [jsxRuntimeExports.jsx(ChildrenContainer, {
       children
     }), jsxRuntimeExports.jsx(Arrow, {
+      type: "button",
       isExpanded,
       onClick: () => {
+        isToggledRef.current = true;
         handleTransitionChange(false);
         onToggle();
       },
+      "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+      "aria-controls": sidebarId,
+      "aria-expanded": isExpanded,
       children: jsxRuntimeExports.jsx(ChevronDownIcon, {
         size: "M",
-        customColor: "currentColor"
+        customColor: "currentColor",
+        "aria-hidden": true
       })
+    }), jsxRuntimeExports.jsx(ScreenReaderAnnounce, {
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
+      allowAnnounce: isToggledRef.current
     })]
   });
 };

package/dist/SideBar/components/Header/Header.style.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const SideBar_utils = require("../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
@@ -16,10 +17,10 @@ const ChildrenContainer = _styled__default.default.div.withConfig({
   displayName: "Headerstyle__ChildrenContainer",
   componentId: "RedisUI__sc-6wicp7-1"
 })(["width:100%;height:100%;overflow:hidden;display:flex;align-items:center;"]);
-const Arrow = _styled__default.default.div.withConfig({
+const Arrow = _styled__default.default.button.withConfig({
   displayName: "Headerstyle__Arrow",
   componentId: "RedisUI__sc-6wicp7-2"
-})(["position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " & > svg{transition:0.3s;transform:", ";}"], ({
+})(["all:unset;position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;border-radius:100%;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " ", ";& > svg{transition:0.3s;transform:", ";@media (prefers-reduced-motion:reduce){transition:none;}}"], ({
   isExpanded
 }) => SideBar_utils.useStateStyle((theme) => _styled.css`
           width: ${theme.collapseButton.size};
@@ -36,7 +37,7 @@ const Arrow = _styled__default.default.div.withConfig({
           }
 
           color: ${theme.collapseButton.iconColor};
-        `), ({
+        `), redisUiStyles.getFocusStyle("0px"), ({
   isExpanded
 }) => isExpanded ? "rotate(90deg)" : "rotate(-90deg)");
 exports.Arrow = Arrow;

package/dist/SideBar/components/Header/Header.style.d.ts

@@ -2,6 +2,6 @@ export declare const SideBarHeader: import("styled-components").StyledComponent<
     isExpanded?: boolean | undefined;
 }, never>;
 export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Arrow: import("styled-components").StyledComponent<"div", any, {
+export declare const Arrow: import("styled-components").StyledComponent<"button", any, {
     isExpanded?: boolean | undefined;
 }, never>;

package/dist/SideBar/components/Header/Header.style.js

@@ -1,4 +1,5 @@
 import _styled, { css } from "styled-components";
+import { getFocusStyle } from "@redislabsdev/redis-ui-styles";
 import { useStateStyle } from "../../SideBar.utils.js";
 const SideBarHeader = _styled.div.withConfig({
   displayName: "Headerstyle__SideBarHeader",
@@ -12,10 +13,10 @@ const ChildrenContainer = _styled.div.withConfig({
   displayName: "Headerstyle__ChildrenContainer",
   componentId: "RedisUI__sc-6wicp7-1"
 })(["width:100%;height:100%;overflow:hidden;display:flex;align-items:center;"]);
-const Arrow = _styled.div.withConfig({
+const Arrow = _styled.button.withConfig({
   displayName: "Headerstyle__Arrow",
   componentId: "RedisUI__sc-6wicp7-2"
-})(["position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " & > svg{transition:0.3s;transform:", ";}"], ({
+})(["all:unset;position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;border-radius:100%;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " ", ";& > svg{transition:0.3s;transform:", ";@media (prefers-reduced-motion:reduce){transition:none;}}"], ({
   isExpanded
 }) => useStateStyle((theme) => css`
           width: ${theme.collapseButton.size};
@@ -32,7 +33,7 @@ const Arrow = _styled.div.withConfig({
           }
 
           color: ${theme.collapseButton.iconColor};
-        `), ({
+        `), getFocusStyle("0px"), ({
   isExpanded
 }) => isExpanded ? "rotate(90deg)" : "rotate(-90deg)");
 export {

package/dist/SideBar/components/Item/Item.d.ts

@@ -2,7 +2,7 @@
 import { SideBarItemProps } from './Item.types';
 declare const Item: (({ tooltipProps, isActive, onKeyDown, ...restProps }: SideBarItemProps) => import("react/jsx-runtime").JSX.Element) & {
     Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Icon/Icon.types").ItemIconProps) => import("react/jsx-runtime").JSX.Element;
-    Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Button: import("react").ForwardRefExoticComponent<import("../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default Item;

package/dist/SideBar/components/Item/Item.style.d.ts

@@ -1,3 +1,3 @@
 export declare const appear: import("styled-components").Keyframes;
 export declare const Item: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const TooltipContent: import("styled-components").StyledComponent<(props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TooltipContent: import("styled-components").StyledComponent<(props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/SideBar/components/Item/components/Text/Text.style.d.ts

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

package/dist/SideBar/components/Item/components/Text/Text.types.d.ts

@@ -1,2 +1,2 @@
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-export type TextProps = BodyProps;
+import { TypographyBodyProps } from '../../../../../Typography';
+export type TextProps = TypographyBodyProps;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.types.d.ts

@@ -1,2 +1,2 @@
-import { ComposeElementProps } from 'src/Helpers/common.types';
+import { ComposeElementProps } from '../../../Helpers/common.types';
 export type ScrollContainerProps = ComposeElementProps;

package/dist/Stepper/Stepper.cjs

@@ -1,40 +1,28 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
-const React = require("react");
 const Step = require("./components/Step/Step.cjs");
-const Step_types = require("./components/Step/Step.types.cjs");
-const Stepper_style = require("./Stepper.style.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
+const Compose = require("./components/Compose/Compose.cjs");
 const Stepper = Object.assign(({
-  children,
-  className,
-  currentStep = -1,
+  steps,
   ...restProps
 }) => {
-  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_style.Container, {
-    className,
+  return jsxRuntime.jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
-    children: React__default.default.Children.map(children, (child, index) => {
-      if (React__default.default.isValidElement(child)) {
-        let state = Step_types.StepState.IDLE;
-        if (index < currentStep) {
-          state = Step_types.StepState.COMPLETED;
-        } else if (index === currentStep) {
-          state = Step_types.StepState.FOCUSED;
-        }
-        return React__default.default.cloneElement(child, {
-          state,
-          index: index + 1,
-          "data-state": state
-        });
-      }
-      return child;
-    })
+    children: steps.map((step, idx) => (
+      // eslint-disable-next-line react/no-array-index-key
+      jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
+          children: step.icon
+        }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
+          children: step.label
+        })]
+      }, idx)
+    ))
   });
 }, {
-  Step: Step.default
+  Step: Step.default,
+  Compose: Compose.default
 });
 const Stepper$1 = Stepper;
 exports.default = Stepper$1;

package/dist/Stepper/Stepper.context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const StepperContext = React.createContext(null);
+const useStepperContext = () => {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("Step components must be used within a Stepper");
+  }
+  return context;
+};
+exports.StepperContext = StepperContext;
+exports.useStepperContext = useStepperContext;

package/dist/Stepper/Stepper.context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type StepperContextType = {
+    registerStep: (stepId: string) => void;
+    unregisterStep: (stepId: string) => void;
+    getStepIndex: (stepId: string) => number;
+    collectStepOrder: (stepId: string) => void;
+    currentStep: number;
+    onStepChange?: (stepIndex: number) => void;
+    getIsStepInteractive: (stepIndex: number) => boolean;
+};
+export declare const StepperContext: import("react").Context<StepperContextType | null>;
+export declare const useStepperContext: () => StepperContextType;

package/dist/Stepper/Stepper.context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const StepperContext = createContext(null);
+const useStepperContext = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("Step components must be used within a Stepper");
+  }
+  return context;
+};
+export {
+  StepperContext,
+  useStepperContext
+};

package/dist/Stepper/Stepper.d.ts

@@ -1,9 +1,18 @@
 import { StepperProps } from './Stepper.types';
-declare const Stepper: (({ children, className, currentStep, ...restProps }: StepperProps) => import("react/jsx-runtime").JSX.Element) & {
-    Step: (({ children, className, index, state }: import("./components/Step/Step.types").StepProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ state, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Icon: ({ children, className }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, className }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react/jsx-runtime").JSX.Element) & {
+    Step: (({ children, ...restProps }: import(".").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+        Icon: ({ children, ...restProps }: import("./components/Step/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 import("./components/Step/Step.context").useStepContext;
+    };
+    Compose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Step: (({ children, ...restProps }: import(".").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
+            Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+            Icon: ({ children, ...restProps }: import("./components/Step/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 import("./components/Step/Step.context").useStepContext;
+        };
     };
 };
 export default Stepper;

package/dist/Stepper/Stepper.js

@@ -1,36 +1,26 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import React__default from "react";
 import Step from "./components/Step/Step.js";
-import { StepState } from "./components/Step/Step.types.js";
-import { Container } from "./Stepper.style.js";
+import StepperCompose from "./components/Compose/Compose.js";
 const Stepper = Object.assign(({
-  children,
-  className,
-  currentStep = -1,
+  steps,
   ...restProps
 }) => {
-  return jsxRuntimeExports.jsx(Container, {
-    className,
+  return jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
-    children: React__default.Children.map(children, (child, index) => {
-      if (React__default.isValidElement(child)) {
-        let state = StepState.IDLE;
-        if (index < currentStep) {
-          state = StepState.COMPLETED;
-        } else if (index === currentStep) {
-          state = StepState.FOCUSED;
-        }
-        return React__default.cloneElement(child, {
-          state,
-          index: index + 1,
-          "data-state": state
-        });
-      }
-      return child;
-    })
+    children: steps.map((step, idx) => (
+      // eslint-disable-next-line react/no-array-index-key
+      jsxRuntimeExports.jsxs(Step.Compose, {
+        children: [jsxRuntimeExports.jsx(Step.Icon, {
+          children: step.icon
+        }), jsxRuntimeExports.jsx(Step.Label, {
+          children: step.label
+        })]
+      }, idx)
+    ))
   });
 }, {
-  Step
+  Step,
+  Compose: StepperCompose
 });
 const Stepper$1 = Stepper;
 export {

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

@@ -1,4 +1,10 @@
-import { HTMLAttributes } from 'react';
-export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
-    currentStep?: number;
+import { ReactNode } from 'react';
+import { ChildFree } from '../Helpers';
+import { StepperComposeProps } from './components/Compose/Compose.types';
+export type StepperStep = {
+    label?: ReactNode;
+    icon?: ReactNode;
+};
+export interface StepperProps extends ChildFree<StepperComposeProps> {
+    steps: StepperStep[];
 }

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Step = require("../Step/Step.cjs");
+const Stepper_context = require("../../Stepper.context.cjs");
+const useStepperInteractive = require("../../hooks/useStepperInteractive.cjs");
+const useStepIndexing = require("../../hooks/useStepIndexing.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const StepperCompose = Object.assign(({
+  currentStep = -1,
+  getIsStepInteractive,
+  onStepChange,
+  onKeyDown,
+  ...restProps
+}) => {
+  const stepIndexingContext = useStepIndexing.useStepIndexing();
+  const {
+    context: interactivityContext,
+    props: interactivityProps
+  } = useStepperInteractive.useStepperInteractive({
+    onStepChange,
+    getIsStepInteractive,
+    currentStep,
+    totalSteps: stepIndexingContext.totalSteps,
+    onKeyDown
+  });
+  const contextValue = {
+    ...stepIndexingContext,
+    ...interactivityContext,
+    currentStep
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_context.StepperContext.Provider, {
+    value: contextValue,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepperCompose, {
+      ...interactivityProps,
+      ...restProps
+    })
+  });
+}, {
+  Step: Step.default
+});
+exports.default = StepperCompose;

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

@@ -0,0 +1,10 @@
+import { StepperComposeProps } from './Compose.types';
+declare const StepperCompose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Step: (({ children, ...restProps }: import("../..").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ onClick, onKeyDown, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+        Icon: ({ children, ...restProps }: import("../Step/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 import("../Step/Step.context").useStepContext;
+    };
+};
+export default StepperCompose;

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

@@ -0,0 +1,42 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import Step from "../Step/Step.js";
+import { StepperContext } from "../../Stepper.context.js";
+import { useStepperInteractive } from "../../hooks/useStepperInteractive.js";
+import { useStepIndexing } from "../../hooks/useStepIndexing.js";
+import { StepperCompose as StepperCompose$1 } from "./Compose.style.js";
+const StepperCompose = Object.assign(({
+  currentStep = -1,
+  getIsStepInteractive,
+  onStepChange,
+  onKeyDown,
+  ...restProps
+}) => {
+  const stepIndexingContext = useStepIndexing();
+  const {
+    context: interactivityContext,
+    props: interactivityProps
+  } = useStepperInteractive({
+    onStepChange,
+    getIsStepInteractive,
+    currentStep,
+    totalSteps: stepIndexingContext.totalSteps,
+    onKeyDown
+  });
+  const contextValue = {
+    ...stepIndexingContext,
+    ...interactivityContext,
+    currentStep
+  };
+  return jsxRuntimeExports.jsx(StepperContext.Provider, {
+    value: contextValue,
+    children: jsxRuntimeExports.jsx(StepperCompose$1, {
+      ...interactivityProps,
+      ...restProps
+    })
+  });
+}, {
+  Step
+});
+export {
+  StepperCompose as default
+};

package/dist/Stepper/{Stepper.style.cjs → components/Compose/Compose.style.cjs}

@@ -4,8 +4,8 @@ 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: "Stepperstyle__Container",
-  componentId: "RedisUI__sc-c4ery4-0"
+const StepperCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__StepperCompose",
+  componentId: "RedisUI__sc-ey8bn4-0"
 })(["display:flex;gap:", ";align-items:center;"], () => redisUiStyles.useTheme().components.stepper.gap);
-exports.Container = Container;
+exports.StepperCompose = StepperCompose;

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

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

package/dist/Stepper/{Stepper.style.js → components/Compose/Compose.style.js}

@@ -1,9 +1,9 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const Container = _styled.div.withConfig({
-  displayName: "Stepperstyle__Container",
-  componentId: "RedisUI__sc-c4ery4-0"
+const StepperCompose = _styled.div.withConfig({
+  displayName: "Composestyle__StepperCompose",
+  componentId: "RedisUI__sc-ey8bn4-0"
 })(["display:flex;gap:", ";align-items:center;"], () => useTheme().components.stepper.gap);
 export {
-  Container
+  StepperCompose
 };

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

@@ -0,0 +1,6 @@
+import { ComposeElementProps } from '../../../Helpers';
+export interface StepperComposeProps extends ComposeElementProps {
+    currentStep?: number;
+    getIsStepInteractive?: (stepIndex: number) => boolean;
+    onStepChange?: (stepIndex: number) => void;
+}

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

@@ -4,26 +4,19 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Icon = require("./components/Icon/Icon.cjs");
 const Label = require("./components/Label/Label.cjs");
-const Step_types = require("./Step.types.cjs");
+const Step_context = require("./Step.context.cjs");
 const Step = Object.assign(({
   children,
-  className,
-  index = "",
-  state = Step_types.StepState.IDLE
-}) => {
-  return jsxRuntime.jsxRuntimeExports.jsxs(Step.Compose, {
-    className,
-    state,
-    "data-state": state,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Step.Icon, {
-      children: index
-    }), jsxRuntime.jsxRuntimeExports.jsx(Step.Label, {
-      children
-    })]
-  });
-}, {
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(Step.Compose, {
+  ...restProps,
+  children: [jsxRuntime.jsxRuntimeExports.jsx(Step.Icon, {}), jsxRuntime.jsxRuntimeExports.jsx(Step.Label, {
+    children
+  })]
+}), {
   Compose: Compose.default,
   Icon: Icon.default,
-  Label: Label.default
+  Label: Label.default,
+  useStepContext: Step_context.useStepContext
 });
 exports.default = Step;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { StepContextType } from './Step.types';
-export declare const StepContext: import("react").Context<StepContextType | null>;
-export declare function useStepContext(): StepContextType;
+import { StepperStepContextType } from './Step.types';
+export declare const StepContext: import("react").Context<StepperStepContextType | null>;
+export declare function useStepContext(): StepperStepContextType;

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