@redis-ui/components 42.8.0 → 43.2.1

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");
@@ -1133,6 +1134,8 @@ const SelfContained = require("./Helpers/SelfContained.cjs");
 const RestylableElement = require("./Helpers/RestylableElement.cjs");
 const Popper_context = require("./Helpers/contexts/Popper/Popper.context.cjs");
 const useScrollable = require("./Helpers/hooks/useScrollable.cjs");
+const HighlightedIcon = require("./HighlightedIcon/HighlightedIcon.cjs");
+const HighlightedIcon_style = require("./HighlightedIcon/HighlightedIcon.style.cjs");
 const Input = require("./Inputs/Input/Input.cjs");
 const NumericInput = require("./Inputs/NumericInput/NumericInput.cjs");
 const PasswordInput = require("./Inputs/PasswordInput/PasswordInput.cjs");
@@ -1190,6 +1193,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 +1220,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;
@@ -1254,6 +1259,8 @@ exports.RestylableElement = RestylableElement.RestylableElement;
 exports.PopperProvider = Popper_context.PopperProvider;
 exports.usePopperContext = Popper_context.usePopperContext;
 exports.useScrollable = useScrollable.useScrollable;
+exports.HighlightedIcon = HighlightedIcon.default;
+exports.HighlightedIconStyles = HighlightedIcon_style;
 exports.Input = Input.default;
 exports.NumericInput = NumericInput.default;
 exports.PasswordInput = PasswordInput.default;
@@ -1328,6 +1335,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;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './DatePicker';
 export * from './Drawer';
 export * from './Filters';
 export * from './Helpers';
+export * from './HighlightedIcon';
 export * from './Inputs';
 export * from './FormField';
 export * from './KeyValueList';