@redis-ui/components 38.0.0 → 38.6.0

package/dist/Section/components/Header/components/Compose/Compose.style.js

@@ -2,10 +2,11 @@ import _styled, { css } from "styled-components";
 import { Trigger } from "../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
 import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
 import { CollapseIcon } from "../CollapseIndicator/CollapseIndicator.style.js";
+import { UnstyledButtonTrigger } from "../../../../../Helpers/UnstyledButtonTrigger.js";
 const SectionHeader = _styled(Trigger).withConfig({
   displayName: "Composestyle__SectionHeader",
   componentId: "RedisUI__sc-kgg5ny-0"
-})(["display:block;padding:0;&[type='button']{cursor:", ";}border:none;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;outline:unset;&:hover{background-color:transparent;}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], ({
+})(["", ";display:block;outline:unset;&[type='button']{cursor:", ";}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], UnstyledButtonTrigger, ({
   $collapsible
 }) => $collapsible ? "pointer" : "default", ({
   $collapsible

package/dist/Section/components/Header/components/Label/Label.style.d.ts

@@ -1 +1 @@
-export declare const LabelText: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -8,7 +8,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Container = _styled__default.default(index.Content).withConfig({
   displayName: "Composestyle__Container",
   componentId: "RedisUI__sc-oidrmy-0"
-})(["display:flex;flex-direction:column;", ";[data-radix-select-viewport]{@media (pointer:fine){scrollbar-width:auto;@supports not (selector(::-webkit-scrollbar)){scrollbar-width:thin;}::-webkit-scrollbar{display:block;}}}"], ({
+})(["display:flex;flex-direction:column;", ";[data-radix-select-viewport]{@media (pointer:fine){scrollbar-width:inherit;::-webkit-scrollbar{display:initial;}}}"], ({
   collisionPadding = 10,
   $contentWidth,
   $hasOptions

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

@@ -4,7 +4,7 @@ import { Content as Content2 } from "../../../../../node_modules/@radix-ui/react
 const Container = _styled(Content2).withConfig({
   displayName: "Composestyle__Container",
   componentId: "RedisUI__sc-oidrmy-0"
-})(["display:flex;flex-direction:column;", ";[data-radix-select-viewport]{@media (pointer:fine){scrollbar-width:auto;@supports not (selector(::-webkit-scrollbar)){scrollbar-width:thin;}::-webkit-scrollbar{display:block;}}}"], ({
+})(["display:flex;flex-direction:column;", ";[data-radix-select-viewport]{@media (pointer:fine){scrollbar-width:inherit;::-webkit-scrollbar{display:initial;}}}"], ({
   collisionPadding = 10,
   $contentWidth,
   $hasOptions

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

@@ -6,5 +6,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ResetButton = _styled__default.default.button.withConfig({
   displayName: "ResetButtonstyle__ResetButton",
   componentId: "RedisUI__sc-hyv498-0"
-})(["pointer-events:all;flex:none;background-color:transparent;padding:0;min-width:unset;&:hover{background-color:transparent;border:none;outline:none;}"]);
+})(["display:flex;border:none;pointer-events:all;flex:none;background-color:transparent;padding:0;min-width:unset;&:hover{background-color:transparent;border:none;outline:none;}"]);
 exports.ResetButton = ResetButton;

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

@@ -2,7 +2,7 @@ import _styled from "styled-components";
 const ResetButton = _styled.button.withConfig({
   displayName: "ResetButtonstyle__ResetButton",
   componentId: "RedisUI__sc-hyv498-0"
-})(["pointer-events:all;flex:none;background-color:transparent;padding:0;min-width:unset;&:hover{background-color:transparent;border:none;outline:none;}"]);
+})(["display:flex;border:none;pointer-events:all;flex:none;background-color:transparent;padding:0;min-width:unset;&:hover{background-color:transparent;border:none;outline:none;}"]);
 export {
   ResetButton
 };

package/dist/SideBar/components/Footer/components/Text/Text.style.d.ts

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

package/dist/SideBar/components/Item/components/Text/Text.style.d.ts

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

package/dist/SideBar/components/ItemsContainer/ItemsContainer.style.cjs

@@ -6,5 +6,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ItemsWrapper = _styled__default.default.ul.withConfig({
   displayName: "ItemsContainerstyle__ItemsWrapper",
   componentId: "RedisUI__sc-1lxfl5b-0"
-})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;"]);
+})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;padding:0;margin:0;"]);
 exports.ItemsWrapper = ItemsWrapper;

package/dist/SideBar/components/ItemsContainer/ItemsContainer.style.js

@@ -2,7 +2,7 @@ import _styled from "styled-components";
 const ItemsWrapper = _styled.ul.withConfig({
   displayName: "ItemsContainerstyle__ItemsWrapper",
   componentId: "RedisUI__sc-1lxfl5b-0"
-})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;"]);
+})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;padding:0;margin:0;"]);
 export {
   ItemsWrapper
 };

package/dist/Skeleton/Skeleton.d.ts

@@ -1,5 +1,8 @@
 import 'react-loading-skeleton/dist/skeleton.css';
 import { SkeletonProps } from './Skeleton.types';
+/**
+ * @deprecated This component will be removed in future versions
+ */
 declare const Skeleton: (({ circle, ...restSkeletonProps }: SkeletonProps) => import("react/jsx-runtime").JSX.Element) & {
     Card: (props: import("..").CardProps) => import("react/jsx-runtime").JSX.Element;
     Grid: ({ columns, children, direction, gap }: import("./components/Grid/Grid.types").GridProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,43 +10,59 @@ const FormField_context = require("../../../FormField/FormField.context.cjs");
 const Field_context = require("../../../Inputs/components/Context/Field.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const getSwitchStatesStyle = (theme, maps, readOnly, disabled, withCursor) => {
+const getSwitchStatesStyle = (theme, maps, {
+  readOnly,
+  disabled,
+  withCursor,
+  selectorSuffix = ""
+}) => {
   if (!theme) return null;
   if (disabled) return _styled.css`
-      ${css_utils.styleFromTokens(maps, theme.disabled)};
-      ${withCursor && `cursor: not-allowed`};
+      &&${selectorSuffix} {
+        ${css_utils.styleFromTokens(maps, theme.disabled)};
+        ${withCursor && `cursor: not-allowed`};
+      }
     `;
   if (readOnly) return _styled.css`
-      ${css_utils.styleFromTokens(maps, theme.readonly)};
-      ${withCursor && `cursor: default`};
-      &:hover,
-      &:active {
+      &${selectorSuffix}, &:hover${selectorSuffix}, &:active${selectorSuffix} {
         ${css_utils.styleFromTokens(maps, theme.readonly)};
         ${withCursor && `cursor: default`};
       }
     `;
   return _styled.css`
-    & {
+    &${selectorSuffix} {
       ${css_utils.styleFromTokens(maps, theme.normal)};
     }
 
-    &:hover {
+    &:hover${selectorSuffix} {
       ${css_utils.styleFromTokens(maps, theme.hover, theme.normal)};
     }
 
-    &:active {
+    &:active${selectorSuffix} {
       ${css_utils.styleFromTokens(maps, theme.active, theme.normal)};
     }
   `;
 };
-const useSwitchStateStyle = (maps, withCursor) => {
+const useSwitchStateStyle = (maps, {
+  withCursor,
+  selectorSuffix
+} = {}) => {
   const {
     checked
   } = Switch_context.useSwitchContext();
   const readOnly = FormField_context.useFieldReadonly();
   const disabled = Field_context.useFieldDisabled();
-  return getSwitchStatesStyle(redisUiStyles.useTheme().components.switchButton.toggleStates[checked ? "on" : "off"], maps, readOnly, disabled, withCursor);
+  return getSwitchStatesStyle(redisUiStyles.useTheme().components.switchButton.toggleStates[checked ? "on" : "off"], maps, {
+    readOnly,
+    disabled,
+    withCursor,
+    selectorSuffix
+  });
 };
+const SwitcherKnob = _styled__default.default(index.Thumb).withConfig({
+  displayName: "Switcherstyle__SwitcherKnob",
+  componentId: "RedisUI__sc-1w5k9zb-0"
+})(["height:100%;width:100%;transition:inherit;transform:translateX(", ");background:none;:before{content:'';display:block;height:100%;aspect-ratio:1/1;transition:inherit;transform:translateX(", ");border-radius:", ";border:", " solid transparent;background-clip:content-box;}"], () => Switch_context.useSwitchContext().checked ? "100%" : "0%", () => Switch_context.useSwitchContext().checked ? "-100%" : "0%", () => redisUiStyles.useTheme().components.switchButton.thumb.borderRadius, () => redisUiStyles.useTheme().components.switchButton.padding);
 const SwitcherCompose = _styled__default.default(index.Root).attrs(() => {
   const readOnly = FormField_context.useFieldReadonly();
   return {
@@ -55,10 +71,12 @@ const SwitcherCompose = _styled__default.default(index.Root).attrs(() => {
   };
 }).withConfig({
   displayName: "Switcherstyle__SwitcherCompose",
-  componentId: "RedisUI__sc-1w5k9zb-0"
-})(["", ";", ";"], () => {
-  const style = redisUiStyles.useTheme().components.switchButton;
-  return _styled.css`
+  componentId: "RedisUI__sc-1w5k9zb-1"
+})(
+  ["", ";", ";", ";"],
+  () => {
+    const style = redisUiStyles.useTheme().components.switchButton;
+    return _styled.css`
       width: ${style.width};
       height: ${style.height};
       display: flex;
@@ -73,14 +91,18 @@ const SwitcherCompose = _styled__default.default(index.Root).attrs(() => {
       overflow: hidden;
       ${redisUiStyles.getFocusStyle()};
     `;
-}, () => useSwitchStateStyle([Button_style_utils.bgColorMap, Button_style_utils.borderColorMap], true));
-const SwitcherKnob = _styled__default.default(index.Thumb).withConfig({
-  displayName: "Switcherstyle__SwitcherKnob",
-  componentId: "RedisUI__sc-1w5k9zb-1"
-})(["height:100%;width:100%;transition:inherit;transform:translateX(", ");background:none;:before{content:'';display:block;height:100%;aspect-ratio:1/1;transition:inherit;transform:translateX(", ");border-radius:", ";border:", " solid transparent;background-clip:content-box;", ";}"], () => Switch_context.useSwitchContext().checked ? "100%" : "0%", () => Switch_context.useSwitchContext().checked ? "-100%" : "0%", () => redisUiStyles.useTheme().components.switchButton.thumb.borderRadius, () => redisUiStyles.useTheme().components.switchButton.padding, () => useSwitchStateStyle([{
-  cssProp: "background-color",
-  token: "thumbColor"
-}]));
+  },
+  () => useSwitchStateStyle([Button_style_utils.bgColorMap, Button_style_utils.borderColorMap], {
+    withCursor: true
+  }),
+  // switcher knob style is related to switcher state (Note: selector suffix must begin with space)
+  () => useSwitchStateStyle([{
+    cssProp: "background-color",
+    token: "thumbColor"
+  }], {
+    selectorSuffix: ` :where(${SwitcherKnob})::before`
+  })
+);
 exports.SwitcherCompose = SwitcherCompose;
 exports.SwitcherKnob = SwitcherKnob;
 exports.useSwitchStateStyle = useSwitchStateStyle;