@redis-ui/components 41.4.1 → 42.0.0

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

@@ -0,0 +1,16 @@
+import { FocusEvent, KeyboardEvent, PointerEvent } from 'react';
+export declare const useStepperFocusing: ({ isInteractive }: {
+    isInteractive: boolean;
+}) => {
+    tabIndex: number;
+    onPointerDown: (e: PointerEvent) => void;
+    onFocusCapture: (e: FocusEvent) => void;
+    onKeyDownCapture: (e: KeyboardEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+} | {
+    tabIndex?: undefined;
+    onPointerDown?: undefined;
+    onFocusCapture?: undefined;
+    onKeyDownCapture?: undefined;
+    onBlur?: undefined;
+};

package/dist/Stepper/hooks/useStepperFocusing.js

@@ -0,0 +1,31 @@
+import { useRef } from "react";
+const useStepperFocusing = ({
+  isInteractive
+}) => {
+  const pointerFocusRef = 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;
+    }
+  } : {};
+};
+export {
+  useStepperFocusing
+};

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -18,31 +18,36 @@ function useStepperInteractive({
     }
     return stepIndex !== currentStep;
   }, [currentStep, getIsStepInteractive, isInteractive]);
-  const handleKeyDown = react_utils.combineHandlers(isInteractive ? (event) => {
+  const handleKeyDown = isInteractive ? (event) => {
+    const findNextInteractive = (from, to = totalSteps || 0) => {
+      for (let i = from; i < to; i += 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const findPrevInteractive = (from, to = 0) => {
+      for (let i = from; i >= to; i -= 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const handleChange = (next) => {
+      event.preventDefault();
+      if (next !== void 0) onStepChange(next);
+    };
     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;
-          }
-        }
-      }
+    if (key === "ArrowRight") {
+      handleChange(findNextInteractive(currentStep + 1));
+    } else if (key === "ArrowLeft") {
+      handleChange(findPrevInteractive(currentStep - 1));
+    } else if (key === "Home") {
+      handleChange(findNextInteractive(0, currentStep));
+    } else if (key === "End") {
+      handleChange(findPrevInteractive((totalSteps || 0) - 1, currentStep + 1));
     }
-  } : void 0, onKeyDown);
+  } : void 0;
   const role = isInteractive ? "tablist" : "list";
   const label = isInteractive ? "Step navigation" : "Progress steps";
   return {
@@ -51,7 +56,7 @@ function useStepperInteractive({
       onStepChange
     },
     props: {
-      onKeyDown: handleKeyDown,
+      onKeyDown: react_utils.combineHandlers(handleKeyDown, onKeyDown),
       role,
       "aria-label": label
     }
@@ -59,7 +64,6 @@ function useStepperInteractive({
 }
 function getInteractiveStepProps({
   onClick,
-  onKeyDown,
   onStepChange,
   getIsStepInteractive,
   stepIndex,
@@ -67,29 +71,18 @@ function getInteractiveStepProps({
 }) {
   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 handleClick = isClickable ? () => onStepChange(stepIndex) : void 0;
   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,
+    onClick: react_utils.combineHandlers(handleClick, onClick),
     role,
     "aria-selected": ariaSelected,
     "aria-current": ariaCurrent,
     "aria-disabled": ariaDisabled,
-    tabIndex
+    tabIndex: -1
   };
 }
 exports.getInteractiveStepProps = getInteractiveStepProps;

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

@@ -16,15 +16,14 @@ export declare function useStepperInteractive({ onStepChange, onKeyDown, getIsSt
         'aria-label': string;
     };
 };
-export declare function getInteractiveStepProps({ onClick, onKeyDown, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick' | 'onKeyDown'> & Pick<StepperContextType, 'onStepChange' | 'getIsStepInteractive'> & {
+export declare function getInteractiveStepProps({ onClick, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick'> & 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;
+    readonly tabIndex: -1;
 };

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -16,31 +16,36 @@ function useStepperInteractive({
     }
     return stepIndex !== currentStep;
   }, [currentStep, getIsStepInteractive, isInteractive]);
-  const handleKeyDown = combineHandlers(isInteractive ? (event) => {
+  const handleKeyDown = isInteractive ? (event) => {
+    const findNextInteractive = (from, to = totalSteps || 0) => {
+      for (let i = from; i < to; i += 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const findPrevInteractive = (from, to = 0) => {
+      for (let i = from; i >= to; i -= 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const handleChange = (next) => {
+      event.preventDefault();
+      if (next !== void 0) onStepChange(next);
+    };
     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;
-          }
-        }
-      }
+    if (key === "ArrowRight") {
+      handleChange(findNextInteractive(currentStep + 1));
+    } else if (key === "ArrowLeft") {
+      handleChange(findPrevInteractive(currentStep - 1));
+    } else if (key === "Home") {
+      handleChange(findNextInteractive(0, currentStep));
+    } else if (key === "End") {
+      handleChange(findPrevInteractive((totalSteps || 0) - 1, currentStep + 1));
     }
-  } : void 0, onKeyDown);
+  } : void 0;
   const role = isInteractive ? "tablist" : "list";
   const label = isInteractive ? "Step navigation" : "Progress steps";
   return {
@@ -49,7 +54,7 @@ function useStepperInteractive({
       onStepChange
     },
     props: {
-      onKeyDown: handleKeyDown,
+      onKeyDown: combineHandlers(handleKeyDown, onKeyDown),
       role,
       "aria-label": label
     }
@@ -57,7 +62,6 @@ function useStepperInteractive({
 }
 function getInteractiveStepProps({
   onClick,
-  onKeyDown,
   onStepChange,
   getIsStepInteractive,
   stepIndex,
@@ -65,29 +69,18 @@ function getInteractiveStepProps({
 }) {
   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 handleClick = isClickable ? () => onStepChange(stepIndex) : void 0;
   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,
+    onClick: combineHandlers(handleClick, onClick),
     role,
     "aria-selected": ariaSelected,
     "aria-current": ariaCurrent,
     "aria-disabled": ariaDisabled,
-    tabIndex
+    tabIndex: -1
   };
 }
 export {

package/dist/ThemeModeSwitch/ThemeModeSwitch.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const ThemeModeSwitch_style = require("./ThemeModeSwitch.style.cjs");
+const useThemeModeSwitch = require("./useThemeModeSwitch.cjs");
+const Menu = require("../Menu/Menu.cjs");
+const ThemeModeSwitch = ({
+  onThemeModeChange,
+  switchTimeoutMs = 300,
+  ...restProps
+}) => {
+  const {
+    allowSystemThemeMode,
+    themeMode,
+    setThemeMode,
+    toggleThemeMode
+  } = useThemeModeSwitch.useThemeModeSwitch({
+    onThemeModeChange,
+    switchTimeoutMs
+  });
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => setReady(true), []);
+  const modeSwitch = jsxRuntime.jsxRuntimeExports.jsx(ThemeModeSwitch_style.ThemeModeSwitch, {
+    "data-theme-mode": themeMode,
+    "aria-label": `Theme mode switch. Current theme mode is ${themeMode || "unknown"}`,
+    ...restProps,
+    onClick: toggleThemeMode,
+    "data-mounting": !ready ? "" : void 0,
+    "$durationMs": switchTimeoutMs,
+    onPointerDown: allowSystemThemeMode ? (e) => {
+      e.currentTarget.focus();
+      e.preventDefault();
+    } : void 0,
+    children: jsxRuntime.jsxRuntimeExports.jsx(ThemeModeSwitch_style.Knob, {
+      "data-theme-mode": themeMode
+    })
+  });
+  if (allowSystemThemeMode) {
+    return jsxRuntime.jsxRuntimeExports.jsxs(Menu.default, {
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
+        children: modeSwitch
+      }), jsxRuntime.jsxRuntimeExports.jsxs(Menu.default.Content, {
+        placement: "bottom",
+        align: "center",
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Light theme",
+          selected: themeMode === "light",
+          onClick: () => setThemeMode("light")
+        }), jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Dark theme",
+          selected: themeMode === "dark",
+          onClick: () => setThemeMode("dark")
+        }), jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Browser theme",
+          selected: themeMode === "system",
+          onClick: () => setThemeMode("system")
+        })]
+      })]
+    });
+  }
+  return modeSwitch;
+};
+exports.ThemeModeSwitch = ThemeModeSwitch;

package/dist/ThemeModeSwitch/ThemeModeSwitch.d.ts

@@ -0,0 +1,2 @@
+import { ThemeModeSwitchProps } from './ThemeModeSwitch.types';
+export declare const ThemeModeSwitch: ({ onThemeModeChange, switchTimeoutMs, ...restProps }: ThemeModeSwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ThemeModeSwitch/ThemeModeSwitch.js

@@ -0,0 +1,64 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useState, useEffect } from "react";
+import { ThemeModeSwitch as ThemeModeSwitch$1, Knob } from "./ThemeModeSwitch.style.js";
+import { useThemeModeSwitch } from "./useThemeModeSwitch.js";
+import Menu from "../Menu/Menu.js";
+const ThemeModeSwitch = ({
+  onThemeModeChange,
+  switchTimeoutMs = 300,
+  ...restProps
+}) => {
+  const {
+    allowSystemThemeMode,
+    themeMode,
+    setThemeMode,
+    toggleThemeMode
+  } = useThemeModeSwitch({
+    onThemeModeChange,
+    switchTimeoutMs
+  });
+  const [ready, setReady] = useState(false);
+  useEffect(() => setReady(true), []);
+  const modeSwitch = jsxRuntimeExports.jsx(ThemeModeSwitch$1, {
+    "data-theme-mode": themeMode,
+    "aria-label": `Theme mode switch. Current theme mode is ${themeMode || "unknown"}`,
+    ...restProps,
+    onClick: toggleThemeMode,
+    "data-mounting": !ready ? "" : void 0,
+    "$durationMs": switchTimeoutMs,
+    onPointerDown: allowSystemThemeMode ? (e) => {
+      e.currentTarget.focus();
+      e.preventDefault();
+    } : void 0,
+    children: jsxRuntimeExports.jsx(Knob, {
+      "data-theme-mode": themeMode
+    })
+  });
+  if (allowSystemThemeMode) {
+    return jsxRuntimeExports.jsxs(Menu, {
+      children: [jsxRuntimeExports.jsx(Menu.Trigger, {
+        children: modeSwitch
+      }), jsxRuntimeExports.jsxs(Menu.Content, {
+        placement: "bottom",
+        align: "center",
+        children: [jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Light theme",
+          selected: themeMode === "light",
+          onClick: () => setThemeMode("light")
+        }), jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Dark theme",
+          selected: themeMode === "dark",
+          onClick: () => setThemeMode("dark")
+        }), jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Browser theme",
+          selected: themeMode === "system",
+          onClick: () => setThemeMode("system")
+        })]
+      })]
+    });
+  }
+  return modeSwitch;
+};
+export {
+  ThemeModeSwitch
+};

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 ThemeModeSwitch = _styled__default.default.button.withConfig({
+  displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
+  componentId: "RedisUI__sc-6b0pvc-0"
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+  $durationMs
+}) => $durationMs, () => {
+  const theme = redisUiStyles.useTheme().components.themeModeSwitch;
+  return _styled.css`
+      width: ${theme.width};
+      height: ${theme.height};
+      padding: ${theme.padding};
+
+      border-radius: ${theme.borderRadius};
+
+      border: ${theme.borderColor} solid ${theme.borderWidth};
+      background-color: ${theme.bgColor};
+    `;
+}, redisUiStyles.getFocusStyle());
+const Knob = _styled__default.default.div.withConfig({
+  displayName: "ThemeModeSwitchstyle__Knob",
+  componentId: "RedisUI__sc-6b0pvc-1"
+})(["height:100%;width:100%;background:none;transition:inherit;&[data-theme-mode='dark']{transform:translateX(100%);:before{transform:translateX(-100%);}}&[data-theme-mode='system']{transform:translateX(50%);:before{transform:translateX(-50%);}}:before{content:'';display:block;transition:inherit;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;", "}"], () => {
+  const theme = redisUiStyles.useTheme().components.themeModeSwitch.thumb;
+  return _styled.css`
+        border-radius: ${theme.borderRadius};
+        background-color: ${theme.bgColor};
+        background-image: ${theme.icon};
+        aspect-ratio: ${theme.iconAspectRatio};
+      `;
+});
+exports.Knob = Knob;
+exports.ThemeModeSwitch = ThemeModeSwitch;

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.d.ts

