@redis-ui/components 42.8.0 → 43.0.2

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -12,7 +12,9 @@ function useStepperInteractive({
 }) {
   const isInteractive = !!onStepChange;
   const isStepInteractive = React.useCallback((stepIndex) => {
-    if (!isInteractive) return false;
+    if (!isInteractive) {
+      return false;
+    }
     if (typeof getIsStepInteractive === "function") {
       return getIsStepInteractive(stepIndex);
     }
@@ -21,19 +23,25 @@ function useStepperInteractive({
   const handleKeyDown = isInteractive ? (event) => {
     const findNextInteractive = (from, to = totalSteps || 0) => {
       for (let i = from; i < to; i += 1) {
-        if (isStepInteractive(i)) return i;
+        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;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const handleChange = (next) => {
       event.preventDefault();
-      if (next !== void 0) onStepChange(next);
+      if (next !== void 0) {
+        onStepChange(next);
+      }
     };
     const {
       key

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -10,7 +10,9 @@ function useStepperInteractive({
 }) {
   const isInteractive = !!onStepChange;
   const isStepInteractive = useCallback((stepIndex) => {
-    if (!isInteractive) return false;
+    if (!isInteractive) {
+      return false;
+    }
     if (typeof getIsStepInteractive === "function") {
       return getIsStepInteractive(stepIndex);
     }
@@ -19,19 +21,25 @@ function useStepperInteractive({
   const handleKeyDown = isInteractive ? (event) => {
     const findNextInteractive = (from, to = totalSteps || 0) => {
       for (let i = from; i < to; i += 1) {
-        if (isStepInteractive(i)) return i;
+        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;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const handleChange = (next) => {
       event.preventDefault();
-      if (next !== void 0) onStepChange(next);
+      if (next !== void 0) {
+        onStepChange(next);
+      }
     };
     const {
       key

package/dist/Switch/components/Switcher/Switcher.cjs

@@ -48,7 +48,9 @@ const Switcher = Object.assign(({
       userCanChangeRef.current = false;
     };
     handleKeyDown = (e) => {
-      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) userCanChangeRef.current = true;
+      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        userCanChangeRef.current = true;
+      }
     };
   }
   return jsxRuntime.jsxRuntimeExports.jsx(Switcher.Compose, {

package/dist/Switch/components/Switcher/Switcher.js

@@ -46,7 +46,9 @@ const Switcher = Object.assign(({
       userCanChangeRef.current = false;
     };
     handleKeyDown = (e) => {
-      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) userCanChangeRef.current = true;
+      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        userCanChangeRef.current = true;
+      }
     };
   }
   return jsxRuntimeExports.jsx(Switcher.Compose, {

package/dist/Switch/components/Switcher/Switcher.style.cjs

@@ -16,30 +16,53 @@ const getSwitchStatesStyle = (theme, maps, {
   withCursor,
   selectorSuffix = ""
 }) => {
-  if (!theme) return null;
-  if (disabled) return _styled.css`
+  if (!theme) {
+    return null;
+  }
+  if (disabled) {
+    return _styled.css`
       &&${selectorSuffix} {
-        ${css_utils.styleFromTokens(maps, theme.disabled)};
+        ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.disabled
+    })};
         ${withCursor && `cursor: not-allowed`};
       }
     `;
-  if (readOnly) return _styled.css`
+  }
+  if (readOnly) {
+    return _styled.css`
       &${selectorSuffix}, &:hover${selectorSuffix}, &:active${selectorSuffix} {
-        ${css_utils.styleFromTokens(maps, theme.readonly)};
+        ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.readonly
+    })};
         ${withCursor && `cursor: default`};
       }
     `;
+  }
   return _styled.css`
     &${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.normal
+  })};
     }
 
     &:hover${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.hover, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.hover,
+    fallbackTokens: theme.normal
+  })};
     }
 
     &:active${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.active, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.active,
+    fallbackTokens: theme.normal
+  })};
     }
   `;
 };

package/dist/Switch/components/Switcher/Switcher.style.js

@@ -12,30 +12,53 @@ const getSwitchStatesStyle = (theme, maps, {
   withCursor,
   selectorSuffix = ""
 }) => {
-  if (!theme) return null;
-  if (disabled) return css`
+  if (!theme) {
+    return null;
+  }
+  if (disabled) {
+    return css`
       &&${selectorSuffix} {
-        ${styleFromTokens(maps, theme.disabled)};
+        ${styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.disabled
+    })};
         ${withCursor && `cursor: not-allowed`};
       }
     `;
-  if (readOnly) return css`
+  }
+  if (readOnly) {
+    return css`
       &${selectorSuffix}, &:hover${selectorSuffix}, &:active${selectorSuffix} {
-        ${styleFromTokens(maps, theme.readonly)};
+        ${styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.readonly
+    })};
         ${withCursor && `cursor: default`};
       }
     `;
+  }
   return css`
     &${selectorSuffix} {
-      ${styleFromTokens(maps, theme.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.normal
+  })};
     }
 
     &:hover${selectorSuffix} {
-      ${styleFromTokens(maps, theme.hover, theme.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.hover,
+    fallbackTokens: theme.normal
+  })};
     }
 
     &:active${selectorSuffix} {
-      ${styleFromTokens(maps, theme.active, theme.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.active,
+    fallbackTokens: theme.normal
+  })};
     }
   `;
 };

package/dist/Tabs/components/TabBar/components/Trigger/components/Marker/Marker.style.cjs

@@ -17,23 +17,42 @@ const Marker = _styled__default.default.div.withConfig({
   } = theme.tabMarker;
   return _styled.css`
       & {
-        ${css_utils.styleFromTokens(markerMaps, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}:hover :where(&&) {
-        ${css_utils.styleFromTokens(markerMaps, states.hover, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.hover,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}:focus-visible :where(&&) {
-        ${css_utils.styleFromTokens(markerMaps, states.focus, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.focus,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}[data-state='active'] :where(&&) {
-        ${css_utils.styleFromTokens(markerMaps, states.active, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.active,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}[data-disabled] :where(&&) {
-        ${css_utils.styleFromTokens(markerMaps, states.disabled, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.disabled,
+    fallbackTokens: states.normal
+  })}
       }
     `;
 });

package/dist/Tabs/components/TabBar/components/Trigger/components/Marker/Marker.style.js

@@ -13,23 +13,42 @@ const Marker = _styled.div.withConfig({
   } = theme.tabMarker;
   return css`
       & {
-        ${styleFromTokens(markerMaps, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}:hover :where(&&) {
-        ${styleFromTokens(markerMaps, states.hover, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.hover,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}:focus-visible :where(&&) {
-        ${styleFromTokens(markerMaps, states.focus, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.focus,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}[data-state='active'] :where(&&) {
-        ${styleFromTokens(markerMaps, states.active, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.active,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}[data-disabled] :where(&&) {
-        ${styleFromTokens(markerMaps, states.disabled, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: states.disabled,
+    fallbackTokens: states.normal
+  })}
       }
     `;
 });

package/dist/Tabs/components/TabBar/components/Trigger/components/Tab/Tab.style.cjs

@@ -18,24 +18,43 @@ const TabsTriggerTab = _styled__default.default.div.withConfig({
   } = tabsTheme.tab;
   return _styled.css`
       & {
-        ${css_utils.styleFromTokens(tabMaps, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}:hover :where(&&) {
-        ${css_utils.styleFromTokens(tabMaps, states.hover, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.hover,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}:focus-visible :where(&&) {
-        ${css_utils.styleFromTokens(tabMaps, states.focus, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.focus,
+    fallbackTokens: states.normal
+  })}
         ${redisUiStyles.getFocusStyleProperties("0")};
       }
 
       ${Compose_style.TabsTriggerCompose}[data-state='active'] :where(&&) {
-        ${css_utils.styleFromTokens(tabMaps, states.active, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.active,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${Compose_style.TabsTriggerCompose}[data-disabled] :where(&&) {
-        ${css_utils.styleFromTokens(tabMaps, states.disabled, states.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.disabled,
+    fallbackTokens: states.normal
+  })}
       }
     `;
 });

package/dist/Tabs/components/TabBar/components/Trigger/components/Tab/Tab.style.js

@@ -14,24 +14,43 @@ const TabsTriggerTab = _styled.div.withConfig({
   } = tabsTheme.tab;
   return css`
       & {
-        ${styleFromTokens(tabMaps, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}:hover :where(&&) {
-        ${styleFromTokens(tabMaps, states.hover, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.hover,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}:focus-visible :where(&&) {
-        ${styleFromTokens(tabMaps, states.focus, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.focus,
+    fallbackTokens: states.normal
+  })}
         ${getFocusStyleProperties("0")};
       }
 
       ${TabsTriggerCompose}[data-state='active'] :where(&&) {
-        ${styleFromTokens(tabMaps, states.active, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.active,
+    fallbackTokens: states.normal
+  })}
       }
 
       ${TabsTriggerCompose}[data-disabled] :where(&&) {
-        ${styleFromTokens(tabMaps, states.disabled, states.normal)}
+        ${styleFromTokens({
+    tokenMaps: tabMaps,
+    tokens: states.disabled,
+    fallbackTokens: states.normal
+  })}
       }
     `;
 });

package/dist/ThemeModeSwitch/useThemeModeSwitch.cjs

@@ -17,11 +17,15 @@ function useThemeModeSwitch({
   const timerRef = React.useRef();
   React.useEffect(() => () => clearTimeout(timerRef.current), []);
   const applyThemeMode = (newThemeMode) => {
-    if (!newThemeMode) return;
+    if (!newThemeMode) {
+      return;
+    }
     clearTimeout(timerRef.current);
     setLocalThemeMode(newThemeMode);
     timerRef.current = setTimeout(() => {
-      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+      if (setUserThemeMode(newThemeMode)) {
+        onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+      }
     }, switchTimeoutMs);
   };
   const toggleThemeMode = () => {

package/dist/ThemeModeSwitch/useThemeModeSwitch.js

@@ -15,11 +15,15 @@ function useThemeModeSwitch({
   const timerRef = useRef();
   useEffect(() => () => clearTimeout(timerRef.current), []);
   const applyThemeMode = (newThemeMode) => {
-    if (!newThemeMode) return;
+    if (!newThemeMode) {
+      return;
+    }
     clearTimeout(timerRef.current);
     setLocalThemeMode(newThemeMode);
     timerRef.current = setTimeout(() => {
-      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+      if (setUserThemeMode(newThemeMode)) {
+        onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+      }
     }, switchTimeoutMs);
   };
   const toggleThemeMode = () => {

package/dist/Toast/core/content.helper.cjs

@@ -5,10 +5,14 @@ const React = require("react");
 const Toast = require("../Toast.cjs");
 const context = require("./context.cjs");
 const renderContent = (content) => {
-  if (typeof content === "string" || !content) return jsxRuntime.jsxRuntimeExports.jsx(Toast.default, {
-    message: content
-  });
-  if (React.isValidElement(content)) return content;
+  if (typeof content === "string" || !content) {
+    return jsxRuntime.jsxRuntimeExports.jsx(Toast.default, {
+      message: content
+    });
+  }
+  if (React.isValidElement(content)) {
+    return content;
+  }
   return jsxRuntime.jsxRuntimeExports.jsx(Toast.default, {
     ...content
   });

package/dist/Toast/core/content.helper.js

@@ -3,10 +3,14 @@ import { isValidElement } from "react";
 import Toast from "../Toast.js";
 import { ToastContextProvider } from "./context.js";
 const renderContent = (content) => {
-  if (typeof content === "string" || !content) return jsxRuntimeExports.jsx(Toast, {
-    message: content
-  });
-  if (isValidElement(content)) return content;
+  if (typeof content === "string" || !content) {
+    return jsxRuntimeExports.jsx(Toast, {
+      message: content
+    });
+  }
+  if (isValidElement(content)) {
+    return content;
+  }
   return jsxRuntimeExports.jsx(Toast, {
     ...content
   });

package/dist/Tooltip/components/Content/Content.cjs

@@ -7,7 +7,9 @@ const Content = Object.assign(({
   content,
   ...composeProps
 }) => {
-  if (!content) return null;
+  if (!content) {
+    return null;
+  }
   return jsxRuntime.jsxRuntimeExports.jsx(Content.Compose, {
     ...composeProps,
     children: typeof content === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Content.Text, {

package/dist/Tooltip/components/Content/Content.js

@@ -5,7 +5,9 @@ const Content = Object.assign(({
   content,
   ...composeProps
 }) => {
-  if (!content) return null;
+  if (!content) {
+    return null;
+  }
   return jsxRuntimeExports.jsx(Content.Compose, {
     ...composeProps,
     children: typeof content === "string" ? jsxRuntimeExports.jsx(Content.Text, {

package/dist/TreeView/TreeView.cjs

@@ -24,7 +24,9 @@ const TreeView = Object.assign(({
     }
   }, [searchValue]);
   const renderNodes = (treeNodes) => {
-    if (!treeNodes) return null;
+    if (!treeNodes) {
+      return null;
+    }
     return Object.keys(treeNodes).map((key) => {
       return jsxRuntime.jsxRuntimeExports.jsx(TreeView.Item, {
         ...treeNodes[key],

package/dist/TreeView/TreeView.js

@@ -22,7 +22,9 @@ const TreeView = Object.assign(({
     }
   }, [searchValue]);
   const renderNodes = (treeNodes) => {
-    if (!treeNodes) return null;
+    if (!treeNodes) {
+      return null;
+    }
     return Object.keys(treeNodes).map((key) => {
       return jsxRuntimeExports.jsx(TreeView.Item, {
         ...treeNodes[key],

package/dist/TreeView/components/TreeItem/components/Compose/Compose.cjs

@@ -27,10 +27,12 @@ const TreeItemCompose = ({
     setDescendants
   }), [isExpanded, checked, treeItemContext == null ? void 0 : treeItemContext.checked, descendants]);
   React.useEffect(() => {
-    if (treeItemContext && generatedId) treeItemContext.setDescendants((prevDescendants) => ({
-      ...prevDescendants,
-      [generatedId]: checked
-    }));
+    if (treeItemContext && generatedId) {
+      treeItemContext.setDescendants((prevDescendants) => ({
+        ...prevDescendants,
+        [generatedId]: checked
+      }));
+    }
   }, [generatedId, checked]);
   return jsxRuntime.jsxRuntimeExports.jsx(TreeItem_context.TreeItemContext.Provider, {
     value: contextValue,

package/dist/TreeView/components/TreeItem/components/Compose/Compose.js

@@ -23,10 +23,12 @@ const TreeItemCompose = ({
     setDescendants
   }), [isExpanded, checked, treeItemContext == null ? void 0 : treeItemContext.checked, descendants]);
   useEffect(() => {
-    if (treeItemContext && generatedId) treeItemContext.setDescendants((prevDescendants) => ({
-      ...prevDescendants,
-      [generatedId]: checked
-    }));
+    if (treeItemContext && generatedId) {
+      treeItemContext.setDescendants((prevDescendants) => ({
+        ...prevDescendants,
+        [generatedId]: checked
+      }));
+    }
   }, [generatedId, checked]);
   return jsxRuntimeExports.jsx(TreeItemContext.Provider, {
     value: contextValue,

package/dist/Typography/Typography.types.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const typographyColors = ["primary", "secondary", "notice", "success", "attention", "danger", "upsell", "informative"];
+exports.typographyColors = typographyColors;

package/dist/Typography/Typography.types.d.ts

@@ -1 +1,2 @@
-export type TypographyColor = 'primary' | 'secondary';
+export declare const typographyColors: readonly ["primary", "secondary", "notice", "success", "attention", "danger", "upsell", "informative"];
+export type TypographyColor = (typeof typographyColors)[number];

package/dist/Typography/Typography.types.js

@@ -0,0 +1,4 @@
+const typographyColors = ["primary", "secondary", "notice", "success", "attention", "danger", "upsell", "informative"];
+export {
+  typographyColors
+};

package/dist/index.cjs

@@ -1108,6 +1108,7 @@ const ActionIconButton = require("./Button/ActionIconButton/ActionIconButton.cjs
 const ActionIconButton_style = require("./Button/ActionIconButton/ActionIconButton.style.cjs");
 const ToggleButton = require("./Button/ToggleButton/ToggleButton.cjs");
 const ToggleButton_style = require("./Button/ToggleButton/ToggleButton.style.cjs");
+const CopyToClipboardButton = require("./Button/CopyToClipboardButton/CopyToClipboardButton.cjs");
 const Button_types = require("./Button/Button.types.cjs");
 const TextButton_types = require("./Button/TextButton/TextButton.types.cjs");
 const IconButton_types = require("./Button/IconButton/IconButton.types.cjs");
@@ -1190,6 +1191,7 @@ const TooltipCard = require("./Tooltip/components/TooltipCard/TooltipCard.cjs");
 const TreeView = require("./TreeView/TreeView.cjs");
 const Typography = require("./Typography/Typography.cjs");
 const useEllipsisTooltip = require("./Typography/hooks/useEllipsisTooltip.cjs");
+const Typography_types = require("./Typography/Typography.types.cjs");
 const ProgressBar = require("./ProgressBar/ProgressBar.cjs");
 const ProfileIcon = require("./ProfileIcon/ProfileIcon.cjs");
 const ProfileIcon_style = require("./ProfileIcon/ProfileIcon.style.cjs");
@@ -1216,6 +1218,7 @@ exports.ActionIconButton = ActionIconButton.default;
 exports.ActionButtonWithIconStyles = ActionIconButton_style;
 exports.ToggleButton = ToggleButton.default;
 exports.ToggleButtonStyles = ToggleButton_style;
+exports.CopyToClipboardButton = CopyToClipboardButton.default;
 exports.buttonSizes = Button_types.buttonSizes;
 exports.buttonVariants = Button_types.buttonVariants;
 exports.textButtonVariants = TextButton_types.textButtonVariants;
@@ -1328,6 +1331,7 @@ exports.TooltipCard = TooltipCard.default;
 exports.TreeView = TreeView.default;
 exports.Typography = Typography.default;
 exports.useEllipsisTooltip = useEllipsisTooltip.useEllipsisTooltip;
+exports.typographyColors = Typography_types.typographyColors;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProfileIcon = ProfileIcon.default;
 exports.ProfileIconStyles = ProfileIcon_style;