@cube-dev/ui-kit 0.0.0-canary-d0e6744 → 0.0.0-canary-4ba0ca0

package/docs/components/content/Tree.md

@@ -58,31 +58,6 @@ consumers can be migrated with minimal churn.
   — Called when a node is checked or unchecked.
 - **`onSelect`** `(selectedKeys: Key[], info: TreeOnSelectInfo) => void` —
   Called when row selection changes.
-- **`expandOnFolderClick`** `boolean` (default: `false`) — When `true`,
-  pressing a non-leaf row toggles its expansion instead of selecting
-  it. The chevron and keyboard navigation continue to work
-  independently. Useful for file-tree UX where only leaves are
-  meaningful selection targets.
-- **`menu`** `ReactNode | ((data, state) => ReactNode | null)` — Default
-  `Menu.Item` children rendered on every row that doesn't override via
-  `data.menu`. Returning `null` from the callback hides the menu for
-  that specific row.
-- **`contextMenu`** `boolean | 'context-only'` (default: `false`) — How
-  the row menu is exposed.
-  - `false` — no menu at all.
-  - `true` — render an overflow `⋮` trigger inside `actions` AND open
-    the same menu on right-click / Shift+F10.
-  - `'context-only'` — right-click / Shift+F10 only; no `⋮` trigger.
-
-  Per-node `data.contextMenu` wins when provided.
-- **`onAction`** `(action: string, key: Key) => void` — Called when a
-  menu action is triggered on any row. Receives the action key (with
-  React's `.$` prefix stripped) and the row key. Per-node
-  `data.onAction` is called first.
-- **`menuTriggerProps`** `Partial<CubeMenuTriggerProps>` — Forwarded to
-  every per-row `MenuTrigger`.
-- **`menuProps`** `Partial<CubeMenuProps<object>>` — Forwarded to every
-  per-row `Menu`.
 - **`rowStyles`** `Styles` — Override styles for `[data-element="Row"]`.
 
 #### `CubeTreeNodeData`
@@ -99,13 +74,6 @@ consumers can be migrated with minimal churn.
   row.
 - **`isCheckable`** `boolean` — Per-node override; `false` hides the
   checkbox for this row even when the tree is `isCheckable`.
-- **`menu`** `ReactNode | null` — Per-node menu override. Wins over
-  the tree-level `menu`. Pass `null` to hide the menu for this row
-  when the tree provides a default.
-- **`contextMenu`** `boolean | 'context-only'` — Per-node override of
-  the tree-level `contextMenu`.
-- **`onAction`** `(action: string) => void` — Per-node action callback.
-  Called before the tree-level `onAction`.
 
 ### Base Properties
 
@@ -134,14 +102,6 @@ spacing, hover/selected colors, or cell layout without re-targeting via
 - `Checkbox` — The checkbox slot (visible only when `isCheckable`).
 - `Title` — The title label.
 
-### Style Properties
-
-These properties allow direct style application without using the `styles` prop:
-
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
-- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `radius`, `shadow`, `outline`
-
 ### Modifiers
 
 The following row-level modifiers are emitted automatically. They are
@@ -157,7 +117,6 @@ useful when overriding `rowStyles`:
 | `loading`       | `boolean` | The row's children are being fetched via `loadData`.   |
 | `leaf`          | `boolean` | Row has no children.                                   |
 | `has-checkbox`  | `boolean` | Row renders a checkbox.                                |
-| `has-menu`      | `boolean` | Row resolves a non-empty menu.                         |
 
 ## Variants
 
@@ -274,51 +233,6 @@ const data = [
 <Tree treeData={data} height={300} />
 ```
 
-### Per-row Menu (Overflow + Right-Click)
-
-Pass `menu` (a `ReactNode` of `Menu.Item`s, or a callback) plus
-`contextMenu={true}` to render a built-in `⋮` overflow trigger AND
-open the same menu on right-click / `Shift+F10`. Use
-`onAction(action, key)` at the tree level to handle actions, or
-`data.onAction` for per-node behavior.
-
-```jsx
-<Tree
-  treeData={data}
-  contextMenu
-  menu={
-    <>
-      <Menu.Item key="rename">Rename</Menu.Item>
-      <Menu.Item key="duplicate">Duplicate</Menu.Item>
-      <Menu.Item key="delete">Delete</Menu.Item>
-    </>
-  }
-  onAction={(action, key) => console.log(action, 'on', key)}
-/>
-```
-
-### Right-Click Only
-
-`contextMenu="context-only"` keeps the right-click / `Shift+F10`
-behavior but hides the `⋮` trigger — handy for clean file-tree UIs.
-
-### Per-Node Menu Overrides
-
-Set `data.menu` to override the tree-level menu for a specific row,
-or `null` to hide it entirely. `data.contextMenu` and
-`data.onAction` follow the same per-row override pattern.
-
-### Expand on Folder Click
-
-`expandOnFolderClick` makes folder rows toggle their expansion when
-pressed instead of triggering selection. Leaves still select normally,
-which mirrors typical file-tree UX. Folder rows remain focusable for
-keyboard navigation, and the chevron toggle keeps working.
-
-```jsx
-<Tree treeData={data} expandOnFolderClick />
-```
-
 ## Accessibility
 
 Tree implements the
@@ -373,6 +287,7 @@ via `useTree` from React Aria.
 
 - Built-in virtualization for very large trees (10k+ rows).
 - Drag-and-drop reordering, mirroring AntD's `draggable` API.
+- An `onRightClick`/context menu hook.
 - Reveal-on-mount: scroll the focused row into view when expanded
   programmatically.
 - Optional inline title editing.

package/docs/components/fields/FilterPicker.md

@@ -66,6 +66,8 @@ A versatile selection component that combines a trigger button with a searchable
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
 - **`onClear`** `() => void` — Callback called when the clear button is pressed
 - **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
+- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop item reordering in the dropdown list
+- **`onReorder`** `(newOrder: string[]) => void` — Callback when items are reordered via drag-and-drop or keyboard (Alt+Arrow)
 
 ### Base Properties
 
@@ -503,6 +505,30 @@ Use `isLoadingItems` to indicate that items are currently being fetched. Unlike
 </FilterPicker>
 ```
 
+### Reorderable
+
+Enable drag-and-drop reordering inside the dropdown with `isReorderable`. Items display a grip handle and can be dragged to new positions. Use `Alt+Arrow` keys to reorder via keyboard.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState([
+  'revenue', 'orders', 'customers', 'sessions',
+  'page-views', 'bounce-rate', 'conversion', 'aov',
+  'retention', 'churn', 'ltv', 'arpu',
+]);
+
+<FilterPicker
+  isReorderable
+  selectionMode="multiple"
+  defaultSelectedKeys={['revenue', 'orders', 'customers']}
+  label="Metrics"
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  {keyOrder.map((key) => (
+    <FilterPicker.Item key={key}>{key}</FilterPicker.Item>
+  ))}
+</FilterPicker>
+```
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -512,6 +538,7 @@ Use `isLoadingItems` to indicate that items are currently being fetched. Unlike
 - `Arrow Up/Down` - Opens the popover (when closed) or navigates through options (when open)
 - `Escape` - Closes the popover or clears search
 - `Home/End` - Navigate to first/last option
+- `Alt+ArrowUp` / `Alt+ArrowDown` - Reorder the focused item (when `isReorderable`)
 
 ### Screen Reader Support
 

package/docs/components/fields/ListBox.md

@@ -46,6 +46,8 @@ A versatile list selection component that allows users to select one or more ite
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
 - **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
 - **`disableSelectionToggle`** `boolean` (default: `false`) — When true, clicking an already-selected item keeps it selected instead of toggling it off
+- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop item reordering. Disables virtualization when active
+- **`onReorder`** `(newOrder: string[]) => void` — Callback when items are reordered via drag-and-drop or keyboard (Alt+Arrow)
 
 ### Base Properties
 
@@ -116,6 +118,8 @@ The `mods` property accepts the following modifiers you can override:
 - **`header`** `boolean` — Applied when header prop is provided or `showSelectAll={true}`
 - **`footer`** `boolean` — Applied when footer prop is provided
 - **`selectAll`** `boolean` — Applied when `showSelectAll={true}` in multiple selection mode
+- **`draggable`** `boolean` — Applied to options when `isReorderable={true}`
+- **`dragging`** `boolean` — Applied to the option currently being dragged
 
 ## Key Properties
 
@@ -604,6 +608,34 @@ const [selectedKey, setSelectedKey] = useState('apple');
 </Form>
 ```
 
+### Reorderable
+
+Enable drag-and-drop reordering with `isReorderable`. Items display a grip handle and can be dragged to new positions. Use `Alt+Arrow` keys to reorder via keyboard.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState([
+  'revenue', 'orders', 'customers', 'sessions',
+]);
+
+<ListBox
+  isReorderable
+  selectionMode="multiple"
+  label="Metrics"
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  {keyOrder.map((key) => (
+    <ListBox.Item key={key}>{key}</ListBox.Item>
+  ))}
+</ListBox>
+```
+
+**Key features:**
+
+- **Drag-and-drop**: Reorder items by dragging the grip handle
+- **Keyboard reordering**: Use `Alt+ArrowUp` / `Alt+ArrowDown` to move the focused item
+- **Callback**: `onReorder` is called with the new key order after a drop or keyboard move
+- **Virtualization**: Automatically disabled when reordering is active
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -614,6 +646,7 @@ const [selectedKey, setSelectedKey] = useState('apple');
 - `Home/End` - Move to first/last option
 - `Page Up/Page Down` - Move up/down by multiple items
 - `Escape` - Deselect all items (if onEscape not provided)
+- `Alt+ArrowUp` / `Alt+ArrowDown` - Reorder the focused item (when `isReorderable`)
 
 ### Screen Reader Support
 

package/docs/components/navigation/Tabs.md

@@ -38,6 +38,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`renderPanel`** `(key: string) => ReactNode` — Render function for lazy panel content
 - **`panelCacheKeys`** `Record<string, any>` — Cache keys for `renderPanel` content
 - **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop tab reordering
+- **`isPickerReorderable`** `boolean` (default: `false`) — Enable drag-and-drop reordering in the tab picker dropdown
 - **`keyOrder`** `string[]` — Controlled tab display order
 - **`onReorder`** `(newOrder: string[]) => void` — Callback when tabs are reordered
 - **`showTabPicker`** `boolean | 'auto'` (default: `false`) — Show dropdown tab picker
@@ -169,9 +170,7 @@ Optional wrapper for tabs when using explicit panel placement.
 Explicit panel definition for advanced layout control.
 
 ```jsx
-<Tabs.Panel key="tab1">
-  Panel 1 content
-</Tabs.Panel>
+<Tabs.Panel key="tab1">Panel 1 content</Tabs.Panel>
 ```
 
 ### Tabs.Action
@@ -187,7 +186,9 @@ Action button designed for the Tabs prefix/suffix slots. Styled with sharp edges
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -243,16 +244,22 @@ Control the active tab externally with `activeKey` and `onChange`.
 const [activeKey, setActiveKey] = useState('tab1');
 
 <Tabs activeKey={activeKey} onChange={setActiveKey}>
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
-</Tabs>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+</Tabs>;
 ```
 
 ### Disabled Tab
 
 ```jsx
 <Tabs defaultActiveKey="tab1">
-  <Tab key="tab1" title="Active Tab">Content</Tab>
+  <Tab key="tab1" title="Active Tab">
+    Content
+  </Tab>
   <Tab key="tab2" title="Disabled Tab" isDisabled>
     Inaccessible content
   </Tab>
@@ -269,8 +276,12 @@ Add buttons or other elements before or after the tab list.
   prefix={<Button size="small">Menu</Button>}
   suffix={<Button size="small">Add New</Button>}
 >
-  <Tab key="items" title="Items">Item list</Tab>
-  <Tab key="archived" title="Archived">Archived items</Tab>
+  <Tab key="items" title="Items">
+    Item list
+  </Tab>
+  <Tab key="archived" title="Archived">
+    Archived items
+  </Tab>
 </Tabs>
 ```
 
@@ -286,21 +297,17 @@ const [tabs, setTabs] = useState([
 
 <Tabs
   defaultActiveKey="tab1"
-  onDelete={(key) => setTabs(tabs.filter(t => t.key !== key))}
+  onDelete={(key) => setTabs(tabs.filter((t) => t.key !== key))}
   suffix={
-    <Tabs.Action
-      icon={<PlusIcon />}
-      aria-label="Add tab"
-      onPress={handleAdd}
-    />
+    <Tabs.Action icon={<PlusIcon />} aria-label="Add tab" onPress={handleAdd} />
   }
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.key} title={tab.title}>
       Content for {tab.title}
     </Tab>
   ))}
