@cube-dev/ui-kit 0.166.0 → 0.167.0

package/docs/components/content/Item.md

@@ -50,6 +50,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the component.
 
 **Sub-elements:**
+
 - `Icon` - The main icon displayed before the content
 - `RightIcon` - The icon displayed after the content
 - `Label` - The main text content area
@@ -149,7 +150,7 @@ The `mods` property accepts the following modifiers:
 </Item>
 
 {/* Dynamic icon based on mods */}
-<Item 
+<Item
   icon={({ loading }) => loading ? <LoadingIcon /> : <IconUser />}
   rightIcon={({ selected }) => selected ? <CheckIcon /> : <IconSettings />}
 >
@@ -157,7 +158,7 @@ The `mods` property accepts the following modifiers:
 </Item>
 
 {/* Return true from function for empty slot */}
-<Item 
+<Item
   icon={({ selected }) => selected ? <CheckIcon /> : true}
 >
   Conditional icon
@@ -170,7 +171,7 @@ The `descriptionPlacement` prop controls where the description appears. It defau
 
 ```jsx
 {/* Inline description (default for most types) */}
-<Item 
+<Item
   icon={<IconFile />}
   description="Secondary description text"
   descriptionPlacement="inline"
@@ -179,7 +180,7 @@ The `descriptionPlacement` prop controls where the description appears. It defau
 </Item>
 
 {/* Block description */}
-<Item 
+<Item
   icon={<IconFile />}
   description="Description appears below the label"
   descriptionPlacement="block"
@@ -191,7 +192,7 @@ The `descriptionPlacement` prop controls where the description appears. It defau
 ### With Hotkeys
 
 ```jsx
-<Item 
+<Item
   as="button"
   hotkeys="cmd+s"
   onClick={() => console.log('Save triggered')}
@@ -276,7 +277,7 @@ Use `theme="current"` inside a container that paints its own text color. The fil
 The `isLoading` prop displays a loading indicator and disables the item. The `loadingSlot` prop controls which slot the loading icon replaces:
 
 ```jsx
-<Item 
+<Item
   icon={<IconSave />}
   isLoading={true}
   loadingSlot="icon"
@@ -284,7 +285,7 @@ The `isLoading` prop displays a loading indicator and disables the item. The `lo
   Saving...
 </Item>
 
-<Item 
+<Item
   icon={<IconFile />}
   rightIcon={<IconDownload />}
   isLoading={true}
@@ -301,7 +302,7 @@ When `loadingSlot="auto"` (default), the loading icon intelligently selects the
 Item supports inline actions that appear on the right side. Use the `Item.Action` compound component for consistent styling:
 
 ```jsx
-<Item 
+<Item
   icon={<IconFile />}
   actions={
     <>
@@ -323,7 +324,7 @@ By default, action buttons are focusable. Use `disableActionsFocus={true}` to pr
 Use `autoHideActions` to hide actions by default and reveal them on hover, focus, or focus-within:
 
 ```jsx
