@redis-ui/components 49.0.2 → 49.1.0

package/README.md

@@ -29,11 +29,11 @@ You also need to render the `CommonStyles` global style component inside the the
 
 ```tsx
 import { ThemeProvider } from 'styled-components';
-import { themesRebrand, CommonStyles } from '@redis-ui/styles';
+import { themes, CommonStyles } from '@redis-ui/styles';
 
 function App() {
   return (
-    <ThemeProvider theme={themesRebrand.light}>
+    <ThemeProvider theme={themes.light}>
       <CommonStyles />
       {/* your app */}
     </ThemeProvider>
@@ -46,13 +46,13 @@ function App() {
 For automatic light/dark mode switching with persistence, use the `SwitchableModeThemeProvider`:
 
 ```tsx
-import { SwitchableModeThemeProvider, themesRebrand, CommonStyles } from '@redis-ui/styles';
+import { SwitchableModeThemeProvider, themes, CommonStyles } from '@redis-ui/styles';
 
 function App() {
   return (
     <SwitchableModeThemeProvider
-      lightTheme={themesRebrand.light}
-      darkTheme={themesRebrand.dark}
+      lightTheme={themes.light}
+      darkTheme={themes.dark}
       storageKey="redis-ui-theme-mode"
     >
       <CommonStyles />

package/dist/Drawer/components/Content/Content.cjs

@@ -1,4 +1,4 @@
-const require_index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const require_index = require("../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const require_react_utils = require("../../../Helpers/react.utils.cjs");
 const require_Drawer_context = require("../../Drawer.context.cjs");
 const require_useJitterFix = require("./hooks/useJitterFix.cjs");

package/dist/Drawer/components/Content/Content.js

@@ -1,4 +1,4 @@
-import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { useComposedRefs } from "../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { handlePreventDefault } from "../../../Helpers/react.utils.js";
 import { useDrawerContext } from "../../Drawer.context.js";
 import { useJitterFix } from "./hooks/useJitterFix.js";

package/dist/Inputs/components/Context/InputValue.context.cjs

@@ -1,4 +1,4 @@
-const require_index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const require_index = require("../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const require_react_utils = require("../../../Helpers/react.utils.cjs");
 let react = require("react");
 //#region src/Inputs/components/Context/InputValue.context.tsx

package/dist/Inputs/components/Context/InputValue.context.js

@@ -1,4 +1,4 @@
-import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { useComposedRefs } from "../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { combineHandlers } from "../../../Helpers/react.utils.js";
 import { createContext, useContext } from "react";
 //#region src/Inputs/components/Context/InputValue.context.tsx

package/dist/Modal/components/Content/components/Compose/Compose.cjs

@@ -1,4 +1,4 @@
-const require_index = require("../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const require_index = require("../../../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const require_react_utils = require("../../../../../Helpers/react.utils.cjs");
 const require_index$1 = require("../../../../../node_modules/@radix-ui/react-dialog/dist/index.cjs");
 const require_Compose_style = require("./Compose.style.cjs");

package/dist/Modal/components/Content/components/Compose/Compose.js

@@ -1,4 +1,4 @@
-import { useComposedRefs } from "../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { useComposedRefs } from "../../../../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { handlePreventDefault, handleStopPropagation } from "../../../../../Helpers/react.utils.js";
 import { Portal } from "../../../../../node_modules/@radix-ui/react-dialog/dist/index.js";
 import { Container, ModalOverlay } from "./Compose.style.js";

package/dist/Typography/hooks/useEllipsisTooltip.cjs

@@ -1,4 +1,4 @@
-const require_index = require("../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const require_index = require("../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 let react = require("react");
 //#region src/Typography/hooks/useEllipsisTooltip.tsx
 var useEllipsisTooltip = ({ tooltipOnEllipsis, onMouseEnter, onMouseLeave, title }, ref) => {

package/dist/Typography/hooks/useEllipsisTooltip.js

@@ -1,4 +1,4 @@
-import { useComposedRefs } from "../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { useComposedRefs } from "../../packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/Typography/hooks/useEllipsisTooltip.tsx
 var useEllipsisTooltip = ({ tooltipOnEllipsis, onMouseEnter, onMouseLeave, title }, ref) => {

package/dist/packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.cjs

@@ -0,0 +1,30 @@
+const require_runtime = require("../../../../../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+function useComposedRefs(...refs) {
+	return react.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+exports.useComposedRefs = useComposedRefs;

package/dist/packages/components/node_modules/@radix-ui/react-compose-refs/dist/index.js

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+//#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+function useComposedRefs(...refs) {
+	return React$1.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+export { useComposedRefs };

package/dist/packages/components/node_modules/@radix-ui/react-slot/dist/index.cjs

@@ -1,68 +1,50 @@
 const require_runtime = require("../../../../../../_virtual/_rolldown/runtime.cjs");
-const require_index = require("../../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
+const require_index = require("../../react-compose-refs/dist/index.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 //#region node_modules/@radix-ui/react-slot/dist/index.mjs
-var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = react[" use ".trim().toString()];
-function isPromiseLike(value) {
-	return typeof value === "object" && value !== null && "then" in value;
-}
-function isLazyComponent(element) {
-	return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
-}
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-	const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
 	const Slot2 = react.forwardRef((props, forwardedRef) => {
 		let { children, ...slotProps } = props;
+		let slottableElement = null;
+		let hasSlottable = false;
+		const newChildren = [];
 		if (isLazyComponent(children) && typeof use === "function") children = use(children._payload);
-		const childrenArray = react.Children.toArray(children);
-		const slottable = childrenArray.find(isSlottable);
-		if (slottable) {
-			const newElement = slottable.props.children;
-			const newChildren = childrenArray.map((child) => {
-				if (child === slottable) {
-					if (react.Children.count(newElement) > 1) return react.Children.only(null);
-					return react.isValidElement(newElement) ? newElement.props.children : null;
-				} else return child;
-			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotClone, {
-				...slotProps,
-				ref: forwardedRef,
-				children: react.isValidElement(newElement) ? react.cloneElement(newElement, void 0, newChildren) : null
-			});
-		}
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotClone, {
-			...slotProps,
-			ref: forwardedRef,
-			children
+		react.Children.forEach(children, (maybeSlottable) => {
+			if (isSlottable(maybeSlottable)) {
+				hasSlottable = true;
+				const slottable = maybeSlottable;
+				let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+				if (isLazyComponent(child) && typeof use === "function") child = use(child._payload);
+				slottableElement = getSlottableElementFromSlottable(slottable, child);
+				newChildren.push(slottableElement?.props?.children);
+			} else newChildren.push(maybeSlottable);
 		});
+		if (slottableElement) slottableElement = react.cloneElement(slottableElement, void 0, newChildren);
+		else if (!hasSlottable && react.Children.count(children) === 1 && react.isValidElement(children)) slottableElement = children;
+		const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+		const composedRef = require_index.useComposedRefs(forwardedRef, slottableElementRef);
+		if (!slottableElement) {
+			if (children || children === 0) throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+			return children;
+		}
+		const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+		if (slottableElement.type !== react.Fragment) mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+		return react.cloneElement(slottableElement, mergedProps);
 	});
 	Slot2.displayName = `${ownerName}.Slot`;
 	return Slot2;
 }
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-	const SlotClone = react.forwardRef((props, forwardedRef) => {
-		let { children, ...slotProps } = props;
-		if (isLazyComponent(children) && typeof use === "function") children = use(children._payload);
-		if (react.isValidElement(children)) {
-			const childrenRef = getElementRef(children);
-			const props2 = mergeProps(slotProps, children.props);
-			if (children.type !== react.Fragment) props2.ref = forwardedRef ? require_index.composeRefs(forwardedRef, childrenRef) : childrenRef;
-			return react.cloneElement(children, props2);
-		}
-		return react.Children.count(children) > 1 ? react.Children.only(null) : null;
-	});
-	SlotClone.displayName = `${ownerName}.SlotClone`;
-	return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-	return react.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+var getSlottableElementFromSlottable = (slottable, child) => {
+	if ("child" in slottable.props) {
+		const child2 = slottable.props.child;
+		if (!react.isValidElement(child2)) return null;
+		return react.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+	}
+	return react.isValidElement(child) ? child : null;
+};
 function mergeProps(slotProps, childProps) {
 	const overrideProps = { ...childProps };
 	for (const propName in childProps) {
@@ -95,5 +77,22 @@ function getElementRef(element) {
 	if (mayWarn) return element.props.ref;
 	return element.props.ref || element.ref;
 }
+function isSlottable(child) {
+	return react.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+	return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function isPromiseLike(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
+var createSlotError = (ownerName) => {
+	return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+};
+var createSlottableError = (ownerName) => {
+	return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+};
+var use = react[" use ".trim().toString()];
 //#endregion
 exports.createSlot = createSlot;

package/dist/packages/components/node_modules/@radix-ui/react-slot/dist/index.js

@@ -1,66 +1,48 @@
-import { composeRefs } from "../../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
-import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "../../react-compose-refs/dist/index.js";
 import * as React$1 from "react";
 //#region node_modules/@radix-ui/react-slot/dist/index.mjs
-var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React$1[" use ".trim().toString()];
-function isPromiseLike(value) {
-	return typeof value === "object" && value !== null && "then" in value;
-}
-function isLazyComponent(element) {
-	return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
-}
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-	const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
 	const Slot2 = React$1.forwardRef((props, forwardedRef) => {
 		let { children, ...slotProps } = props;
+		let slottableElement = null;
+		let hasSlottable = false;
+		const newChildren = [];
 		if (isLazyComponent(children) && typeof use === "function") children = use(children._payload);
-		const childrenArray = React$1.Children.toArray(children);
-		const slottable = childrenArray.find(isSlottable);
-		if (slottable) {
-			const newElement = slottable.props.children;
-			const newChildren = childrenArray.map((child) => {
-				if (child === slottable) {
-					if (React$1.Children.count(newElement) > 1) return React$1.Children.only(null);
-					return React$1.isValidElement(newElement) ? newElement.props.children : null;
-				} else return child;
-			});
-			return /* @__PURE__ */ jsx(SlotClone, {
-				...slotProps,
-				ref: forwardedRef,
-				children: React$1.isValidElement(newElement) ? React$1.cloneElement(newElement, void 0, newChildren) : null
-			});
-		}
-		return /* @__PURE__ */ jsx(SlotClone, {
-			...slotProps,
-			ref: forwardedRef,
-			children
+		React$1.Children.forEach(children, (maybeSlottable) => {
+			if (isSlottable(maybeSlottable)) {
+				hasSlottable = true;
+				const slottable = maybeSlottable;
+				let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+				if (isLazyComponent(child) && typeof use === "function") child = use(child._payload);
+				slottableElement = getSlottableElementFromSlottable(slottable, child);
+				newChildren.push(slottableElement?.props?.children);
+			} else newChildren.push(maybeSlottable);
 		});
+		if (slottableElement) slottableElement = React$1.cloneElement(slottableElement, void 0, newChildren);
+		else if (!hasSlottable && React$1.Children.count(children) === 1 && React$1.isValidElement(children)) slottableElement = children;
+		const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+		const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+		if (!slottableElement) {
+			if (children || children === 0) throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+			return children;
+		}
+		const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+		if (slottableElement.type !== React$1.Fragment) mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+		return React$1.cloneElement(slottableElement, mergedProps);
 	});
 	Slot2.displayName = `${ownerName}.Slot`;
 	return Slot2;
 }
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-	const SlotClone = React$1.forwardRef((props, forwardedRef) => {
-		let { children, ...slotProps } = props;
-		if (isLazyComponent(children) && typeof use === "function") children = use(children._payload);
-		if (React$1.isValidElement(children)) {
-			const childrenRef = getElementRef(children);
-			const props2 = mergeProps(slotProps, children.props);
-			if (children.type !== React$1.Fragment) props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-			return React$1.cloneElement(children, props2);
-		}
-		return React$1.Children.count(children) > 1 ? React$1.Children.only(null) : null;
-	});
-	SlotClone.displayName = `${ownerName}.SlotClone`;
-	return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-	return React$1.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+var getSlottableElementFromSlottable = (slottable, child) => {
+	if ("child" in slottable.props) {
+		const child2 = slottable.props.child;
+		if (!React$1.isValidElement(child2)) return null;
+		return React$1.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+	}
+	return React$1.isValidElement(child) ? child : null;
+};
 function mergeProps(slotProps, childProps) {
 	const overrideProps = { ...childProps };
 	for (const propName in childProps) {
@@ -93,5 +75,22 @@ function getElementRef(element) {
 	if (mayWarn) return element.props.ref;
 	return element.props.ref || element.ref;
 }
+function isSlottable(child) {
+	return React$1.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+	return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function isPromiseLike(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
+var createSlotError = (ownerName) => {
+	return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+};
+var createSlottableError = (ownerName) => {
+	return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+};
+var use = React$1[" use ".trim().toString()];
 //#endregion
 export { createSlot };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "49.0.2",
+  "version": "49.1.0",
   "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 || ^10.0.0",
-    "@redis-ui/styles": "^17.0.0 || ^18.0.0",
+    "@redis-ui/styles": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"

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.