-</Tabs>
+</Tabs>;
 ```
 
 ### Tab Menus
@@ -321,7 +328,9 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
     // 'delete' is handled automatically via onDelete
   }}
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -355,7 +364,9 @@ Combine editable tabs with a menu for rename, duplicate, and delete actions.
     // 'delete' triggers onDelete automatically
   }}
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -373,7 +384,9 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -388,7 +401,9 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -405,9 +420,11 @@ Override or disable menus on individual tabs.
     </>
   }
 >
-  <Tab key="tab1" title="Uses Default Menu">Content</Tab>
-  <Tab 
-    key="tab2" 
+  <Tab key="tab1" title="Uses Default Menu">
+    Content
+  </Tab>
+  <Tab
+    key="tab2"
     title="Custom Menu"
     menu={
       <>
@@ -417,7 +434,9 @@ Override or disable menus on individual tabs.
   >
     Content
   </Tab>
-  <Tab key="tab3" title="No Menu" menu={null}>Content</Tab>
+  <Tab key="tab3" title="No Menu" menu={null}>
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -437,7 +456,9 @@ Use `Menu.Section` for organized menus.
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -453,10 +474,16 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
   keyOrder={keyOrder}
   onReorder={(newOrder) => setKeyOrder(newOrder)}
 >
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
-  <Tab key="tab3" title="Tab 3">Content 3</Tab>
-</Tabs>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+  <Tab key="tab3" title="Tab 3">
+    Content 3
+  </Tab>
+</Tabs>;
 ```
 
 **Key features:**
