@cube-dev/ui-kit 0.0.0-canary-d688797 → 0.0.0-canary-bdfccbd

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | 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.0.0-canary-d688797 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bdfccbd | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-d688797";
+const VERSION = "0.0.0-canary-bdfccbd";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/BaseProperties.md

@@ -0,0 +1,78 @@
+# Base Properties
+
+All UI Kit components support a common set of base properties from the `tasty` style system. These properties are passed through `filterBaseProps` and can be used for styling, accessibility, and testing.
+
+## Core Properties
+
+- **`qa`** `string` — Data attribute for e2e testing (`data-qa`)
+- **`qaVal`** `string` — Value for the qa attribute
+- **`style`** `CSSProperties` — Inline styles
+- **`styles`** `Styles` — Tasty styles object
+- **`css`** `string` — Raw CSS string
+- **`mods`** `Mods` — State modifiers for conditional styling
+- **`breakpoints`** — Responsive breakpoint configuration
+- **`hidden`** `boolean` — Hide the element
+- **`isHidden`** `boolean` — Hide the element
+- **`disabled`** `boolean` — Disabled state
+- **`element`** `string` — Override the rendered element name for sub-element targeting
+- **`block`** `boolean` — Display as block
+- **`inline`** `boolean` — Display as inline
+
+## Style Properties
+
+Style properties allow direct styling without using the `styles` prop. They are defined in `@tenphi/tasty` and exposed via `styleProps` on components.
+
+### BASE_STYLES
+
+`display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+
+### POSITION_STYLES
+
+`gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+
+### DIMENSION_STYLES
+
+`width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+
+### BLOCK_STYLES
+
+**Inner:** `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
+**Outer:** `border`, `radius`, `shadow`, `outline`
+
+### COLOR_STYLES
+
+`color`, `fill`, `fade`, `image`
+
+### TEXT_STYLES
+
+`textTransform`, `fontWeight`, `fontStyle`
+
+### FLOW_STYLES
+
+`flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
+### CONTAINER_STYLES
+
+Combination of BASE_STYLES, COLOR_STYLES, DIMENSION_STYLES, POSITION_STYLES, BLOCK_STYLES, and FLOW_STYLES.
+
+### OUTER_STYLES
+
+Position and dimension styles: POSITION_STYLES, DIMENSION_STYLES, BLOCK_OUTER_STYLES.
+
+## Usage
+
+```jsx
+<Button qa="submit-button" width="100%" padding="1x 2x">
+  Submit
+</Button>
+
+<Card mods={{ hovered: isHovered }} fill="#surface" radius="1r">
+  Content
+</Card>
+```
+
+## Related
+
+- [Tasty documentation](./tasty/usage.md) — Full styling system reference
+- [CreateComponent](./CreateComponent.md) — Building components with base properties

package/docs/ComplexLayout.md

@@ -195,12 +195,10 @@ Use `invertOrder` to place primary actions on the right.
 
 Panels support four rendering modes via the `mode` prop:
 
-| Mode | Content Push | Overlay | Description |
-|------|--------------|---------|-------------|
-| `default` | Yes | No | Standard panel, pushes content |
-| `sticky` | No | No | Floats over content |
-| `overlay` | Yes | Yes | With dismissable backdrop |
-| `dialog` | No | Dialog | Renders as modal dialog |
+- **`default`** — Standard panel, pushes content (Content Push: Yes, Overlay: No)
+- **`sticky`** — Floats over content (Content Push: No, Overlay: No)
+- **`overlay`** — With dismissable backdrop (Content Push: Yes, Overlay: Yes)
+- **`dialog`** — Renders as modal dialog (Content Push: No, Overlay: Dialog)
 
 ### Sticky Panel
 
@@ -296,12 +294,10 @@ Panels with `mode="dialog"` render as a modal dialog instead of inline.
 
 **Panel vs Pane:**
 
-| Feature | Panel | Pane |
-|---------|-------|------|
-| Position | Absolute (overlays layout) | Inline (participates in flex) |
-| Use case | Sidebars, drawers | Split views, code editors |
-| Content adjustment | Pushes content via insets | Takes space in flex container |
-| `resizeEdge` | Based on `side` prop | `"right"` or `"bottom"` |
+- **`Position`** — Panel: Absolute (overlays layout); Pane: Inline (participates in flex)
+- **`Use case`** — Panel: Sidebars, drawers; Pane: Split views, code editors
+- **`Content adjustment`** — Panel: Pushes content via insets; Pane: Takes space in flex container
+- **`resizeEdge`** — Panel: Based on `side` prop; Pane: `"right"` or `"bottom"`
 
 ## Advanced Patterns
 
@@ -382,13 +378,11 @@ Use `Layout.Center` for content that should be centered both horizontally and ve
 
 ### When to Use Container vs Center
 
-| Use Case | Component |
-|----------|-----------|
-| Article/documentation content | `Layout.Container` |
-| Forms with top-aligned content | `Layout.Container` |
-| Empty states | `Layout.Center` |
-| Loading/splash screens | `Layout.Center` |
-| Error pages | `Layout.Center` |
+- **Article/documentation content** — `Layout.Container`
+- **Forms with top-aligned content** — `Layout.Container`
+- **Empty states** — `Layout.Center`
+- **Loading/splash screens** — `Layout.Center`
+- **Error pages** — `Layout.Center`
 
 ## Using Space Component
 
@@ -410,31 +404,27 @@ Use `Layout.Center` for content that should be centered both horizontally and ve
 
 ### When to Use Space vs Layout.Flex
 
-| Use Case | Component |
-|----------|-----------|
-| Inline button groups | `Space` |
-| Quick horizontal/vertical arrangement | `Space` |
-| Scrollable flex container | `Layout.Flex` |
-| Part of Layout structure | `Layout.Flex` |
-| Standalone flex wrapper | `Space` |
+- **Inline button groups** — `Space`
+- **Quick horizontal/vertical arrangement** — `Space`
+- **Scrollable flex container** — `Layout.Flex`
+- **Part of Layout structure** — `Layout.Flex`
+- **Standalone flex wrapper** — `Space`
 
 ## Sub-Components Reference
 
-| Component | Purpose |
-|-----------|---------|
-| `Layout` | Root wrapper, provides context |
-| `Layout.Content` | Scrollable content area, fills available space |
-| `Layout.Container` | Horizontally centered content with constrained width |
-| `Layout.Center` | Centered content (both axes) with text-align center |
-| `Layout.Header` | Page header with title, breadcrumbs, actions |
-| `Layout.Footer` | Footer bar, typically for actions |
-| `Layout.Toolbar` | Horizontal bar with space-between layout |
-| `Layout.Panel` | Side panel with modes: default, sticky, overlay, dialog |
-| `Layout.PanelHeader` | Header for panels with close button |
-| `Layout.Pane` | Inline resizable section |
-| `Layout.Flex` | Scrollable flex container |
-| `Layout.Grid` | Scrollable grid container |
-| `Layout.Block` | Simple block container |
+- **`Layout`** — Root wrapper, provides context
+- **`Layout.Content`** — Scrollable content area, fills available space
+- **`Layout.Container`** — Horizontally centered content with constrained width
+- **`Layout.Center`** — Centered content (both axes) with text-align center
+- **`Layout.Header`** — Page header with title, breadcrumbs, actions
+- **`Layout.Footer`** — Footer bar, typically for actions
+- **`Layout.Toolbar`** — Horizontal bar with space-between layout
+- **`Layout.Panel`** — Side panel with modes: default, sticky, overlay, dialog
+- **`Layout.PanelHeader`** — Header for panels with close button
+- **`Layout.Pane`** — Inline resizable section
+- **`Layout.Flex`** — Scrollable flex container
+- **`Layout.Grid`** — Scrollable grid container
+- **`Layout.Block`** — Simple block container
 
 ## Common Props
 

package/docs/RenderCache.md

@@ -15,6 +15,11 @@ RenderCache is a performance optimization component that caches rendered React e
 
 ### Properties
 
+- **`items`** `T[]` — Array of items to render
+- **`renderKeys`** `Array<string | number>` — Array of keys that should trigger re-render. Only items with keys in this array will be re-rendered
+- **`getKey`** `(item: T) => string | number` — Function that extracts a unique key from each item
+- **`children`** `(item: T) => ReactElement` — Render function that takes an item and returns a React element
+
 ### Property Details
 
 - **items**: Array of items to render

package/docs/Result.md

@@ -22,7 +22,14 @@ Use when important operations need to inform the user to process the results and
 
 ### Compact
 
-## API
+## Properties
+
+- **`status`** `'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500` (default: `'info'`) — Result status, determines the icon and color from ready-made templates
+- **`title`** `ReactNode` — The title of the result
+- **`subtitle`** `ReactNode` — Subtitle of the result component
+- **`icon`** `ReactNode` — Custom icon element. Don't use together with `status`
+- **`isCompact`** `boolean` — Whether the result component has a compact presentation
+- **`children`** `ReactNode` — Additional block content, e.g. a set of action buttons
 
 ## Differences from Ant Design
 

package/docs/components/Block.md

@@ -0,0 +1,33 @@
+# Block
+
+A simple block-level container. The most basic layout primitive.
+
+## When to Use
+
+- Wrapping content in a block display context
+- Base layout when you need `display: block` without extra semantics
+- Generic container for styling with style props
+
+## Properties
+
+No component-specific props. Use style props directly.
+
+### Style Defaults
+
+- `display` — `block`
+
+### Base Properties
+
+Supports [Base properties](../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Block>
+  <Text>Content in a block container</Text>
+</Block>
+
+<Block padding="1x" fill="#surface">
+  Styled block with padding and background
+</Block>
+```

package/docs/components/CollectionItem.md

@@ -47,10 +47,8 @@ const items = [1, 2, 3]; // Don't do this!
 
 ## Item Requirements
 
-| Property | Required | Type | Purpose |
-|----------|----------|------|---------|
-| `id` or `key` | ✅ **Required** | `string \| number` | Unique identifier - **critical for selection callbacks** |
-| `textValue` | ⚠️ Recommended | `string` | For filtering & accessibility |
+- **`id` or `key`** `string | number` — Unique identifier - **critical for selection callbacks** (✅ Required)
+- **`textValue`** `string` — For filtering & accessibility (⚠️ Recommended)
 
 **Without `id`/`key`:** React Aria falls back to using order-based keys (e.g., `"0"`, `"1"`), which breaks selection functionality in select components as these values are meaningless for identifying specific items.
 
@@ -265,22 +263,18 @@ const items: User[] = [
 
 ## Quick Reference
 
-| Approach | Key Prop | Source |
-|----------|----------|--------|
-| Static JSX | ✅ Required | Hardcoded value |
-| Data-driven (`items`) | ✅ Required | Pass `item.key` or `item.id` |
-| Using `.map()` | ✅ Required | Pass `item.key` or `item.id` |
-
-| Component | Selection | Search |
-|-----------|-----------|--------|
-| ListBox | Single/Multiple | ❌ |
-| FilterListBox | Single/Multiple | ✅ |
-| Select | Single | ❌ |
-| ComboBox | Single | ✅ |
-| FilterPicker | Single/Multiple | ✅ |
-| Picker | Single/Multiple | ❌ |
-| Menu | Single action | ❌ |
-| CommandMenu | Single action | ✅ |
+- **Static JSX** — Key Prop: ✅ Required; Source: Hardcoded value
+- **Data-driven (`items`)** — Key Prop: ✅ Required; Source: Pass `item.key` or `item.id`
+- **Using `.map()`** — Key Prop: ✅ Required; Source: Pass `item.key` or `item.id`
+
+- **ListBox** — Selection: Single/Multiple; Search: ❌
+- **FilterListBox** — Selection: Single/Multiple; Search: ✅
+- **Select** — Selection: Single; Search: ❌
+- **ComboBox** — Selection: Single; Search: ✅
+- **FilterPicker** — Selection: Single/Multiple; Search: ✅
+- **Picker** — Selection: Single/Multiple; Search: ❌
+- **Menu** — Selection: Single action; Search: ❌
+- **CommandMenu** — Selection: Single action; Search: ✅
 
 ## Essential Rules
 

package/docs/components/GridProvider.md

@@ -0,0 +1,38 @@
+# GridProvider
+
+Provides CSS custom properties for responsive grid column calculations. Children can use `$column-width` for precise column sizing.
+
+## When to Use
+
+- Responsive grid layouts with consistent column sizing
+- Layouts that need to calculate column widths based on container size
+- Grid systems with configurable column counts
+
+## Properties
+
+- **`columns`** `number` (default: `2`) — Number of grid columns
+- **`gap`** `Styles['gap']` (default: `'0'`) — Gap between columns
+- **`width`** `Styles['width']` — Forced container width (bypasses auto-detection)
+- **`initialWidth`** `Styles['width']` — Initial width before resize observer kicks in
+
+### CSS Custom Properties Provided
+
+- `--grid-width` — Total grid width
+- `--columns-amount` — Number of columns
+- `--column-gap` — Gap between columns
+- `--column-width` — Calculated width per column
+
+### Style Defaults
+
+- `display` — `contents`
+
+## Examples
+
+```jsx
+<GridProvider columns={12} gap="1x">
+  <Grid columns="repeat(12, $column-width)">
+    <Block gridColumn="span 6">Half</Block>
+    <Block gridColumn="span 6">Half</Block>
+  </Grid>
+</GridProvider>
+```