@redis-ui/components 41.4.1 → 42.0.0

package/dist/RadioGroup/components/Item/components/Indicator/Indicator.cjs

@@ -17,7 +17,9 @@ const Indicator = ({
     disabled,
     id: SharedId_context.useSharedId(),
     ...restProps,
-    tabIndex: FormField_context.useFieldReadonly() ? -1 : void 0,
+    ...FormField_context.useFieldReadonly() ? {
+      tabIndex: -1
+    } : null,
     children: jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.RadioGroupItemIndicatorCheck, {})
   });
 };

package/dist/RadioGroup/components/Item/components/Indicator/Indicator.js

@@ -15,7 +15,9 @@ const Indicator = ({
     disabled,
     id: useSharedId(),
     ...restProps,
-    tabIndex: useFieldReadonly() ? -1 : void 0,
+    ...useFieldReadonly() ? {
+      tabIndex: -1
+    } : null,
     children: jsxRuntimeExports.jsx(RadioGroupItemIndicatorCheck, {})
   });
 };

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.cjs

@@ -24,13 +24,11 @@ const ColumnSelector = ({
       onChange,
       children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Trigger.Compose, {
         customContainer: true,
-        children: jsxRuntime.jsxRuntimeExports.jsx("span", {
-          children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
-            pressed: isOpen,
-            children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
-              icon: redisUiIcons.ColumnsIcon
-            }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
-          })
+        children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
+          pressed: isOpen,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+            icon: redisUiIcons.ColumnsIcon
+          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
         })
       }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Content, {})]
     })

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.js

@@ -22,13 +22,11 @@ const ColumnSelector = ({
       onChange,
       children: [jsxRuntimeExports.jsx(MultiSelect.Trigger.Compose, {
         customContainer: true,
-        children: jsxRuntimeExports.jsx("span", {
-          children: jsxRuntimeExports.jsxs(ToggleButton, {
-            pressed: isOpen,
-            children: [jsxRuntimeExports.jsx(Button.Icon, {
-              icon: ColumnsIcon
-            }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
-          })
+        children: jsxRuntimeExports.jsxs(ToggleButton, {
+          pressed: isOpen,
+          children: [jsxRuntimeExports.jsx(Button.Icon, {
+            icon: ColumnsIcon
+          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
         })
       }), jsxRuntimeExports.jsx(MultiSelect.Content, {})]
     })

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../../../../../node_modules/@radix-ui/react-collapsible/dist/index.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const React = require("react");
 const SearchBar_context = require("../../../../../../SearchBar.context.cjs");
 const ToggleButton = require("../../../../../../../Button/ToggleButton/ToggleButton.cjs");
 const FilterToggle = () => {
   const {
-    setFiltersOpen,
     filtersOpen,
     activeFilters
   } = SearchBar_context.useSearchBarContext();
@@ -15,14 +15,16 @@ const FilterToggle = () => {
     var _a;
     return acc + (((_a = filter.selectedOptions) == null ? void 0 : _a.length) || 0);
   }, 0), [activeFilters]);
-  return jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
-    pressed: filtersOpen,
-    onClick: () => setFiltersOpen(!filtersOpen),
-    children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
-      customColor: "currentColor"
-    }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
-      count: activeFiltersValueCount
-    })]
+  return jsxRuntime.jsxRuntimeExports.jsx(index.Trigger, {
+    asChild: true,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
+      pressed: filtersOpen,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
+        customColor: "currentColor"
+      }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
+        count: activeFiltersValueCount
+      })]
+    })
   });
 };
 exports.default = FilterToggle;

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.js

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Trigger } from "../../../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
 import { FilterIcon } from "@redislabsdev/redis-ui-icons";
 import { useMemo } from "react";
 import { useSearchBarContext } from "../../../../../../SearchBar.context.js";
 import ToggleButton from "../../../../../../../Button/ToggleButton/ToggleButton.js";
 const FilterToggle = () => {
   const {
-    setFiltersOpen,
     filtersOpen,
     activeFilters
   } = useSearchBarContext();
@@ -13,14 +13,16 @@ const FilterToggle = () => {
     var _a;
     return acc + (((_a = filter.selectedOptions) == null ? void 0 : _a.length) || 0);
   }, 0), [activeFilters]);
