@redis-ui/components 39.18.0 → 41.3.2

package/dist/Section/components/Header/components/Label/Label.style.d.ts

@@ -1 +1,2 @@
-export declare const LabelText: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SectionHeaderLabelText: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SectionHeaderLabel: import("styled-components").StyledComponent<"label", any, {}, never>;

package/dist/Section/components/Header/components/Label/Label.style.js

@@ -1,10 +1,23 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useSectionContext } from "../../../../Section.context.js";
 import Typography from "../../../../../Typography/Typography.js";
-const LabelText = _styled(Typography.Heading).withConfig({
-  displayName: "Labelstyle__LabelText",
+const SectionHeaderLabelText = _styled(Typography.Heading).withConfig({
+  displayName: "Labelstyle__SectionHeaderLabelText",
   componentId: "RedisUI__sc-14ws5ga-0"
-})(["color:", ";"], () => useTheme().components.section.header.label.textColor);
+})(["color:", ";cursor:", ";"], ({
+  color
+}) => {
+  const {
+    textColor
+  } = useTheme().components.section.header.label;
+  return color ? void 0 : textColor;
+}, () => useSectionContext().triggerId ? "pointer" : void 0);
+const SectionHeaderLabel = _styled.label.withConfig({
+  displayName: "Labelstyle__SectionHeaderLabel",
+  componentId: "RedisUI__sc-14ws5ga-1"
+})(["all:unset;"]);
 export {
-  LabelText
+  SectionHeaderLabel,
+  SectionHeaderLabelText
 };

package/dist/Section/components/Header/components/Label/Label.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
-export interface SectionHeaderLabelProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'> {
+import { TypographyHeadingProps } from '../../../../../Typography';
+export interface SectionHeaderLabelProps extends Omit<TypographyHeadingProps, 'children' | 'id'> {
     label: string;
 }

package/dist/Section/components/SummaryBar/SummaryBar.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const SummaryBar_style = require("./SummaryBar.style.cjs");
+const SummaryBar = ({
+  children,
+  alwaysVisible,
+  ...restProps
+}) => children ? jsxRuntime.jsxRuntimeExports.jsx(SummaryBar_style.SummaryBar, {
+  ...restProps,
+  "$alwaysVisible": alwaysVisible,
+  children
+}) : null;
+exports.SummaryBar = SummaryBar;

package/dist/Section/components/SummaryBar/SummaryBar.d.ts

@@ -0,0 +1,2 @@
+import { SummaryBarProps } from './SummaryBar.types';
+export declare const SummaryBar: ({ children, alwaysVisible, ...restProps }: SummaryBarProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Section/components/SummaryBar/SummaryBar.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { SummaryBar as SummaryBar$1 } from "./SummaryBar.style.js";
+const SummaryBar = ({
+  children,
+  alwaysVisible,
+  ...restProps
+}) => children ? jsxRuntimeExports.jsx(SummaryBar$1, {
+  ...restProps,
+  "$alwaysVisible": alwaysVisible,
+  children
+}) : null;
+export {
+  SummaryBar
+};

package/dist/Section/components/SummaryBar/SummaryBar.style.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Section_context = require("../../Section.context.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SummaryBar = _styled__default.default.div.withConfig({
+  displayName: "SummaryBarstyle__SummaryBar",
+  componentId: "RedisUI__sc-1ft55tj-0"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", ""], () => {
+  const theme = redisUiStyles.useTheme().components.section.header.summaryBar;
+  const {
+    collapsible
+  } = Section_context.useSectionContext();
+  return collapsible ? theme.collapsableBackgroundColor : theme.backgroundColor;
+}, () => redisUiStyles.useTheme().components.section.header.summaryBar.minHeight, () => redisUiStyles.useTheme().components.section.header.summaryBar.padding, () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color, ({
+  $alwaysVisible
+}) => Section_context.useSectionContext().open && !$alwaysVisible && _styled.css`
+      display: none;
+    `);
+exports.SummaryBar = SummaryBar;

package/dist/Section/components/SummaryBar/SummaryBar.style.d.ts

@@ -0,0 +1,3 @@
+export declare const SummaryBar: import("styled-components").StyledComponent<"div", any, {
+    $alwaysVisible?: boolean | undefined;
+}, never>;

package/dist/Section/components/SummaryBar/SummaryBar.style.js

@@ -0,0 +1,20 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useSectionContext } from "../../Section.context.js";
+const SummaryBar = _styled.div.withConfig({
+  displayName: "SummaryBarstyle__SummaryBar",
+  componentId: "RedisUI__sc-1ft55tj-0"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", ""], () => {
+  const theme = useTheme().components.section.header.summaryBar;
+  const {
+    collapsible
+  } = useSectionContext();
+  return collapsible ? theme.collapsableBackgroundColor : theme.backgroundColor;
+}, () => useTheme().components.section.header.summaryBar.minHeight, () => useTheme().components.section.header.summaryBar.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, ({
+  $alwaysVisible
+}) => useSectionContext().open && !$alwaysVisible && css`
+      display: none;
+    `);
+export {
+  SummaryBar
+};

package/dist/Section/components/SummaryBar/SummaryBar.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type SummaryBarProps = HTMLAttributes<HTMLElement> & {
+    alwaysVisible?: boolean;
+};

package/dist/Select/components/Content/components/Search/SelectSearchInput.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const SelectSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../../../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../../../../../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../../../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("../../../../../Inputs").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../../../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../../../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../../../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../../../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../../../../../Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
+const SideBar_utils = require("../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarFooter = _styled__default.default.div.withConfig({
   displayName: "Footerstyle__SideBarFooter",
   componentId: "RedisUI__sc-z12bz0-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;"]);
+})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
+        color: ${theme.footer.dividerColor};
+      `));
 exports.SideBarFooter = SideBarFooter;

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

@@ -1,8 +1,11 @@
-import _styled from "styled-components";
+import _styled, { css } from "styled-components";
+import { useStateStyle } from "../../SideBar.utils.js";
 const SideBarFooter = _styled.div.withConfig({
   displayName: "Footerstyle__SideBarFooter",
   componentId: "RedisUI__sc-z12bz0-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;"]);
+})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;", ""], () => useStateStyle((theme) => css`
+        color: ${theme.footer.dividerColor};
+      `));
 export {
   SideBarFooter
 };

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

@@ -2,10 +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 index = require("../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
 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,
@@ -38,11 +38,9 @@ const Header = ({
         customColor: "currentColor",
         "aria-hidden": true
       })
-    }), isToggledRef.current && // Screen reader announcement
-    jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      children: isExpanded ? "Sidebar expanded" : "Sidebar collapsed"
+    }), jsxRuntime.jsxRuntimeExports.jsx(ScreenReaderAnnounce.ScreenReaderAnnounce, {
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
+      allowAnnounce: isToggledRef.current
     })]
   });
 };

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

@@ -1,9 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
-import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
 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,
@@ -36,11 +36,9 @@ const Header = ({
         customColor: "currentColor",
         "aria-hidden": true
       })
-    }), isToggledRef.current && // Screen reader announcement
-    jsxRuntimeExports.jsx(VisuallyHidden, {
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      children: isExpanded ? "Sidebar expanded" : "Sidebar collapsed"
+    }), jsxRuntimeExports.jsx(ScreenReaderAnnounce, {
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
+      allowAnnounce: isToggledRef.current
     })]
   });
 };

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;