@@ -0,0 +1,4 @@
+export declare const ThemeModeSwitch: import("styled-components").StyledComponent<"button", any, {
+    $durationMs: number;
+}, never>;
+export declare const Knob: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.js

@@ -0,0 +1,36 @@
+import _styled, { css } from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+const ThemeModeSwitch = _styled.button.withConfig({
+  displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
+  componentId: "RedisUI__sc-6b0pvc-0"
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+  $durationMs
+}) => $durationMs, () => {
+  const theme = useTheme().components.themeModeSwitch;
+  return css`
+      width: ${theme.width};
+      height: ${theme.height};
+      padding: ${theme.padding};
+
+      border-radius: ${theme.borderRadius};
+
+      border: ${theme.borderColor} solid ${theme.borderWidth};
+      background-color: ${theme.bgColor};
+    `;
+}, getFocusStyle());
+const Knob = _styled.div.withConfig({
+  displayName: "ThemeModeSwitchstyle__Knob",
+  componentId: "RedisUI__sc-6b0pvc-1"
+})(["height:100%;width:100%;background:none;transition:inherit;&[data-theme-mode='dark']{transform:translateX(100%);:before{transform:translateX(-100%);}}&[data-theme-mode='system']{transform:translateX(50%);:before{transform:translateX(-50%);}}:before{content:'';display:block;transition:inherit;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;", "}"], () => {
+  const theme = useTheme().components.themeModeSwitch.thumb;
+  return css`
+        border-radius: ${theme.borderRadius};
+        background-color: ${theme.bgColor};
+        background-image: ${theme.icon};
+        aspect-ratio: ${theme.iconAspectRatio};
+      `;
+});
+export {
+  Knob,
+  ThemeModeSwitch
+};

