@cube-dev/ui-kit 0.0.0-canary-1f0dd2c → 0.0.0-canary-1d27aa0

package/docs/components/content/Item.md

@@ -50,7 +50,6 @@ 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
@@ -150,7 +149,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 />}
 >
@@ -158,7 +157,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
@@ -171,7 +170,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"
@@ -180,7 +179,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"
@@ -192,7 +191,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')}
@@ -277,7 +276,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"
@@ -285,7 +284,7 @@ The `isLoading` prop displays a loading indicator and disables the item. The `lo
   Saving...
 </Item>
 
-<Item
+<Item 
   icon={<IconFile />}
   rightIcon={<IconDownload />}
   isLoading={true}
@@ -302,7 +301,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={
     <>
@@ -324,7 +323,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={
@@ -345,7 +344,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}
@@ -367,7 +366,6 @@ 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)
@@ -399,7 +397,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' }}
 >
@@ -439,13 +437,11 @@ 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
@@ -453,7 +449,6 @@ 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
@@ -461,9 +456,8 @@ 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={
        <>
@@ -477,10 +471,9 @@ 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" />
@@ -495,13 +488,12 @@ 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,7 +129,6 @@ 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,7 +37,6 @@ 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
@@ -58,7 +57,6 @@ 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`
@@ -86,7 +84,6 @@ 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
 
 ---
@@ -117,7 +114,6 @@ 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
@@ -143,14 +139,12 @@ 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)
@@ -173,13 +167,11 @@ 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
 
 ---
@@ -200,12 +192,10 @@ 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`
 
 ---
@@ -322,7 +312,6 @@ 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)
@@ -597,7 +586,6 @@ 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
@@ -860,3 +848,4 @@ 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,19 +28,24 @@ 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,7 +58,6 @@ 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
@@ -174,3 +173,4 @@ 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,7 +192,6 @@ 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>
@@ -200,13 +199,11 @@ 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>
@@ -223,3 +220,4 @@ 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
+