@redis-ui/components 43.2.1 → 44.0.2

package/README.md

@@ -1,455 +1,79 @@
-# Creating New Components Guide
+# @redis-ui/components
 
-This guide covers best practices, conventions, and patterns for creating new components in the `@redislabsdev/redis-ui-components` library.
+The Redis UI component library — a themed, accessible React component library built on [styled-components](https://styled-components.com/) and [Radix UI](https://www.radix-ui.com/).
 
-## Table of Contents
+## Installation
 
-- [Radix UI Foundation](#radix-ui-foundation)
-- [Component Structure](#component-structure)
-- [File Organization](#file-organization)
-- [Component Composition](#component-composition)
-- [Testing](#testing)
+Install the components package and its required peer dependencies:
 
-## Radix UI Foundation
-
-This component library is built on top of [Radix UI](https://www.radix-ui.com/), a low-level UI component library that provides unstyled, accessible primitives for building high-quality design systems and web applications.
-
-> **Note:** Not all components need Radix. Simple presentational components (like Button, Badge, Card) can be built from scratch using styled-components.
-
-> **Note:** When using Radix, or any other external library for that matter, make sure you don't expose Radix types in public API. Always wrap them in our own types.
-
-## Component Structure
-
-### Basic Component Anatomy
-
-Every component should follow this folder structure:
-
-```
-src/ComponentName/
-├── ComponentName.tsx          # Main component implementation
-├── ComponentName.types.ts     # Types and interfaces
-├── ComponentName.style.ts     # Styles
-├── ComponentName.test.tsx     # Unit tests
-├── index.ts                   # Public exports
-└── components/                # Sub-components (if needed)
-    └── SubComponent/
-        ├── SubComponent.tsx
-        ├── SubComponent.types.ts
-        └── SubComponent.style.ts
-```
-
-The tree is recurisve, so you can have sub-components inside sub-components, etc.
-
-### Example: Simple Component
-
-```tsx
-// Card.tsx
-import * as S from './Card.style';
-import { CardProps } from './Card.types';
-
-const Card = (props: CardProps) => <S.Card {...props} />;
-
-export default Card;
-
-```
-
----
-
-## File Organization
-
-### 1. Component File (`ComponentName.tsx`)
-
-**✅ DO:**
-- Use `React.forwardRef` when the component should allow access to the DOM element underneath
-  - Use `forwardRefWithGenerics`, if component has generics params (also works as standard `forwardRef`)
-- Provide default props for optional parameters
-- Import styled components as `* as S` for namespacing
-- Keep the main component focused and delegate to sub-components
-- Extract complex logic into separate hooks, separate different logic to separate hooks
-
-**❌ DON'T:**
-- Mix business logic with presentation
-- Hardcode theme values
-
-### 2. Types File (`ComponentName.types.ts`)
-
-**Conventions:**
-- Always use separate file for types
-- Extend HTML element attributes when wrapping native elements
-- Use generics for flexible, reusable components
-- If there are sub-components, create separate types file for each of them and compose the styles at the root level
-- Use fully qualified names for exported types
-- It is preferable to split component props into `Own` and `Rest` props,
-which can simplify property composition and their use in special cases.
-  - Use `Own*Props` primarily to define actively processed props and props for direct inheritance
-  - Use `Rest*Props` for other props that you plan to pass as-is to inner components (e.g. HTMLAttributes<>)
-
-```tsx
-// Button.types.ts
-import { ButtonHTMLAttributes } from 'react';
-
-export const buttonSizes = ['large', 'medium', 'small'] as const;
-export const buttonVariants = ['primary', 'destructive', 'secondary-fill'] as const;
-
-export type ButtonSizes = (typeof buttonSizes)[number];
-export type ButtonVariants = (typeof buttonVariants)[number];
-
-export type OwnButtonProps = {
-  size?: ButtonSizes;
-  variant?: ButtonVariants;
-  disabled?: boolean;
-};
-
-export type RestButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type ButtonProps = OwnButtonProps & RestButtonProps;
+```bash
+npm install @redis-ui/components @redis-ui/styles @redis-ui/icons styled-components
 ```
 
-### 3. Style File (`ComponentName.style.ts`)
-
-**✅ DO:**
-- Access theme values via `useTheme().components.componentName`
-- Use token maps for consistent styling (`styleFromTokens`)
-- Use fully qualified names for exported styled components (simplifies component debugging with React DevTools)
-
-```tsx
-// Button.style.ts
-import styled, { css } from 'styled-components/macro';
-import { getFocusStyle, useTheme } from '@redislabsdev/redis-ui-styles';
-import { ButtonProps } from './Button.types';
-
-export const baseButtonStyle = css`
-  border: 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
+## Setup
 
-  ${getFocusStyle()};
+### 1. Import global styles
 
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
+Import the normalized styles and fonts from `@redis-ui/styles` in your app entry point:
 
-export const Button = styled.button<Required<Pick<ButtonProps, 'size' | 'variant'>>>`
-  ${baseButtonStyle};
-  gap: ${() => useTheme().components.button.gap};
-  padding: ${({ size }) => useTheme().components.button.sizes[size].padding};
-  background-color: ${({ variant }) => useTheme().components.button.variants[variant].bgColor};
-`;
+```ts
+import '@redis-ui/styles/normalized-styles.css';
+import '@redis-ui/styles/fonts.css';
 ```
 
-**❌ DON'T:**
-- Hardcode colors, spacing, or other design tokens
-- Use inline styles
+### 2. Provide the theme and render global styles
 
-### 4. Index File (`index.ts`)
+Components read all design tokens (colors, spacing, typography, etc.) from a styled-components `ThemeProvider`. You **must** wrap your application in one — without it, components will not render correctly.
 
-**Conventions:**
-- Export the default component
-- Export all types using `export *`
-- Export utility hooks/functions if applicable
-- **Do not** export styled components
-
-## Component Composition
-
-> **Note:** It’s best to discuss whether composition is appropriate early on, ideally during the design phase. By the time a PR is under review, changing this decision will involve substantial changes. Feel free to reach out to FE Infra team for advice.
-
-**Benefits:**
-- Allows both simple and advanced usage patterns.
-   - Note that composed components should also provide simple props for non-advanced usage.
-- Provides flexibility for custom layouts
-- Maintains clean API surface
-- Supports core Design System and allows custom application styling
-
-### Object.assign Pattern
-
-For components with sub-components and composition hierarchy, use `Object.assign`:
+You also need to render the `CommonStyles` global style component inside the theme provider. It applies theme-aware base styles to the body, scrollbars, and reduced-motion preferences.
 
 ```tsx
-// Tabs.tsx
-import { TabsProps } from './Tabs.types';
-import ContentPane from './components/ContentPane/ContentPane';
-import TabBar from './components/TabBar/TabBar';
-import Compose from './components/Compose/Compose';
-
-const Tabs = Object.assign(
-  ({ tabs, variant, ...restProps }: TabsProps) => (
-    <Tabs.Compose {...restProps}>
-      <Tabs.TabBar tabs={tabs} variant={variant} />
-      <Tabs.ContentPane tabs={tabs} />
-    </Tabs.Compose>
-  ),
-  { Compose, TabBar, ContentPane }
-);
+import { ThemeProvider } from 'styled-components';
+import { themesRebrand, CommonStyles } from '@redis-ui/styles';
 
-export default Tabs;
+function App() {
+  return (
+    <ThemeProvider theme={themesRebrand.light}>
+      <CommonStyles />
+      {/* your app */}
+    </ThemeProvider>
+  );
+}
 ```
 
-**Benefits:**
-- The `assign()` function works better with TypeScript and code completion than direct assignment.
-
-### Context Pattern
+#### Dark mode support
 
-For sharing state and props between component and descendants.
+For automatic light/dark mode switching with persistence, use the `SwitchableModeThemeProvider`:
 
-Create component contexts in separate file: `ComponentName.context.ts(x)`
-
-For most cases you can use standard component context generator with first two returned values: context hook and provider
 ```tsx
-import { createNullableContext } from '/Helpers';
+import { SwitchableModeThemeProvider, themesRebrand, CommonStyles } from '@redis-ui/styles';
 
-export const [useMyComponentContext, MyComponentContextProvider, MyComponentContext] =
-  createNullableContext<MyComponentContextType>({
-    forComponentName: 'MyComponent'
-  });
+function App() {
+  return (
+    <SwitchableModeThemeProvider
+      lightTheme={themesRebrand.light}
+      darkTheme={themesRebrand.dark}
+      storageKey="redis-ui-theme-mode"
+    >
+      <CommonStyles />
+      {/* your app */}
+    </SwitchableModeThemeProvider>
+  );
+}
 ```
 
-There is also primitive value state context generator (see usages for details.). It generates 3 things (each of them allows update state):
-- Context hook, returning the state
-- Context Provider, holding the state
-- TransProvider, which acts as the Provider if there is no ascending Provider, or becomes transparent if there is one.
+### 3. Use components
 
 ```tsx
-import { createPrimitiveContextState } from '/Helpers';
-
-export const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] =
-  createPrimitiveContextState<FieldStatus>();
-```
-
-If none of the generators meets the requirements, a custom context can be created based on the regular React Context.<br/>
-In this case, export the Provider and a hook that retrieves, validates, processes the context values and returns the result.
-
-```tsx
-// Component.context.ts
-import { createContext, useContext } from 'react';
-
-export const ComponentContext = createContext<ComponentContextParams>({
-  variant: 'default',
-  size: 'medium'
-});
-
-export const useComponentParams = (
-  customParams: Partial<ComponentContextParams> = {}
-): ComponentContextParams => {
-  const context = useContext(ComponentContext);
-  return customParams ? assignWith({}, context, customParams, skipUndefined) : context;
-};
-```
-
-**✅ DO:**
-- Use context for deeply nested component communication
-- Memoize context values to prevent unnecessary re-renders
-- Provide sensible defaults
-
-**❌ DON'T:**
-- Overuse context for simple prop drilling
-- Forget to memoize context values
-
-### `Compose` pattern
-
-Start component life from pure composition tree.
-
-```tsx
-<Tabs.Compose value={value} onChange={onChange}>
-  <Tabs.TabBar.Compose>
-    {tabs.map(({ value, label, ...rest }) => (
-      <Tabs.TabBar.Tab key={value} value={value} {...rest}>
-        {label}
-      </Tabs.TabBar.Tab>
-    ))}
-    <Tabs.TabBar.Marker/>
-  </Tabs.TabBar.Compose>
-  <Tabs.ContentPane.Compose>
-    {tabs.map(({ value, content }) => (
-      <Tabs.ContentPane.Content key={value} value={value}>
-        {content}
-      </Tabs.ContentPane.Content>
-    ))}
-  </Tabs.ContentPane.Compose>
-</Tabs.Compose>
-```
-
-Each non-leaf node in the tree should be `Compose` node.
-
-`Compose` component receives configuration props, defines states, contexts and core logic and optionally adds container, styled with DS.
-
-Leaf components remain pure renderers, reading context and their own props.
-
-Place components in directory tree, where each node component has its own directory and all sub-components are placed in a `components` directory within the component directory
-
-When composition is ready, wrap each Compose component and sub-components of the level with node component, which exposes simple configuration API
-
-`Compose` and nested components should be assigned to the node component (and used in composition in it).
-
-```tsx
-const Tabs = Object.assign(
-  ({ tabs, ...restProps }: TabsProps) => (
-    <Tabs.Compose {...restProps}>
-      <Tabs.TabBar tabs={tabs} />
-      <Tabs.ContentPane tabs={tabs} />
-    </Tabs.Compose>
-  ),
-  { Compose, TabBar, ContentPane }
-);
-```
-
-**✅ DO:**
-- Define context state and logic (policy/behavior/rules) only in `Compose`
-- Keep nested and especially leaf components focused
-- Keep node components simple (they should only contain simple composition using `Compose` and nested components)
-- When using Radix library, use their node components in `Compose` and their leaf components in leaf
-- Extract and separate complex logic into separate hooks
-
-**❌ DON'T:**
-- Add logic, contexts, states to node components
-- Make leaf components overcomplicated
-- Overload composition hierarchy
-
-**Benefits:**
-- Configuration logic doesn’t leak
-- Nested components stay focused (“lego bricks”)
-- Flexibility
-  - Each NodeComponent works as configuration entry point
-  - Each node can be extracted/rearranged at any level safely
-- Simple by default, powerful when needed
-  - node components limit configuration options to what’s most necessary
-  - if you need more tuning — go to composition
-- DS-based by default, restylable via composition
-- Consumers can build custom composition nodes that still respect invariants
-
-### Form Fields
-
-If you're developing another form component that can be used with the `FormField` component,
-be sure to connect it with the `FormField` contexts (those that are applicable)
-- SharedId
-- FieldStatus
-- FieldRequired
-- FieldDisabled
-- FieldReadonly
-- FieldAdditionText
-
-## Testing
-
-### Test File Structure
-
-```tsx
-// Component.test.tsx
-import { render, screen } from '@testing-library/react';
-import Component from './Component';
-
-describe('Component', () => {
-  describe('Basic rendering', () => {
-    it('should render with default props', () => {
-      render(<Component>Test content</Component>);
-      expect(screen.getByText('Test content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Variants', () => {
-    it('should render primary variant', () => {
-      render(<Component variant="primary">Primary</Component>);
-      expect(screen.getByText('Primary')).toBeInTheDocument();
-    });
-  });
-
-  describe('Composition mode', () => {
-    it('should render with composition components', () => {
-      render(
-        <Component.Compose>
-          <Component.Header>Header</Component.Header>
-          <Component.Body>Body</Component.Body>
-        </Component.Compose>
-      );
-      expect(screen.getByText('Header')).toBeInTheDocument();
-    });
-  });
-});
-```
-
-### **Testing Library Queries**
-
-Prefer queries in this order:
-1. `getByRole` (most accessible)
-2. `getByLabelText`
-3. `getByPlaceholderText`
-4. `getByText`
-5. `getByTestId` (last resort)
-
-You can find more info in [Testing Library docs](https://testing-library.com/docs/queries/about/).
-
-## Tips & Tricks
-
-### 1. **Transient Props in Styled Components**
-
-Use `$` prefix for transient props:
-
-```tsx
-// ✅ Good - won't pass $variant to DOM
-const Button = styled.button<{ $variant: string }>`
-  color: ${({ $variant }) => $variant === 'primary' ? 'blue' : 'gray'};
-`;
-
-// ❌ Bad - will pass variant to DOM and can cause warnings
-const Button = styled.button<{ variant: string }>`
-  color: ${({ variant }) => variant === 'primary' ? 'blue' : 'gray'};
-`;
-```
-
-### 2. **Theme Type Safety**
-
-Create theme types for your component in `packages/styles`:
-
-```tsx
-// packages/styles/src/themes/types/theme/components/myComponent.types.ts
-export type MyComponentTheme = {
-  padding: string;
-  gap: string;
-  variants: {
-    primary: { bgColor: string; textColor: string };
-    secondary: { bgColor: string; textColor: string };
-  };
-};
-```
-
-Then add to all theme files (light, dark, light2, dark2).
-
-### 3. **Composition Helpers**
-
-Use helper types from `Helpers`:
-
-```tsx
-import { ComposeElementProps, ChildFree } from '../Helpers';
-
-// ComposeElementProps: Standard props for composition components
-// ChildFree: Omits children from props
-type MyProps = ChildFree<ComposeElementProps>;
-```
-
-### 4. **Storybook Integration**
-
-Create stories in `docs/stories/ComponentName/`:
-
-```tsx
-// ComponentName.stories.tsx
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentName } from '@redislabsdev/redis-ui-components';
-
-const meta: Meta<typeof ComponentName> = {
-  component: ComponentName,
-  title: 'Components/ComponentName'
-};
-
-export default meta;
-type Story = StoryObj<typeof ComponentName>;
-
-export const Playground: Story = {
-  args: {
-    variant: 'primary',
-    size: 'medium'
-  }
-};
-```
-
-> **Note:** For composition components, create a separate `ComponentNameCompose.mdx` file.
+import { Button } from '@redis-ui/components';
+
+function MyPage() {
+  return (
+    <div>
+      <Button variant="primary" size="medium">
+        Click me
+      </Button>
+    </div>
+  );
+}
+```

package/dist/Badge/Badge.types.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 exports.badgeVariants = badgeVariants;

package/dist/Badge/Badge.types.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from '@redislabsdev/redis-ui-icons';
 import { Theme } from '@redislabsdev/redis-ui-styles';
-export declare const badgeVariants: readonly ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+export declare const badgeVariants: readonly ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 export type BadgeVariants = (typeof badgeVariants)[number];
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;

package/dist/Badge/Badge.types.js

@@ -1,4 +1,4 @@
-const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 export {
   badgeVariants
 };

package/dist/Badge/BadgeIcon.cjs

@@ -11,6 +11,7 @@ const BADGE_ICON_RECORD = {
   notice: redisUiIcons.ToastNotificationIcon,
   danger: redisUiIcons.ToastDangerIcon,
   attention: redisUiIcons.ToastPendingIcon,
+  upsell: redisUiIcons.CrownIcon,
   disabled: redisUiIcons.ToastCheckIcon
 };
 const BadgeIcon = ({

package/dist/Badge/BadgeIcon.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { ToastCheckIcon, ToastInfoIcon, ToastNotificationIcon, ToastDangerIcon, ToastPendingIcon } from "@redislabsdev/redis-ui-icons";
+import { ToastCheckIcon, ToastInfoIcon, ToastNotificationIcon, ToastDangerIcon, ToastPendingIcon, CrownIcon } from "@redislabsdev/redis-ui-icons";
 const BADGE_ICON_RECORD = {
   white: ToastCheckIcon,
   light: ToastCheckIcon,
@@ -9,6 +9,7 @@ const BADGE_ICON_RECORD = {
   notice: ToastNotificationIcon,
   danger: ToastDangerIcon,
   attention: ToastPendingIcon,
+  upsell: CrownIcon,
   disabled: ToastCheckIcon
 };
 const BadgeIcon = ({

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.cjs

@@ -59,7 +59,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled__default.default(index.Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderRadius, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderWidth, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.js

@@ -55,7 +55,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled(Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => useTheme().components.boxSelectionGroup.item.borderRadius, () => useTheme().components.boxSelectionGroup.item.borderWidth, () => useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/Button/Button.style.cjs

@@ -18,6 +18,10 @@ const baseButtonStyle = _styled.css`
   transition: all 130ms ease-in-out, outline-offset 0ms, outline 0ms;
   cursor: pointer;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   ${redisUiStyles.getFocusStyle()};
 
   &:disabled {

package/dist/Button/Button.style.js

@@ -14,6 +14,10 @@ const baseButtonStyle = css`
   transition: all 130ms ease-in-out, outline-offset 0ms, outline 0ms;
   cursor: pointer;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   ${getFocusStyle()};
 
   &:disabled {

package/dist/ButtonGroup/components/Button/Button.style.cjs

@@ -9,7 +9,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Button = _styled__default.default.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-m6kucg-0"
-})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => redisUiStyles.useTheme().components.buttonGroup.button.minWidth, () => redisUiStyles.useTheme().components.buttonGroup.button.borderRadius, () => redisUiStyles.useTheme().components.buttonGroup.button.padding, () => redisUiStyles.useTheme().components.buttonGroup.button.gap, () => redisUiStyles.useTheme().components.buttonGroup.button.border, ({
+})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => redisUiStyles.useTheme().components.buttonGroup.button.minWidth, () => redisUiStyles.useTheme().components.buttonGroup.button.borderRadius, () => redisUiStyles.useTheme().components.buttonGroup.button.padding, () => redisUiStyles.useTheme().components.buttonGroup.button.gap, () => redisUiStyles.useTheme().components.buttonGroup.button.border, ({
   isSelected
 }) => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor]), redisUiStyles.getFocusStyle("-2px"));
 exports.Button = Button;

package/dist/ButtonGroup/components/Button/Button.style.js

@@ -5,7 +5,7 @@ import { tokenMaps } from "../../../Helpers/css.utils.js";
 const Button = _styled.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-m6kucg-0"
-})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({
+})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({
   isSelected
 }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [tokenMaps.bgColor, tokenMaps.textColor]), getFocusStyle("-2px"));
 export {

package/dist/Drawer/Drawer.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const index = require("../node_modules/@radix-ui/react-dialog/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Drawer_context = require("./Drawer.context.cjs");
+const useReducedMotionLifecycleSync = require("./hooks/useReducedMotionLifecycleSync.cjs");
 const Overlay = require("./components/Overlay/Overlay.cjs");
 const Content = require("./components/Content/Content.cjs");
 const Header = require("./components/Header/Header.cjs");
@@ -24,6 +25,15 @@ const Drawer = Object.assign(({
   ...props
 }) => {
   const theme = redisUiStyles.useTheme();
+  const {
+    prefersReducedMotion
+  } = useReducedMotionLifecycleSync.useReducedMotionLifecycleSync({
+    open,
+    onDrawerWillOpen,
+    onDrawerDidOpen,
+    onDrawerWillClose,
+    onDrawerDidClose
+  });
   const handleOnAnimationStart = () => {
     if (open) {
       onDrawerWillOpen == null ? void 0 : onDrawerWillOpen();
@@ -52,8 +62,8 @@ const Drawer = Object.assign(({
       children: jsxRuntime.jsxRuntimeExports.jsxs(index.Portal, {
         container: containerElement,
         children: [persistent && jsxRuntime.jsxRuntimeExports.jsx(Overlay.default, {}), jsxRuntime.jsxRuntimeExports.jsx(Content.default, {
-          onAnimationStart: handleOnAnimationStart,
-          onAnimationEndCapture: handleOnAnimationEnd,
+          onAnimationStart: prefersReducedMotion ? void 0 : handleOnAnimationStart,
+          onAnimationEndCapture: prefersReducedMotion ? void 0 : handleOnAnimationEnd,
           ...props,
           children
         })]