package/dist/ThemeModeSwitch/ThemeModeSwitch.types.d.ts

@@ -0,0 +1,7 @@
+import { UserThemeMode } from '@redislabsdev/redis-ui-styles';
+import { HTMLAttributes } from 'react';
+export type UseThemeModeSwitchParams = {
+    onThemeModeChange?: (newThemeMode: UserThemeMode) => void;
+    switchTimeoutMs?: number;
+};
+export type ThemeModeSwitchProps = Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onChange'> & UseThemeModeSwitchParams;

package/dist/ThemeModeSwitch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeModeSwitch.types';
+export * from './ThemeModeSwitch';
+export * from './useThemeModeSwitch';

package/dist/ThemeModeSwitch/useThemeModeSwitch.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+function useThemeModeSwitch({
+  onThemeModeChange,
+  switchTimeoutMs
+}) {
+  const {
+    getNextThemeModeToToggle,
+    userThemeMode,
+    setUserThemeMode,
+    allowSystemThemeMode
+  } = redisUiStyles.useThemeModeSwitchingContext();
+  const [localThemeMode, setLocalThemeMode] = React.useState(userThemeMode);
+  React.useLayoutEffect(() => setLocalThemeMode(userThemeMode), [userThemeMode]);
+  const timerRef = React.useRef();
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+  const applyThemeMode = (newThemeMode) => {
+    if (!newThemeMode) return;
+    clearTimeout(timerRef.current);
+    setLocalThemeMode(newThemeMode);
+    timerRef.current = setTimeout(() => {
+      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+    }, switchTimeoutMs);
+  };
+  const toggleThemeMode = () => {
+    applyThemeMode(getNextThemeModeToToggle(localThemeMode));
+  };
+  return {
+    allowSystemThemeMode,
+    themeMode: localThemeMode,
+    setThemeMode: applyThemeMode,
+    toggleThemeMode
+  };
+}
+exports.useThemeModeSwitch = useThemeModeSwitch;

