@redis-ui/components 42.8.0 → 43.2.1

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

@@ -0,0 +1,265 @@
+# RadioGroup
+
+A compound radio group for selecting a single option from a list. It supports controlled and uncontrolled state, horizontal or vertical layout, readonly and disabled modes, data-driven items, and full item composition.
+
+## Import
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | `RadioGroupItem[]` | *required* | Array of radio items to render |
+| value | `string` | - | Controlled selected value |
+| defaultValue | `string` | - | Initial selected value for uncontrolled usage |
+| onChange | `(value: string) => void` | - | Called when the selected value changes |
+| layout | `'horizontal' \| 'vertical'` | `vertical` | Group orientation |
+| disabled | `boolean` | `false` | Disables all radio items in the group |
+| readOnly | `boolean` | `false` | Prevents selection changes while keeping the current appearance |
+| id | `string` | - | Shared id for the group and its generated items |
+
+The component also accepts standard `HTMLAttributes<HTMLDivElement>` passthrough props through `RadioGroup.Compose`.
+
+### RadioGroupItem Type
+| Field | Type | Description |
+|-------|------|-------------|
+| value | `string` | *required* - Unique item value |
+| label | `string` | Label text shown next to the indicator; pass `''` to hide the label |
+| disabled | `boolean` | Disables the item |
+| id | `string` | Custom id for the item |
+
+## Sub-components
+
+- `RadioGroup.Compose` - Low-level radio group wrapper used by the compound examples and custom layouts.
+- `RadioGroup.Item` - Generates a single radio item from item data.
+- `RadioGroup.Item.Compose` - Composes a single radio item with shared id and value context.
+- `RadioGroup.Item.Indicator` - Renders the selectable indicator for a radio item.
+- `RadioGroup.Item.Label` - Renders the associated label for a radio item.
+
+### RadioGroup.Compose Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | *required* | Group contents |
+| disabled | `boolean` | `false` | Disables the entire radio group |
+| value | `string` | - | Controlled selected value |
+| defaultValue | `string` | - | Initial selected value for uncontrolled usage |
+| onChange | `(value: string) => void` | - | Called when the selected value changes |
+| layout | `'horizontal' \| 'vertical'` | `vertical` | Group orientation |
+| readOnly | `boolean` | `false` | Prevents selection changes |
+| id | `string` | - | Shared group id |
+
+`RadioGroup.Compose` also accepts standard `HTMLAttributes<HTMLDivElement>` passthrough props.
+
+### RadioGroup.Item Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `string` | *required* | Item value |
+| label | `string` | - | Optional label text; if omitted, the value is shown, and `''` hides the label |
+| disabled | `boolean` | `false` | Disables the item |
+| id | `string` | - | Custom item id |
+
+`RadioGroup.Item` forwards standard button attributes to `RadioGroup.Item.Indicator`.
+
+### RadioGroup.Item.Compose Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | *required* | Item contents |
+| value | `string` | *required* | Item value |
+| disabled | `boolean` | `false` | Disables the item |
+| id | `string` | - | Shared id for the item label and indicator |
+
+`RadioGroup.Item.Compose` also accepts standard `HTMLAttributes<HTMLDivElement>` passthrough props and renders its children inside the item wrapper.
+
+`RadioGroup.Item.Indicator` accepts standard `HTMLAttributes<HTMLButtonElement>` passthrough props.
+
+`RadioGroup.Item.Label` accepts standard `LabelHTMLAttributes<HTMLLabelElement>` passthrough props.
+
+## Examples
+
+### Basic Usage
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+<RadioGroup items={items} defaultValue={items[0].value} />
+```
+
+### Controlled
+> Use `value` and `onChange` props to control `RadioGroup` state
+```tsx
+import { Button, RadioGroup } from '@redislabsdev/redis-ui-components';
+import { useState } from 'react';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+function Example() {
+  const [value, setValue] = useState('2');
+
+  return (
+    <>
+      <Button onClick={() => setValue('1')}>Select first option</Button>
+      <Button onClick={() => setValue('3')}>Select disabled option</Button>
+      <Button onClick={() => setValue('')}>Unselect all</Button>
+      <RadioGroup items={items} value={value} onChange={setValue} />
+    </>
+  );
+}
+```
+
+### Layout
+> Set `layout` prop to `"horizontal"` to have horizontal layout. Vertical layout is default.
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+<>
+  <RadioGroup items={items} layout="horizontal" />
+  <RadioGroup items={items} />
+</>
+```
+
+### Readonly
+> In readonly mode items appear as normal, but the user cannot change the selection
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+<RadioGroup items={items} readOnly defaultValue="2" />
+```
+
+### Disabled
+> Use `disabled` prop of the `RadioGroup` to turn all items to disabled mode
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+<RadioGroup items={items} disabled defaultValue="2" />
+```
+
+### WithinFormField
+> `RadioGroup` can be used together with `FormField` and `Label` components.
+```tsx
+import { FormField, RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const items = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Disabled item', disabled: true }
+];
+
+<FormField
+  label="FormField Label"
+  required
+  optional
+  infoIconProps={{ text: 'ToolTip!' }}
+  additionalText="RadioGroup with horizontal layout"
+>
+  <RadioGroup items={items} defaultValue="2" layout="horizontal" />
+</FormField>
+```
+
+### ItemsData
+> Without composition, items are generated from item data, which allows you to define a value, label, disabled state and custom id
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+const radioGroupItems = [
+  { label: 'Item 1', value: '1' },
+  { label: 'Disabled', value: '2', disabled: true },
+  { label: 'Next one is without label (must pass empty string to label prop)', value: '3' },
+  { label: '', value: '4' },
+  { label: 'Next one takes value as label', value: '5' },
+  { value: '6' },
+  { value: '7', label: 'Custom id', id: 'custom-id' }
+];
+
+<RadioGroup items={radioGroupItems} defaultValue="2" />
+```
+
+### GroupComposition
+> `RadioGroup` can be composed of `Item`s.
+> In this case, each `Item` is defined as component rather than as plain data.
+```tsx
+import { RadioGroup } from '@redislabsdev/redis-ui-components';
+
+<RadioGroup.Compose>
+  <RadioGroup.Item label="Item 1" value="1" />
+  <RadioGroup.Item label="Disabled" value="2" disabled />
+  <RadioGroup.Item
+    label="Next one is without label (must pass empty string to label prop) "
+    value="3"
+  />
+  <RadioGroup.Item label="" value="4" />
+  <RadioGroup.Item label="Next one takes value as label" value="5" />
+  <RadioGroup.Item value="6" />
+  <RadioGroup.Item value="7" id="custom-id" label="Custom id" />
+</RadioGroup.Compose>
+```
+
+### ItemComposition
+> `RadioGroup` allows to compose each item separately.<br>
+> `Item.Indicator` and `Item.Label` can be customized and used with other custom components
+```tsx
+import { Label, RadioGroup } from '@redislabsdev/redis-ui-components';
+
+<RadioGroup.Compose defaultValue="1" layout="horizontal">
+  <RadioGroup.Item.Compose value="1">
+    <RadioGroup.Item.Label>Label on the left</RadioGroup.Item.Label>
+    <RadioGroup.Item.Indicator />
+  </RadioGroup.Item.Compose>
+  <RadioGroup.Item.Compose value="2" id="manual-id">
+    <RadioGroup.Item.Indicator />
+    <RadioGroup.Item.Label>Manual id</RadioGroup.Item.Label>
+  </RadioGroup.Item.Compose>
+  <RadioGroup.Item.Compose value="3">
+    <RadioGroup.Item.Indicator />
+  </RadioGroup.Item.Compose>
+  <RadioGroup.Item.Compose value="4" disabled>
+    <RadioGroup.Item.Indicator />
+    <RadioGroup.Item.Label>Disabled item</RadioGroup.Item.Label>
+  </RadioGroup.Item.Compose>
+  <RadioGroup.Item.Compose value="5">
+    <RadioGroup.Item.Indicator id="inlineId" />
+    <RadioGroup.Item.Label htmlFor="inlineId">Id and htmlFor out of context</RadioGroup.Item.Label>
+  </RadioGroup.Item.Compose>
+  <RadioGroup.Item.Compose value="6">
+    <RadioGroup.Item.Indicator />
+    <RadioGroup.Item.Label>With Info</RadioGroup.Item.Label>
+    <Label.InfoIcon content="Any info text or content" />
+  </RadioGroup.Item.Compose>
+</RadioGroup.Compose>
+```
+
+## Notes
+- Use `value` and `onChange` to control `RadioGroup` state.
+- Horizontal layout is enabled with `layout="horizontal"`; vertical layout is the default.
+- In readonly mode, items render normally but the user cannot change the selection.
+- `disabled` turns all items into disabled mode.
+- `RadioGroup` can be used together with `FormField` and `Label`.
+- Without composition, items are generated from item data and can define `value`, `label`, `disabled`, and custom `id`.
+- `Item.Indicator` and `Item.Label` can be customized and combined with other custom components.

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

@@ -0,0 +1,147 @@
+# ScreenReaderAnnounce
+
+An invisible announcement helper for screen readers with configurable live region behavior and opt-in first-render announcements.
+
+## Import
+
+```tsx
+import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| text | `string` | required | Announcement text |
+| allowAnnounce | `boolean` | `undefined` | Forces or disables the initial announcement behavior |
+| aria-live | `'polite' \| 'assertive'` | `polite` | Live region priority |
+| aria-atomic | `boolean` | `true` | Treats the announcement as a single atomic update |
+| role | `'alert' \| 'status' \| 'log'` | - | Semantic role for the live region |
+| other `VisuallyHidden` props | `ComponentProps<typeof VisuallyHidden>` minus `children`, `style`, `className`, `aria-hidden`, `role`, `text`, `asChild`, and other ARIA props | - | Remaining props forwarded to the hidden announcer |
+
+## Examples
+
+### Playground
+
+```tsx
+import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+<ScreenReaderAnnounce text="This is a screen reader announcement" allowAnnounce />
+```
+
+### AutomaticAnnouncement
+
+> By default, the component only announces text changes after the first render to avoid unnecessary announcements on initial page load.
+
+```tsx
+import { useState } from 'react';
+import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [text, setText] = useState('Initial text');
+
+  return (
+    <>
+      <Button onClick={() => setText(`Text ${Date.now()}`)}>Update Text</Button>
+      <ScreenReaderAnnounce text={text} />
+    </>
+  );
+}
+```
+
+### ForceAnnouncement
+
+> Use `allowAnnounce=true` to force announcement on first render.
+
+```tsx
+import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+<>
+  <div>This will announce immediately</div>
+  <ScreenReaderAnnounce text="Forced announcement on first render" allowAnnounce />
+</>
+```
+
+### DisabledAnnouncement
+
+> Use `allowAnnounce=false` to disable announcements.
+
+```tsx
+import { useState } from 'react';
+import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [text, setText] = useState('Initial text');
+
+  return (
+    <>
+      <Button onClick={() => setText('Updated text - but no announcement')}>Update Text</Button>
+      <ScreenReaderAnnounce text={text} allowAnnounce={false} />
+    </>
+  );
+}
+```
+
+### AriaLiveValues
+
+> Use `aria-live` to control announcement priority. Do not use it together with `role`.
+
+```tsx
+import { useState } from 'react';
+import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [politeText, setPoliteText] = useState('Polite announcement');
+  const [assertiveText, setAssertiveText] = useState('Assertive announcement');
+
+  return (
+    <>
+      <Button onClick={() => setPoliteText(`Polite: ${Date.now()}`)}>Update Polite</Button>
+      <div>Polite (default): {politeText}</div>
+      <ScreenReaderAnnounce text={politeText} aria-live="polite" />
+
+      <Button onClick={() => setAssertiveText(`Assertive: ${Date.now()}`)}>Update Assertive</Button>
+      <div>Assertive (interrupts): {assertiveText}</div>
+      <ScreenReaderAnnounce text={assertiveText} aria-live="assertive" />
+    </>
+  );
+}
+```
+
+### RoleValues
+
+> Use `role` to define semantic meaning of announcements. Do not use it together with `aria-live`.
+
+```tsx
+import { useState } from 'react';
+import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [statusText, setStatusText] = useState('Status announcement');
+  const [alertText, setAlertText] = useState('Alert announcement');
+  const [logText, setLogText] = useState('Log announcement');
+
+  return (
+    <>
+      <Button onClick={() => setStatusText(`Status: ${Date.now()}`)}>Update Status</Button>
+      <div>Status (default): {statusText}</div>
+      <ScreenReaderAnnounce text={statusText} role="status" />
+
+      <Button onClick={() => setAlertText(`Alert: ${Date.now()}`)}>Update Alert</Button>
+      <div>Alert (important): {alertText}</div>
+      <ScreenReaderAnnounce text={alertText} role="alert" />
+
+      <Button onClick={() => setLogText(`Log: ${Date.now()}`)}>Update Log</Button>
+      <div>Log (sequential): {logText}</div>
+      <ScreenReaderAnnounce text={logText} role="log" />
+    </>
+  );
+}
+```
+
+## Notes
+
+- By default the component waits for the first text change before announcing.
+- `allowAnnounce` can force the first announcement or disable announcements entirely.
+- Use either `aria-live` or `role`, but not both on the same instance.
+- The component renders nothing when `text` is empty.

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

