@cube-dev/ui-kit 0.170.0 → 0.171.0

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useSchema.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useSchema.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.171.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.170.0";
+const VERSION = "0.171.0";
 const TASTY_VERSION = "3.3.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/fields/RadioGroup.md

@@ -10,6 +10,18 @@ A radio group allows users to select exactly one option from a set of mutually e
 - Display filter options where only one can be active
 - Provide clear selection options in surveys or questionnaires
 
+Every variant of this component — `Radio.Tabs` included — is a **form control**: it runs through `useFieldProps` / `wrapWithField`, publishes `role="radiogroup"` semantics, and takes part in `Form` validation. Reach for one when the selection is a _value the user is setting_.
+
+### When not to use
+
+If the control is not a field — a toolbar that swaps which view is on screen, a segmented control over page content — use [Tabs](../navigation/Tabs.md) instead, with `type="radio"` when the connected-button look was the point. It renders the same chrome without the field wiring, and it owns the panels it switches between.
+
+| In a `Form`? | Switches which controls render? | Use |
+| --- | --- | --- |
+| yes | yes | `Radio.Tabs` |
+| yes | no | `Radio.Group type="button"` |
+| no | — | `Tabs` (with `type="radio"` when the radio look was wanted) |
+
 ## Component
 
 ---
@@ -181,8 +193,10 @@ When using `type="button"`, you can customize the button appearance:
 
 ### Tabs Group
 