package/dist/ThemeModeSwitch/useThemeModeSwitch.d.ts

@@ -0,0 +1,8 @@
+import { UserThemeMode } from '@redislabsdev/redis-ui-styles';
+import { UseThemeModeSwitchParams } from './ThemeModeSwitch.types';
+export declare function useThemeModeSwitch({ onThemeModeChange, switchTimeoutMs }: UseThemeModeSwitchParams): {
+    allowSystemThemeMode: boolean | undefined;
+    themeMode: "light" | "dark" | "system" | undefined;
+    setThemeMode: (newThemeMode: UserThemeMode | undefined) => void;
+    toggleThemeMode: () => void;
+};

package/dist/ThemeModeSwitch/useThemeModeSwitch.js

@@ -0,0 +1,37 @@
+import { useState, useLayoutEffect, useRef, useEffect } from "react";
+import { useThemeModeSwitchingContext } from "@redislabsdev/redis-ui-styles";
+function useThemeModeSwitch({
+  onThemeModeChange,
+  switchTimeoutMs
+}) {
+  const {
+    getNextThemeModeToToggle,
+    userThemeMode,
+    setUserThemeMode,
+    allowSystemThemeMode
+  } = useThemeModeSwitchingContext();
+  const [localThemeMode, setLocalThemeMode] = useState(userThemeMode);
+  useLayoutEffect(() => setLocalThemeMode(userThemeMode), [userThemeMode]);
+  const timerRef = useRef();
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const applyThemeMode = (newThemeMode) => {
+    if (!newThemeMode) return;
+    clearTimeout(timerRef.current);
+    setLocalThemeMode(newThemeMode);
+    timerRef.current = setTimeout(() => {
+      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+    }, switchTimeoutMs);
+  };
+  const toggleThemeMode = () => {
+    applyThemeMode(getNextThemeModeToToggle(localThemeMode));
+  };
+  return {
+    allowSystemThemeMode,
+    themeMode: localThemeMode,
+    setThemeMode: applyThemeMode,
+    toggleThemeMode
+  };
+}
+export {
+  useThemeModeSwitch
+};