@@ -0,0 +1,242 @@
+# SearchBar
+
+Composite search bar for table screens that combines search, filters, column selection, and custom actions.
+
+## Import
+
+```tsx
+import { SearchBar, type ColumnOption } from '@redislabsdev/redis-ui-components';
+```
+
+> Composition examples also use icons from `@redislabsdev/redis-ui-icons`:
+> ```tsx
+> import { ExportIcon, RefreshIcon } from '@redislabsdev/redis-ui-icons';
+> ```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| searchValue | `string` | required | Current search text passed to the built-in search input. |
+| onSearchChange | `(value: string) => void` | required | Called when the search text changes. |
+| onFiltersChange | `(activeFilters: FilterActive[]) => void` | required | Called when filter selection changes. |
+| activeFilters | `FilterActive[]` | required | Active filters rendered by the filters section. |
+| availableFilters | `FilterItemConfig[]` | required | Filter definitions shown in the filters section. |
+| availableColumns | `ColumnOption[]` | - | Optional column definitions shown in the column selector. |
+| activeColumns | `string[]` | - | Optional active column ids. |
+| onColumnsChange | `(selectedColumns: string[]) => void` | - | Called when selected columns change. |
+| children | `React.ReactNode` | - | Additional content forwarded to `SearchBar.Compose`. |
+
+### Related Types
+
+- `ColumnOption` - Column definition type exported by `SearchBar`; used by `availableColumns` and the column selector.
+
+## Sub-components
+
+- `SearchBar.Compose` - Shared state wrapper that provides `SearchBar` context and wraps the composed search layout.
+- `SearchBar.SearchSection` - Default search header with the search input and actions row.
+- `SearchBar.SearchSection.Compose` - Low-level wrapper for fully custom search header layouts.
+- `SearchBar.SearchSection.SearchInput` - Search input wrapper with the built-in `Search anything` placeholder.
+- `SearchBar.SearchSection.Actions` - Default actions row that renders the filter toggle and optional column selector.
+- `SearchBar.SearchSection.Actions.Compose` - Low-level wrapper for custom action-row layouts.
+- `SearchBar.SearchSection.Actions.FilterToggle` - Filter toggle button with the active filter count badge.
+- `SearchBar.SearchSection.Actions.ColumnSelector` - Column multi-select used to show or hide table columns.
+- `SearchBar.SearchSection.Actions.CustomActions` - Slot for custom action buttons or other trailing controls.
+- `SearchBar.FiltersSection` - Filter panel section rendered below the search header.
+
+## Props
+
+### SearchBar.Compose Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| activeFilters | `FilterActive[]` | required | Active filters shared with nested controls. |
+| children | `React.ReactNode` | required | Custom search bar layout content. |
+
+`SearchBar.Compose` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### SearchBar.SearchSection Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| searchValue | `string` | required | Current search input value. |
+| onSearchChange | `(value: string) => void` | required | Called when the search input changes. |
+| availableColumns | `ColumnOption[]` | - | Column options passed to the column selector. |
+| activeColumns | `string[]` | - | Active column ids. |
+| onColumnsChange | `(selectedColumns: string[]) => void` | - | Called when selected columns change. |
+| children | `React.ReactNode` | - | Additional search section content. |
+
+### SearchBar.SearchSection.Compose Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Custom search header content. |
+
+`SearchBar.SearchSection.Compose` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### SearchBar.SearchSection.SearchInput Props
+
+`SearchBar.SearchSection.SearchInput` does not define new props. It inherits the `SearchInput` prop surface from the input package and renders with a built-in `Search anything` placeholder.
+
+### SearchBar.SearchSection.Actions Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| availableColumns | `ColumnOption[]` | - | Column options used to render the column selector. |
+| activeColumns | `string[]` | - | Active column ids. |
+| onColumnsChange | `(selectedColumns: string[]) => void` | - | Called when selected columns change. |
+
+### SearchBar.SearchSection.Actions.Compose Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Custom action row content. |
+
+`SearchBar.SearchSection.Actions.Compose` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### SearchBar.SearchSection.Actions.FilterToggle Props
+
+`SearchBar.SearchSection.Actions.FilterToggle` does not define custom props. It reads `SearchBar` context and shows the active filter count.
+
+### SearchBar.SearchSection.Actions.ColumnSelector Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| availableColumns | `ColumnOption[]` | required | Column definitions available in the selector. |
+| activeColumns | `string[]` | required | Active column ids. |
+| onChange | `(selectedColumns: string[]) => void` | required | Called when the selection changes. |
+
+### SearchBar.SearchSection.Actions.CustomActions Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | - | Custom trailing actions rendered next to the built-in controls. |
+
+`SearchBar.SearchSection.Actions.CustomActions` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### SearchBar.FiltersSection Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| availableFilters | `FilterItemConfig[]` | required | Filter definitions shown in the filter section. |
+| onFiltersChange | `(activeFilters: FilterActive[]) => void` | required | Called when filters change. |
+
+`SearchBar.FiltersSection` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+## Examples
+
+### Playground
+
+> The playground story keeps filter and column state in sync with `useArgState`.
+
+```tsx
+import { useArgState } from '../../helpers/useArgState';
+import { SearchBar } from '@redislabsdev/redis-ui-components';
+
+function Render(args) {
+  const [activeFilters, setActiveFilters] = useArgState({
+    arg: args.activeFilters,
+    event: args.onFiltersChange,
+    getNewState: (_, [value]) => value
+  });
+  const [activeColumns, setActiveColumns] = useArgState({
+    arg: args.activeColumns,
+    event: args.onColumnsChange,
+    getNewState: (_, [value]) => value
+  });
+
+  return (
+    <SearchBar
+      {...args}
+      activeFilters={activeFilters}
+      onFiltersChange={setActiveFilters}
+      activeColumns={activeColumns}
+      onColumnsChange={setActiveColumns}
+    />
+  );
+}
+```
+
+### Controlled
+
+> SearchBar works in controlled mode.<br/>
+> Component requires following props:
+> - `availableFilters` array of filters with type and options
+> - `activeFilters` selected filter values
+> - `onFiltersChange` handler to update filter selection
+> - `searchValue` string (initial value)
+> - `onSearchChange` handler to update search state
+>
+> To enable column selection you should specify following optional props
+> - `availableColumns` array of columns
+> - `activeColumns` selected columns ids
+> - `onColumnsChange` handler to update column selection
+
+```tsx
+import { useState } from 'react';
+import { SearchBar } from '@redislabsdev/redis-ui-components';
+
+function Render() {
+  const [searchValue, setSearchValue] = useState('');
+  const [activeFilters, setActiveFilters] = useState(defaultFilters);
+  const [activeColumns, setActiveColumns] = useState(defaultColumns);
+
+  return (
+    <SearchBar
+      availableFilters={availableFilters}
+      activeFilters={activeFilters}
+      onFiltersChange={setActiveFilters}
+      availableColumns={availableColumns}
+      activeColumns={activeColumns}
+      onColumnsChange={setActiveColumns}
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      data-testid="search-bar-test-id"
+    />
+  );
+}
+```
+
+### Composition
+
+```tsx
+import { useState } from 'react';
+import { IconButton, SearchBar } from '@redislabsdev/redis-ui-components';
+import { ExportIcon, RefreshIcon } from '@redislabsdev/redis-ui-icons';
+
+function Render() {
+  const [activeFilters, setActiveFilters] = useState(defaultFilters);
+  const [activeColumns, setActiveColumns] = useState(defaultColumns);
+
+  return (
+    <SearchBar.Compose activeFilters={activeFilters}>
+      <SearchBar.SearchSection.Compose>
+        <SearchBar.SearchSection.SearchInput />
+        <SearchBar.SearchSection.Actions.Compose>
+          <SearchBar.SearchSection.Actions.FilterToggle />
+          <SearchBar.SearchSection.Actions.ColumnSelector
+            availableColumns={availableColumns}
+            activeColumns={activeColumns}
+            onChange={setActiveColumns}
+          />
+          <SearchBar.SearchSection.Actions.CustomActions>
+            <IconButton icon={ExportIcon} size="L" title="Export" />
+            <IconButton icon={RefreshIcon} size="L" title="Refresh" />
+          </SearchBar.SearchSection.Actions.CustomActions>
+        </SearchBar.SearchSection.Actions.Compose>
+      </SearchBar.SearchSection.Compose>
+      <SearchBar.FiltersSection
+        onFiltersChange={setActiveFilters}
+        availableFilters={availableFilters}
+      />
+    </SearchBar.Compose>
+  );
+}
+```
+
+## Notes
+
+- The root `SearchBar` forwards remaining props to `SearchBar.Compose`, so compose-container attributes can be applied at the root.
+- `SearchBar.SearchSection.Actions` only renders `ColumnSelector` when `availableColumns`, `activeColumns`, and `onColumnsChange` are all provided.
+- `SearchBar.FiltersSection` and `SearchBar.SearchSection.Actions.FilterToggle` rely on `SearchBar` context and must be rendered inside `SearchBar.Compose`.
+- The controlled story manages search text, filters, and columns with local `useState` hooks.