+Only inside a `Form`, and only when the choice changes which fields follow it — see [When not to use](#when-not-to-use). A toolbar switcher is `Tabs type="radio"`.
+
 ```jsx
-<Radio.Tabs label="Status">
+<Radio.Tabs name="status" label="Status">
   <Radio value="active">Active</Radio>
   <Radio value="inactive">Inactive</Radio>
   <Radio value="pending">Pending</Radio>
@@ -308,22 +322,28 @@ When using `type="button"`, you can customize the button appearance:
    </Radio.Group>
    ```
 
-3. **Visual Type**: Use `Radio.Tabs` for compact toolbars, `type="button"` for spaced selections, traditional radios for forms
+3. **Visual Type**: pick by the shape of the choice, not by the look you want — `Radio.Tabs` for a compact connected group _inside a form_, `type="button"` for spaced selections, traditional radios for longer or descriptive option lists
 
    ```jsx
-   {/* Good for compact toolbars */}
-   <Radio.Tabs label="View">
-     <Radio value="list">List</Radio>
-     <Radio value="grid">Grid</Radio>
+   {/* Good for a compact form field that gates the fields below it */}
+   <Radio.Tabs name="mode" label="Mode">
+     <Radio value="basic">Basic</Radio>
+     <Radio value="advanced">Advanced</Radio>
    </Radio.Tabs>
 
+   {/* Don't: a toolbar view switcher is not a field — use Tabs */}
+   <Tabs type="radio" defaultActiveKey="list">
+     <Tab key="list" title="List">...</Tab>
+     <Tab key="grid" title="Grid">...</Tab>
+   </Tabs>
+
    {/* Good for button selections */}
    <Radio.Group type="button" label="Priority">
      <Radio value="low">Low</Radio>
      <Radio value="high">High</Radio>
    </Radio.Group>
 
-   {/* Good for forms */}
+   {/* Good for a longer or descriptive option list */}
    <Radio.Group label="Gender">
      <Radio value="male">Male</Radio>
      <Radio value="female">Female</Radio>
@@ -335,7 +355,7 @@ When using `type="button"`, you can customize the button appearance:
 6. **Grouping**: Use meaningful group labels that describe the choice
 7. **Options**: Keep option labels concise and mutually exclusive
 8. **Layout**: Use horizontal layout only when space permits and options are short
-9. **Tabs Mode**: Use `Radio.Tabs` for compact, connected button groups in limited space
+9. **Tabs Mode**: `Radio.Tabs` is for compact, connected button groups in limited space _that are form fields_. Outside a `Form` — or inside one, when the choice doesn't change which controls render — reach for `Tabs type="radio"` or `type="button"` instead
 
 ## Integration with Forms
 

package/docs/components/layout/Board.md

@@ -141,7 +141,7 @@ An aligned board never shrinks its rows, so pair it with `isAutoHeight` on the c
 - **`compact`** `'vertical' | 'horizontal' | 'free' | null` (default: `'vertical'`) — Compaction behavior. `'vertical'`/`'horizontal'` reflow widgets to remove gaps; `'free'` places each widget exactly where dropped and never pushes its neighbours (blocked from occupied cells unless `allowOverlap`); `null` disables compaction but still resolves collisions the legacy react-grid-layout way.
 - **`allowOverlap`** `boolean` (default: `false`) — Allow widgets to overlap (stack). It also **switches compaction off**: with it on, `compact="vertical"`/`"horizontal"` no longer reflow, and `preventCollision`/`collisionMode` have no effect at all, since nothing is ever refused. In `'free'` mode it is what distinguishes stacking from blocking a drop onto an occupied cell.
 - **`preventCollision`** `boolean` (default: `false`) — Block movement into occupied cells instead of pushing. Applies to `'vertical'`, `'horizontal'` and `null` only: `compact="free"` derives blocking from `allowOverlap` and ignores this prop, and `allowOverlap` overrides it everywhere.
-- **`collisionMode`** `'revert' | 'downscale' | 'swap'` (default: `'revert'`) — How to resolve a drop the grid would otherwise refuse. Only applies where a collision _blocks_ a move — `compact="free"` (which prevents collisions) or an explicit `preventCollision` — and never under `allowOverlap`, where nothing is blocked. `'revert'` snaps the widget back. `'downscale'` shrinks it into the free space at the drop cell, growing rightward and downward, floored at its `minW`/`minH` (below that it reverts). Within one board, `'swap'` trades places with **one** widget — the one the drop covers most — which takes the cell the drag began at, each keeping as much of its own size as fits there. It never displaces more than that one widget. A drop straddling two widgets trades with one of them rather than refusing, so the swap never blinks away as you sweep across a boundary; ties go to the widget earlier in reading order. Dragging back retraces the original arrangement exactly. For a widget arriving from another board (including a nested board entering its parent), the destination board's `'swap'` mode becomes strict insertion: the requested anchor cell must be empty, the incoming widget keeps its size when possible or downscales into the available room to its right and below, and existing destination widgets are neither exchanged nor reflowed. Releasing over an occupied anchor or where `minW`/`minH` cannot fit cancels the transfer and restores both boards; it does not reuse the last valid preview or search for another slot. No mode ever _grows_ a widget. Applies to single-widget drags. Arrow keys honour it too but never resize anything — each press is a gesture of its own, so a press that shrank a widget would have nothing to restore from, and only an exchange that fits outright is allowed. A multi-widget selection still only moves where it fits outright, and a resize is still blocked by a collision.
+- **`collisionMode`** `'revert' | 'downscale' | 'swap'` (default: `'revert'`) — How to resolve a drop the grid would otherwise refuse. Only applies where a collision _blocks_ a move — `compact="free"` (which prevents collisions) or an explicit `preventCollision` — and never under `allowOverlap`, where nothing is blocked. `'revert'` snaps the widget back. `'downscale'` shrinks it into the free space at the drop cell, growing rightward and downward, floored at its `minW`/`minH` (below that it reverts). Within one board, `'swap'` trades places with **one** widget — the one the drop covers most — which takes the cell the drag began at, each keeping as much of its own size as fits there. It never displaces more than that one widget. A drop straddling two widgets trades with one of them rather than refusing, so the swap never blinks away as you sweep across a boundary; ties go to the widget earlier in reading order. Dragging back retraces the original arrangement exactly. For a widget arriving from another board (including a nested board entering its parent), there is no slot on the destination to give back, so `'swap'` resolves as `'downscale'`: the incoming widget keeps its size when possible or downscales into the available room to its right and below, and existing destination widgets are never exchanged. A release over an occupied anchor commits whatever the preview was showing rather than cancelling the transfer: the widget holds the last cell it fitted in as you sweep across a destination widget, and enters at the nearest fitting cell when the very first cell it is offered is occupied. No mode ever _grows_ a widget. Applies to single-widget drags. Arrow keys honour it too but never resize anything — each press is a gesture of its own, so a press that shrank a widget would have nothing to restore from, and only an exchange that fits outright is allowed. A multi-widget selection still only moves where it fits outright, and a resize is still blocked by a collision.
 - **`isDraggable`** `boolean` (default: `true`) — Enable dragging for all widgets. A ceiling, not a default: `false` here cannot be re-enabled by a widget, and a `static` layout item is never draggable regardless.
 - **`isResizable`** `boolean` (default: `true`) — Enable resizing for all widgets. Same ceiling semantics as `isDraggable`.
 - **`isDroppable`** `boolean` (default: `true`) — Whether the board accepts widgets dropped from _other_ boards. `false` does not affect dragging within the board.
@@ -323,7 +323,7 @@ Centre the resize grip on the widget's corner with `resizeGripPlacement="corner"
 
 ### Resolving a blocked drop
 
-On a free grid a drop onto occupied cells is refused. `collisionMode` resolves it instead: `'downscale'` shrinks the widget into whatever room is at the drop cell. Within one board, `'swap'` trades places with the widget already there. Across boards, the same mode inserts only at an empty anchor and downscales without moving destination widgets; an invalid release cancels the transfer. None of these paths ever grows a widget. The examples below show all three behaviors.
+On a free grid a drop onto occupied cells is refused. `collisionMode` resolves it instead: `'downscale'` shrinks the widget into whatever room is at the drop cell. Within one board, `'swap'` trades places with the widget already there. Across boards, the same mode downscales into an empty cell without exchanging destination widgets, and an occupied anchor commits the previewed cell instead of cancelling. None of these paths ever grows a widget. The examples below show all three behaviors.
 
 ### Card widgets
 

package/docs/components/navigation/Tabs.md

@@ -112,7 +112,7 @@ For individual tabs:
 - `default` - Standard tabs with selection indicator below (default)
 - `narrow` - Same as default but with collapsed horizontal label padding for compact layouts
 - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs
-- `radio` - Radio button style for tab selection
+- `radio` - Radio button style for tab selection. This is the right choice for a compact switcher that is _not_ a form field — a view toolbar, a segmented control over page content. [`Radio.Tabs`](../fields/RadioGroup.md) looks the same but is a form control, so keep it for choices inside a `Form`
 
 ### Sizes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.170.0",
+  "version": "0.171.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -96,7 +96,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.0.3",
+    "@tenphi/eslint-plugin-tasty": "^1.0.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts

@@ -1,2 +0,0 @@
-
-import { RefObject } from "react";