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

package/docs/components/actions/Menu.md

@@ -43,7 +43,7 @@ A versatile dropdown menu component that displays a list of actions or options.
 
 ### Base Properties
 
-Supports [Base properties](/BaseProperties)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -84,53 +84,41 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| sections | `boolean` | Applied when menu contains sections |
-| footer | `boolean` | Applied when footer prop is provided |
-| header | `boolean` | Applied when header prop is provided |
-| popover | `boolean` | Applied when menu is displayed as popover |
+- `sections` `boolean` — Applied when menu contains sections
+- `footer` `boolean` — Applied when footer prop is provided
+- `header` `boolean` — Applied when header prop is provided
+- `popover` `boolean` — Applied when menu is displayed as popover
 
 ## Menu Properties
 
 ### Collection Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| items | `Iterable<T>` | - | Item objects for dynamic collections |
-| children | `ReactNode` | - | Static menu items and sections |
+- **`items`** `Iterable<T>` — Item objects for dynamic collections
+- **`children`** `ReactNode` — Static menu items and sections
 
 ### Selection Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| selectionMode | `'single' \| 'multiple'` | `'none'` | Type of selection allowed |
-| selectedKeys | `string[]` | - | Currently selected keys (controlled) |
-| defaultSelectedKeys | `string[]` | - | Initially selected keys (uncontrolled) |
-| onSelectionChange | `(keys: string[]) => void` | - | Handler for selection changes |
-| selectionIcon | `'checkbox' \| 'radio'` | - | Type of selection indicator |
+- **`selectionMode`** `'single' \| 'multiple'` (default: `'none'`) — Type of selection allowed
+- **`selectedKeys`** `string[]` — Currently selected keys (controlled)
+- **`defaultSelectedKeys`** `string[]` — Initially selected keys (uncontrolled)
+- **`onSelectionChange`** `(keys: string[]) => void` — Handler for selection changes
+- **`selectionIcon`** `'checkbox' \| 'radio'` — Type of selection indicator
 
 ### State Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| disabledKeys | `Iterable<Key>` | - | Keys of disabled items |
-| autoFocus | `boolean \| FocusStrategy` | - | Focus behavior when menu opens |
-| shouldFocusWrap | `boolean` | - | Whether keyboard navigation wraps |
+- **`disabledKeys`** `Iterable<Key>` — Keys of disabled items
+- **`autoFocus`** `boolean \| FocusStrategy` — Focus behavior when menu opens
+- **`shouldFocusWrap`** `boolean` — Whether keyboard navigation wraps
 
 ### Event Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| onAction | `(key: Key) => void` | - | Handler for item activation |
-| onClose | `() => void` | - | Handler for menu close requests |
+- **`onAction`** `(key: Key) => void` — Handler for item activation
+- **`onClose`** `() => void` — Handler for menu close requests
 
 ### Content Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| header | `ReactNode` | - | Optional header content (deprecated) |
-| footer | `ReactNode` | - | Optional footer content |
+- **`header`** `ReactNode` — Optional header content (deprecated)
+- **`footer`** `ReactNode` — Optional footer content
 
 ## Sub-components
 
@@ -142,29 +130,25 @@ Individual menu items. Each item is rendered using [Item](../content/Item.md) an
 
 For detailed information about all available item properties, see [Item documentation](../content/Item.md). Key properties include:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| key | `Key` | Unique identifier for the item (required) |
-| children | `ReactNode` | The main content/label for the menu item |
-| icon | `ReactNode` | Icon displayed before the content |
-| rightIcon | `ReactNode` | Icon displayed after the content |
-| description | `ReactNode` | Secondary text below the main content |
-| descriptionPlacement | `'inline' \| 'block'` | How the description is positioned |
-| prefix | `ReactNode` | Content before the main text |
-| suffix | `ReactNode` | Content after the main text |
-| hotkeys | `string` | Keyboard shortcut that triggers this item |
-| tooltip | `string \| boolean \| object` | Tooltip configuration |
-| isDisabled | `boolean` | Whether the item is disabled |
-| styles | `Styles` | Custom styling for the item |
-| qa | `string` | QA identifier for testing |
+- **`key`** `Key` — Unique identifier for the item (required)
+- **`children`** `ReactNode` — The main content/label for the menu item
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`descriptionPlacement`** `'inline' \| 'block'` — How the description is positioned
+- **`prefix`** `ReactNode` — Content before the main text
+- **`suffix`** `ReactNode` — Content after the main text
+- **`hotkeys`** `string` — Keyboard shortcut that triggers this item
+- **`tooltip`** `string \| boolean \| object` — Tooltip configuration
+- **`isDisabled`** `boolean` — Whether the item is disabled
+- **`styles`** `Styles` — Custom styling for the item
+- **`qa`** `string` — QA identifier for testing
 
 #### Menu-specific Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| textValue | `string` | - | Text for typeahead search |
