@cube-dev/ui-kit 0.126.0 → 0.127.0

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.d.ts

@@ -13,7 +13,7 @@ import { Styles } from "@tenphi/tasty";
  * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).
  * @param ignoreList - Properties to skip during extraction.
  */
-declare function extractStyles(props: Record<string, unknown>, styleList?: readonly string[], defaultStyles?: Styles, propMap?: Record<string, string>, ignoreList?: readonly string[]): Styles;
+declare function extractStyles(props: object, styleList?: readonly string[], defaultStyles?: Styles, propMap?: Record<string, string>, ignoreList?: readonly string[]): Styles;
 //#endregion
 export { extractStyles };
 //# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.
@@ -14,14 +14,15 @@
 function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList = []) {
 	const ignoreSet = new Set(ignoreList);
 	const styleSet = new Set(styleList);
+	const record = props;
 	const styles = {
 		...defaultStyles,
-		...!ignoreSet.has("styles") && props.styles && typeof props.styles === "object" ? props.styles : void 0
+		...!ignoreSet.has("styles") && record.styles && typeof record.styles === "object" ? record.styles : void 0
 	};
-	for (const prop of Object.keys(props)) {
+	for (const prop of Object.keys(record)) {
 		if (ignoreSet.has(prop)) continue;
 		const styleName = propMap?.[prop] ?? prop;
-		if (styleSet.has(styleName)) styles[styleName] = props[prop];
+		if (styleSet.has(styleName)) styles[styleName] = record[prop];
 	}
 	return styles;
 }

package/dist/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Split properties into style and non-style properties.\n * Collects style-related props from `props` (based on `styleList`)\n * and merges them with `defaultStyles` and `props.styles`.\n *\n * @param props - Component prop map.\n * @param styleList - List of style property names to extract.\n * @param defaultStyles - Default style map of the component.\n * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).\n * @param ignoreList - Properties to skip during extraction.\n */\nexport function extractStyles(\n  props: Record<string, unknown>,\n  styleList: readonly string[] = [],\n  defaultStyles?: Styles,\n  propMap?: Record<string, string>,\n  ignoreList: readonly string[] = [],\n): Styles {\n  const ignoreSet = new Set(ignoreList);\n  const styleSet = new Set(styleList);\n\n  const styles: Styles = {\n    ...defaultStyles,\n    ...(!ignoreSet.has('styles') &&\n    props.styles &&\n    typeof props.styles === 'object'\n      ? (props.styles as Styles)\n      : undefined),\n  };\n\n  for (const prop of Object.keys(props)) {\n    if (ignoreSet.has(prop)) continue;\n\n    const styleName = propMap?.[prop] ?? prop;\n\n    if (styleSet.has(styleName)) {\n      styles[styleName] = props[prop] as Styles[keyof Styles];\n    }\n  }\n\n  return styles;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,YAA+B,EAAE,EACjC,eACA,SACA,aAAgC,EAAE,EAC1B;CACR,MAAM,YAAY,IAAI,IAAI,WAAW;CACrC,MAAM,WAAW,IAAI,IAAI,UAAU;CAEnC,MAAM,SAAiB;EACrB,GAAG;EACH,GAAI,CAAC,UAAU,IAAI,SAAS,IAC5B,MAAM,UACN,OAAO,MAAM,WAAW,WACnB,MAAM,SACP;EACL;AAED,MAAK,MAAM,QAAQ,OAAO,KAAK,MAAM,EAAE;AACrC,MAAI,UAAU,IAAI,KAAK,CAAE;EAEzB,MAAM,YAAY,UAAU,SAAS;AAErC,MAAI,SAAS,IAAI,UAAU,CACzB,QAAO,aAAa,MAAM;;AAI9B,QAAO"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Split properties into style and non-style properties.\n * Collects style-related props from `props` (based on `styleList`)\n * and merges them with `defaultStyles` and `props.styles`.\n *\n * @param props - Component prop map.\n * @param styleList - List of style property names to extract.\n * @param defaultStyles - Default style map of the component.\n * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).\n * @param ignoreList - Properties to skip during extraction.\n */\nexport function extractStyles(\n  props: object,\n  styleList: readonly string[] = [],\n  defaultStyles?: Styles,\n  propMap?: Record<string, string>,\n  ignoreList: readonly string[] = [],\n): Styles {\n  const ignoreSet = new Set(ignoreList);\n  const styleSet = new Set(styleList);\n  const record = props as Record<string, unknown>;\n\n  const styles: Styles = {\n    ...defaultStyles,\n    ...(!ignoreSet.has('styles') &&\n    record.styles &&\n    typeof record.styles === 'object'\n      ? (record.styles as Styles)\n      : undefined),\n  };\n\n  for (const prop of Object.keys(record)) {\n    if (ignoreSet.has(prop)) continue;\n\n    const styleName = propMap?.[prop] ?? prop;\n\n    if (styleSet.has(styleName)) {\n      styles[styleName] = record[prop] as Styles[keyof Styles];\n    }\n  }\n\n  return styles;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,YAA+B,EAAE,EACjC,eACA,SACA,aAAgC,EAAE,EAC1B;CACR,MAAM,YAAY,IAAI,IAAI,WAAW;CACrC,MAAM,WAAW,IAAI,IAAI,UAAU;CACnC,MAAM,SAAS;CAEf,MAAM,SAAiB;EACrB,GAAG;EACH,GAAI,CAAC,UAAU,IAAI,SAAS,IAC5B,OAAO,UACP,OAAO,OAAO,WAAW,WACpB,OAAO,SACR;EACL;AAED,MAAK,MAAM,QAAQ,OAAO,KAAK,OAAO,EAAE;AACtC,MAAI,UAAU,IAAI,KAAK,CAAE;EAEzB,MAAM,YAAY,UAAU,SAAS;AAErC,MAAI,SAAS,IAAI,UAAU,CACzB,QAAO,aAAa,OAAO;;AAI/B,QAAO"}

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.126.0";
+const VERSION = "0.127.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/components/fields/ComboBox.md

