@redis-ui/components 47.5.5 → 47.5.7

package/dist/Button/TextButton/TextButton.types.cjs

@@ -1,4 +1,5 @@
 //#region src/Button/TextButton/TextButton.types.ts
+var textButtonSizes = ["medium", "small"];
 var textButtonVariants = [
 	"primary",
 	"destructive",
@@ -10,4 +11,5 @@ var textButtonVariants = [
 	"upsell-inline"
 ];
 //#endregion
+exports.textButtonSizes = textButtonSizes;
 exports.textButtonVariants = textButtonVariants;

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

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
-export type TextButtonSizes = 'medium' | 'small';
+export declare const textButtonSizes: readonly ["medium", "small"];
+export type TextButtonSizes = (typeof textButtonSizes)[number];
 export declare const textButtonVariants: readonly ["primary", "destructive", "secondary", "upsell", "primary-inline", "destructive-inline", "secondary-inline", "upsell-inline"];
 export type TextButtonVariants = (typeof textButtonVariants)[number];
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/TextButton/TextButton.types.js

@@ -1,4 +1,5 @@
 //#region src/Button/TextButton/TextButton.types.ts
+var textButtonSizes = ["medium", "small"];
 var textButtonVariants = [
 	"primary",
 	"destructive",
@@ -10,4 +11,4 @@ var textButtonVariants = [
 	"upsell-inline"
 ];
 //#endregion
-export { textButtonVariants };
+export { textButtonSizes, textButtonVariants };

package/dist/index.cjs

@@ -281,6 +281,7 @@ exports.iconButtonSizes = require_IconButton_types.iconButtonSizes;
 exports.isFragmentElement = require_react_utils.isFragmentElement;
 exports.isTextualNode = require_react_utils.isTextualNode;
 exports.memoWithGenerics = require_react_utils.memoWithGenerics;
+exports.textButtonSizes = require_TextButton_types.textButtonSizes;
 exports.textButtonVariants = require_TextButton_types.textButtonVariants;
 exports.toast = require_core.toast;
 exports.typographyColors = require_Typography_types.typographyColors;

package/dist/index.js

@@ -10,7 +10,7 @@ import Button from "./Button/Button.js";
 import { buttonSizes, buttonVariants } from "./Button/Button.types.js";
 import { TextButton_style_exports } from "./Button/TextButton/TextButton.style.js";
 import TextButton from "./Button/TextButton/TextButton.js";
-import { textButtonVariants } from "./Button/TextButton/TextButton.types.js";
+import { textButtonSizes, textButtonVariants } from "./Button/TextButton/TextButton.types.js";
 import { IconButton_style_exports } from "./Button/IconButton/IconButton.style.js";
 import IconButton from "./Button/IconButton/IconButton.js";
 import { iconButtonSizes } from "./Button/IconButton/IconButton.types.js";
@@ -110,4 +110,4 @@ import { ProgressBar } from "./ProgressBar/ProgressBar.js";
 import { ProfileIcon_style_exports } from "./ProfileIcon/ProfileIcon.style.js";
 import ProfileIcon from "./ProfileIcon/ProfileIcon.js";
 import Slider from "./Slider/Slider.js";
-export { ActionIconButton_style_exports as ActionButtonWithIconStyles, ActionIconButton, AppBar, AppBar_style_exports as AppBarStyles, AppSelectionMenu, AutoCompleteSelect, Badge, Badge_style_exports as BadgeStyles, Banner, BoxSelectionGroup, Breadcrumbs, Button, ButtonGroup, Button_style_exports as ButtonStyles, IconButton_style_exports as ButtonWithIconStyles, Card, CategoryValueList, Checkbox, Chip, ChipContainer, ChipList, ContextProvider, CopyToClipboardButton, CountryFlag, Drawer, ErrorContentProvider, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldDisabledProvider, FieldDisabledTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, Filters, FlexDivider, FlexGroup, FlexItem, FlexSplit, FormField, HighlightedIcon, HighlightedIcon_style_exports as HighlightedIconStyles, IconButton, Input, KeyValueList, Label, Link, LinkStyler, Loader, Menu, MidBar, Modal, MoreInfoIcon, MultiBoxSelectionGroup, MultiSelect, NumericInput, Overflow, Pagination, PasswordInput, Popover, PopperProvider, ProfileIcon, ProfileIcon_style_exports as ProfileIconStyles, ProgressBar, QuantityCounter, RadioGroup, RestylableElement, ScreenReaderAnnounce, SearchBar, SearchInput, Section, Select, SelfContained, SharedIdProvider, SharedIdTransProvider, SideBar, Skeleton, Slider, Stepper, StepperStepState, Switch, TableHeading, Tabs, TextArea, TextButton, TextButton_style_exports as TextButtonStyles, ThemeModeSwitch, Toast, Toaster, ToggleButton, ToggleButton_style_exports as ToggleButtonStyles, Tooltip, TooltipCard, Provider as TooltipProvider, TreeView, Typography, actionIconButtonSizes, badgeVariants, bannerVariants, buttonSizes, buttonVariants, buttonWithIconVariants, cardVariants, childrenToString, combineHandlers, createNullableContext, createPrimitiveContextState, debounce, forwardRefWithGenerics, generateId, getClosestDivisibleNumber, handlePreventDefault, handleStopPropagation, iconButtonSizes, isFragmentElement, isTextualNode, memoWithGenerics, textButtonVariants, toast, typographyColors, useEllipsisTooltip, useErrorContent, useFieldAdditionTextId, useFieldDisabled, useFieldReadonly, useFieldRequired, useFieldStatus, useGeneratedId, useInputValueApi, useInputValueProps, useKeyValueList, useMultiSelectContext, usePaginationContext, usePopperContext, useScrollable, useSelectContext, useSharedId, useThemeModeSwitch, useToastParams };
+export { ActionIconButton_style_exports as ActionButtonWithIconStyles, ActionIconButton, AppBar, AppBar_style_exports as AppBarStyles, AppSelectionMenu, AutoCompleteSelect, Badge, Badge_style_exports as BadgeStyles, Banner, BoxSelectionGroup, Breadcrumbs, Button, ButtonGroup, Button_style_exports as ButtonStyles, IconButton_style_exports as ButtonWithIconStyles, Card, CategoryValueList, Checkbox, Chip, ChipContainer, ChipList, ContextProvider, CopyToClipboardButton, CountryFlag, Drawer, ErrorContentProvider, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldDisabledProvider, FieldDisabledTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, Filters, FlexDivider, FlexGroup, FlexItem, FlexSplit, FormField, HighlightedIcon, HighlightedIcon_style_exports as HighlightedIconStyles, IconButton, Input, KeyValueList, Label, Link, LinkStyler, Loader, Menu, MidBar, Modal, MoreInfoIcon, MultiBoxSelectionGroup, MultiSelect, NumericInput, Overflow, Pagination, PasswordInput, Popover, PopperProvider, ProfileIcon, ProfileIcon_style_exports as ProfileIconStyles, ProgressBar, QuantityCounter, RadioGroup, RestylableElement, ScreenReaderAnnounce, SearchBar, SearchInput, Section, Select, SelfContained, SharedIdProvider, SharedIdTransProvider, SideBar, Skeleton, Slider, Stepper, StepperStepState, Switch, TableHeading, Tabs, TextArea, TextButton, TextButton_style_exports as TextButtonStyles, ThemeModeSwitch, Toast, Toaster, ToggleButton, ToggleButton_style_exports as ToggleButtonStyles, Tooltip, TooltipCard, Provider as TooltipProvider, TreeView, Typography, actionIconButtonSizes, badgeVariants, bannerVariants, buttonSizes, buttonVariants, buttonWithIconVariants, cardVariants, childrenToString, combineHandlers, createNullableContext, createPrimitiveContextState, debounce, forwardRefWithGenerics, generateId, getClosestDivisibleNumber, handlePreventDefault, handleStopPropagation, iconButtonSizes, isFragmentElement, isTextualNode, memoWithGenerics, textButtonSizes, textButtonVariants, toast, typographyColors, useEllipsisTooltip, useErrorContent, useFieldAdditionTextId, useFieldDisabled, useFieldReadonly, useFieldRequired, useFieldStatus, useGeneratedId, useInputValueApi, useInputValueProps, useKeyValueList, useMultiSelectContext, usePaginationContext, usePopperContext, useScrollable, useSelectContext, useSharedId, useThemeModeSwitch, useToastParams };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.5.5",
+  "version": "47.5.7",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^8.0.0 || ^9.0.0",
-    "@redis-ui/styles": "^16.4.2",
+    "@redis-ui/styles": "^16.4.3",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"

package/skills/redis-ui-components/SKILL.md

@@ -16,8 +16,9 @@ import { Button, Modal, Select } from '@redis-ui/components';
 ```
 
 Icons are imported separately. Monochrome icons accept a semantic `variant`; without it they
-inherit color from CSS `currentColor`. Use `style.color` for a custom color, and `customSize`
-or `style.width`/`height` for custom sizing. See the [Icons](./references/Icons.md) reference.
+inherit color from CSS `currentColor`. Use `style.color` for a custom color. Prefer a standard
+`size` from the design-system scale; reach for `customSize` (or `style.width`/`height`) only when
+no `size` value fits, since it bypasses the theme scale. See the [Icons](./references/Icons.md) reference.
 
 ```tsx
 import { EditIcon, DeleteIcon, iconVariants, type IconVariant } from '@redis-ui/icons';

package/skills/redis-ui-components/references/Button.md

@@ -41,97 +41,37 @@ import { Button } from '@redis-ui/components';
 </Button>
 ```
 
-### Sizes
-> 3 sizes are supported with `medium` being the default.
-```tsx
-import { Button } from '@redis-ui/components';
-import { EditIcon } from '@redis-ui/icons';
-
-<>
-  <Button size="small">
-    <Button.Icon icon={EditIcon} />
-    Small
-  </Button>
-  <Button size="medium">
-    <Button.Icon icon={EditIcon} />
-    Medium
-  </Button>
-  <Button size="large">
-    <Button.Icon icon={EditIcon} />
-    Large
-  </Button>
-</>
-```
-
 ### Variants
-> 8 total variants are supported, 1 primary, 3 secondary, a destructive variant, and 3 upsell variants. The default is `primary`.
-```tsx
-import { Button } from '@redis-ui/components';
-import { CancelIcon } from '@redis-ui/icons';
-
-<>
-  <Button variant="primary">
-    Primary
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="secondary-fill">
-    Secondary Fill
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="secondary-invert">
-    Secondary Invert
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="secondary-ghost">
-    Secondary Ghost
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="destructive">
-    Destructive
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="upsell">
-    Upsell
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="upsell-invert">
-    Upsell Invert
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button variant="upsell-ghost">
-    Upsell Ghost
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-</>
-```
-
-### Disabled
-> Buttons can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
+> Demonstrates all button sizes, variants, and disabled states in a comprehensive grid. The grid shows each size and state vertically against each variant horizontally. 3 sizes are supported (large, medium, small) with `medium` being the default. 8 total variants are supported: 1 primary, 3 secondary, a destructive variant, and 3 upsell variants, with `primary` as the default. The disabled row shows each variant in its disabled state.
 ```tsx
-import { Button } from '@redis-ui/components';
-import { CancelIcon } from '@redis-ui/icons';
-
-<>
-  <Button disabled>
-    Primary
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button disabled variant="secondary-fill">
-    Secondary Fill
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button disabled variant="secondary-invert">
-    Secondary Invert
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-  <Button disabled variant="secondary-ghost">
-    Secondary Ghost
-  </Button>
-  <Button disabled variant="destructive">
-    Destructive
-    <Button.Icon icon={CancelIcon} />
-  </Button>
-</>
+import { Button, buttonSizes, buttonVariants } from '@redis-ui/components';
+import { Fragment } from 'react';
+
+// Grid layout with sizes + disabled as rows and variants as columns
+<div style={{ display: 'grid', gridTemplateColumns: `auto repeat(${buttonVariants.length}, 1fr)`, gap: '2.4rem', alignItems: 'center', justifyItems: 'center' }}>
+  <div />
+  {buttonVariants.map((variant) => (
+    <div key={variant} style={{ fontWeight: 600, fontSize: '1.2rem', textAlign: 'center' }}>{variant}</div>
+  ))}
+
+  {buttonSizes.map((size) => (
+    <Fragment key={size}>
+      <div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>{size}</div>
+      {buttonVariants.map((variant) => (
+        <Button key={`${size}-${variant}`} size={size} variant={variant}>
+          Button
+        </Button>
+      ))}
+    </Fragment>
+  ))}
+
+  <div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>disabled</div>
+  {buttonVariants.map((variant) => (
+    <Button key={`disabled-${variant}`} variant={variant} disabled>
+      Button
+    </Button>
+  ))}
+</div>
 ```
 
 ### WithIcon

package/skills/redis-ui-components/references/Icons.md

@@ -30,8 +30,8 @@ import {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | variant | `IconVariant` (`'primary' \| 'secondary' \| 'notice' \| 'success' \| 'attention' \| 'danger' \| 'upsell' \| 'informative'`) | - | Semantic color from the theme. When unset, the icon inherits color from CSS `currentColor`. |
-| size | `IconSizeType` (`'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL'`) | `'L'` | Standard size. Ignored if `customSize` is set. |
-| customSize | `string` | - | Any valid CSS size (e.g. `'2.4rem'`, `'32px'`). Overrides `size`. |
+| size | `IconSizeType` (`'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| 'for-text' \| 'by-font'`) | `'L'` | Standard size from `theme.core.icon.size`. Fixed values: `XS` (0.8rem), `S` (1.2rem), `M` (1.6rem), `L` (2rem), `XL` (2.4rem), `XXL` (3.2rem). Relative values: `for-text` (1.25em — scales to surrounding text), `by-font` (1em — matches surrounding font size). Ignored if `customSize` is set. |
+| customSize | `string` | - | Any valid CSS size (e.g. `'32px'`). Overrides `size`. Prefer a standard `size` — use `customSize` only when no scale value fits. |
 | title | `string` | icon name | Accessible label / native tooltip. |
 | className | `string` | - | Forwarded to the underlying `<svg>`. |
 | style | `CSSProperties` | - | Forwarded to the underlying `<svg>`. Use `style.color` to set a custom color, or `style.width` / `style.height` for custom sizing. |
@@ -60,8 +60,10 @@ import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 
 ### Sizes and Variants
 
-> Demonstrates every supported size against every supported variant. The story uses the
-> `iconVariants` tuple from `@redis-ui/icons` to enumerate all variants.
+> Renders the listed fixed sizes (`XL`, `L`, `M`, `S`, `XS`) against every supported variant. The
+> story uses the `iconVariants` tuple from `@redis-ui/icons` to enumerate all variants.
+> `XXL` and the relative sizes (`for-text`, `by-font`) are valid `size` values but are omitted from
+> this gallery — see the Props table for the full list.
 
 ```tsx
 import { Fragment } from 'react';
@@ -98,13 +100,13 @@ import { StarsIcon } from '@redis-ui/icons';
 
 ### Custom size
 
-Use `customSize` for a single CSS dimension, or pass `style` with `width` and `height` to render
-the icon at any custom size.
+> Prefer a standard `size` value — use `customSize` (or `style` `width`/`height`) only when none of
+the scale values fit, as it bypasses the design-system scale.
 
 ```tsx
 import { StarsIcon } from '@redis-ui/icons';
 
-<StarsIcon customSize="3.2rem" />
+<StarsIcon customSize="2.8rem" />
 <StarsIcon style={{ width: '8rem', height: '8rem' }} />
 ```
 

package/skills/redis-ui-components/references/TextButton.md

@@ -31,125 +31,37 @@ import { TextButton } from '@redis-ui/components';
 </TextButton>
 ```
 
-### Sizes
-```tsx
-import { TextButton, Button } from '@redis-ui/components';
-import { ContractIcon } from '@redis-ui/icons';
-
-<>
-  <TextButton size="small">
-    <Button.Icon icon={ContractIcon} />
-    Primary small
-  </TextButton>
-  <TextButton size="small" variant="destructive">
-    <Button.Icon icon={ContractIcon} />
-    Destructive small
-  </TextButton>
-  <TextButton size="small" variant="secondary">
-    <Button.Icon icon={ContractIcon} />
-    Secondary small
-  </TextButton>
-  <TextButton size="small" variant="upsell">
-    <Button.Icon icon={ContractIcon} />
-    Upsell small
-  </TextButton>
-  <TextButton size="small" variant="primary-inline">
-    <Button.Icon icon={ContractIcon} />
-    Primary Inline small
-  </TextButton>
-  <TextButton size="small" variant="destructive-inline">
-    <Button.Icon icon={ContractIcon} />
-    Destructive Inline small
-  </TextButton>
-  <TextButton size="small" variant="secondary-inline">
-    <Button.Icon icon={ContractIcon} />
-    Secondary Inline small
-  </TextButton>
-  <TextButton size="small" variant="upsell-inline">
-    <Button.Icon icon={ContractIcon} />
-    Upsell Inline small
-  </TextButton>
-  <TextButton size="medium">
-    <Button.Icon icon={ContractIcon} />
-    Primary medium
-  </TextButton>
-  <TextButton size="medium" variant="destructive">
-    <Button.Icon icon={ContractIcon} />
-    Destructive medium
-  </TextButton>
-  <TextButton size="medium" variant="secondary">
-    <Button.Icon icon={ContractIcon} />
-    Secondary medium
-  </TextButton>
-  <TextButton size="medium" variant="upsell">
-    <Button.Icon icon={ContractIcon} />
-    Upsell medium
-  </TextButton>
-  <TextButton size="medium" variant="primary-inline">
-    <Button.Icon icon={ContractIcon} />
-    Primary Inline medium
-  </TextButton>
-  <TextButton size="medium" variant="destructive-inline">
-    <Button.Icon icon={ContractIcon} />
-    Destructive Inline medium
-  </TextButton>
-  <TextButton size="medium" variant="secondary-inline">
-    <Button.Icon icon={ContractIcon} />
-    Secondary Inline medium
-  </TextButton>
-  <TextButton size="medium" variant="upsell-inline">
-    <Button.Icon icon={ContractIcon} />
-    Upsell Inline medium
-  </TextButton>
-</>
-```
-
 ### Variants
-> 8 total variants are supported: primary, destructive, secondary, upsell, and their inline counterparts. The default is `primary`.
+> Demonstrates all text button sizes, variants, and disabled states in a comprehensive grid. The grid shows each size and state vertically against each variant horizontally. 2 sizes are supported (medium, small) with `medium` being the default. 8 total variants are supported: primary, destructive, secondary, upsell, and their inline counterparts, with `primary` as the default. The disabled row shows each variant in its disabled state.
 ```tsx
-import { TextButton } from '@redis-ui/components';
-
-<>
-  <TextButton>Primary</TextButton>
-  <TextButton variant="destructive">Destructive</TextButton>
-  <TextButton variant="secondary">Secondary</TextButton>
-  <TextButton variant="upsell">Upsell</TextButton>
-  <TextButton variant="primary-inline">Primary Inline</TextButton>
-  <TextButton variant="destructive-inline">Destructive Inline</TextButton>
-  <TextButton variant="secondary-inline">Secondary Inline</TextButton>
-  <TextButton variant="upsell-inline">Upsell Inline</TextButton>
-</>
-```
-
-### Disabled
-> Buttons can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
-```tsx
-import { TextButton } from '@redis-ui/components';
-
-<>
-  <TextButton disabled>Primary</TextButton>
-  <TextButton disabled variant="destructive">
-    Destructive
-  </TextButton>
-  <TextButton disabled variant="secondary">
-    Secondary
-  </TextButton>
-  <TextButton disabled variant="upsell">
-    Upsell
-  </TextButton>
-  <TextButton disabled variant="primary-inline">
-    Primary Inline
-  </TextButton>
-  <TextButton disabled variant="destructive-inline">
-    Destructive Inline
-  </TextButton>
-  <TextButton disabled variant="secondary-inline">
-    Secondary Inline
-  </TextButton>
-  <TextButton disabled variant="upsell-inline">
-    Upsell Inline
-  </TextButton>
-</>
+import { TextButton, textButtonVariants, textButtonSizes } from '@redis-ui/components';
+import { Fragment } from 'react';
+
+// Grid layout with sizes + disabled as rows and variants as columns
+<div style={{ display: 'grid', gridTemplateColumns: `auto repeat(${textButtonVariants.length}, 1fr)`, gap: '2.4rem', alignItems: 'center', justifyItems: 'center' }}>
+  <div />
+  {textButtonVariants.map((variant) => (
+    <div key={variant} style={{ fontWeight: 600, fontSize: '1.2rem', textAlign: 'center' }}>{variant}</div>
+  ))}
+
+  {textButtonSizes.map((size) => (
+    <Fragment key={size}>
+      <div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>{size}</div>
+      {textButtonVariants.map((variant) => (
+        <TextButton key={`${size}-${variant}`} size={size} variant={variant}>
+          Button
+        </TextButton>
+      ))}
+    </Fragment>
+  ))}
+
+  <div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>disabled</div>
+  {textButtonVariants.map((variant) => (
+    <TextButton key={`disabled-${variant}`} variant={variant} disabled>
+      Button
+    </TextButton>
+  ))}
+</div>
 ```
 
 ### WithIcon