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

package/docs/components/content/Disclosure.md

@@ -16,9 +16,17 @@ An accessible collapsible container that reveals or hides additional content. Bu
 
 ### Properties
 
+- **`isExpanded`** `boolean` — Controls expanded state in controlled mode
+- **`defaultExpanded`** `boolean` (default: `false`) — Initial expanded state in uncontrolled mode
+- **`onExpandedChange`** `(isExpanded: boolean) => void` — Callback fired when expanded state changes
+- **`isDisabled`** `boolean` (default: `false`) — Disables trigger interactions and force-closes the content
+- **`shape`** `'default' | 'card' | 'sharp'` (default: `default`) — Visual shape variant: default (no styling), card (border/radius), sharp (radius 0)
+- **`transitionDuration`** `number` — Duration for DisplayTransition animation in milliseconds. When undefined, uses default CSS transition timing
+- **`children`** `ReactNode | ((state: DisclosureStateContext) => ReactNode)` — Disclosure.Trigger and Disclosure.Content components
+
 ### Base Properties
 
-Supports [Base properties](/BaseProperties)
+Supports [Base properties](../../BaseProperties.md)
 
 ## Compound Components
 
@@ -64,18 +72,14 @@ Direct style application without using the `styles` prop: `width`, `height`, `pa
 
 The `mods` property accepts the following modifiers:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| `expanded` | `boolean` | True when the disclosure content is visible |
-| `disabled` | `boolean` | True when interactions are disabled |
-| `shape` | `string` | The current shape variant (`default`, `card`, `sharp`) |
+- **`expanded`** `boolean` — True when the disclosure content is visible
+- **`disabled`** `boolean` — True when interactions are disabled
+- **`shape`** `string` — The current shape variant (`default`, `card`, `sharp`)
 
 For `Disclosure.Content`, additional modifiers are available:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| `shown` | `boolean` | True when content is visible (controls height animation) |
-| `phase` | `string` | Transition phase (`enter`, `entered`, `exit`, `unmounted`) |
+- **`shown`** `boolean` — True when content is visible (controls height animation)
+- **`phase`** `string` — Transition phase (`enter`, `entered`, `exit`, `unmounted`)
 
 ## Variants
 

package/docs/components/content/Divider.md

@@ -0,0 +1,39 @@
+# Divider
+
+A horizontal separator. Can be a simple line or include centered text with lines on both sides.
+
+## When to Use
+
+- Separating sections of content
+- Dividing list items or form sections
+- "Or" or other labels between content blocks
+
+## Properties
+
+- **`children`** `ReactNode` — Optional text to display centered between two lines
+
+### Style Defaults
+
+- `display` — `block` (switches to `grid` when text is present)
+- `height` — `1bw` (switches to `auto` when text is present)
+- `fill` — `#border` (switches to `none` when text is present)
+- `preset` — `c1`
+- `gridArea` — `divider`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Divider />
+
+<Divider>or</Divider>
+
+<Flow gap="1x">
+  <Paragraph>Section 1</Paragraph>
+  <Divider />
+  <Paragraph>Section 2</Paragraph>
+</Flow>
+```

package/docs/components/content/Footer.md

@@ -0,0 +1,35 @@
+# Footer
+
+A footer section for page layouts. Designed to work with `Layout`.
+
+## When to Use
+
+- Page footers with links or copyright
+- Bottom bar of application layouts
+- Action bars at the bottom of modals or panels
+
+## Properties
+
+No component-specific props. Use style props directly.
+
+### Style Defaults
+
+- `display` — `block`
+- `flow` — `column`
+- `gridArea` — `footer`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Layout>
+  <Layout.Header>...</Layout.Header>
+  <Layout.Content>...</Layout.Content>
+  <Layout.Footer>
+    <Text.Minor>© 2024 Company</Text.Minor>
+  </Layout.Footer>
+</Layout>
+```

package/docs/components/content/Header.md