-  return jsxRuntimeExports.jsxs(ToggleButton, {
-    pressed: filtersOpen,
-    onClick: () => setFiltersOpen(!filtersOpen),
-    children: [jsxRuntimeExports.jsx(FilterIcon, {
-      customColor: "currentColor"
-    }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
-      count: activeFiltersValueCount
-    })]
+  return jsxRuntimeExports.jsx(Trigger, {
+    asChild: true,
+    children: jsxRuntimeExports.jsxs(ToggleButton, {
+      pressed: filtersOpen,
+      children: [jsxRuntimeExports.jsx(FilterIcon, {
+        customColor: "currentColor"
+      }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
+        count: activeFiltersValueCount
+      })]
+    })
   });
 };
 export {

package/dist/Select/components/Context/Context.cjs

@@ -13,10 +13,12 @@ const SelectContextProvider = ({
 }) => jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdTransProvider, {
   children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
-    children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-      value: error ?? "",
-      children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
-        ...restProps
+    children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+        value: error ?? "",
+        children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
+          ...restProps
+        })
       })
     })
   })

package/dist/Select/components/Context/Context.js

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { createContext, useContext } from "react";
 import { ErrorContentProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { FieldStatusTransProvider } from "../../../FormField/FormField.context.js";
+import { FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
 const Context = createContext(null);
 const SelectContextProvider = ({
   error,
@@ -11,10 +11,12 @@ const SelectContextProvider = ({
 }) => jsxRuntimeExports.jsx(SharedIdTransProvider, {
   children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
-    children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-      value: error ?? "",
-      children: jsxRuntimeExports.jsx(Context.Provider, {
-        ...restProps
+    children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
+      children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+        value: error ?? "",
+        children: jsxRuntimeExports.jsx(Context.Provider, {
+          ...restProps
+        })
       })
     })
   })

package/dist/Select/components/Trigger/components/Compose/Compose.cjs

@@ -15,16 +15,21 @@ const Compose = ({
 }) => {
   const sharedId = SharedId_context.useSharedId(id);
   const status = FormField_context.useFieldStatus();
+  const required = FormField_context.useFieldRequired();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
     ...statusProps,
+    ...requiredProps,
     ...restProps
   };
   const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {

package/dist/Select/components/Trigger/components/Compose/Compose.js

@@ -5,7 +5,7 @@ import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visu
 import { TriggerContainer } from "./Compose.style.js";
 import { useErrorContent } from "../../../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus } from "../../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../../../FormField/FormField.context.js";
 const Compose = ({
   customContainer,
   id,
@@ -13,16 +13,21 @@ const Compose = ({
 }) => {
   const sharedId = useSharedId(id);
   const status = useFieldStatus();
+  const required = useFieldRequired();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
     ...statusProps,
+    ...requiredProps,
     ...restProps
   };
   const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {

package/dist/Select/components/Trigger/components/Compose/Compose.style.cjs

@@ -4,6 +4,7 @@ const _styled = require("styled-components");
 const index = require("../../../../../node_modules/@radix-ui/react-select/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const css_utils = require("../../../../../Helpers/css.utils.cjs");
+const Value_style = require("../Value/Value.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const getStateStyle = (theme) => {
@@ -48,6 +49,10 @@ const getStateStyle = (theme) => {
       svg {
         opacity: ${statesStyle.disabled.iconOpacity || 0.3};
       }
+
+      ${Value_style.ValueContainer} svg[data-monochrome] {
+        opacity: 1;
+      }
     }
   `;
 };

package/dist/Select/components/Trigger/components/Compose/Compose.style.js

@@ -2,6 +2,7 @@ import _styled, { css } from "styled-components";
 import { Trigger } from "../../../../../node_modules/@radix-ui/react-select/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { styleFromTokens, tokenMaps } from "../../../../../Helpers/css.utils.js";
+import { ValueContainer } from "../Value/Value.style.js";
 const getStateStyle = (theme) => {
   const statesStyle = theme.components.select.states;
   const {
@@ -44,6 +45,10 @@ const getStateStyle = (theme) => {
       svg {
         opacity: ${statesStyle.disabled.iconOpacity || 0.3};
       }
+
+      ${ValueContainer} svg[data-monochrome] {
+        opacity: 1;
+      }
     }
   `;
 };

package/dist/Stepper/Stepper.context.cjs

@@ -1,13 +1,8 @@
 "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;
+const NullableContext = require("../Helpers/contexts/NullableContext.cjs");
+const [useStepperContext, StepperContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "Stepper"
+});
+exports.StepperContextProvider = StepperContextProvider;
 exports.useStepperContext = useStepperContext;

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

@@ -8,5 +8,4 @@ export type StepperContextType = {
     onStepChange?: (stepIndex: number) => void;
     getIsStepInteractive: (stepIndex: number) => boolean;
 };
-export declare const StepperContext: import("react").Context<StepperContextType | null>;
-export declare const useStepperContext: () => StepperContextType;
+export declare const useStepperContext: () => StepperContextType, StepperContextProvider: import("react").Provider<StepperContextType>;

package/dist/Stepper/Stepper.context.js

@@ -1,13 +1,8 @@
-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;
-};
+import { createNullableContext } from "../Helpers/contexts/NullableContext.js";
+const [useStepperContext, StepperContextProvider] = createNullableContext({
+  forComponentName: "Stepper"
+});
 export {
-  StepperContext,
+  StepperContextProvider,
   useStepperContext
 };

package/dist/Stepper/Stepper.d.ts

@@ -1,17 +1,17 @@
 import { StepperProps } from './Stepper.types';
 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;
+        Compose: ({ onClick, ...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;
+        useStepContext: () => import(".").StepperStepContextType;
     };
     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;
+            Compose: ({ onClick, ...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;
+            useStepContext: () => import(".").StepperStepContextType;
         };
     };
 };

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

@@ -5,6 +5,7 @@ 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 useStepperFocusing = require("../../hooks/useStepperFocusing.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const StepperCompose = Object.assign(({
   currentStep = -1,
@@ -14,6 +15,9 @@ const StepperCompose = Object.assign(({
   ...restProps
 }) => {
   const stepIndexingContext = useStepIndexing.useStepIndexing();
+  const focusingProps = useStepperFocusing.useStepperFocusing({
+    isInteractive: !!onStepChange
+  });
   const {
     context: interactivityContext,
     props: interactivityProps
@@ -29,9 +33,10 @@ const StepperCompose = Object.assign(({
     ...interactivityContext,
     currentStep
   };
-  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_context.StepperContext.Provider, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_context.StepperContextProvider, {
     value: contextValue,
     children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepperCompose, {
+      ...focusingProps,
       ...interactivityProps,
       ...restProps
     })

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

@@ -1,10 +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;
+        Compose: ({ onClick, ...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;
+        useStepContext: () => import("../..").StepperStepContextType;
     };
 };
 export default StepperCompose;

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

@@ -1,8 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import Step from "../Step/Step.js";
-import { StepperContext } from "../../Stepper.context.js";
+import { StepperContextProvider } from "../../Stepper.context.js";
 import { useStepperInteractive } from "../../hooks/useStepperInteractive.js";
 import { useStepIndexing } from "../../hooks/useStepIndexing.js";
+import { useStepperFocusing } from "../../hooks/useStepperFocusing.js";
 import { StepperCompose as StepperCompose$1 } from "./Compose.style.js";
 const StepperCompose = Object.assign(({
   currentStep = -1,
@@ -12,6 +13,9 @@ const StepperCompose = Object.assign(({
   ...restProps
 }) => {
   const stepIndexingContext = useStepIndexing();
+  const focusingProps = useStepperFocusing({
+    isInteractive: !!onStepChange
+  });
   const {
     context: interactivityContext,
     props: interactivityProps
@@ -27,9 +31,10 @@ const StepperCompose = Object.assign(({
     ...interactivityContext,
     currentStep
   };
-  return jsxRuntimeExports.jsx(StepperContext.Provider, {
+  return jsxRuntimeExports.jsx(StepperContextProvider, {
     value: contextValue,
     children: jsxRuntimeExports.jsx(StepperCompose$1, {
+      ...focusingProps,
       ...interactivityProps,
       ...restProps
     })

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

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const StepContext = React.createContext(null);
-function useStepContext() {
-  const context = React.useContext(StepContext);
-  if (!context) {
-    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
-  }
-  return context;
-}
-exports.StepContext = StepContext;
+const NullableContext = require("../../../Helpers/contexts/NullableContext.cjs");
+const [useStepContext, StepContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "Stepper.Step"
+});
+exports.StepContextProvider = StepContextProvider;
 exports.useStepContext = useStepContext;

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

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

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

@@ -1,13 +1,8 @@
-import { createContext, useContext } from "react";
-const StepContext = createContext(null);
-function useStepContext() {
-  const context = useContext(StepContext);
-  if (!context) {
-    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
-  }
-  return context;
-}
+import { createNullableContext } from "../../../Helpers/contexts/NullableContext.js";
+const [useStepContext, StepContextProvider] = createNullableContext({
+  forComponentName: "Stepper.Step"
+});
 export {
-  StepContext,
+  StepContextProvider,
   useStepContext
 };

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

@@ -1,9 +1,8 @@
 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;
+    Compose: ({ onClick, ...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;
+    useStepContext: () => import("./Step.types").StepperStepContextType;
 };
 export default Step;

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

@@ -10,7 +10,6 @@ const Compose_style = require("./Compose.style.cjs");
 const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
 const Compose = ({
   onClick,
-  onKeyDown,
   ...restProps
 }) => {
   const {
@@ -39,10 +38,9 @@ const Compose = ({
     getIsStepInteractive,
     stepIndex,
     onClick,
-    onKeyDown,
     state
   });
-  return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContext.Provider, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContextProvider, {
     value: contextValue,
     children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepCompose, {
       "data-state": state,

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

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

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

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { StepContext } from "../../Step.context.js";
+import { StepContextProvider } from "../../Step.context.js";
 import { StepperStepState } from "../../Step.types.js";
 import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
 import { useStepperContext } from "../../../../Stepper.context.js";
@@ -8,7 +8,6 @@ import { StepCompose } from "./Compose.style.js";
 import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
 const Compose = ({
   onClick,
-  onKeyDown,
   ...restProps
 }) => {
   const {
@@ -37,10 +36,9 @@ const Compose = ({
     getIsStepInteractive,
     stepIndex,
     onClick,
-    onKeyDown,
     state
   });
-  return jsxRuntimeExports.jsx(StepContext.Provider, {
+  return jsxRuntimeExports.jsx(StepContextProvider, {
     value: contextValue,
     children: jsxRuntimeExports.jsx(StepCompose, {
       "data-state": state,

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

@@ -2,14 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Compose_style = require("../../../Compose/Compose.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 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, redisUiStyles.getFocusStyle(), ({
-  tabIndex
-}) => tabIndex === 0 && _styled.css`
-      cursor: pointer;
-    `);
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", ":not(.no-focus-visible):focus-visible &[aria-selected=true]{", "}&[role='tab']:not([aria-disabled='true']){cursor:pointer;}"], () => redisUiStyles.useTheme().components.stepper.step.gap, Compose_style.StepperCompose, redisUiStyles.getFocusStyleProperties());
 exports.StepCompose = StepCompose;

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

@@ -1,13 +1,10 @@
-import _styled, { css } from "styled-components";
-import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import _styled from "styled-components";
+import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
+import { StepperCompose } from "../../../Compose/Compose.style.js";
 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, getFocusStyle(), ({
-  tabIndex
-}) => tabIndex === 0 && css`
-      cursor: pointer;
-    `);
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", ":not(.no-focus-visible):focus-visible &[aria-selected=true]{", "}&[role='tab']:not([aria-disabled='true']){cursor:pointer;}"], () => useTheme().components.stepper.step.gap, StepperCompose, getFocusStyleProperties());
 export {
   StepCompose
 };

package/dist/Stepper/hooks/useStepperFocusing.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useStepperFocusing = ({
+  isInteractive
+}) => {
+  const pointerFocusRef = React.useRef(false);
+  return isInteractive ? {
+    tabIndex: 0,
+    onPointerDown: (e) => {
+      e.preventDefault();
+      pointerFocusRef.current = true;
+      e.currentTarget.classList.add("no-focus-visible");
+      e.currentTarget.focus();
+    },
+    onFocusCapture: (e) => {
+      if (!pointerFocusRef.current) {
+        e.currentTarget.classList.remove("no-focus-visible");
+      }
+      pointerFocusRef.current = false;
+    },
+    onKeyDownCapture: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+    },
+    onBlur: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+      pointerFocusRef.current = false;
+    }
+  } : {};
+};
+exports.useStepperFocusing = useStepperFocusing;