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

package/docs/components/actions/Link.md

@@ -27,7 +27,6 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the component.
 
 Sub-elements:
-
 - `ButtonIcon` – wrapper around `icon` and `rightIcon` when used.
 
 ### Style Properties
@@ -70,7 +69,6 @@ These properties allow direct style application without using the `styles` prop:
 ```
 
 Notes:
-
 - Adds `target="_blank"` and `rel="noopener noreferrer"` automatically.
 - Cmd/Ctrl/Shift + click also opens in a new tab, like a native link.
 
@@ -103,13 +101,11 @@ Notes:
 ```
 
 Accepted object shape:
-
 ```ts
 { pathname?: string; search?: string; hash?: string }
 ```
 
 Notes:
-
 - `search` and `hash` are auto-prefixed with `?` and `#` if needed
 - `pathname` can be relative (e.g., `../parent`) or absolute (e.g., `/root`)
 - Works with `!` and `@` prefixes when passed as strings
@@ -128,7 +124,6 @@ Notes:
 ```
 
 Behavior:
-
 - Uses `navigate(delta)` from the navigation adapter with overload signature
 - The default adapter calls `window.history.go(delta)`
 
@@ -222,7 +217,6 @@ export function App() {
 ```
 
 Default adapter behavior:
-
 - String/object navigation uses `window.location.assign(href)`
 - History navigation uses `window.history.go(delta)`
 - `!` prefix opens resolved URLs in a new tab
@@ -236,10 +230,10 @@ Default adapter behavior:
 Control navigation behavior via the `navigationOptions` prop:
 
 ```jsx
-<Link
+<Link 
   to="/search"
-  navigationOptions={{
-    replace: true,
+  navigationOptions={{ 
+    replace: true, 
     state: { from: 'homepage' },
     relative: 'path',
     preventScrollReset: true
@@ -252,7 +246,7 @@ Control navigation behavior via the `navigationOptions` prop:
 ### Available options
 
 - `replace`: Replace current history entry instead of pushing a new one
-- `state`: Navigation state data (router-specific)
+- `state`: Navigation state data (router-specific)  
 - `relative`: How relative paths are resolved (`'route'` | `'path'`)
 - `preventScrollReset`: Prevent scroll reset on navigation
 
@@ -332,3 +326,4 @@ These options are passed to the router's `navigate` function and have no effect
 ## Related Components
 
 - [Button](./Button.md) – Action component with multiple visual styles, including `type="link"`.
+

package/docs/components/actions/Menu.md

@@ -62,7 +62,6 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root menu container element.
 
 **Sub-elements:**
-
 - `Header` - Optional header element at the top of the menu
 - `Divider` - Separator elements between sections
 
@@ -71,17 +70,14 @@ Customizes the root menu container element.
 Customizes individual menu items.
 
 **Sub-elements:**
-
 - `Icon` - Icon element within menu items
 - `Text` - Main text content of menu items
 - `Description` - Secondary text content for items with descriptions
-
 #### sectionStyles
 
 Customizes section container elements.
 
 **Sub-elements:**
-
 - `SectionHeading` - Section title/heading element
 
 #### sectionHeadingStyles
@@ -121,7 +117,6 @@ The `mods` property accepts the following modifiers you can override:
 - **`selectedKeys`** `string[]` — Currently selected keys (controlled)
 - **`defaultSelectedKeys`** `string[]` — Initially selected keys (uncontrolled)
 - **`onSelectionChange`** `(keys: string[]) => void` — Handler for selection changes
-
 ### State Properties
 
 - **`disabledKeys`** `Iterable<Key>` — Keys of disabled items
@@ -172,16 +167,16 @@ For detailed information about all available item properties, see [Item document
 
 ```jsx
 <Menu>
-  <Menu.Item
-    key="save"
+  <Menu.Item 
+    key="save" 
     icon={<IconSave />}
     hotkeys="cmd+s"
     description="Save the current document"
   >
     Save
   </Menu.Item>
-  <Menu.Item
-    key="export"
+  <Menu.Item 
+    key="export" 
     icon={<IconExport />}
     suffix="PDF"
     tooltip="Export as PDF file"