@@ -494,6 +521,33 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
 </Tabs>
 ```
 
+### Reorderable Tab Picker
+
+Use `isPickerReorderable` to enable drag-and-drop reordering in the tab picker dropdown. This is controlled independently from `isReorderable` (horizontal tabs). Items in the dropdown display a grip handle and can be dragged to reorder. The same `onReorder` callback is shared between the horizontal tab bar and the vertical tab picker.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
+
+<Tabs
+  isReorderable
+  isPickerReorderable
+  showTabPicker
+  type="file"
+  keyOrder={keyOrder}
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+  <Tab key="tab3" title="Tab 3">
+    Content 3
+  </Tab>
+</Tabs>;
+```
+
 ### Scroll Arrows
 
 Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrows` with `true`, `false`, or `'auto'` (shows only when tabs overflow).
@@ -504,7 +558,7 @@ Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrow
   showScrollArrows="auto"
   styles={{ width: '500px' }}
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -521,7 +575,7 @@ Combine with `showTabPicker` for both scroll arrows and a dropdown picker:
   showTabPicker="auto"
   type="file"
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -543,7 +597,7 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
   type="file"
   styles={{ width: '500px' }}
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -552,6 +606,7 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
 ```
 
 When both are in the same slot:
+
 - In **prefix**: TabPicker appears first (left), then scroll arrows (right)
 - In **suffix**: Scroll arrows appear first (left), then TabPicker (right)
 
@@ -565,10 +620,14 @@ const [view, setView] = useState('overview');
 <Tabs activeKey={view} onChange={setView}>
   <Tab key="overview" title="Overview" />
   <Tab key="settings" title="Settings" />
-</Tabs>
-
-{view === 'overview' && <OverviewPage />}
-{view === 'settings' && <SettingsPage />}
+</Tabs>;
+
+{
+  view === 'overview' && <OverviewPage />;
+}
+{
+  view === 'settings' && <SettingsPage />;
+}
 ```
 
 ### Explicit Panels
@@ -592,8 +651,12 @@ Render all panels immediately but keep inactive ones hidden.
 
 ```jsx
 <Tabs defaultActiveKey="tab1" prerender>
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
 </Tabs>
 ```
 
@@ -622,8 +685,12 @@ Override per-tab/panel:
 
 ```jsx
 <Tabs prerender>
-  <Tab key="tab1" title="Prerendered">Always in DOM</Tab>
-  <Tab key="tab2" title="Lazy" prerender={false}>Lazy loaded</Tab>
+  <Tab key="tab1" title="Prerendered">
+    Always in DOM
+  </Tab>
+  <Tab key="tab2" title="Lazy" prerender={false}>
+    Lazy loaded
+  </Tab>
 </Tabs>
 ```
 
@@ -638,10 +705,14 @@ content is computed, while inactive tabs use cached content.
   defaultActiveKey="tab1"
   renderPanel={(key) => {
     switch (key) {
-      case 'tab1': return <ExpensiveChart data={chartData} />;
-      case 'tab2': return <LargeTable rows={tableRows} />;
-      case 'tab3': return <ComplexForm fields={formFields} />;
-      default: return null;
+      case 'tab1':
+        return <ExpensiveChart data={chartData} />;
+      case 'tab2':
+        return <LargeTable rows={tableRows} />;
+      case 'tab3':
+        return <ComplexForm fields={formFields} />;
+      default:
+        return null;
     }
   }}
 >
@@ -662,8 +733,8 @@ content is computed, while inactive tabs use cached content.
 <Tabs
   renderPanel={(key) => <Panel data={data[key]} />}
   panelCacheKeys={{
-    tab1: data.tab1.version,  // Cached, re-renders when version changes
-    tab2: data.tab2.version,  // Cached, re-renders when version changes
+    tab1: data.tab1.version, // Cached, re-renders when version changes
+    tab2: data.tab2.version, // Cached, re-renders when version changes
     // tab3 has no cache key - re-renders on every Tabs render
   }}
 >
@@ -672,6 +743,7 @@ content is computed, while inactive tabs use cached content.
 ```
 
 This approach is ideal for:
+
 - Tabs with complex visualizations or charts
 - Large data tables that are expensive to render
 - Forms with many fields
@@ -706,6 +778,7 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 ```
 
 **How it works:**
+
 - The tab bar has fixed height and doesn't grow
 - Tab panels use `display: contents`, allowing children to participate in parent flex layout
 - Nested Layout components with `flexGrow: 1` (default) stretch to fill remaining space
@@ -722,6 +795,7 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 - `Shift+F10` - Open tab menu (when menu is present)
 - `Delete` - Delete focused tab (when deletable)
 - `F2` - Start editing tab title (when editable)
+- `Alt+ArrowLeft` / `Alt+ArrowRight` - Reorder the focused tab (when `isReorderable`)
 
 ### Screen Reader Support
 
@@ -744,13 +818,17 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 1. **Do**: Use clear, descriptive tab titles
 
    ```jsx
-   <Tab key="billing" title="Billing & Payments">...</Tab>
+   <Tab key="billing" title="Billing & Payments">
+     ...
+   </Tab>
    ```
 
 2. **Don't**: Use vague or single-letter titles
 
    ```jsx
-   <Tab key="b" title="B">...</Tab>
+   <Tab key="b" title="B">
+     ...
+   </Tab>
    ```
 
 3. **Do**: Provide meaningful accessible labels

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-d0e6744",
+  "version": "0.0.0-canary-4ba0ca0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {