@redis-ui/components 39.12.0 → 41.3.2

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Step_types = require("../components/Step/Step.types.cjs");
+const react_utils = require("../../Helpers/react.utils.cjs");
+function useStepperInteractive({
+  onStepChange,
+  onKeyDown,
+  getIsStepInteractive,
+  currentStep = -1,
+  totalSteps
+}) {
+  const isInteractive = !!onStepChange;
+  const isStepInteractive = React.useCallback((stepIndex) => {
+    if (!isInteractive) return false;
+    if (typeof getIsStepInteractive === "function") {
+      return getIsStepInteractive(stepIndex);
+    }
+    return stepIndex !== currentStep;
+  }, [currentStep, getIsStepInteractive, isInteractive]);
+  const handleKeyDown = react_utils.combineHandlers(isInteractive ? (event) => {
+    const {
+      key
+    } = event;
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      event.preventDefault();
+      const direction = key === "ArrowRight" ? 1 : -1;
+      const newIndex = currentStep + direction;
+      if (direction > 0) {
+        for (let i = newIndex; i < totalSteps || 0; i += 1) {
+          if (isStepInteractive(i)) {
+            onStepChange(i);
+            break;
+          }
+        }
+      } else {
+        for (let i = newIndex; i >= 0; i -= 1) {
+          if (isStepInteractive(i)) {
+            onStepChange(i);
+            break;
+          }
+        }
+      }
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tablist" : "list";
+  const label = isInteractive ? "Step navigation" : "Progress steps";
+  return {
+    context: {
+      getIsStepInteractive: isStepInteractive,
+      onStepChange
+    },
+    props: {
+      onKeyDown: handleKeyDown,
+      role,
+      "aria-label": label
+    }
+  };
+}
+function getInteractiveStepProps({
+  onClick,
+  onKeyDown,
+  onStepChange,
+  getIsStepInteractive,
+  stepIndex,
+  state
+}) {
+  const isInteractive = !!onStepChange;
+  const isClickable = isInteractive && getIsStepInteractive(stepIndex);
+  const handleClick = react_utils.combineHandlers(isClickable ? () => onStepChange(stepIndex) : void 0, onClick);
+  const handleKeyDown = react_utils.combineHandlers(isClickable ? (e) => {
+    const {
+      key
+    } = e;
+    if (key === "Enter" || key === " ") {
+      e.preventDefault();
+      onStepChange(stepIndex);
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tab" : "listitem";
+  const ariaSelected = isInteractive ? state === Step_types.StepperStepState.FOCUSED : void 0;
+  const ariaCurrent = !isInteractive && state === Step_types.StepperStepState.FOCUSED ? "step" : void 0;
+  const tabIndex = isClickable ? 0 : -1;
+  const ariaDisabled = isInteractive && !isClickable ? true : void 0;
+  return {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role,
+    "aria-selected": ariaSelected,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    tabIndex
+  };
+}
+exports.getInteractiveStepProps = getInteractiveStepProps;
+exports.useStepperInteractive = useStepperInteractive;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { StepperProps } from '../Stepper.types';
+import { ComposeProps } from '../components/Step/components/Compose/Compose.types';
+import { StepperContextType } from '../Stepper.context';
+import { StepperStepStateType } from '../components/Step/Step.types';
+export declare function useStepperInteractive({ onStepChange, onKeyDown, getIsStepInteractive, currentStep, totalSteps }: Pick<StepperProps, 'onStepChange' | 'getIsStepInteractive' | 'currentStep' | 'onKeyDown'> & {
+    totalSteps: number;
+}): {
+    context: {
+        getIsStepInteractive: (stepIndex: number) => boolean;
+        onStepChange: ((stepIndex: number) => void) | undefined;
+    };
+    props: {
+        onKeyDown: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+        role: string;
+        'aria-label': string;
+    };
+};
+export declare function getInteractiveStepProps({ onClick, onKeyDown, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick' | 'onKeyDown'> & Pick<StepperContextType, 'onStepChange' | 'getIsStepInteractive'> & {
+    stepIndex: number;
+    state: StepperStepStateType;
+}): {
+    readonly onClick: import("react").MouseEventHandler<HTMLElement> | undefined;
+    readonly onKeyDown: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    readonly role: "listitem" | "tab";
+    readonly 'aria-selected': boolean | undefined;
+    readonly 'aria-current': "step" | undefined;
+    readonly 'aria-disabled': true | undefined;
+    readonly tabIndex: 0 | -1;
+};

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -0,0 +1,96 @@
+import { useCallback } from "react";
+import { StepperStepState } from "../components/Step/Step.types.js";
+import { combineHandlers } from "../../Helpers/react.utils.js";
+function useStepperInteractive({
+  onStepChange,
+  onKeyDown,
+  getIsStepInteractive,
+  currentStep = -1,
+  totalSteps
+}) {
+  const isInteractive = !!onStepChange;
+  const isStepInteractive = useCallback((stepIndex) => {
+    if (!isInteractive) return false;
+    if (typeof getIsStepInteractive === "function") {
+      return getIsStepInteractive(stepIndex);
+    }
+    return stepIndex !== currentStep;
+  }, [currentStep, getIsStepInteractive, isInteractive]);
+  const handleKeyDown = combineHandlers(isInteractive ? (event) => {
+    const {
+      key
+    } = event;
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      event.preventDefault();
+      const direction = key === "ArrowRight" ? 1 : -1;
+      const newIndex = currentStep + direction;
+      if (direction > 0) {
+        for (let i = newIndex; i < totalSteps || 0; i += 1) {
+          if (isStepInteractive(i)) {
+            onStepChange(i);
+            break;
+          }
+        }
+      } else {
+        for (let i = newIndex; i >= 0; i -= 1) {
+          if (isStepInteractive(i)) {
+            onStepChange(i);
+            break;
+          }
+        }
+      }
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tablist" : "list";
+  const label = isInteractive ? "Step navigation" : "Progress steps";
+  return {
+    context: {
+      getIsStepInteractive: isStepInteractive,
+      onStepChange
+    },
+    props: {
+      onKeyDown: handleKeyDown,
+      role,
+      "aria-label": label
+    }
+  };
+}
+function getInteractiveStepProps({
+  onClick,
+  onKeyDown,
+  onStepChange,
+  getIsStepInteractive,
+  stepIndex,
+  state
+}) {
+  const isInteractive = !!onStepChange;
+  const isClickable = isInteractive && getIsStepInteractive(stepIndex);
+  const handleClick = combineHandlers(isClickable ? () => onStepChange(stepIndex) : void 0, onClick);
+  const handleKeyDown = combineHandlers(isClickable ? (e) => {
+    const {
+      key
+    } = e;
+    if (key === "Enter" || key === " ") {
+      e.preventDefault();
+      onStepChange(stepIndex);
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tab" : "listitem";
+  const ariaSelected = isInteractive ? state === StepperStepState.FOCUSED : void 0;
+  const ariaCurrent = !isInteractive && state === StepperStepState.FOCUSED ? "step" : void 0;
+  const tabIndex = isClickable ? 0 : -1;
+  const ariaDisabled = isInteractive && !isClickable ? true : void 0;
+  return {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role,
+    "aria-selected": ariaSelected,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    tabIndex
+  };
+}
+export {
+  getInteractiveStepProps,
+  useStepperInteractive
+};

package/dist/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SwitchProps } from './Switch.types';
 declare const Switch: (({ className, style, disabled, readOnly, checked, defaultChecked, onCheckedChange, titleOff, titleOn, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ disabled, readOnly, checked, defaultChecked, onCheckedChange, ...restProps }: import("./components/Compose/Compose.types").SwitchComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ disabled, readOnly, checked, defaultChecked, onCheckedChange, ...restProps }: import("./components/Compose/Compose.types").SwitchComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Switcher: (({ id, onPointerDown, onMouseLeave, onKeyDown, ...props }: import("./components/Switcher/Switcher.types").SwitcherProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-switch").SwitchProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
         Knob: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/Switch/components/Title/Title.style.d.ts

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

package/dist/TableHeading/TableHeading.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { TableHeadingProps } from './TableHeading.types';
 declare const TableHeading: ((props: TableHeadingProps) => import("react/jsx-runtime").JSX.Element) & {
-    Title: ({ className, children, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, children, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     SearchInput: 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("..").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("../Helpers/common.types").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/TableHeading/TableHeading.style.d.ts

@@ -3,7 +3,7 @@ export declare const separator: import("styled-components").FlattenInterpolation
 export declare const TableHeadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EndContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TableSearchInput: 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("../Helpers/common.types").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/TableHeading/components/TableTitle/TableTitle.d.ts

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

package/dist/Tabs/Tabs.d.ts

@@ -3,16 +3,16 @@ import { TabsProps } from './Tabs.types';
 declare const Tabs: (({ tabs, variant, ...restProps }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: <TValue extends string = string>({ onChange, activateOnFocus, ...restProps }: import("./components/Compose/Compose.types").TabsComposeProps<TValue> & import("./components/Compose/Compose.types").RestTabsComposeProps) => import("react/jsx-runtime").JSX.Element;
     TabBar: (({ tabs, ...restProps }: import(".").TabsBarProps & import(".").RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, variant, ...restProps }: import("./components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-        Trigger: (({ value, children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
-            Compose: ({ children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-            Tab: ({ children, ...restProps }: import("../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-            Marker: (props: import("../Helpers/common.types").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ children, variant, ...restProps }: import("./components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Trigger: (({ value, children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
+            Compose: ({ children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+            Tab: ({ children, ...restProps }: import("..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+            Marker: (props: import("..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
         };
     };
     ContentPane: (({ tabs, ...restProps }: import(".").TabsContentPaneProps & import(".").RestTabsContentPaneProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/ContentPane/components/Compose/Compose.types").RestTabsContentPaneComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Content: (props: import("./components/ContentPane/components/Content/Content.types").TabsContentProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Content: (props: import("./components/ContentPane/components/Content/Content.types").TabsContentProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default Tabs;

package/dist/Tabs/components/ContentPane/ContentPane.d.ts

@@ -2,6 +2,6 @@
 import { RestTabsContentPaneProps, TabsContentPaneProps } from './ContentPane.types';
 declare const ContentPane: (({ tabs, ...restProps }: TabsContentPaneProps & RestTabsContentPaneProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").RestTabsContentPaneComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: import("./components/Content/Content.types").TabsContentProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: import("./components/Content/Content.types").TabsContentProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
 };
 export default ContentPane;

package/dist/Tabs/components/TabBar/TabBar.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { RestTabsBarProps, TabsBarProps } from './TabBar.types';
 declare const TabBar: (({ tabs, ...restProps }: TabsBarProps & RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (({ value, children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-        Tab: ({ children, ...restProps }: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        Marker: (props: import("../../../Helpers/common.types").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (({ value, children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Tab: ({ children, ...restProps }: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+        Marker: (props: import("../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default TabBar;

package/dist/Tabs/components/TabBar/components/Trigger/Trigger.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { RestTabsBarTriggerProps, TabsBarTriggerProps } from './Trigger.types';
 declare const Trigger: (({ value, children, ...restProps }: TabsBarTriggerProps & RestTabsBarTriggerProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ children, ...restProps }: import("../../../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Marker: (props: import("../../../../../Helpers/common.types").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, ...restProps }: import("../../../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+    Marker: (props: import("../../../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Trigger;

package/dist/Toast/Toast.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import type { ToastProps } from './Toast.types';
-import { ChildFree, ComposeElementProps } from '../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../Helpers';
 declare const Toast: (({ message, description, actions, customIcon, showIcon, showCloseButton, ...props }: ToastProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: (props: import("../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../Helpers").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, size, ...props }: import("./components/Icon/Icon.types").ToastIconProps) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
-        Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant, ...restProps }: import(".").ToastActionType & {
             variant?: import("../Banner/components/BannerSemanticComponents").SemanticOutlineVariant | undefined;
             disabled?: boolean | undefined;
@@ -15,9 +15,9 @@ declare const Toast: (({ message, description, actions, customIcon, showIcon, sh
     };
     CloseButton: ({ children, onClick, ...props }: import("../Banner/components/BannerSemanticComponents").SemanticCloseButtonProps & import("../Banner/components/BannerSemanticComponents").RestSemanticCloseButtonProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ message, description, ...restProps }: import("./components/Content/Content.types").ToastContentProps & import("./components/Content/Content.types").RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        Message: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-        Description: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+        Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     };
 };
 export default Toast;

package/dist/Toast/components/Actions/Actions.d.ts

@@ -1,6 +1,6 @@
 import type { ActionsProps } from './Actions.types';
 declare const Actions: (({ primary, secondary, ...props }: ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: (props: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Action: ({ label, onClick, closes, icon, variant, ...restProps }: import("../..").ToastActionType & {
         variant?: import("../../../Banner/components/BannerSemanticComponents").SemanticOutlineVariant | undefined;
         disabled?: boolean | undefined;

package/dist/Toast/components/Actions/Actions.types.d.ts

@@ -1,5 +1,5 @@
 import { ToastActionType } from '../../core/core.types';
-import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../../../Helpers';
 export type ActionsProps = {
     primary?: ToastActionType;
     secondary?: ToastActionType;

package/dist/Toast/components/Actions/components/Action/Action.cjs

@@ -16,7 +16,7 @@ const Action = ({
     variant: semanticVariant
   } = context.useToastParams();
   return jsxRuntime.jsxRuntimeExports.jsxs(SemanticButton.default, {
-    "data-testid": "redisui-toast-action-button",
+    "data-role": "toast-action-button",
     semanticVariant,
     outlineVariant: variant,
     onClick: (e) => {

package/dist/Toast/components/Actions/components/Action/Action.js

@@ -14,7 +14,7 @@ const Action = ({
     variant: semanticVariant
   } = useToastParams();
   return jsxRuntimeExports.jsxs(SemanticButton, {
-    "data-testid": "redisui-toast-action-button",
+    "data-role": "toast-action-button",
     semanticVariant,
     outlineVariant: variant,
     onClick: (e) => {

package/dist/Toast/components/Actions/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
-import type { ComposeElementProps } from '../../../../../Helpers/common.types';
+import type { ComposeElementProps } from '../../../../../Helpers';
 declare const Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Compose/Compose.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const Compose_style = require("./Compose.style.cjs");
 const context = require("../../core/context.cjs");
+const Compose_style = require("./Compose.style.cjs");
 const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.ToastComposeContainer, {
-  "data-testid": "redisui-toast",
+  "data-role": "toast",
   variant: context.useToastParams().variant,
   size: "M",
   ...props

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

@@ -1,4 +1,4 @@
 import type { SemanticContainerProps } from '../../../Banner/components/BannerSemanticComponents';
-import { ComposeElementProps } from '../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../Helpers';
 declare const Compose: (props: SemanticContainerProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Compose/Compose.js

@@ -1,8 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { ToastComposeContainer } from "./Compose.style.js";
 import { useToastParams } from "../../core/context.js";
+import { ToastComposeContainer } from "./Compose.style.js";
 const Compose = (props) => jsxRuntimeExports.jsx(ToastComposeContainer, {
-  "data-testid": "redisui-toast",
+  "data-role": "toast",
   variant: useToastParams().variant,
   size: "M",
   ...props

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Toast/components/Content/Content.d.ts

@@ -1,7 +1,7 @@
 import { RestToastContentProps, ToastContentProps } from './Content.types';
 declare const Content: (({ message, description, ...restProps }: ToastContentProps & RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: (props: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ children, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ children, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+    Message: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Description: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Content;

package/dist/Toast/components/Content/Content.types.d.ts

@@ -1,4 +1,4 @@
 import { ToastContentParams } from '../../core/core.types';
-import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../../../Helpers';
 export type ToastContentProps = Pick<ToastContentParams, 'message' | 'description'>;
 export type RestToastContentProps = ChildFree<ComposeElementProps>;

package/dist/Toast/components/Content/components/Compose/Compose.cjs

@@ -1,8 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const context = require("../../../../core/context.cjs");
 const Compose_style = require("./Compose.style.cjs");
-const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
-  ...props
-});
+const Compose = (props) => {
+  const {
+    liveRole
+  } = context.useToastParams();
+  const liveProps = liveRole === "alert" ? {} : {
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
+    role: liveRole,
+    ...liveProps,
+    ...props
+  });
+};
 exports.default = Compose;

package/dist/Toast/components/Content/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../../../Helpers';
 declare const Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Content/components/Compose/Compose.js

@@ -1,8 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useToastParams } from "../../../../core/context.js";
 import { Container } from "./Compose.style.js";
-const Compose = (props) => jsxRuntimeExports.jsx(Container, {
-  ...props
-});
+const Compose = (props) => {
+  const {
+    liveRole
+  } = useToastParams();
+  const liveProps = liveRole === "alert" ? {} : {
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return jsxRuntimeExports.jsx(Container, {
+    role: liveRole,
+    ...liveProps,
+    ...props
+  });
+};
 export {
   Compose as default
 };

package/dist/Toast/components/Content/components/Description/Description.cjs

@@ -6,7 +6,7 @@ const Description = ({
   children,
   ...restProps
 }) => children ? jsxRuntime.jsxRuntimeExports.jsx(Description_style.ToastDescription, {
-  "data-testid": "redisui-toast-description",
+  "data-role": "toast-description",
   ...restProps,
   children
 }) : null;

package/dist/Toast/components/Content/components/Description/Description.js

@@ -4,7 +4,7 @@ const Description = ({
   children,
   ...restProps
 }) => children ? jsxRuntimeExports.jsx(ToastDescription, {
-  "data-testid": "redisui-toast-description",
+  "data-role": "toast-description",
   ...restProps,
   children
 }) : null;

package/dist/Toast/components/Content/components/Description/Description.style.d.ts

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

package/dist/Toast/components/Content/components/Description/Description.types.d.ts

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

package/dist/Toast/components/Content/components/Message/Message.cjs

@@ -6,7 +6,7 @@ const Message = ({
   children,
   ...restProps
 }) => children ? jsxRuntime.jsxRuntimeExports.jsx(Message_style.ToastMessage, {
-  "data-testid": "redisui-toast-message",
+  "data-role": "toast-message",
   variant: "semiBold",
   ...restProps,
   children

package/dist/Toast/components/Content/components/Message/Message.js

@@ -4,7 +4,7 @@ const Message = ({
   children,
   ...restProps
 }) => children ? jsxRuntimeExports.jsx(ToastMessage, {
-  "data-testid": "redisui-toast-message",
+  "data-role": "toast-message",
   variant: "semiBold",
   ...restProps,
   children

package/dist/Toast/components/Content/components/Message/Message.style.d.ts

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

package/dist/Toast/components/Content/components/Message/Message.types.d.ts

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