@redis-ui/components 41.4.1 → 42.0.0

package/README.md

@@ -0,0 +1,330 @@
+# Creating New Components Guide
+
+This guide covers best practices, conventions, and patterns for creating new components in the `@redislabsdev/redis-ui-components` library.
+
+## Table of Contents
+
+- [Radix UI Foundation](#radix-ui-foundation)
+- [Component Structure](#component-structure)
+- [File Organization](#file-organization)
+- [Component Composition](#component-composition)
+- [Testing](#testing)
+
+## 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 wraps a DOM element
+- Provide default props for optional parameters
+- Import styles as `* as S` for namespacing
+- Keep the main component focused and delegate to sub-components
+
+**❌ 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
+
+```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 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSizes;
+  variant?: ButtonVariants;
+  disabled?: boolean;
+}
+```
+
+### 3. Style File (`ComponentName.style.ts`)
+
+**✅ DO:**
+- Access theme values via `useTheme().components.componentName`
+- Use token maps for consistent styling
+- Use fully qualified names for exported styled components
+
+```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;
+
+  ${getFocusStyle()};
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+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};
+`;
+```
+
+**❌ DON'T:**
+- Hardcode colors, spacing, or other design tokens
+- Use inline styles
+
+### 4. Index File (`index.ts`)
+
+**Conventions:**
+- Export the default component
+- Export all types using `export *`
+- Export styles as namespace if needed for external customization
+- Export utility hooks/functions if applicable
+
+## 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.
+
+### Object.assign Pattern
+
+For components with sub-components, use `Object.assign`:
+
+```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 }
+);
+
+export default Tabs;
+```
+
+**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
+
+### Context Pattern
+
+For sharing state between parent and children:
+
+```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
+
+## 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 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.

package/dist/Button/Button.style.cjs

@@ -25,7 +25,7 @@ const baseButtonStyle = _styled.css`
   }
 `;
 const sizeTokenMaps = [css_utils.tokenMaps.borderRadius, css_utils.tokenMaps.padding, css_utils.tokenMaps.height, css_utils.tokenMaps.lineHeight];
-const variantTokenMaps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor, css_utils.tokenMaps.shadowBorder];
+const variantTokenMaps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.bgGradient, css_utils.tokenMaps.textColor, css_utils.tokenMaps.shadowBorder];
 const Button = _styled__default.default.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-6zckac-0"

package/dist/Button/Button.style.js

@@ -21,7 +21,7 @@ const baseButtonStyle = css`
   }
 `;
 const sizeTokenMaps = [tokenMaps.borderRadius, tokenMaps.padding, tokenMaps.height, tokenMaps.lineHeight];
-const variantTokenMaps = [tokenMaps.bgColor, tokenMaps.textColor, tokenMaps.shadowBorder];
+const variantTokenMaps = [tokenMaps.bgColor, tokenMaps.bgGradient, tokenMaps.textColor, tokenMaps.shadowBorder];
 const Button = _styled.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-6zckac-0"

package/dist/Button/Button.types.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 exports.buttonSizes = buttonSizes;
 exports.buttonVariants = buttonVariants;

package/dist/Button/Button.types.d.ts

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { Theme } from '@redislabsdev/redis-ui-styles';
 export declare const buttonSizes: readonly ["large", "medium", "small"];
-export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 export type ButtonSizes = (typeof buttonSizes)[number];
 export type ButtonVariants = (typeof buttonVariants)[number];
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/Button.types.js

@@ -1,5 +1,5 @@
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
 export {
   buttonSizes,
   buttonVariants

package/dist/Button/TextButton/TextButton.cjs

@@ -7,6 +7,7 @@ const Button_context = require("../Button.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const TextButton = React__default.default.forwardRef(({
+  size = "M",
   variant = "primary",
   children,
   ...restProps
@@ -16,6 +17,7 @@ const TextButton = React__default.default.forwardRef(({
     children: jsxRuntime.jsxRuntimeExports.jsx(TextButton_style.TextButton, {
       type: "button",
       variant,
+      size,
       ref,
       ...restProps,
       children

package/dist/Button/TextButton/TextButton.js

@@ -3,6 +3,7 @@ import React__default from "react";
 import { TextButton as TextButton$2 } from "./TextButton.style.js";
 import { ButtonContext } from "../Button.context.js";
 const TextButton = React__default.forwardRef(({
+  size = "M",
   variant = "primary",
   children,
   ...restProps
@@ -12,6 +13,7 @@ const TextButton = React__default.forwardRef(({
     children: jsxRuntimeExports.jsx(TextButton$2, {
       type: "button",
       variant,
+      size,
       ref,
       ...restProps,
       children

package/dist/Button/TextButton/TextButton.style.cjs

@@ -4,23 +4,29 @@ const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Button_style = require("../Button.style.cjs");
 const Body_style = require("../../Typography/components/Body/Body.style.cjs");
+const css_utils = require("../../Helpers/css.utils.cjs");
 const Button_style_utils = require("../Button.style.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const getVariantStyle = (variant) => (theme) => {
   const themeVariant = variant ? theme.components.textButton.variants[variant] : null;
   return themeVariant ? _styled.css`
-        padding: ${themeVariant.padding};
-        border-radius: ${themeVariant.borderRadius};
         border: 1px solid transparent;
         box-sizing: border-box;
         ${Button_style_utils.getButtonStatesStyle(themeVariant.states, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap])};
       ` : null;
 };
+const sizeTokenMaps = [css_utils.tokenMaps.borderRadius, css_utils.tokenMaps.padding, css_utils.tokenMaps.height, css_utils.tokenMaps.lineHeight, css_utils.tokenMaps.gap];
 const TextButton = _styled__default.default.button.withConfig({
   displayName: "TextButtonstyle__TextButton",
   componentId: "RedisUI__sc-1t8veic-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";", ";"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.textButton.height, () => redisUiStyles.useTheme().components.textButton.lineHeight, () => redisUiStyles.useTheme().components.textButton.gap, () => Body_style.useBodyStyles(), ({
+})(["", ";", ";", ";", ";vertical-align:unset;"], Button_style.baseButtonStyle, ({
+  size,
+  variant
+}) => {
+  const layout = variant.includes("inline") ? "inline" : "block";
+  return css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]);
+}, () => Body_style.useBodyStyles(), ({
   variant
 }) => getVariantStyle(variant)(redisUiStyles.useTheme()));
 exports.TextButton = TextButton;

package/dist/Button/TextButton/TextButton.style.d.ts

@@ -1,2 +1,2 @@
 import { TextButtonProps } from './TextButton.types';
-export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant">>, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant" | "size">>, never>;

package/dist/Button/TextButton/TextButton.style.js

@@ -2,21 +2,27 @@ import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { baseButtonStyle } from "../Button.style.js";
 import { useBodyStyles } from "../../Typography/components/Body/Body.style.js";
+import { styleFromTokens, tokenMaps } from "../../Helpers/css.utils.js";
 import { getButtonStatesStyle, bgColorMap, textColorMap, borderColorMap } from "../Button.style.utils.js";
 const getVariantStyle = (variant) => (theme) => {
   const themeVariant = variant ? theme.components.textButton.variants[variant] : null;
   return themeVariant ? css`
-        padding: ${themeVariant.padding};
-        border-radius: ${themeVariant.borderRadius};
         border: 1px solid transparent;
         box-sizing: border-box;
         ${getButtonStatesStyle(themeVariant.states, [bgColorMap, textColorMap, borderColorMap])};
       ` : null;
 };
+const sizeTokenMaps = [tokenMaps.borderRadius, tokenMaps.padding, tokenMaps.height, tokenMaps.lineHeight, tokenMaps.gap];
 const TextButton = _styled.button.withConfig({
   displayName: "TextButtonstyle__TextButton",
   componentId: "RedisUI__sc-1t8veic-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";", ";"], baseButtonStyle, () => useTheme().components.textButton.height, () => useTheme().components.textButton.lineHeight, () => useTheme().components.textButton.gap, () => useBodyStyles(), ({
+})(["", ";", ";", ";", ";vertical-align:unset;"], baseButtonStyle, ({
+  size,
+  variant
+}) => {
+  const layout = variant.includes("inline") ? "inline" : "block";
+  return styleFromTokens(sizeTokenMaps, useTheme().components.textButton.layouts[layout].sizes[size]);
+}, () => useBodyStyles(), ({
   variant
 }) => getVariantStyle(variant)(useTheme()));
 export {

package/dist/Button/TextButton/TextButton.types.d.ts

@@ -1,6 +1,8 @@
 import { ButtonHTMLAttributes } from 'react';
+export type TextButtonSizes = 'M';
 export declare const textButtonVariants: readonly ["primary", "destructive", "primary-inline", "destructive-inline"];
 export type TextButtonVariants = (typeof textButtonVariants)[number];
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: TextButtonSizes;
     variant?: TextButtonVariants;
 }

package/dist/Button/ToggleButton/ToggleButton.style.cjs

@@ -11,5 +11,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ToggleButton = _styled__default.default.button.withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-state='on'])){", "}&:where([data-state='on']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
 exports.ToggleButton = ToggleButton;

package/dist/Button/ToggleButton/ToggleButton.style.js

@@ -7,7 +7,7 @@ import { IndicatorCount } from "./components/IndicatorCount/IndicatorCount.style
 const ToggleButton = _styled.button.withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-state='on'])){", "}&:where([data-state='on']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
 export {
   ToggleButton
 };

package/dist/Chip/Chip.cjs

@@ -7,6 +7,7 @@ const Title = require("./components/Title/Title.cjs");
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -14,7 +15,8 @@ const Chip = Object.assign(({
     children: [jsxRuntime.jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntime.jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

package/dist/Chip/Chip.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ChipProps } from './Chip.types';
-declare const Chip: (({ text, onClose, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Chip: (({ text, onClose, closeButtonTitle, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLSpanElement>, "content" | "children"> & import("./components/Compose/Compose.types").ChipComposeProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ size, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
-    CloseButton: ({ onClose, icon: Icon, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className"> & {
+    CloseButton: ({ onClose, icon: Icon, title, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "title" | "className"> & {
         icon?: import("@redislabsdev/redis-ui-icons/monochrome").IconType | undefined;
     } & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/Chip/Chip.js

@@ -5,6 +5,7 @@ import { Title } from "./components/Title/Title.js";
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -12,7 +13,8 @@ const Chip = Object.assign(({
     children: [jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

package/dist/Chip/Chip.types.d.ts

@@ -1,8 +1,9 @@
 import type { ChipComposeProps, RestChipComposeProps } from './components/Compose/Compose.types';
 import type { ChipCloseButtonProps } from './components/CloseButton/CloseButton.types';
-import type { ChildFree } from '../Helpers/common.types';
+import type { ChildFree } from '../Helpers';
 export interface ChipProps extends ChipComposeProps, ChildFree<RestChipComposeProps>, ChipCloseButtonProps {
     text: string;
+    closeButtonTitle?: string;
 }
 export type ChipSizes = 'M' | 'S';
 export type ChipVariants = 'regular' | 'flat';

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -11,6 +11,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = redisUiIcons.ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -29,7 +30,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

package/dist/Chip/components/CloseButton/CloseButton.d.ts

@@ -1,2 +1,2 @@
 import { ChipCloseButtonProps, RestChipCloseButtonProps } from './CloseButton.types';
-export declare const CloseButton: ({ onClose, icon: Icon, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CloseButton: ({ onClose, icon: Icon, title, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -9,6 +9,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -27,7 +28,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

package/dist/Chip/components/CloseButton/CloseButton.types.d.ts

@@ -3,6 +3,6 @@ import { IconType } from '@redislabsdev/redis-ui-icons';
 export type ChipCloseButtonProps = {
     onClose?: VoidFunction;
 };
-export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'title'> & {
     icon?: IconType;
 };

package/dist/ChipList/ChipList.cjs

@@ -7,6 +7,7 @@ const ChipList_style = require("./ChipList.style.cjs");
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -28,6 +29,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.d.ts

@@ -1,3 +1,3 @@
 import { ChipListProps } from './ChipList.types';
-declare const ChipList: ({ chips, onRemoveItem, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChipList: ({ chips, onRemoveItem, removeItemButtonTitle, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
 export default ChipList;