-<Item 
+<Item
   icon={<IconFile />}
   autoHideActions={true}
   actions={
@@ -344,7 +345,7 @@ This provides a cleaner interface while keeping actions easily accessible. By de
 Use `preserveActionsSpace` together with `autoHideActions` to keep the actions area visible (preserving its width) while only changing the opacity. This prevents content from shifting when actions appear:
 
 ```jsx
-<Item 
+<Item
   icon={<IconFile />}
   autoHideActions={true}
   preserveActionsSpace={true}
@@ -366,6 +367,7 @@ By default, Item shows an auto tooltip when content overflows.
 **Type:** `string | boolean | object`
 
 **Values:**
+
 - `true` (default) - Shows tooltip with item content when text overflows
 - `false` - Disables tooltip entirely
 - `string` - Shows tooltip with the specified text (always visible, not auto)
@@ -397,7 +399,7 @@ By default, Item shows an auto tooltip when content overflows.
 </Item>
 
 {/* Custom tooltip only on overflow */}
-<Item 
+<Item
   tooltip={{ title: 'Custom overflow tooltip', auto: true }}
   style={{ width: '200px' }}
 >
@@ -437,11 +439,13 @@ A disabled item keeps showing its tooltip — that is usually where the reason f
 ## Best Practices
 
 1. **Do**: Use clear, descriptive text for the main content
+
    ```jsx
    <Item icon={<IconUser />}>User Profile</Item>
    ```
 
 2. **Do**: Use descriptions to provide additional context
+
    ```jsx
    <Item icon={<IconFile />} description="Last edited 2 hours ago">
      Document.pdf
@@ -449,6 +453,7 @@ A disabled item keeps showing its tooltip — that is usually where the reason f
    ```
 
 3. **Do**: Use hotkeys for frequently accessed actions
+
    ```jsx
    <Item as="button" hotkeys="cmd+s" onPress={handleSave}>
      Save Document
@@ -456,8 +461,9 @@ A disabled item keeps showing its tooltip — that is usually where the reason f
    ```
 
 4. **Do**: Use `Item.Action` for inline actions
+
    ```jsx
-   <Item 
+   <Item
      icon={<IconFile />}
      actions={
        <>
@@ -471,9 +477,10 @@ A disabled item keeps showing its tooltip — that is usually where the reason f
    ```
 
 5. **Don't**: Add too many actions (limit to 2-3 for clarity)
+
    ```jsx
    {/* Avoid this - too many action buttons */}
-   <Item 
+   <Item
      actions={
        <>
          <Item.Action icon={<IconEdit />} aria-label="Edit" />
@@ -488,12 +495,13 @@ A disabled item keeps showing its tooltip — that is usually where the reason f
    ```
 
 6. **Don't**: Overcrowd the component with too many elements
+
    ```jsx
    {/* Avoid this - too many elements competing for attention */}
-   <Item 
-     icon={<IconA />} 
-     rightIcon={<IconB />} 
-     prefix="Pre" 
+   <Item
+     icon={<IconA />}
+     rightIcon={<IconB />}
+     prefix="Pre"
      suffix="Suf"
      description="Very long description with lots of details"
    >

package/docs/components/content/ItemCard.md

@@ -129,6 +129,7 @@ The `level` prop controls the semantic HTML heading tag (h1-h6) for the title. D
 ## Best Practices
 
 1. **Do**: Use meaningful titles and body content
+
    ```jsx
    <ItemCard title="Deployment Complete" icon={<IconCheck />} theme="success">
      Your changes are now live in production.

package/docs/components/content/Layout.md

@@ -37,6 +37,7 @@ Supports [Base properties](../../BaseProperties.md).
 Customizes the root Layout element.
 
 **Sub-elements:**
+
 - `Inner` - The inner content wrapper that adjusts based on panel sizes
 
 ### Style Properties
@@ -57,6 +58,7 @@ These properties allow direct style application without using the `styles` prop:
 - `$content-padding` — `1x` (inherited by all sub-components for consistent inner padding)
 
 **Inner element:**
+
 - `position` — `absolute`
 - `inset` — Adjusts based on registered panel sizes
 - `display` — `flex`
@@ -84,6 +86,7 @@ A horizontal bar typically placed at the top for navigation and actions.
 - **`children`** `ReactNode` — Content split between left and right
 
 **Sub-elements:**
+
 - No sub-elements, styles apply to container
 
 ---
@@ -114,6 +117,7 @@ A semantic page header with title, breadcrumbs, subtitle, and action areas.
 - **`onBack`** `() => void` — Callback for the back button. When provided, a back arrow button appears to the left of the title.
 
 **Sub-elements:**
+
 - `Back` - Back button container (visible when `onBack` is provided)
 - `Breadcrumbs` - Navigation path container
 - `Title` - Main heading element
@@ -139,12 +143,14 @@ Scrollable content area with automatic overflow handling and custom scrollbar st
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Scrollbar types:**
+
 - `default` - Browser default scrollbar
 - `thin` - Thin scrollbar (CSS native)
 - `tiny` - Custom hover-visible indicator (3px)
 - `none` - Hidden scrollbar (still scrollable)
 
 **Sub-elements:**
+
 - `Inner` - Scrollable inner container
 - `ScrollbarV` - Vertical scroll indicator (tiny mode)
 - `ScrollbarH` - Horizontal scroll indicator (tiny mode)
@@ -167,11 +173,13 @@ Horizontally centered content area with constrained width. Ideal for forms, arti
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Width constraints:**
+
 - Minimum: `40x` (320px at default gap)
 - Default: `100%`
 - Maximum: `120x` (960px at default gap)
 
 **Sub-elements:**
+
 - `Inner` - Constrained width inner container
 
 ---
@@ -192,10 +200,12 @@ Centered content area for both horizontal and vertical alignment. Extends `Layou
 - **`isGoldenRatio`** `boolean` (default: `false`) — Position content slightly above the geometric center using the golden ratio (~38.2% empty space above, ~61.8% below). Only applies while content fits inside the container; once content overflows, falls back to the default centered behavior.
 
 **Styling differences from Container:**
+
 - Content is centered both horizontally and vertically
 - Text is center-aligned by default
 
 **Sub-elements:**
+
 - `Inner` - Constrained width inner container with `text-align: center`
 
 ---
@@ -312,6 +322,7 @@ Resizable inline section within a layout. Unlike Layout.Panel (which is absolute
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Sub-elements:**
+
 - `Inner` - Scrollable inner container
 - `ScrollbarV` - Vertical scroll indicator (tiny mode)
 - `ScrollbarH` - Horizontal scroll indicator (tiny mode)
@@ -586,6 +597,7 @@ function StickyPanelExample() {
 ### Overlay Panel
 
 In `overlay` mode, a semi-transparent backdrop appears behind the panel. The panel is dismissed (when `isDismissable` is true, which is the default) when:
+
 - Clicking the backdrop overlay
 - Pressing Escape anywhere in the Layout
 - Moving focus to the main content area
@@ -848,4 +860,3 @@ Panel transitions are disabled during drag operations and initial mount to preve
 - [Layout Guide](../../ComplexLayout.md) - Patterns and examples for building layouts
 - [Dialog](../overlays/Dialog.md) - For modal panels
 - [Item](./Item.md) - Used by PanelHeader
-

package/docs/components/content/PrismCode.md

@@ -28,24 +28,19 @@ Supports [Base properties](../../BaseProperties.md).
 
 ## Theme
 
-Syntax colors are driven by a dedicated, scheme-aware palette of `code-*`
-tokens. Each token uses a different hue so token classes stay visually
-separable, and every token meets at least **WCAG AA (4.5:1)** contrast
-against `#surface` in light, dark, and high-contrast schemes (AAA in HC).
-
-| Token                | Hue            | Used for                                                       |
-| -------------------- | -------------- | -------------------------------------------------------------- |
-| `#code-comment`      | gray           | comments, prolog, doctype, cdata                               |
-| `#code-punctuation`  | muted pink     | operators, punctuation                                         |
-| `#code-keyword`      | pink           | keywords, booleans, constants, atrules, HTML/XML tag names (`font-weight: 500` on language keywords) |
-| `#code-string`       | primary purple | strings, characters, attribute values, URLs                    |
-| `#code-number`       | green          | numbers, numeric entities                                      |
-| `#code-function`     | pink           | functions, class names, regex, variables                       |
-| `#code-attribute`    | cyan           | attribute names, properties, selectors, built-ins, keys        |
-
-Diff insertion (`+`) and deletion (`-`) intentionally re-use the existing
-`#success-*` / `#danger-*` ramps — both the line background tint and the
-foreground color adapt to the active scheme.
+Syntax colors are driven by a dedicated, scheme-aware palette of `code-*` tokens. Each token uses a different hue so token classes stay visually separable, and every token meets at least **WCAG AA (4.5:1)** contrast against `#surface` in light, dark, and high-contrast schemes (AAA in HC).
+
+| Token | Hue | Used for |
+| --- | --- | --- |
+| `#code-comment` | gray | comments, prolog, doctype, cdata |
+| `#code-punctuation` | muted pink | operators, punctuation |
+| `#code-keyword` | pink | keywords, booleans, constants, atrules, HTML/XML tag names (`font-weight: 500` on language keywords) |
+| `#code-string` | primary purple | strings, characters, attribute values, URLs |
+| `#code-number` | green | numbers, numeric entities |
+| `#code-function` | pink | functions, class names, regex, variables |
+| `#code-attribute` | cyan | attribute names, properties, selectors, built-ins, keys |
+
+Diff insertion (`+`) and deletion (`-`) intentionally re-use the existing `#success-*` / `#danger-*` ramps — both the line background tint and the foreground color adapt to the active scheme.
 
 ## Examples
 

package/docs/components/content/Tag.md

@@ -58,6 +58,7 @@ Supports [Base properties](../../BaseProperties.md)
 Tags support multiple themes for different semantic meanings:
 
 Available themes:
+
 - **Default**: Neutral, for general categorization
 - **Warning**: Yellow/amber, caution or attention needed
 - **Note**: Violet, informational content
@@ -173,4 +174,3 @@ The Tag component now extends from `Item`, providing enhanced functionality:
 ```
 
 The `type` prop is deprecated in favor of `theme` for consistency with other components.
-

package/docs/components/content/TextItem.md

@@ -81,8 +81,8 @@ Highlight matching text within the content - useful for search results:
 Customize the appearance of highlighted text with `highlightStyles`:
 
 ```jsx
-<TextItem 
-  highlight="important" 
+<TextItem
+  highlight="important"
   highlightStyles={{ fill: '#purple.20', color: '#purple' }}
 >
   This important text has custom highlight styling
@@ -192,6 +192,7 @@ const searchTerm = 'app';
 ## Best Practices
 
 1. **Do**: Use for text that may exceed container width
+
    ```jsx
    <Block width="200px">
      <TextItem>Long filename-that-might-overflow.tsx</TextItem>
@@ -199,11 +200,13 @@ const searchTerm = 'app';
    ```
 
 2. **Do**: Provide meaningful highlight terms for search
+
    ```jsx
    <TextItem highlight={userSearchQuery}>{result.title}</TextItem>
    ```
 
 3. **Don't**: Use for multi-line text (this component enforces single-line with ellipsis)
+
    ```jsx
    {/* Use Text component instead for multi-line content */}
    <Text>Multi-line paragraph content...</Text>
@@ -220,4 +223,3 @@ const searchTerm = 'app';
 - Text - Base text component without overflow handling
 - [Item](./Item.md) - Interactive list item with similar overflow behavior
 - [TooltipProvider](../overlays/Tooltip.md) - Standalone tooltip wrapper
-