@@ -0,0 +1,35 @@
+# Header
+
+A header section for page layouts. Renders as `<header>` and is designed to work with `Layout`.
+
+## When to Use
+
+- Page headers with title and actions
+- Section headers in layouts
+- Top bar of application layouts
+
+## Properties
+
+No component-specific props. Use style props directly.
+
+### Style Defaults
+
+- `display` — `block`
+- `flow` — `column`
+- `gridArea` — `header`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Layout>
+  <Layout.Header>
+    <Title level={3}>Dashboard</Title>
+    <Button>Settings</Button>
+  </Layout.Header>
+  <Layout.Content>...</Layout.Content>
+</Layout>
+```

package/docs/components/content/HotKeys.md

@@ -23,7 +23,7 @@ A component that displays keyboard shortcuts in a visually appealing and accessi
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 

package/docs/components/content/Item.md

@@ -15,20 +15,33 @@ A foundational component that provides a standardized layout and styling for ite
 
 ## Properties
 
-- **`children`** `string` — The content inside the Item
+- **`children`** `ReactNode` — The content inside the Item
 - **`icon`** — Icon rendered before the content. Can be: ReactNode, `"checkbox"`, `true` (empty slot), or function `({ selected, loading, ...mods }) => ReactNode | true`
 - **`rightIcon`** — Icon rendered after the content. Can be: ReactNode, `true` (empty slot), or function `({ selected, loading, ...mods }) => ReactNode | true`
-- **`prefix`** — Element rendered before the content (after icon)
-- **`suffix`** — Element rendered after the content (before rightIcon)
-- **`description`** `string` — Description text displayed with the item
-- **`descriptionPlacement`** `'inline' | 'block'` (default: `inline`) — How the description is positioned relative to the main content
-- **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline'` (default: `medium`) — Item size
-- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `button`) — Shape of the item border radius
+- **`prefix`** `ReactNode` — Element rendered before the content (after icon)
+- **`suffix`** `ReactNode` — Element rendered after the content (before rightIcon)
+- **`description`** `ReactNode` — Description text displayed with the item
+- **`descriptionPlacement`** `'inline' | 'block'` (default: `inline`) — How the description is positioned relative to the main content. Defaults to `'block'` for `type="card"` and `type="header"`
+- **`type`** `'item' | 'header' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | 'card'` (default: `item`) — Visual style variant
+- **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `default`) — Semantic colour palette theme
+- **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number` (default: `medium`) — Item size. Accepts custom number or string values
+- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `button`) — Shape of the item border radius. Defaults to `'card'` for `type="card"`
+- **`isSelected`** `boolean` (default: `false`) — Marks the item as selected
+- **`isLoading`** `boolean` (default: `false`) — Show loading indicator and disable the item
+- **`loadingSlot`** `'auto' | 'icon' | 'rightIcon' | 'prefix' | 'suffix'` (default: `auto`) — Which slot the loading indicator replaces. `'auto'` prefers `icon` if present, then `rightIcon`, then falls back to `icon`
+- **`actions`** `ReactNode | true` — Inline action buttons displayed on the right side. Use `Item.Action` for consistent styling
 - **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown only on hover, focus, or focus-within
-- **`preserveActionsSpace`** `boolean` (default: `false`) — When true, preserves the actions width when hidden (only changes opacity). Only applies when autoHideActions is true.
-- **`level`** `'1' | '2' | '3' | '4' | '5' | '6'` (default: `3`) — Heading level for the Label element when type="header" or type="card". Changes the HTML tag to the corresponding heading (h1-h6).
+- **`preserveActionsSpace`** `boolean` (default: `false`) — When true, preserves the actions width when hidden (only changes opacity). Only applies when `autoHideActions` is true
+- **`disableActionsFocus`** `boolean` (default: `true`) — When true, action buttons are not focusable via keyboard
+- **`hotkeys`** `string` — Keyboard shortcut displayed as a badge (e.g. `"cmd+s"`)
+- **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip content. `true` enables auto tooltip on overflow, a string shows fixed tooltip text, an object supports advanced configuration `{ title, auto, placement, ...tooltipProps }`
+- **`highlight`** `string` — Text to highlight within the item label
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the Label element when `type="header"` or `type="card"`. Changes the HTML tag to the corresponding heading (h1-h6)
 
-Supports [Base properties](../../tasty/tasty.md)
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
 
 ## Styling
 
@@ -53,29 +66,27 @@ Direct style application without using the `styles` prop: `width`, `height`, `pa
 
 The `mods` property accepts the following modifiers:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| has-icon | `boolean` | Applied when icon prop is provided |