package/dist/Toast/Toaster.cjs

@@ -1,14 +1,12 @@
 "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 Toaster_style = require("./Toaster.style.cjs");
-const Toaster = ({
+const Toaster = React.forwardRef((props, ref) => jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
   ref,
   ...props
-}) => jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
-  ref,
-  ...props,
-  enableMultiContainer: !!props.containerId
-});
+}));
+Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 exports.default = Toaster$1;

package/dist/Toast/Toaster.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToasterProps } from './core/core.types';
-declare const Toaster: ({ ref, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toaster: import("react").ForwardRefExoticComponent<Omit<ToasterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Toaster;

package/dist/Toast/Toaster.js

@@ -1,13 +1,11 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
 import { ToasterContainer } from "./Toaster.style.js";
-const Toaster = ({
+const Toaster = forwardRef((props, ref) => jsxRuntimeExports.jsx(ToasterContainer, {
   ref,
   ...props
-}) => jsxRuntimeExports.jsx(ToasterContainer, {
-  ref,
-  ...props,
-  enableMultiContainer: !!props.containerId
-});
+}));
+Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 export {
   Toaster$1 as default

package/dist/Toast/Toaster.style.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const reactToastify_esm = require("../node_modules/react-toastify/dist/react-toastify.esm.cjs");
-;/* empty css                                                      */
+const reactToastify_esm = require("../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
+;/* empty css                                                                          */
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);