@@ -220,7 +215,6 @@ For detailed information about all available item properties, see [Item document
 ## Selection Modes
 
 ### None (Default)
-
 Items are not selectable and only trigger `onAction` when activated.
 
 ```jsx
@@ -231,7 +225,6 @@ Items are not selectable and only trigger `onAction` when activated.
 ```
 
 ### Single Selection
-
 Only one item can be selected at a time.
 
 ```jsx
@@ -242,7 +235,6 @@ Only one item can be selected at a time.
 ```
 
 ### Multiple Selection
-
 Multiple items can be selected simultaneously.
 
 ```jsx
@@ -317,8 +309,8 @@ const items = [
   <Menu.Item key="copy" tooltip="Copy selected text">
     Copy
   </Menu.Item>
-  <Menu.Item
-    key="paste"
+  <Menu.Item 
+    key="paste" 
     tooltip={{ title: "Paste from clipboard", placement: "left" }}
   >
     Paste
@@ -332,7 +324,7 @@ const items = [
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="copy">Copy</Menu.Item>
   <Menu.Item key="paste">Paste</Menu.Item>
-
+  
   <Menu.SubMenuTrigger>
     <Menu.Item key="share">Share</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
@@ -341,7 +333,7 @@ const items = [
       <Menu.Item key="share-sms">SMS</Menu.Item>
     </Menu>
   </Menu.SubMenuTrigger>
-
+  
   <Menu.Item key="delete">Delete</Menu.Item>
 </Menu>
 ```
@@ -351,13 +343,13 @@ const items = [
 ```jsx
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="new">New File</Menu.Item>
-
+  
   <Menu.SubMenuTrigger>
     <Menu.Item key="export">Export</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
       <Menu.Item key="export-pdf">Export as PDF</Menu.Item>
       <Menu.Item key="export-image">Export as Image</Menu.Item>
-
+      
       <Menu.SubMenuTrigger>
         <Menu.Item key="export-formats">More formats</Menu.Item>
         <Menu onAction={(key) => console.log(key)}>
@@ -376,7 +368,7 @@ const items = [
 ```jsx
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="copy">Copy</Menu.Item>
-
+  
   <Menu.SubMenuTrigger>
     <Menu.Item key="settings">Settings</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
@@ -426,14 +418,12 @@ const items = [
 ## Best Practices
 
 1. **Clear Labels**: Use descriptive, action-oriented labels
-
    ```jsx
    <Menu.Item key="save">Save Document</Menu.Item> // Good
    <Menu.Item key="save">Save</Menu.Item> // Less clear
    ```
 
 2. **Logical Grouping**: Group related actions using sections
-
    ```jsx
    <Menu.Section title="File Operations">
      <Menu.Item key="new">New</Menu.Item>
@@ -442,19 +432,16 @@ const items = [
    ```
 
 3. **Keyboard Shortcuts**: Include shortcuts for common actions
-
    ```jsx
    <Menu.Item key="copy" hotkeys="Ctrl+C">Copy</Menu.Item>
    ```
 
 4. **Appropriate Selection**: Choose the right selection mode
-
    - Use `selectionMode="none"` for action menus
    - Use `selectionMode="single"` for mutually exclusive options
    - Use `selectionMode="multiple"` for independent toggles
 
 5. **Disabled States**: Clearly indicate unavailable actions
-
    ```jsx
    <Menu disabledKeys={['paste']}>
      <Menu.Item key="paste">Paste</Menu.Item>

package/docs/components/actions/MenuTrigger.md

@@ -41,7 +41,10 @@ These properties allow direct style application without using the `styles` prop:
 
 ## Focus restoration
 
-When the menu closes, focus returns to the trigger — **unless the action that closed it moved focus somewhere else**. An item whose action opens a panel, a dialog or an inline editor just focuses that surface; a single `focus()` call from a mount effect is enough, and the menu leaves it alone:
+When the menu closes, focus returns to the trigger — **unless the action that
+closed it moved focus somewhere else**. An item whose action opens a panel, a
+dialog or an inline editor just focuses that surface; a single `focus()` call
+from a mount effect is enough, and the menu leaves it alone:
 
 ```jsx
 function Panel() {
@@ -67,9 +70,15 @@ function Panel() {
 </MenuTrigger>;
 ```
 
-Focusing the surface's own container rather than its first tabbable child matters when a header carries a close button — `<FocusScope autoFocus>` would land the user on ✕, with <kbd>Enter</kbd> already meaning "close the thing that just opened".
+Focusing the surface's own container rather than its first tabbable child
+matters when a header carries a close button — `<FocusScope autoFocus>` would
+land the user on ✕, with <kbd>Enter</kbd> already meaning "close the thing that
+just opened".
 
-`shouldRestoreFocus={false}` covers the remaining case: a surface that claims focus _later_ than the menu's restore — after an async load, an entry animation, or a `requestAnimationFrame`. Without it the trigger takes focus first and the user sees a flash.
+`shouldRestoreFocus={false}` covers the remaining case: a surface that claims
+focus *later* than the menu's restore — after an async load, an entry
+animation, or a `requestAnimationFrame`. Without it the trigger takes focus
+first and the user sees a flash.
 
 ```jsx
 <MenuTrigger shouldRestoreFocus={false}>

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

@@ -103,7 +103,7 @@ import { IconDotsVertical } from '@tabler/icons-react';
 
 function TabWithMultipleTriggers() {
   const menu = useAnchoredMenu(
-    Menu,
+    Menu, 
     {
       placement: 'top end',
     },
@@ -206,7 +206,7 @@ The hook positions the menu by:
 
 ---
 
-_Last updated: 2025-01-16_
+*Last updated: 2025-01-16* 
 
 ### Style Properties
 

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

@@ -83,7 +83,6 @@ The hook automatically binds `onContextMenu` events to the `targetRef` element:
 `useContextMenu` supports two positioning modes:
 
 1. **Coordinate-Based Positioning** (when event is provided):
-
    - Creates an **invisible anchor element** at click coordinates
    - Supports **collision detection** and automatic repositioning
    - **Clamps coordinates** to stay within the container bounds
@@ -123,7 +122,7 @@ function FileItem({ file }) {
   const { targetRef, rendered } = useContextMenu(
     Menu,
     { placement: 'bottom start' },     // trigger props
-    {
+    { 
       onAction: handleAction,
       children: (
         <>
@@ -163,7 +162,6 @@ function FileItem({ file }) {
 The hook calculates menu position differently based on whether an event is provided:
 
 **With Event (Coordinate-Based):**
-
 1. **Getting viewport coordinates** from the pointer event
 2. **Converting to container-relative coordinates** accounting for borders and scroll
 3. **Clamping to container bounds** to ensure the menu stays visible
@@ -171,7 +169,6 @@ The hook calculates menu position differently based on whether an event is provi
 5. **Delegating to MenuTrigger** for collision detection and final positioning
 
 **Without Event (Center-Based):**
-
 1. **Calculating element center** using `clientWidth/2` and `clientHeight/2`
 2. **Accounting for scroll offset** to position relative to content area
 3. **Clamping to container bounds** to ensure proper positioning
@@ -218,7 +215,7 @@ The `{rendered}` element contains the invisible anchor and MenuTrigger component
 
 ---
 
-_Last updated: 2025-01-16_
+*Last updated: 2025-01-16* 
 
 ### Style Properties
 

package/docs/components/content/Badge.md

@@ -56,7 +56,6 @@ Supports [Base properties](../../BaseProperties.md)
 Badges support multiple themes for different semantic meanings:
 
 Available themes:
-
 - **Special** (default): Purple background, highlighted features
 - **Warning**: Yellow/amber background, caution or attention needed
 - **Note**: Violet background, informational content
@@ -69,7 +68,6 @@ Available themes:
 Badges commonly display numerical counts:
 
 Best practices for numbers:
-
 - Use single digits for small counts (1-9)
 - Show exact numbers up to 99
 - Consider "99+" format for counts over 99
@@ -86,7 +84,6 @@ Best practices for numbers:
 Short text labels work well in badges:
 
 Guidelines for text badges:
-
 - Keep text to 2-4 characters maximum
 - Use uppercase for better readability
 - Common patterns: "NEW", "HOT", "BETA", "PRO"

package/docs/components/content/HotKeys.md

@@ -30,7 +30,6 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the component (Space component).
 
 **Sub-elements:**
-
 - None - The component uses Tag components for individual keys
 
 ### Style Properties
@@ -113,7 +112,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### With Description
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Command palette"
   aria-description="Opens the command palette for quick actions"
 >
@@ -124,7 +123,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Alternative Shortcuts
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Search"
   aria-description="Opens the search dialog"
 >
@@ -135,7 +134,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Complex Alternatives
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Quick actions"
   aria-description="Multiple ways to access quick actions menu"
 >
@@ -146,7 +145,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Function Keys
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Help functions"
   aria-description="Function keys for help, rename, and search"
 >
@@ -157,7 +156,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Arrow Keys
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Navigation"
   aria-description="Arrow keys for directional navigation"
 >
@@ -168,7 +167,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Special Keys
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Common actions"
   aria-description="Frequently used special keys"
 >
@@ -179,7 +178,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Platform-Specific Keys
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Copy"
   aria-description="Copy selected content to clipboard"
 >
@@ -190,7 +189,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### With Custom Styles
 
 ```jsx
-<HotKeys
+<HotKeys 
   aria-label="Styled shortcuts"
   aria-description="Custom styled keyboard shortcuts"
   styles={{
@@ -264,10 +263,9 @@ The HotKeys component is designed with comprehensive accessibility support:
 ## Best Practices
 
 1. **Provide meaningful labels**: Always use the `aria-label` prop to describe what the shortcuts do
-
    ```jsx
-   <HotKeys
-     aria-label="Search"
+   <HotKeys 
+     aria-label="Search" 
      aria-description="Opens the search dialog"
    >
      mod+k
@@ -275,16 +273,14 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 2. **Use platform-appropriate modifiers**: Use `mod` instead of `ctrl` for cross-platform shortcuts
-
    ```jsx
    <HotKeys aria-label="Search">mod+k</HotKeys> // Good: Works on both Mac and PC
    <HotKeys aria-label="Search">ctrl+k</HotKeys> // Limited: PC-specific
    ```
 
 3. **Group related alternatives**: Separate alternative shortcuts with commas
-
    ```jsx
-   <HotKeys
+   <HotKeys 
      aria-label="Search"
      aria-description="Opens search dialog"
    >
@@ -293,9 +289,8 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 4. **Provide descriptions for complex shortcuts**: Use the `aria-description` prop for clarity
-
    ```jsx
-   <HotKeys
+   <HotKeys 
      aria-label="Command palette"
      aria-description="Opens the command palette for quick actions"
    >
@@ -304,14 +299,12 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 5. **Use clear, recognizable keys**: Stick to standard key names
-
    ```jsx
    <HotKeys aria-label="Confirm">enter, space</HotKeys> // Good: Clear key names
    <HotKeys aria-label="Confirm">ret, spc</HotKeys> // Avoid: Unclear abbreviations
    ```
 
 6. **Keep combinations reasonable**: Avoid overly complex key combinations
-
    ```jsx
    <HotKeys aria-label="Command palette">mod+shift+p</HotKeys> // Good: Reasonable complexity
    <HotKeys aria-label="Command palette">mod+ctrl+shift+alt+p</HotKeys> // Avoid: Too complex
@@ -319,7 +312,7 @@ The HotKeys component is designed with comprehensive accessibility support:
 
 7. **Consider context**: Provide context about when and where shortcuts are available
    ```jsx
-   <HotKeys
+   <HotKeys 
      aria-label="Cancel"
      aria-description="Cancel current action and close dialog"
    >
@@ -349,4 +342,4 @@ This ensures users see familiar symbols regardless of their operating system.
 - Consider adding animation for key press feedback
 - Support for custom key symbol mappings
 - Integration with system accessibility preferences
-- Support for voice command alternatives
+- Support for voice command alternatives 

package/docs/components/content/InlineInput.md

@@ -87,15 +87,15 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property is automatically populated. Consumers can target these in their own `styles`:
 
-| Modifier | Type | Description |
-| --- | --- | --- |
-| editing | `boolean` | Currently in edit mode |
-| editable | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only |
-| focused | `boolean` | The component is focused — keyboard-focused on the display, **or** while editing. Always `false` when `keyboardActivation={false}` (the host owns the focus indication). |
-| disabled | `boolean` | `isDisabled` is `true` |
-| read-only | `boolean` | `isReadOnly` is `true` |
-| styled | `boolean` | `isStyled` is `true` |
-| empty | `boolean` | The committed value is empty |
+| Modifier   | Type      | Description                                                                       |
+| ---------- | --------- | --------------------------------------------------------------------------------- |
+| editing    | `boolean` | Currently in edit mode                                                            |
+| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only                 |
+| focused    | `boolean` | The component is focused — keyboard-focused on the display, **or** while editing. Always `false` when `keyboardActivation={false}` (the host owns the focus indication). |
+| disabled   | `boolean` | `isDisabled` is `true`                                                            |
+| read-only  | `boolean` | `isReadOnly` is `true`                                                            |
+| styled     | `boolean` | `isStyled` is `true`                                                              |
+| empty      | `boolean` | The committed value is empty                                                      |
 
 ## Examples
 
@@ -283,11 +283,11 @@ When leaving edit mode, focus is not restored automatically — the host is resp
 
 These look similar but fire under different conditions. Pick the one that matches your intent:
 
-| Event | Fires when | Typical use |
-| --- | --- | --- |
-| `onChange` | The committed value is **different** from the previous value | Updating state (controlled pattern) |
-| `onSubmit` | The user commits (Enter / blur / `ref.stopEditing(true)`) — always fires | Side effects (server save, toasts) |
-| `onCancel` | Escape, empty submit (when `allowEmpty=false`), or `ref.stopEditing(false)` | Reverting UI, cleanup |
+| Event       | Fires when                                                                | Typical use                              |
+| ----------- | ------------------------------------------------------------------------- | ---------------------------------------- |
+| `onChange`  | The committed value is **different** from the previous value             | Updating state (controlled pattern)      |
+| `onSubmit`  | The user commits (Enter / blur / `ref.stopEditing(true)`) — always fires | Side effects (server save, toasts)       |
+| `onCancel`  | Escape, empty submit (when `allowEmpty=false`), or `ref.stopEditing(false)` | Reverting UI, cleanup                    |
 
 ### Optimistic Display