-| has-right-icon | `boolean` | Applied when rightIcon prop is provided |
-| has-prefix | `boolean` | Applied when prefix prop is provided |
-| has-suffix | `boolean` | Applied when suffix prop is provided |
-| has-label | `boolean` | Applied when children or labelProps are provided |
-| has-start-content | `boolean` | Applied when icon or prefix is present |
-| has-end-content | `boolean` | Applied when rightIcon, suffix, or actions are present |
-| has-description | `boolean` | Applied when description is provided |
-| has-description-block | `boolean` | Applied when description placement is "block" |
-| has-actions | `boolean` | Applied when actions prop is provided |
-| has-actions-content | `boolean` | Applied when actions have actual content (not just placeholder) |
-| auto-hide-actions | `boolean` | Applied when autoHideActions is true |
-| preserve-actions-space | `boolean` | Applied when preserveActionsSpace is true |
-| checkbox | `boolean` | Applied when using checkbox icon (icon="checkbox") |
-| selected | `boolean` | Applied when isSelected is true |
-| disabled | `boolean` | Applied when isDisabled is true or when loading |
-| loading | `boolean` | Applied when isLoading is true |
-| size | `string` | Applied based on size prop value (xsmall, small, medium, large, xlarge, inline) |
-| type | `string` | Applied based on type prop value (item, header, primary, secondary, outline, neutral, clear, link, card) |
-| theme | `string` | Applied based on theme prop value (default, danger, success, special, warning, note) |
-| shape | `string` | Applied based on shape prop value (card, button, sharp, pill) |
+- **`has-icon`** `boolean` — Applied when icon prop is provided
+- **`has-right-icon`** `boolean` — Applied when rightIcon prop is provided
+- **`has-prefix`** `boolean` — Applied when prefix prop is provided
+- **`has-suffix`** `boolean` — Applied when suffix prop is provided
+- **`has-label`** `boolean` — Applied when children or labelProps are provided
+- **`has-start-content`** `boolean` — Applied when icon or prefix is present
+- **`has-end-content`** `boolean` — Applied when rightIcon, suffix, or actions are present
+- **`has-description`** `boolean` — Applied when description is provided
+- **`description`** `'inline' | 'block' | 'none'` — Applied based on the resolved description placement
+- **`has-actions`** `boolean` — Applied when actions prop is provided
+- **`has-actions-content`** `boolean` — Applied when actions have actual content (not just placeholder)
+- **`auto-hide-actions`** `boolean` — Applied when autoHideActions is true
+- **`preserve-actions-space`** `boolean` — Applied when preserveActionsSpace is true
+- **`checkbox`** `boolean` — Applied when using checkbox icon (icon="checkbox")
+- **`selected`** `boolean` — Applied when isSelected is true
+- **`disabled`** `boolean` — Applied when isDisabled is true or when loading
+- **`loading`** `boolean` — Applied when isLoading is true
+- **`size`** `string` — Applied based on size prop value (xsmall, small, medium, large, xlarge, inline)
+- **`type`** `string` — Applied based on type prop value (item, header, primary, secondary, outline, neutral, clear, link, card)
+- **`theme`** `string` — Applied based on theme prop value (default, danger, success, special, warning, note)
+- **`shape`** `string` — Applied based on shape prop value (card, button, sharp, pill)
 
 ## Variants
 
@@ -474,8 +485,8 @@ By default, Item shows an auto tooltip when content overflows.
 ## Related Components
 
 - [ItemButton](../actions/ItemButton.md) - Interactive button built on Item
-- ItemAction - Action button component for inline actions (also available as `Item.Action`, `ItemButton.Action`, `Menu.Item.Action`, etc.)
-- ItemBadge - Badge component for displaying labels or counts (also available as `Item.Badge`)
+- [ItemAction](../actions/ItemAction.md) - Action button component for inline actions (also available as `Item.Action`, `ItemButton.Action`, `Menu.Item.Action`, etc.)
+- [ItemBadge](./ItemBadge.md) - Badge component for displaying labels or counts (also available as `Item.Badge`)
 - [Select](../fields/Select.md) - Dropdown selection component using Item
 - [ComboBox](../fields/ComboBox.md) - Searchable dropdown component using Item
 - [ListBox](../fields/ListBox.md) - List selection component using Item

package/docs/components/content/ItemBadge.md

@@ -0,0 +1,31 @@
+# ItemBadge
+
+A non-interactive badge indicator for list items. Similar to `ItemAction` but without press behavior (cursor: default).
+
+## When to Use
+
+- Status indicators in list items
+- Visual badges showing state (selected, loading)
+- Non-clickable indicators alongside `ItemAction` buttons
+
+## Properties
+
+- **`icon`** `ReactNode | 'checkbox'` — Icon or checkbox display
+- **`type`** `'primary' | 'secondary' | 'neutral' | 'clear'` (default: `'neutral'`) — Visual type. Inherits from parent context.
+- **`theme`** `'default' | 'danger' | 'success' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
+- **`isLoading`** `boolean` (default: `false`) — Show loading spinner
+- **`isSelected`** `boolean` (default: `false`) — Selected state (for checkbox)
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<ItemBadge icon="checkbox" isSelected />
+
+<ItemBadge icon={<IconCheck />} theme="success" />
+
+<ItemBadge isLoading />
+```

package/docs/components/content/ItemCard.md

@@ -14,9 +14,15 @@ A convenience wrapper around `Item type="card"` that provides a more natural car
 
 ### Properties
 
+- **`title`** `string` — Card heading
+- **`children`** `ReactNode` — Card body content
+- **`icon`** `ReactNode` — Icon rendered before the content
+- **`theme`** `string` (default: `default`) — Card theme
+- **`level`** `number` (default: `3`) — Heading level for the title (h1-h6)
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties