@redis-ui/components 42.7.0 → 43.0.2

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

@@ -0,0 +1,169 @@
+# Button
+
+A standard button component supporting multiple variants, sizes, and optional icons. It forwards refs and provides a `Button.Icon` sub-component for embedding icons that automatically match the button's size and color.
+
+## Import
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `'large' \| 'medium' \| 'small'` | `'medium'` | The size of the button |
+| variant | `'primary' \| 'destructive' \| 'secondary-fill' \| 'secondary-invert' \| 'secondary-ghost' \| 'upsell' \| 'upsell-invert' \| 'upsell-ghost'` | `'primary'` | The visual style variant of the button |
+| disabled | `boolean` | `false` | Whether the button is disabled |
+| onClick | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click event handler |
+| theme | `Theme` | - | Theme override from `@redislabsdev/redis-ui-styles` |
+| children | `React.ReactNode` | - | Button content (inherited from `ButtonHTMLAttributes`) |
+
+The component also extends all native `ButtonHTMLAttributes<HTMLButtonElement>` props.
+
+## Sub-components
+
+- **`Button.Icon`** - Renders an icon inside the button, automatically sized and colored to match the parent button.
+
+### Button.Icon Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | *required* | The icon component from `@redislabsdev/redis-ui-icons` |
+| customSize | `string` | - | Override the automatic icon size (e.g. `'2.8rem'`) |
+| title | `string` | - | Title attribute for the icon container |
+
+## Examples
+
+### Playground
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+
+<Button variant="primary" size="medium" disabled={false}>
+  Button
+</Button>
+```
+
+### Sizes
+> 3 sizes are supported with `medium` being the default.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { EditIcon } from '@redislabsdev/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 '@redislabsdev/redis-ui-components';
+import { CancelIcon } from '@redislabsdev/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.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { CancelIcon } from '@redislabsdev/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>
+</>
+```
+
+### WithIcon
+> To add an icon to a button, use the `Button.Icon` component. This component can be placed anywhere inside the `Button` component. It will automatically be sized and colored to match its parent button.
+>
+> Do not use this component if you need a round icon-only button. Instead, use the IconButton or ActionIconButton components.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { ContractIcon, MarketplaceIcon, ShardIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Button>
+    <Button.Icon icon={ContractIcon} />
+    Left Icon
+  </Button>
+  <Button>
+    Right Icon
+    <Button.Icon icon={MarketplaceIcon} />
+  </Button>
+  <Button>
+    <Button.Icon icon={ShardIcon} />
+  </Button>
+  <Button>
+    <Button.Icon icon={ShardIcon} customSize="2.8rem" />
+    Custom icon size
+  </Button>
+</>
+```
+
+## Notes
+- The button renders with `type="button"` by default.
+- `Button.Icon` automatically sizes the icon based on the parent button's size (`S` for small, `M` for medium, `L` for large).
+- If you need to pass props to the icon element, declare it as a separate component outside the parent or wrap it in `useMemo`. Do not pass it as an inline arrow function, as it will cause re-renders on every render of the parent component.
+- For icon-only round buttons, use the `IconButton` or `ActionIconButton` components instead.
+- The component forwards refs to the underlying `<button>` element.

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

@@ -0,0 +1,152 @@
+# FlexDivider
+
+A visual separator line used to divide content within flex layouts. Automatically adapts its orientation based on the parent `FlexGroup` direction, or can be explicitly set when used in custom containers. Supports configurable padding, spacing, and automatic hiding of redundant dividers.
+
+## Import
+
+```tsx
+import { FlexDivider } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `padding` | `'XXS' \| 'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| 'none' \| string` | `'none'` | Paddings from the edges of the container to the divider line. Accepts predefined sizes or custom CSS dimension values. |
+| `spacing` | `'XXS' \| 'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| 'none' \| string` | `'none'` | Additional margins between the divider line and adjacent elements. Gap of flex container is preferred. |
+| `orientation` | `'horizontal' \| 'vertical'` | — | The orientation of the divider line when used in a custom container. `FlexGroup` automatically defines its orientation, so this is only needed outside of `FlexGroup`. |
+| `autoHide` | `boolean` | `true` | Hide extra dividers if there are multiple ones next to each other or if one is displayed as the first/last element. |
+
+## Examples
+
+### Playground
+
+```tsx
+<FlexGroup direction="row" align="stretch">
+  <div>a</div>
+  <FlexDivider />
+  <div>b</div>
+  <div>c</div>
+</FlexGroup>
+```
+
+### AutoHiding
+
+> `FlexDivider` allows you to automatically hide unnecessary dividers. If a divider appears as the first/last element or is duplicated, it will be hidden. To prevent automatic hiding, set the `autoHide` property for that particular divider to `false`.
+
+```tsx
+import { FlexGroup, FlexDivider, Switch } from '@redislabsdev/redis-ui-components';
+import { useState } from 'react';
+
+const [autoHide, setAutoHide] = useState(true);
+
+<FlexGroup direction="row" align="stretch" justify="center">
+  <FlexDivider autoHide={autoHide} />
+  <div>a</div>
+  <FlexDivider autoHide={autoHide} />
+  <FlexDivider autoHide={autoHide} />
+  <div>b</div>
+  <FlexDivider autoHide={autoHide} />
+  <div>c</div>
+  <FlexDivider autoHide={autoHide} />
+</FlexGroup>
+```
+
+### Paddings
+
+> `FlexDivider` allows control `padding` from the edge of container to the line. Supports predefined sizes (XXS ... XXL, none) or custom values (in format of one/two CSS dimensions).
+
+```tsx
+<FlexGroup>
+  <div>S:</div>
+  <FlexDivider padding="S" />
+  <div>M:</div>
+  <FlexDivider padding="M" />
+  <div>L:</div>
+  <FlexDivider padding="L" />
+  <div>custom:</div>
+  <FlexDivider padding="5rem 2rem" />
+</FlexGroup>
+```
+
+### Spacing
+
+> `FlexDivider` allows control `spacing` between the divider and adjacent elements. Supports predefined sizes (XXS ... XXL, none) or custom values (in format of one/two CSS dimensions).
+
+```tsx
+<FlexGroup gap="0">
+  <div>S:</div>
+  <FlexDivider spacing="S" />
+  <div>M:</div>
+  <FlexDivider spacing="M" />
+  <div>L:</div>
+  <FlexDivider spacing="L" />
+  <div>custom:</div>
+  <FlexDivider spacing="3rem 1rem" />
+</FlexGroup>
+```
+
+### HorizontalContainer
+
+> Shows `FlexDivider` usage in horizontal (`row`) layouts. Demonstrates how dividers work in `FlexGroup` containers, custom flex containers, and the limitations with block-level containers.
+
+```tsx
+{/* Inside FlexGroup - orientation is automatic */}
+<FlexGroup justify="center" align="stretch">
+  <div>a</div>
+  <FlexDivider />
+  <div>b</div>
+  <FlexDivider />
+  <div>c</div>
+</FlexGroup>
+
+{/* Inside a custom flex container - orientation must be set explicitly */}
+<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', gap: 10 }}>
+  <div>a</div>
+  <FlexDivider orientation="vertical" />
+  <div>b</div>
+  <FlexDivider orientation="vertical" />
+  <div>c</div>
+</div>
+```
+
+### VerticalContainer
+
+> Shows `FlexDivider` usage in vertical (`column`) layouts. Compares behavior across `FlexGroup` containers, custom flex containers, and custom block containers.
+
+```tsx
+{/* FlexGroup column container */}
+<FlexGroup direction="column" align="stretch" gap="M">
+  <div>a</div>
+  <FlexDivider padding="S" />
+  <div>b</div>
+  <FlexDivider />
+  <div>c</div>
+</FlexGroup>
+
+{/* Custom flex column container */}
+<div style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+  <div>a</div>
+  <FlexDivider orientation="horizontal" padding="S" />
+  <div>b</div>
+  <FlexDivider orientation="horizontal" />
+  <div>c</div>
+</div>
+
+{/* Custom block container */}
+<div>
+  <div>a</div>
+  <FlexDivider orientation="horizontal" spacing="M" padding="S" />
+  <div>b</div>
+  <FlexDivider orientation="horizontal" spacing="M" />
+  <div>c</div>
+</div>
+```
+
+## Notes
+
+- When used inside a `FlexGroup`, the divider automatically detects the container's direction and renders with the correct orientation. No need to set the `orientation` prop.
+- When used in a custom flex container (not `FlexGroup`), you must explicitly set `orientation` to `'vertical'` (for row layouts) or `'horizontal'` (for column layouts).
+- `FlexDivider` does not work with horizontal block containers out of the box; additional styling is required.
+- The `autoHide` feature (enabled by default) uses CSS adjacency selectors to hide dividers that are first, last, or consecutive, keeping the layout clean even when items are conditionally rendered.
+- Both `padding` and `spacing` accept predefined size tokens (`XXS` through `XXL`, `none`) or arbitrary CSS dimension strings (e.g., `"5rem 2rem"`).

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

@@ -0,0 +1,149 @@
+# FlexGroup
+
+A flexible layout container that arranges its children using CSS flexbox. It supports configurable direction, gap sizing (with predefined T-Shirt sizes or theme values), alignment, justification, and wrapping. It extends `FlexItem`, so it can also be nested as a flex child.
+
+## Import
+```tsx
+import { FlexGroup } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| gap | `'XXS' \| 'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| string` | `'S'` | Gap size between items. Supports predefined T-Shirt sizes and free text for applying values from theme |
+| direction | `'column' \| 'row' \| 'column-reverse' \| 'row-reverse'` | `'row'` | Flex direction |
+| align | `'start' \| 'end' \| 'center' \| 'stretch'` | `'center'` (row) / `'stretch'` (column) | Align items along the cross axis |
+| justify | `'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'` | - | Justify content along the main axis |
+| wrap | `boolean` | - | Whether items should wrap to new lines |
+| flex | `'auto' \| 'none' \| string` | - | Flex grow/shrink/basis value (inherited from FlexItem) |
+| selfAlign | `'start' \| 'end' \| 'center' \| 'stretch'` | - | Align self in parent flex container along the cross axis (inherited from FlexItem) |
+| component | `string \| ComponentType` | `'div'` | Use a different component with Flex styling (inherited from FlexItem) |
+
+The component also extends all native HTML element props via `ComposeElementProps`.
+
+## Examples
+
+### Playground
+```tsx
+import { FlexGroup } from '@redislabsdev/redis-ui-components';
+
+<FlexGroup direction="row" gap="S">
+  <div>a</div>
+  <div>b</div>
+  <div>c</div>
+  <div>d</div>
+</FlexGroup>
+```
+
+### Complex Layout: Descriptions
+> This example demonstrates the use of `FlexGroup`, `FlexDivider`, and `FlexSplit` to create a complex layout with varying directions, spacing, alignments, and more.
+```tsx
+import { FlexGroup, FlexDivider, FlexSplit, MoreInfoIcon, Typography } from '@redislabsdev/redis-ui-components';
+import { CheckBoldIcon } from '@redislabsdev/redis-ui-icons';
+
+const Title = ({ children }) => <Typography.Heading size="L">{children}</Typography.Heading>;
+const Property = ({ children }) => <Typography.Body>{children}</Typography.Body>;
+const Value = ({ children }) => (
+  <Typography.Body color="secondary" style={{ textAlign: 'end' }}>
+    {children}
+  </Typography.Body>
+);
+
+const descriptions1 = [
+  {
+    name: (
+      <FlexGroup>
+        Total Memory <MoreInfoIcon tooltip="Total memory available" />
+      </FlexGroup>
+    ),
+    value: '250 MB'
+  },
+  { name: 'Connections', value: '256' },
+  { name: 'CIDR Allow Rules', value: '4' },
+  { name: 'Recommended network usage', value: '< 100 GB' }
+];
+
+const descriptions2 = [
+  { name: 'High Availability', value: 'Off' },
+  { name: 'Daily and instant backups', value: <CheckBoldIcon color="success500" style={{ display: 'block' }} /> },
+  {
+    name: (
+      <FlexGroup>
+        Max ops/sec <MoreInfoIcon tooltip="Max operations per second" />
+      </FlexGroup>
+    ),
+    value: '1000'
+  }
+];
+
+<FlexGroup direction="column" gap="XL">
+  <Title>Database details</Title>
+  <FlexDivider />
+  <FlexGroup gap="XXL" align="start">
+    <FlexGroup direction="column" gap="XL" flex="1">
+      {descriptions1.flatMap((prop) => (
+        <>
+          <FlexGroup justify="space-between">
+            <Property>{prop.name}</Property>
+            <FlexSplit />
+            <Value>{prop.value}</Value>
+          </FlexGroup>
+          <FlexDivider />
+        </>
+      ))}
+    </FlexGroup>
+    <FlexDivider />
+    <FlexGroup direction="column" gap="XL" flex="1">
+      {descriptions2.flatMap((prop) => (
+        <>
+          <FlexDivider />
+          <FlexGroup>
+            <Property>{prop.name}</Property>
+            <FlexSplit />
+            <Value>{prop.value}</Value>
+          </FlexGroup>
+        </>
+      ))}
+    </FlexGroup>
+  </FlexGroup>
+</FlexGroup>
+```
+
+### Complex Layout: Toolbar
+> This example demonstrates the use of `FlexGroup`, `FlexDivider`, and `FlexSplit` to create a complex toolbar layout.
+```tsx
+import { Badge, Button, FlexDivider, FlexGroup, FlexItem, FlexSplit, IconButton, MoreInfoIcon, SearchInput, Typography } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, MenuIcon, MarketplaceIcon } from '@redislabsdev/redis-ui-icons';
+
+<FlexGroup gap="XL" style={{ paddingInline: '2.4rem', minHeight: '5.6rem' }}>
+  <FlexGroup gap="L" flex="none">
+    <FlexGroup gap="S">
+      <MarketplaceIcon size="XL" />
+      <Typography.Heading size="L">Title</Typography.Heading>
+      <MoreInfoIcon tooltip="Info" />
+    </FlexGroup>
+    <Badge label="Badge" variant="informative" />
+  </FlexGroup>
+  <FlexDivider padding="M" />
+  <FlexItem>
+    <SearchInput />
+  </FlexItem>
+  <FlexSplit />
+  <FlexDivider padding="M" />
+  <FlexGroup gap="XL">
+    <Button>Action</Button>
+  </FlexGroup>
+  <FlexDivider padding="M" />
+  <FlexGroup gap="XL">
+    <IconButton icon={CopyIcon} size="L" />
+    <IconButton icon={MenuIcon} size="XL" />
+  </FlexGroup>
+</FlexGroup>
+```
+
+## Notes
+- `FlexGroup` extends `FlexItem` internally, so it can be used both as a flex container and as a flex child within a parent `FlexGroup`.
+- The default `align` value is context-aware: it defaults to `'center'` for row directions and `'stretch'` for column directions.
+- The `gap` prop accepts T-Shirt sizes (`XXS` through `XXL`) which map to theme-defined spacing values. You can also pass arbitrary CSS values or theme token strings.
+- Use `FlexGroup` together with `FlexItem`, `FlexSplit`, and `FlexDivider` to compose complex layouts. `FlexSplit` pushes subsequent items to the end, and `FlexDivider` adds visual separators.
+- The `flex` prop (inherited from `FlexItem`) is useful for controlling how a `FlexGroup` sizes within a parent flex container (e.g., `flex="1"` for equal distribution, `flex="none"` for intrinsic sizing).

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

@@ -0,0 +1,58 @@
+# FlexItem
+
+A flex item wrapper component that controls individual item behavior within a flex container. It supports custom flex grow/shrink/basis values, self-alignment, and rendering as a different HTML element or component.
+
+## Import
+```tsx
+import { FlexItem } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| flex | `'auto' \| 'none' \| string` | - | Flex grow/shrink/basis value |
+| selfAlign | `'start' \| 'end' \| 'center' \| 'stretch'` | - | Align self in parent flex container along the cross axis of the parent flex |
+| component | `string \| ComponentType` | `'div'` | Use different component with Flex styling |
+| children | `ReactNode` | - | Content to render inside the flex item |
+
+The component also extends all native `HTMLAttributes<HTMLElement>` props (excluding `children` and `content`).
+
+## Examples
+
+### Toolbar with FlexItem
+> From the FlexGroup "Complex Layout: Toolbar" story. Demonstrates using `FlexItem` to wrap a search input within a flex toolbar layout.
+```tsx
+import { FlexGroup, FlexItem, FlexSplit, FlexDivider, SearchInput, Button, Badge, IconButton } from '@redislabsdev/redis-ui-components';
+import { MarketplaceIcon, CopyIcon, MenuIcon } from '@redislabsdev/redis-ui-icons';
+
+<FlexGroup gap="XL" style={{ paddingInline: '2.4rem', minHeight: '5.6rem' }}>
+  <FlexGroup gap="L" flex="none">
+    <FlexGroup gap="S">
+      <MarketplaceIcon size="XL" />
+      <Typography.Heading size="L">Title</Typography.Heading>
+    </FlexGroup>
+    <Badge label="Badge" variant="informative" />
+  </FlexGroup>
+  <FlexDivider padding="M" />
+  <FlexItem>
+    <SearchInput />
+  </FlexItem>
+  <FlexSplit />
+  <FlexDivider padding="M" />
+  <FlexGroup gap="XL">
+    <Button>Action</Button>
+  </FlexGroup>
+  <FlexDivider padding="M" />
+  <FlexGroup gap="XL">
+    <IconButton icon={CopyIcon} size="L" />
+    <IconButton icon={MenuIcon} size="XL" />
+  </FlexGroup>
+</FlexGroup>
+```
+
+## Notes
+- `FlexItem` is typically used inside a `FlexGroup` to control individual item sizing and alignment.
+- The `flex` prop maps directly to the CSS `flex` shorthand property (e.g., `"auto"`, `"none"`, `"1"`, `"0 0 200px"`).
+- The `selfAlign` prop maps to the CSS `align-self` property, allowing an item to override the parent's `align` setting.
+- Use the `component` prop to render as a different element (e.g., `component="span"`) or a custom React component while preserving flex item styling.
+- `FlexItem` renders as a `div` by default.

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

@@ -0,0 +1,37 @@
+# FlexSplit
+
+A layout utility component used inside `FlexGroup` to push sibling elements apart. It creates an auto-margin split point that pushes the next sibling to the opposite end of the flex container. Works with all flex directions (`row`, `column`, `row-reverse`, `column-reverse`). Uses `display: contents` so it does not affect the layout itself.
+
+## Import
+
+```tsx
+import { FlexSplit } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `extraMinSpace` | `string` | `undefined` | Space added to the existing gap at the split point. If no component exists before the split, or the split is the last element, it is not applied. If the component before the split has margin adjacent to the split, that margin will be overridden. |
+
+## Examples
+
+### Playground
+
+```tsx
+import { FlexGroup, FlexSplit } from '@redislabsdev/redis-ui-components';
+
+<FlexGroup direction="row" style={{ minWidth: '40rem', minHeight: '12rem' }}>
+  <div>a</div>
+  <FlexSplit />
+  <div>b</div>
+  <div>c</div>
+</FlexGroup>
+```
+
+## Notes
+
+- `FlexSplit` must be used as a direct child of `FlexGroup`. It relies on `FlexGroup`'s `data-flex-direction` attribute to determine which margin direction to apply.
+- The component renders as a `div` with `display: contents`, so it produces no visible box in the layout.
+- When `extraMinSpace` is provided, it sets a minimum margin on the element preceding the split, ensuring a guaranteed gap between the two groups of items.
+- Direction-aware: automatically adjusts margin logic for `row`, `column`, `row-reverse`, and `column-reverse` layouts.