-| wrapper | `(item: ReactElement) => ReactElement` | - | Function to wrap the item |
-| onAction | `() => void` | - | Callback fired when item is activated |
+- **`textValue`** `string` — Text for typeahead search
+- **`wrapper`** `(item: ReactElement) => ReactElement` — Function to wrap the item
+- **`onAction`** `() => void` — Callback fired when item is activated
 
 #### Example with Rich Items
 
@@ -191,37 +175,29 @@ For detailed information about all available item properties, see [Item document
 
 ## Menu.Section Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| key | `Key` | - | Unique identifier for the section |
-| title | `ReactNode` | - | Section heading text |
-| children | `ReactNode` | - | Menu items within the section |
-| items | `Iterable<T>` | - | Dynamic items for the section |
+- **`key`** `Key` — Unique identifier for the section
+- **`title`** `ReactNode` — Section heading text
+- **`children`** `ReactNode` — Menu items within the section
+- **`items`** `Iterable<T>` — Dynamic items for the section
 
 ### Menu.Section Styling Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| aria-label | `string` | - | Accessibility label for sections without titles |
+- **`aria-label`** `string` — Accessibility label for sections without titles
 
 ## Menu.SubMenuTrigger Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| children | `[ReactNode, ReactElement]` | - | Must be exactly two elements: trigger (Menu.Item) and submenu (Menu) |
-| disabled | `boolean` | `false` | Whether the submenu trigger is disabled |
-| onAction | `(key: Key) => void` | - | Callback that bubbles onAction events from the submenu |
-| autoFocus | `boolean \| 'first' \| 'last'` | `'first'` | Whether and how the submenu should receive focus on open |
+- **`children`** `[ReactNode, ReactElement]` — Must be exactly two elements: trigger (Menu.Item) and submenu (Menu)
+- **`disabled`** `boolean` (default: `false`) — Whether the submenu trigger is disabled
+- **`onAction`** `(key: Key) => void` — Callback that bubbles onAction events from the submenu
+- **`autoFocus`** `boolean \| 'first' \| 'last'` (default: `'first'`) — Whether and how the submenu should receive focus on open
 
 ### Menu.SubMenuTrigger Positioning Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| placement | `Placement` | `'right start'` | Placement of the submenu relative to trigger |
-| offset | `number` | `0` | Distance between trigger and submenu |
-| crossOffset | `number` | `0` | Cross-axis offset for submenu positioning |
-| shouldFlip | `boolean` | `true` | Whether submenu should flip when it doesn't fit |
-| containerPadding | `number` | `8` | Padding from viewport edges |
+- **`placement`** `Placement` (default: `'right start'`) — Placement of the submenu relative to trigger
+- **`offset`** `number` (default: `0`) — Distance between trigger and submenu
+- **`crossOffset`** `number` (default: `0`) — Cross-axis offset for submenu positioning
+- **`shouldFlip`** `boolean` (default: `true`) — Whether submenu should flip when it doesn't fit
+- **`containerPadding`** `number` (default: `8`) — Padding from viewport edges
 
 ## Selection Modes
 

package/docs/components/actions/MenuTrigger.md

@@ -0,0 +1,47 @@
+# MenuTrigger
+
+Wraps a trigger element and a `Menu` to create a dropdown menu. Positions the menu relative to the trigger.
+
+## When to Use
+
+- Dropdown menus from buttons
+- Context menus attached to elements
+- Any menu that opens from a trigger element
+
+## Properties
+
+- **`trigger`** `'press' | 'longPress'` (default: `'press'`) — How the menu is opened
+- **`placement`** `Placement` (default: `'bottom start'`) — Menu position relative to trigger
+- **`closeOnSelect`** `boolean` — Close menu when an item is selected
+- **`isDisabled`** `boolean` — Disable the trigger
+- **`shouldFlip`** `boolean` (default: `true`) — Flip menu position when overflowing viewport
+- **`offset`** `number` (default: `8`) — Distance from trigger in pixels
+- **`crossOffset`** `number` (default: `0`) — Cross-axis offset in pixels
+
+Extends React Aria `AriaMenuTriggerProps` and `PositionProps`.
+
+## Examples
+
+### Basic dropdown
+
+```jsx
+<MenuTrigger>
+  <Button>Open Menu</Button>
+  <Menu onAction={(key) => console.log(key)}>
+    <Menu.Item key="edit">Edit</Menu.Item>
+    <Menu.Item key="delete">Delete</Menu.Item>
+  </Menu>
+</MenuTrigger>
+```
+
+### Long press trigger
+
+```jsx
+<MenuTrigger trigger="longPress">
+  <Button>Long Press Me</Button>
+  <Menu>
+    <Menu.Item key="option1">Option 1</Menu.Item>
+    <Menu.Item key="option2">Option 2</Menu.Item>
+  </Menu>
+</MenuTrigger>
+```

package/docs/components/actions/SubMenuTrigger.md

@@ -0,0 +1,38 @@
+# SubMenuTrigger
+
+Wraps a `Menu.Item` and a nested `Menu` to create hierarchical menus. Opens on hover or keyboard navigation (ArrowRight).
+
+## When to Use
+
+- Nested menu items
+- Hierarchical menu structures
+- Menus with sub-categories
+
+## Properties
+
+- **`placement`** `Placement` (default: `'right top'`) — Sub-menu position relative to trigger
+- **`offset`** `number` (default: `4`) — Distance from trigger in pixels
+- **`crossOffset`** `number` (default: `-5`) — Cross-axis offset in pixels
+- **`shouldFlip`** `boolean` (default: `true`) — Flip when overflowing viewport
+- **`isDisabled`** `boolean` — Disable the trigger
+- **`onAction`** `(key: Key) => void` — Callback when a sub-menu item is selected
+- **`autoFocus`** `boolean | 'first' | 'last'` (default: `'first'`) — Focus behavior when sub-menu opens
+
+Extends React Aria `AriaMenuTriggerProps`.
+
+## Examples
+
+```jsx
+<Menu>
+  <Menu.Item key="edit">Edit</Menu.Item>
+  <SubMenuTrigger>
+    <Menu.Item key="more">More Options</Menu.Item>
+    <Menu>
+      <Menu.Item key="copy">Copy</Menu.Item>
+      <Menu.Item key="move">Move</Menu.Item>
+      <Menu.Item key="archive">Archive</Menu.Item>
+    </Menu>
+  </SubMenuTrigger>
+  <Menu.Item key="delete">Delete</Menu.Item>
+</Menu>
+```

package/docs/components/actions/use-anchored-menu.md

@@ -176,14 +176,12 @@ The menu content and behavior are defined in `defaultMenuProps`, eliminating the
 
 ## Comparison with Related Hooks
 
-| Feature | `useAnchoredMenu` | `useContextMenu` |
-|---------|-------------------|------------------|
-| **Positioning** | Element-anchored | Cursor coordinates |
-| **Trigger** | Manual (programmatic) | Right-click (automatic) |
-| **Event Binding** | Manual event handling | Automatic `onContextMenu` |
-| **Use Cases** | Dropdown menus, action buttons | Context menus, right-click actions |
-| **Default Placement** | `"bottom start"` | `"bottom start"` |
-| **Setup Complexity** | Manual open calls | Minimal (auto-binding) |
+- **`Positioning`** — useAnchoredMenu: Element-anchored; useContextMenu: Cursor coordinates
+- **`Trigger`** — useAnchoredMenu: Manual (programmatic); useContextMenu: Right-click (automatic)
+- **`Event Binding`** — useAnchoredMenu: Manual event handling; useContextMenu: Automatic `onContextMenu`
+- **`Use Cases`** — useAnchoredMenu: Dropdown menus, action buttons; useContextMenu: Context menus, right-click actions
+- **`Default Placement`** — Both: `"bottom start"`
+- **`Setup Complexity`** — useAnchoredMenu: Manual open calls; useContextMenu: Minimal (auto-binding)
 
 ## Implementation Notes
 

package/docs/components/actions/use-context-menu.md

@@ -148,14 +148,12 @@ function FileItem({ file }) {
 
 ## Comparison with Related Hooks
 
-| Feature | `useContextMenu` | `useAnchoredMenu` |
-|---------|------------------|-------------------|
-| **Positioning** | Cursor coordinates or element center | Element-anchored |
-| **Trigger** | Right-click (automatic) + programmatic | Manual (button click) |
-| **Event Binding** | Automatic `onContextMenu` | Manual event handling |
-| **Use Cases** | Context menus, right-click actions, toolbar dropdowns | Dropdown menus, action buttons |
-| **Default Placement** | `"bottom start"` | `"bottom start"` |
-| **Setup Complexity** | Minimal (auto-binding) | Manual event handling |
+- **`Positioning`** — useContextMenu: Cursor coordinates or element center; useAnchoredMenu: Element-anchored
+- **`Trigger`** — useContextMenu: Right-click (automatic) + programmatic; useAnchoredMenu: Manual (button click)
+- **`Event Binding`** — useContextMenu: Automatic `onContextMenu`; useAnchoredMenu: Manual event handling
+- **`Use Cases`** — useContextMenu: Context menus, right-click actions, toolbar dropdowns; useAnchoredMenu: Dropdown menus, action buttons
+- **`Default Placement`** — Both: `"bottom start"`
+- **`Setup Complexity`** — useContextMenu: Minimal (auto-binding); useAnchoredMenu: Manual event handling
 
 ## Implementation Notes
 

package/docs/components/content/ActiveZone.md

@@ -0,0 +1,37 @@
+# ActiveZone
+
+A focusable, clickable zone with hover and focus states. Used for making non-button elements interactive.
+
+## When to Use
+
+- Clickable cards or list items
+- Custom interactive regions
+- Wrapping content that should respond to click/hover/focus
+
+## Properties
+
+- **`label`** `string` — Accessible label for screen readers
+- **`onClick`** `MouseEventHandler` — Click handler
+- **`isDisabled`** `boolean` — Disables interaction, reduces opacity
+
+### Style Defaults
+
+- `display` — `inline-grid`
+- `position` — `relative`
+- `opacity` — `1` (switches to `0.4` when disabled)
+- `transition` — `theme`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<ActiveZone label="Open details" onClick={() => openDetails()}>
+  <Card>
+    <Title level={4}>Clickable Card</Title>
+    <Paragraph>This whole card is clickable</Paragraph>
+  </Card>
+</ActiveZone>
+```

package/docs/components/content/Alert.md

@@ -0,0 +1,40 @@
+# Alert
+
+An alert message with theme variants. Used for announcements, warnings, and informational messages.
+
+## When to Use
+
+- Form validation messages
+- Success/error/warning notifications
+- Informational banners
+
+## Properties
+
+- **`theme`** `'note' | 'success' | 'danger' | 'warning' | 'disabled'` (default: `'note'`) — Visual theme
+- **`type`** — Deprecated, use `theme` instead
+- **`shape`** `'card' | 'sharp'` (default: `'card'`) — `card` shows border radius and border; `sharp` removes both
+
+### Style Defaults
+
+- `display` — `block`
+- `flow` — `column`
+- `padding` — `1.5x`
+- `preset` — `t3`
+- `radius` — `1cr` (switches to `0` when `shape="sharp"`)
+- `color` — `#dark-02`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Alert theme="note">Informational message</Alert>
+
+<Alert theme="success">Operation completed successfully</Alert>
+
+<Alert theme="danger">Something went wrong</Alert>
+
+<Alert theme="warning" shape="sharp">Warning with sharp corners</Alert>
+```

package/docs/components/content/Avatar.md

@@ -0,0 +1,37 @@
+# Avatar
+
+A circular avatar for user profiles. Displays initials, icons, or images.
+
+## When to Use
+
+- User profile pictures
+- User lists and comments
+- Account indicators
+
+## Properties
+
+- **`size`** `string` (default: `'4x'`) — Avatar size (width and height)
+- **`icon`** `ReactNode` — Icon to display
+
+### Style Defaults
+
+- `display` — `grid`
+- `fill` — `#primary`
+- `color` — `#white`
+- `radius` — `round`
+- `placeContent` — `center`
+- `fontWeight` — `500`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Avatar>JD</Avatar>
+
+<Avatar size="6x">AB</Avatar>
+
+<Avatar icon={<IconUser />} />
+```

package/docs/components/content/Badge.md

@@ -23,6 +23,13 @@ Badges are small, circular indicators that display numerical counts or short sta
 
 ### Properties
 
+- **`children`** `ReactNode` — Badge content (typically a number or short text)
+- **`icon`** `ReactNode` — Icon to display before the badge content
+- **`rightIcon`** `ReactNode` — Icon to display after the badge content
+- **`theme`** `'special' | 'danger' | 'success' | 'warning' | 'note' | 'disabled'` (default: `special`) — Visual theme of the badge
+- **`type`** `string` — Deprecated: Use theme instead
+- **`size`** `string` (default: `inline`) — Size of the badge
+
 ### Base Properties
 
 Badge extends from `Item` component and supports all base design system properties including:

package/docs/components/content/Card.md

@@ -0,0 +1,40 @@
+# Card
+
+A container with rounded corners, border, and padding. Renders as a `<div role="region">`.
+
+## When to Use
+
+- Grouping related information
+- Content containers in dashboards
+- Highlighting standalone content blocks
+
+## Properties
+
+No component-specific props. Use style props directly.
+
+### Style Defaults
+
+- `display` — `block`
+- `flow` — `column`
+- `radius` — `(1cr + 1bw)`
+- `fill` — `#white`
+- `border` — `#border`
+- `padding` — `1.5x`
+- `preset` — `t3`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Card>
+  <Title level={3}>Card Title</Title>
+  <Paragraph>Card content goes here.</Paragraph>
+</Card>
+
+<Card padding="2x" fill="#surface">
+  Styled card with custom padding and background
+</Card>
+```

package/docs/components/content/Content.md

@@ -0,0 +1,44 @@
+# Content
+
+A scrollable content section for page layouts. Renders as `<section>` and is designed to work with `Layout`.
+
+## When to Use
+
+- Main content area in app layouts
+- Scrollable body sections
+- Content that flows with `Layout` header/footer
+
+## Properties
+
+No component-specific props. Use style props directly.
+
+### Style Defaults
+
+- `display` — `block`
+- `flow` — `column`
+- `gap` — `2x`
+- `preset` — `p3`
+- `color` — `#dark-02`
+- `overflow` — `auto`
+- `scrollbar` — `styled`
+- `gridArea` — `content`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Layout>
+  <Layout.Header>
+    <Title level={3}>Page Title</Title>
+  </Layout.Header>
+  <Layout.Content>
+    <Paragraph>Main page content goes here.</Paragraph>
+  </Layout.Content>
+  <Layout.Footer>
+    <Text>Footer</Text>
+  </Layout.Footer>
+</Layout>
+```

package/docs/components/content/CopyPasteBlock.md

@@ -0,0 +1,36 @@
+# CopyPasteBlock
+
+A block that displays a value with copy-to-clipboard functionality. Supports paste via click/focus.
+
+## When to Use
+
+- API keys or tokens display
+- One-time codes or passwords
+- Values users need to copy or paste
+
+## Properties
+
+- **`title`** `string` — Label for the block
+- **`value`** `string` (default: `''`) — The value to display and copy
+- **`placeholder`** `ReactNode` — Placeholder when value is empty
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Block size
+
+### Style Defaults
+
+- `fill` — `#dark-bg`
+- `radius` — `1r`
+- `cursor` — pointer
+- `preset` — `t3` (switches to `t2` when `size="large"`)
+- `height` — `5x` (`4x` for small, `6x` for large)
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<CopyPasteBlock title="API Key" value={apiKey} />
+
+<CopyPasteBlock title="Token" value={token} size="small" />
+```

package/docs/components/content/CopySnippet.md

@@ -0,0 +1,43 @@
+# CopySnippet
+
+A code block with copy-to-clipboard functionality and syntax highlighting. Extends `Card`.
+
+## When to Use
+
+- Documentation code examples
+- API response displays
+- Sharing code snippets with copy functionality
+
+## Properties
+
+- **`code`** `string` (default: `''`) — The code to display
+- **`language`** `string` (default: `'javascript'`) — Syntax highlighting language
+- **`title`** `string` (default: `'Code example'`) — Accessible title
+- **`prefix`** `string` (default: `''`) — Prefix text (e.g. `$`)
+- **`multiline`** `boolean` — Allow multiline display
+- **`nowrap`** `boolean` — Prevent line wrapping
+- **`showTooltip`** `boolean` (default: `false`) — Show tooltip on hover
+
+### Style Defaults
+
+- `fill` — `#dark-bg`
+- `border` — `0`
+- `radius` — `1r`
+- `padding` — `0`
+- `preset` — `default`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<CopySnippet code="const x = 1;" language="javascript" />
+
+<CopySnippet
+  code={'{\n  "key": "value"\n}'}
+  language="json"
+  multiline
+/>
+```