@cube-dev/ui-kit 0.206.2 → 0.207.0

package/dist/utils/react/nullableValue.js

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

package/dist/utils/react/overlayKeyPropagation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/utils/react/useBufferedValue.ts

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 //#region src/utils/react/useKeySymbols.ts

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx
 const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;

package/dist/utils/react/useLocalStorage.js

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

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 //#region src/utils/react/useMergeStyles.ts

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

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

package/dist/utils/react/useScheme.js

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

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 //#region src/utils/react/wrapNodeIfPlain.ts
 function wrapNodeIfPlain(children, render) {

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 //#region src/utils/styles.ts
 function isRecord(value) {

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.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.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.206.2";
+const VERSION = "0.207.0";
 const TASTY_VERSION = "3.17.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Usage.md

@@ -412,7 +412,7 @@ Most components are a design contract: customize them through their own props (`
 The package's `tasty.config.ts` lists the other components as `protectedComponents`, and `tasty/no-protected-restyle` from `@tenphi/eslint-plugin-tasty` 1.12.0 or newer reports a restyle of one in your code:
 
 - instance `styles`, and every `*Styles` prop such as `inputStyles`;
-- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, `Alert`, `Result`, `Skeleton`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. `Placeholder` keeps `radius`, the shape of what it stands in for. Root `styles` that sets only allowed props passes too;
+- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, `Alert`, `Result`, `Skeleton`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `display`, `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. `Placeholder` keeps `radius`, the shape of what it stands in for. Root `styles` that sets only allowed props passes too;
 - `tasty()` wrappers that restyle a protected component, and wrappers of those wrappers.
 
 On an input, the style props that place or size it act on its outer element: the field wrapper when it renders (see [Field properties](./FieldProperties.md)), the input itself otherwise. Its `styles` always style the input, so a root `styles` that only sizes it passes the rule but sizes the input inside the field, not the field. To size the input alone, beside a side label for example, use its `controlWidth` prop. Input components take no other style props.

package/docs/components/actions/Button.md

@@ -18,6 +18,7 @@ A versatile action component that triggers commands and navigates users.
 - **`type`** `'primary' | 'outline' | 'outline-2' | 'clear' | 'link'` (default: `outline`) — Visual style variant of the button (`outline-2` is identical to `outline` but uses `#surface-3` as the base fill; not available for the `special` theme)
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special' | 'current'` (default: `default`) — Semantic colour palette theme. `current` is not a brand palette: it mixes every color from the inherited text color, so the button adopts the color of whatever container it sits in
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number` (default: `medium`) — Button size. Use `'inline'` for link-type buttons or a number/string for custom sizes (e.g. `64` or `'8x'`)
+- **`shape`** `'button' | 'card' | 'sharp' | 'pill'` (default: `button`) — Corner shape, with the same names as `Item`'s `shape`
 - **`icon`** — Icon rendered before the content. Can be: ReactNode, `true` (empty slot), or function `({ loading, selected, ...mods }) => ReactNode | true`
 - **`rightIcon`** — Icon rendered after the content. Can be: ReactNode, `true` (empty slot), or function `({ loading, selected, ...mods }) => ReactNode | true`
 - **`children`** `ReactNode` — Button label or custom content
@@ -110,6 +111,15 @@ The `mods` prop accepts the following modifiers you can override:
 - `inline` – Inline size for link-type buttons (no fixed height).
 - Custom values – Pass a number (pixels) or a string (e.g. `'8x'`) for custom sizing.
 
+### Shapes. `shape` prop
+
+- `button` – The button radius (`1r`, default).
+- `card` – The card radius (`1cr`), for a button laid out as a card.
+- `sharp` – Square corners, for a button that fills a row or a cell edge to edge.
+- `pill` – Fully rounded ends (`round`). A single-icon button becomes a circle.
+
+A `link` button keeps no radius at rest, and the joined edges inside a `Button.Split` stay square, whatever the shape.
+
 ## Examples
 
 ### Basic Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.206.2",
+  "version": "0.207.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/tasty.config.ts

@@ -156,7 +156,9 @@ export default {
     // as `Layout.Content`, whose `scrollbar` is their own prop;
     // `ResizablePanel`'s `direction` is the side it resizes from. `Alert`,
     // `Result` and `Skeleton` hold content the consumer supplies, so how that
-    // content is spaced is the consumer's call.
+    // content is spaced is the consumer's call. `display` picks the layout:
+    // a block `Card` needs `flex` or `grid` before `flow`, `grid*` or `place*`
+    // do anything.
     {
       source: '@cube-dev/ui-kit',
       include: [
@@ -175,6 +177,7 @@ export default {
       allowedStyleProps: [
         'position',
         'dimension',
+        'display',
         'flow',
         'gap',
         'columnGap',