@redis-ui/components 49.0.2 → 49.1.1

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

@@ -120,6 +120,7 @@ Always check the relevant component reference before using a component. The refe
 - [KeyValueList](./references/KeyValueList.md)
 - [Filters](./references/Filters.md)
 - [SearchBar](./references/SearchBar.md)
+- [TableHeading](./references/TableHeading.md)
 
 ### Misc
 
@@ -132,3 +133,4 @@ Always check the relevant component reference before using a component. The refe
 - [ButtonGroup](./references/ButtonGroup.md)
 - [Banner](./references/Banner.md)
 - [Slider](./references/Slider.md)
+- [ThemeModeSwitch](./references/ThemeModeSwitch.md)

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

@@ -0,0 +1,79 @@
+# TableHeading
+
+A heading bar for tables and list views. It is a composable container whose main part is a search input, with optional predefined `Title` and `EndContainer` slots that can hold any content (actions, buttons, etc.).
+
+## Import
+
+```tsx
+import { TableHeading } from '@redis-ui/components';
+```
+
+## Props
+
+`TableHeadingProps` is `HTMLAttributes<HTMLDivElement>` — the container forwards all standard div attributes.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Heading content, typically `TableHeading.Title`, `TableHeading.SearchInput`, and `TableHeading.EndContainer`. |
+| `className` | `string` | - | Applied to the container element. |
+| `style` | `CSSProperties` | - | Applied to the container element. |
+| `other div attributes` | `HTMLAttributes<HTMLDivElement>` | - | Any other div attributes are forwarded to the container. |
+
+## Sub-components
+
+- `TableHeading.Title` - Heading text for the bar. Accepts `TypographyHeadingProps` and renders a small `Typography.Heading`.
+- `TableHeading.SearchInput` - The pre-styled search field for the heading (a `SearchInput`); forwards `SearchInput` props such as `placeholder`. See the [SearchInput](./SearchInput.md) reference.
+- `TableHeading.EndContainer` - Trailing slot for actions/controls; can contain any content.
+
+## Examples
+
+### Playground
+
+```tsx
+import { TableHeading } from '@redis-ui/components';
+
+<TableHeading>
+  <TableHeading.Title>Title</TableHeading.Title>
+  <TableHeading.SearchInput />
+  <TableHeading.EndContainer>EndContainer</TableHeading.EndContainer>
+</TableHeading>
+```
+
+### Simple
+
+> `TableHeading` can contain any components. The main part of that bar is `SearchInput`.
+
+```tsx
+import { TableHeading } from '@redis-ui/components';
+
+<TableHeading>
+  <TableHeading.SearchInput placeholder="Search table" />
+</TableHeading>
+```
+
+### FullComposition
+
+> In addition to `SearchInput`, the `TableHeading` also has predefined `Title` and `EndContainer`, each of which can contain any content.
+
+```tsx
+import { ActionIconButton, Button, TableHeading, TextButton } from '@redis-ui/components';
+import { ExportIcon, PlusIcon } from '@redis-ui/icons';
+
+<TableHeading>
+  <TableHeading.Title>Title</TableHeading.Title>
+  <TableHeading.SearchInput placeholder="Search table" />
+  <TableHeading.EndContainer>
+    <TextButton>
+      <Button.Icon icon={ExportIcon} />
+      Export
+    </TextButton>
+    <ActionIconButton size="L" icon={PlusIcon} variant="primary" />
+  </TableHeading.EndContainer>
+</TableHeading>
+```
+
+## Notes
+
+- `TableHeading` is a composition container — it can hold any components, but the main element is the `SearchInput`.
+- `Title` and `EndContainer` are optional predefined slots; each accepts arbitrary content.
+- `TableHeading.Title` forwards `Typography.Heading` props (it renders a small heading).

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

@@ -0,0 +1,72 @@
+# ThemeModeSwitch
+
+A pre-built control that lets the user switch the app's theme mode. By default it is a light/dark toggle; when the surrounding provider allows the system mode it becomes a menu offering Light, Dark, and Browser options. It must be rendered inside a `SwitchableModeThemeProvider` (or an equivalent `ThemeModeSwitchingProvider` context) from `@redis-ui/styles`.
+
+## Import
+
+```tsx
+import { ThemeModeSwitch } from '@redis-ui/components';
+```
+
+The theme mode provider comes from the styles package:
+
+```tsx
+import { SwitchableModeThemeProvider } from '@redis-ui/styles';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onThemeModeChange` | `(newThemeMode: UserThemeMode) => void` | - | Called after the theme mode change is applied. |
+| `switchTimeoutMs` | `number` | `300` | Delay before the selected mode is applied, matching the switch transition. |
+| `other element attributes` | `Omit<HTMLAttributes<HTMLElement>, 'onClick' \| 'onChange'>` | - | Remaining HTML attributes are forwarded to the control (`onClick`/`onChange` are managed internally). |
+
+## Hooks
+
+- `useThemeModeSwitch` - Powers `ThemeModeSwitch`; use it to build a custom switcher. Accepts `{ onThemeModeChange?, switchTimeoutMs? }` and returns `{ allowSystemThemeMode, themeMode, setThemeMode, toggleThemeMode }`.
+
+## Examples
+
+### Basic Usage
+
+> Provide the theme modes once at the app root, then drop the switch anywhere inside it.
+
+```tsx
+import { SwitchableModeThemeProvider } from '@redis-ui/styles';
+import { themeDark, themeLight } from './themes'; // app extended themes, based on redis-ui-styles
+
+<SwitchableModeThemeProvider
+  lightTheme={themeLight}
+  darkTheme={themeDark}
+  allowSystemThemeMode={allowSystemThemeMode}
+  storageKey={storageKey}
+>
+  <App />
+</SwitchableModeThemeProvider>;
+```
+
+```tsx
+import { ThemeModeSwitch } from '@redis-ui/components';
+
+<ThemeModeSwitch onThemeModeChange={notifyUserSwitchedMode} />;
+```
+
+### Custom switcher with the hook
+
+> When the built-in control doesn't fit, build your own from `useThemeModeSwitch` (or the lower-level `useThemeModeSwitchingContext` from the styles package).
+
+```tsx
+import { useThemeModeSwitch } from '@redis-ui/components';
+
+const { themeMode, toggleThemeMode } = useThemeModeSwitch({ onThemeModeChange });
+
+<button onClick={toggleThemeMode}>Current mode: {themeMode}</button>;
+```
+
+## Notes
+
+- `ThemeModeSwitch` requires a `SwitchableModeThemeProvider` (or `ThemeModeSwitchingProvider`) ancestor — it reads and updates the theme mode through that context.
+- When the provider is configured with `allowSystemThemeMode`, the control renders a menu with Light / Dark / Browser choices instead of a two-state toggle.
+- `onThemeModeChange` fires only after the mode is actually applied (after `switchTimeoutMs`).
+- For fully custom UI, use the exported `useThemeModeSwitch` hook rather than restyling the component internals.