@@ -271,6 +271,31 @@ const [selectedKey, setSelectedKey] = useState(null);
 </ComboBox>
 ```
 
+### With Sections (Dynamic)
+
+Sections and items can be defined dynamically using the `items` prop with a render function. Pass hierarchical data where each section contains a `children` array.
+
+```jsx
+const categories = [
+  { name: 'Fruits', children: [
+    { key: 'apple', label: 'Apple' },
+    { key: 'banana', label: 'Banana' },
+  ]},
+  { name: 'Vegetables', children: [
+    { key: 'carrot', label: 'Carrot' },
+    { key: 'broccoli', label: 'Broccoli' },
+  ]},
+];
+
+<ComboBox label="Food" placeholder="Select food..." items={categories}>
+  {(category) => (
+    <ComboBox.Section key={category.name} title={category.name} items={category.children}>
+      {(item) => <ComboBox.Item key={item.key}>{item.label}</ComboBox.Item>}
+    </ComboBox.Section>
+  )}
+</ComboBox>
+```
+
 ### With Disabled Items
 
 ```jsx
@@ -395,6 +420,8 @@ const fruits = [
 
 ### Virtualized List
 
+For large datasets, use the `items` prop with a render function. This enables automatic virtualization — only visible items are rendered in the DOM, providing smooth scrolling even with thousands of items. Virtualization is disabled when sections are present.
+
 ```jsx
 const items = Array.from({ length: 1000 }, (_, i) => ({
   key: `item-${i}`,

package/docs/components/fields/FilterListBox.md

@@ -230,6 +230,31 @@ Groups related items together with an optional heading.
 </FilterListBox>
 ```
 
+### With Sections (Dynamic)
+
+Sections and items can be defined dynamically using the `items` prop with a render function. Pass hierarchical data where each section contains a `children` array.
+
+```jsx
+const categories = [
+  { name: 'Fruits', children: [
+    { key: 'apple', label: 'Apple' },
+    { key: 'banana', label: 'Banana' },
+  ]},
+  { name: 'Vegetables', children: [
+    { key: 'carrot', label: 'Carrot' },
+    { key: 'broccoli', label: 'Broccoli' },
+  ]},
+];
+
+<FilterListBox label="Choose an ingredient" searchPlaceholder="Search ingredients..." items={categories}>
+  {(category) => (
+    <FilterListBox.Section key={category.name} title={category.name} items={category.children}>
+      {(item) => <FilterListBox.Item key={item.key}>{item.label}</FilterListBox.Item>}
+    </FilterListBox.Section>
+  )}
+</FilterListBox>
+```
+
 ### With Descriptions
 
 ```jsx

package/docs/components/fields/FilterPicker.md

@@ -234,6 +234,40 @@ For large datasets or dynamic content, use the `items` prop with a render functi
 </FilterPicker>
 ```
 
+### Dynamic Sections Pattern
+
+For hierarchical data with sections, use the `items` prop with nested render functions. Each section contains a `children` array of items.
+
+```jsx
+const categories = [
+  { name: 'Fruits', children: [
+    { key: 'apple', label: 'Apple' },
+    { key: 'banana', label: 'Banana' },
+  ]},
+  { name: 'Vegetables', children: [
+    { key: 'carrot', label: 'Carrot' },
+    { key: 'broccoli', label: 'Broccoli' },
+  ]},
+];
+
+<FilterPicker
+  label="Choose items"
+  placeholder="Choose items..."
+  searchPlaceholder="Search..."
+  items={categories}
+>
+  {(category) => (
+    <FilterPicker.Section key={category.name} title={category.name} items={category.children}>
+      {(item) => (
+        <FilterPicker.Item key={item.key} textValue={item.label}>
+          {item.label}
+        </FilterPicker.Item>
+      )}
+    </FilterPicker.Section>
+  )}
+</FilterPicker>
+```
+
 **Key Benefits:**
 - **Virtualization**: Automatically enabled for large lists without sections
 - **Performance**: Only renders visible items in the DOM

package/docs/components/fields/ListBox.md

@@ -313,6 +313,31 @@ Groups related items together with an optional heading.
 </ListBox>
 ```
 
+### With Sections (Dynamic)
+
+Sections and items can be defined dynamically using the `items` prop with a render function. Pass hierarchical data where each section contains a `children` array.
+
+```jsx
+const categories = [
+  { name: 'Fruits', children: [
+    { key: 'apple', label: 'Apple' },
+    { key: 'banana', label: 'Banana' },
+  ]},
+  { name: 'Vegetables', children: [
+    { key: 'carrot', label: 'Carrot' },
+    { key: 'broccoli', label: 'Broccoli' },
+  ]},
+];
+
+<ListBox label="Select food items" selectionMode="single" items={categories}>
+  {(category) => (
+    <ListBox.Section key={category.name} title={category.name} items={category.children}>
+      {(item) => <ListBox.Item key={item.key}>{item.label}</ListBox.Item>}
+    </ListBox.Section>
+  )}
+</ListBox>
+```
+
 ### Multiple Selection
 
 ```jsx
@@ -694,15 +719,20 @@ This component supports all [Field properties](../../FieldProperties.md) when us
 
 ### Virtualization
 
-ListBox automatically enables virtualization when:
-- No sections are present (sections disable virtualization)
-- Provides smooth scrolling even with large datasets
-- Only visible items are rendered in the DOM
-- Uses `@tanstack/react-virtual` for efficient rendering
-- Automatically measures item heights for consistent scrolling
-- Supports items with varying heights (descriptions, complex content)
+For large datasets, use the `items` prop with a render function. This enables automatic virtualization — only visible items are rendered in the DOM, providing smooth scrolling even with thousands of items.
+
+```jsx
+const items = Array.from({ length: 1000 }, (_, i) => ({
+  key: `item-${i}`,
+  label: `Item ${i + 1}`,
+}));
+
+<ListBox label="Large Dataset" selectionMode="single" items={items}>
+  {(item) => <ListBox.Item key={item.key}>{item.label}</ListBox.Item>}
+</ListBox>
+```
 
-**Note**: Virtualization is transparent to the user - no configuration needed. It works automatically when you have a flat list without sections.
+**Note**: Virtualization is disabled when sections are present. For very large datasets, prefer a flat list structure.
 
 ### Optimization Tips
 

package/docs/components/fields/Picker.md

@@ -425,6 +425,31 @@ Organize items into logical groups with section headers.
 </Picker>
 ```
 
+### With Sections (Dynamic)
+
+Sections and items can be defined dynamically using the `items` prop with a render function. Pass hierarchical data where each section contains a `children` array.
+
+```jsx
+const categories = [
+  { name: 'Fruits', children: [
+    { key: 'apple', label: 'Apple' },
+    { key: 'banana', label: 'Banana' },
+  ]},
+  { name: 'Vegetables', children: [
+    { key: 'carrot', label: 'Carrot' },
+    { key: 'broccoli', label: 'Broccoli' },
+  ]},
+];
+
+<Picker label="Favorite Food" placeholder="Select a food" items={categories}>
+  {(category) => (
+    <Picker.Section key={category.name} title={category.name} items={category.children}>
+      {(item) => <Picker.Item key={item.key}>{item.label}</Picker.Item>}
+    </Picker.Section>
+  )}
+</Picker>
+```
+
 ### Different Sizes
 
 Picker supports three sizes: small, medium (default), and large.

package/docs/components/fields/Select.md

@@ -386,6 +386,8 @@ Groups related options together with an optional heading.
 
 ### With Sections (Dynamic)
 
+Sections and items can be defined dynamically using the `items` prop with a render function.
+
 ```jsx
 const groups = [
   {

package/docs/components/navigation/Tabs.md

@@ -112,12 +112,12 @@ For individual tabs:
 
 ### Sizes
 
-- `xsmall` - Extra small size with t4 typography (radio type only)
+- `xsmall` - Extra small size with t4 typography
 - `small` - Small size with t3m typography (default)
 - `medium` - Default size with t3m typography
 - `large` - Larger tabs with t3m typography
 
-**Note:** Radio type only supports `medium` and `large` sizes, which are mapped to smaller Item sizes internally.
+**Note:** Radio type supports `large` (default, 40px total) and `medium` (32px total) sizes, mapped to Item button sizes `medium` (32px) and `xsmall` (24px) respectively.
 
 ## Compound Components
 

package/docs/tasty/README.md

@@ -6,18 +6,18 @@ Tasty is a styling engine for design systems that turns component state into det
 
 - **New to Tasty**: [Getting Started](getting-started.md) for installation, the first component, optional shared `configure()`, ESLint, editor tooling, and rendering mode selection.
 - **Learning the component model**: [Methodology](methodology.md) for root + sub-elements, `styleProps`, tokens, extension, and recommended boundaries between `styles`, `style`, and wrappers.
-- **Evaluating the selector model**: [Style rendering pipeline](PIPELINE.md) for how mutually exclusive selectors make stateful styling deterministic.
+- **Evaluating the selector model**: [Style rendering pipeline](pipeline.md) for how mutually exclusive selectors make stateful styling deterministic.
 - **Evaluating fit**: [Comparison](comparison.md) for tool-selection context, then [Adoption Guide](adoption.md) for audience fit and rollout strategy inside a design system.
 
 ## By Role
 
-- **Application developer using an existing design system**: [Getting Started](getting-started.md), then [Runtime API](runtime.md).
+- **Application developer using an existing design system**: [Getting Started](getting-started.md), then [React API](react-api.md).
 - **Design-system author**: [Methodology](methodology.md), [Building a Design System](design-system.md), [Configuration](configuration.md), and [Adoption Guide](adoption.md).
 - **Platform or tooling engineer**: [Configuration](configuration.md), [Zero Runtime (tastyStatic)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
 
 ## By Styling Approach
 
-- **Runtime React components**: [Runtime API](runtime.md)
+- **React components**: [React API](react-api.md)
 - **Zero-runtime / build-time extraction**: [Zero Runtime (tastyStatic)](tasty-static.md)
 - **Runtime `tasty()` with server collection and hydration**: [Server-Side Rendering](ssr.md)
 
@@ -27,5 +27,5 @@ Tasty is a styling engine for design systems that turns component state into det
 - **Look up a property handler**: [Style Properties](styles.md)
 - **Define tokens, units, recipes, keyframes, or properties globally**: [Configuration](configuration.md)
 - **Debug generated CSS or cache behavior**: [Debug Utilities](debug.md)
-- **Understand how selector generation works internally**: [Style rendering pipeline](PIPELINE.md)
+- **Understand how selector generation works internally**: [Style rendering pipeline](pipeline.md)
 - **Understand runtime injection internals**: [Style Injector](injector.md)

package/docs/tasty/adoption.md

@@ -13,7 +13,7 @@ Tasty is not the surface your product engineers interact with directly. It sits
 ```
 Product code
   └─ DS components (Button, Card, Layout, ...)
-       └─ Tasty engine (tasty(), configure(), hooks)
+       └─ Tasty engine (tasty(), configure(), style functions)
             └─ CSS (mutually exclusive selectors, tokens, custom properties)
 ```
 
@@ -64,7 +64,7 @@ Tasty provides the engine. The DS team defines the language that runs on it. Her
 | **Units** | Custom multiplier units (`x`, `r`, `bw`, or your own) | `configure({ units })` |
 | **State aliases** | Responsive breakpoints, theme modes, feature flags | `configure({ states })` |
 | **Recipes** | Reusable style bundles (card, elevated, input-reset) | `configure({ recipes })` |
-| **Typography** | Preset definitions (h1-h6, t1-t4, etc.) | `configure({ tokens: generateTypographyTokens(...) })` |
+| **Typography** | Preset definitions (h1-h6, t1-t4, etc.) | `configure({ presets: { ... } })` |
 | **Style props** | Which CSS properties each component exposes as React props | `styleProps` in each component |
 | **Sub-elements** | Inner parts of compound components (Title, Icon, Content) | `elements` + capitalized keys in `styles` |
 | **Override rules** | How product engineers extend or constrain components | Styled wrappers via `tasty(Base, { ... })` |
@@ -270,6 +270,8 @@ const LoadingButton = tasty(Button, {
 </Space>
 ```
 
+**Components are server components by default.** All `tasty()` components and style functions are hook-free, so they work as React Server Components without `'use client'`. In server-only contexts (Next.js RSC, Astro without `client:*` directives), they produce zero client JavaScript. Product engineers only add `'use client'` when their component needs actual React interactivity (state, effects, event handlers), never because of styling.
+
 **No cascade/specificity concerns.** Tasty's mutually exclusive selectors mean extending a component cannot accidentally break another. Import order, class name collisions, and specificity arithmetic are non-issues.
 
 ---
@@ -289,7 +291,7 @@ const LoadingButton = tasty(Button, {
 - [Methodology](methodology.md) -- the recommended patterns for structuring Tasty components
 - [Building a Design System](design-system.md) -- practical guide to building a DS layer with Tasty
 - [Style DSL](dsl.md) -- state maps, tokens, units, extending semantics, keyframes, @property
-- [Runtime API](runtime.md) -- `tasty()` factory, component props, variants, sub-elements, hooks
+- [React API](react-api.md) -- `tasty()` factory, component props, variants, sub-elements, style functions
 - [Configuration](configuration.md) -- tokens, recipes, custom units, style handlers, and TypeScript extensions
 - [Style Properties](styles.md) -- complete reference for all enhanced style properties
 - [Comparison](comparison.md) -- positioning and trade-offs vs. other styling systems