@cube-dev/ui-kit 0.0.0-canary-2ef7bcb → 0.0.0-canary-daad5bf

package/dist/_internal/hooks/use-debounced-value.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEffect, useRef, useState } from "react";
 
 //#region src/_internal/hooks/use-debounced-value.ts

package/dist/_internal/hooks/use-deprecation-warning.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { deprecationWarning } from "../../utils/warnings.js";
 import React, { useEffect } from "react";
 

package/dist/_internal/hooks/use-event.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useSyncRef } from "./use-sync-ref.js";
 import { useCallback } from "react";
 

package/dist/_internal/hooks/use-is-first-render.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useRef } from "react";
 
 //#region src/_internal/hooks/use-is-first-render.ts

package/dist/_internal/hooks/use-sync-ref.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useRef } from "react";
 

package/dist/_internal/hooks/use-timer/timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 //#region src/_internal/hooks/use-timer/timer.ts
 var Timer = class {
 	callback;

package/dist/_internal/hooks/use-timer/use-timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEvent } from "../use-event.js";
 import { Timer } from "./timer.js";
 import { useEffect, useState } from "react";

package/dist/_internal/hooks/use-warn.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEvent } from "./use-event.js";
 import { warn } from "../../utils/warnings.js";
 import { useRef } from "react";

package/dist/components/Block.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/CollectionItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { ItemAction } from "./actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
 import { Item } from "react-stately";

package/dist/components/GlobalStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { usePaletteVersion } from "../tokens/palette-config.js";
 import { getTokens } from "../tokens/all-tokens.js";
 import { useGlobalStyles, useRawCSS } from "@tenphi/tasty";

package/dist/components/GridProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
 import { filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useState } from "react";

package/dist/components/HiddenInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/HiddenInput.tsx

package/dist/components/Root.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { AMBIENT_PREDEFINED_STATES } from "../utils/react/useScheme.js";
 import { EventBusProvider } from "../utils/react/useEventBus.js";

package/dist/components/actions/Action/Action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useAction } from "../use-action.js";
 import { CONTAINER_STYLES, TEXT_STYLES, tasty } from "@tenphi/tasty";

package/dist/components/actions/Banner/Banner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Item } from "../../content/Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/actions/Button/Button.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { getDisabledElementProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";

package/dist/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/actions/ButtonSplit/ButtonSplit.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { ButtonSplitContext } from "./context.js";

package/dist/components/actions/ButtonSplit/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/actions/ButtonSplit/context.ts

package/dist/components/actions/CommandMenu/CommandMenu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

package/dist/components/actions/CommandMenu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/actions/CommandMenu/styled.tsx

package/dist/components/actions/ItemAction/ItemAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { CURRENT_CLEAR_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CLEAR_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES } from "../../../data/item-themes.js";

package/dist/components/actions/ItemActionContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/actions/ItemActionsWrapper.js

@@ -0,0 +1,206 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
+import { DisplayTransition } from "../helpers/DisplayTransition/DisplayTransition.js";
+import { ITEM_RESTING_COLOR_VARIANTS, ROW_STATE_ALIASES, resolveItemVariant } from "../../data/item-themes.js";
+import { ItemActionProvider } from "./ItemActionContext.js";
+import { tasty } from "@tenphi/tasty";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFocusWithin, useHover } from "react-aria";
+
+//#region src/components/actions/ItemActionsWrapper.tsx
+/**
+* The sibling-actions layout shared by `ItemButton` and the field triggers
+* (`Select` / `Picker` / `FilterPicker`).
+*
+* A row's actions cannot live inside the row when the row is itself a button:
+* that nests a `<button>` in a `<button>`, and a press on an action activates
+* the row. So the run is rendered as a SIBLING, laid over the row's trailing
+* end, and the row reserves the space for it through `--actions-width` — which
+* this file measures — and `Item`'s own `actions` placeholder column.
+*
+* The run is pointer-transparent; only its children take presses. That is what
+* lets a picker put its non-interactive caret in the run and still have a click
+* on the caret reach the trigger underneath, and it stops the run's padding and
+* inter-action gaps from swallowing presses meant for the row.
+*/
+const ItemActionsWrapperElement = tasty({
+	variants: ITEM_RESTING_COLOR_VARIANTS,
+	styles: {
+		...ROW_STATE_ALIASES,
+		"@block-description": ":has(> [data-description=\"block\"])",
+		display: "grid",
+		position: "relative",
+		placeContent: "stretch",
+		placeItems: "stretch",
+		$size: {
+			"": "$size-md",
+			"size=xsmall": "$size-xs",
+			"size=small": "$size-sm",
+			"size=medium": "$size-md",
+			"size=large": "$size-lg",
+			"size=xlarge": "$size-xl"
+		},
+		Actions: {
+			$: ">",
+			position: "absolute",
+			inset: {
+				"": "1bw right dock",
+				"type=card": "(1bw + .5x) right dock",
+				"@block-description": "1bw 1bw auto auto",
+				"type=card & @block-description": "(1bw + .5x) (1bw + .5x) auto auto"
+			},
+			display: "flex",
+			gap: "1bw",
+			placeItems: "center",
+			placeContent: "center end",
+			pointerEvents: "none",
+			padding: "0 $side-padding",
+			height: {
+				"": "min 0",
+				"@block-description": "min ($size - 2bw)"
+			},
+			opacity: {
+				"": 1,
+				"!actions-shown": 0
+			},
+			translate: {
+				"": "0 0",
+				"!actions-shown": ".5x 0"
+			},
+			transition: "theme, translate",
+			"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
+			"$side-padding": "(($size - $action-size - 2bw) / 2)"
+		},
+		ActionsChild: {
+			$: ">Actions>*",
+			pointerEvents: {
+				"": "auto",
+				"!actions-shown": "none"
+			}
+		},
+		ActionIcon: {
+			$: ">Actions>",
+			display: "grid",
+			placeItems: "center",
+			placeContent: "center",
+			flexShrink: 0,
+			width: "$action-size",
+			height: "$action-size",
+			pointerEvents: "none",
+			preset: {
+				"": "t3",
+				"size=xsmall": "t4",
+				"size=xlarge": "t2"
+			}
+		}
+	}
+});
+/**
+* A non-interactive box inside an actions run — a dropdown caret, a loading
+* spinner. It occupies an action's footprint so the run stays evenly spaced,
+* and it lets presses through to the row behind it.
+*/
+function ItemActionIcon(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-element": "ActionIcon",
+		children: props.children
+	});
+}
+/**
+* Wraps a row in the sibling-actions layout and publishes `--actions-width` so
+* the row can reserve the space the run covers.
+*/
+function ItemActionsWrapper(props) {
+	const { children, actions, type = "item", theme = "default", size = "medium", isDisabled, disableActionsFocus, autoHideActions = false, mods, styles, actionsProps } = props;
+	const actionsRef = useRef(null);
+	const [actionsWidth, setActionsWidth] = useState(0);
+	const [areActionsVisible, setAreActionsVisible] = useState(false);
+	useLayoutEffect(() => {
+		const el = actionsRef.current;
+		if (!el) return;
+		const width = el.childElementCount ? Math.round(el.offsetWidth) : 0;
+		if (width !== actionsWidth) setActionsWidth(width);
+	}, [
+		actions,
+		areActionsVisible,
+		actionsWidth
+	]);
+	const [isFocusWithin, setIsFocusWithin] = useState(false);
+	const [hasPressed, setHasPressed] = useState(false);
+	const { hoverProps, isHovered } = useHover({});
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
+	useLayoutEffect(() => {
+		const actionsEl = actionsRef.current;
+		if (!actionsEl || !autoHideActions) return;
+		const checkPressed = () => {
+			setHasPressed(actionsEl.querySelector("[data-pressed]") !== null);
+		};
+		const observer = new MutationObserver(checkPressed);
+		observer.observe(actionsEl, {
+			attributes: true,
+			attributeFilter: ["data-pressed"],
+			subtree: true
+		});
+		checkPressed();
+		return () => observer.disconnect();
+	}, [areActionsVisible, autoHideActions]);
+	const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
+	const finalMods = useMemo(() => {
+		return {
+			...mods,
+			...shouldShowActions ? { "actions-shown": true } : null,
+			disabled: isDisabled
+		};
+	}, [
+		mods,
+		shouldShowActions,
+		isDisabled
+	]);
+	return /* @__PURE__ */ jsxs(ItemActionsWrapperElement, {
+		...hoverProps,
+		variant: resolveItemVariant(theme, type),
+		"data-size": size,
+		"data-type": type,
+		"data-theme": theme,
+		mods: finalMods,
+		styles,
+		style: {
+			"--actions-width": areActionsVisible || !autoHideActions ? `${actionsWidth}px` : "0px",
+			...typeof size === "number" && { "--size": `${size}px` }
+		},
+		children: [children({ showActions: shouldShowActions }), /* @__PURE__ */ jsx(ItemActionProvider, {
+			type,
+			theme,
+			disableActionsFocus,
+			isDisabled,
+			children: autoHideActions ? /* @__PURE__ */ jsx(DisplayTransition, {
+				exposeUnmounted: true,
+				isShown: shouldShowActions,
+				onPhaseChange: (phase) => {
+					setAreActionsVisible(phase !== "unmounted");
+				},
+				children: ({ ref: transitionRef }) => {
+					return /* @__PURE__ */ jsx("div", {
+						...focusWithinProps,
+						...actionsProps,
+						ref: (node) => {
+							actionsRef.current = node;
+							transitionRef(node);
+						},
+						"data-element": "Actions",
+						children: actions
+					});
+				}
+			}) : /* @__PURE__ */ jsx("div", {
+				ref: actionsRef,
+				...actionsProps,
+				"data-element": "Actions",
+				children: actions
+			})
+		})]
+	});
+}
+
+//#endregion
+export { ItemActionIcon, ItemActionsWrapper };
+//# sourceMappingURL=ItemActionsWrapper.js.map

package/dist/components/actions/ItemActionsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActionsWrapper.js","names":[],"sources":["../../../src/components/actions/ItemActionsWrapper.tsx"],"sourcesContent":["import { Mods, Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport {\n  ITEM_RESTING_COLOR_VARIANTS,\n  resolveItemVariant,\n  ROW_STATE_ALIASES,\n} from '../../data/item-themes';\nimport { CubeItemProps } from '../content/Item/Item';\nimport { DisplayTransition } from '../helpers/DisplayTransition/DisplayTransition';\n\nimport { ItemActionProvider } from './ItemActionContext';\n\n/**\n * The sibling-actions layout shared by `ItemButton` and the field triggers\n * (`Select` / `Picker` / `FilterPicker`).\n *\n * A row's actions cannot live inside the row when the row is itself a button:\n * that nests a `<button>` in a `<button>`, and a press on an action activates\n * the row. So the run is rendered as a SIBLING, laid over the row's trailing\n * end, and the row reserves the space for it through `--actions-width` — which\n * this file measures — and `Item`'s own `actions` placeholder column.\n *\n * The run is pointer-transparent; only its children take presses. That is what\n * lets a picker put its non-interactive caret in the run and still have a click\n * on the caret reach the trigger underneath, and it stops the run's padding and\n * inter-action gaps from swallowing presses meant for the row.\n */\nconst ItemActionsWrapperElement = tasty({\n  // Actions default to the `current` type, which paints from the inherited\n  // `currentcolor` — but they are rendered as a SIBLING of the row here, not\n  // inside it, so without this they would inherit the page color instead of the\n  // row's. Harmless on the default theme (the two match) and plainly wrong on\n  // any other: a `special` row would hand its actions the page's dark text to\n  // tint with, on a dark purple surface. The variant carries the row's resting\n  // color down so `currentcolor` means the same thing it does inside an `Item`.\n  variants: ITEM_RESTING_COLOR_VARIANTS,\n  styles: {\n    // The row is the wrapper's own child, so the wrapper can read the one\n    // interaction the row expresses as a COLOR change rather than a fill change.\n    // Without it the label darkened under the finger while the caret and the\n    // actions laid over the same row — which paint from the color this element\n    // hands down — stayed at their resting tint. The variants restate it,\n    // because that is where the colors keyed on it live.\n    ...ROW_STATE_ALIASES,\n\n    // The one layout the row does not want its actions centred in. A block\n    // description stacks under the label and can make the row arbitrarily tall;\n    // there the actions belong in the first line, beside the label, which is\n    // what anchoring them to a `$size`-tall box at the top achieves. Every other\n    // row — including one with an INLINE description — is a single band, and\n    // centring is both what it wants and what survives a caller overriding the\n    // height. Read off the row rather than plumbed through as a prop, because\n    // `Item` is what decides the placement and it defaults by type.\n    '@block-description': ':has(> [data-description=\"block\"])',\n\n    display: 'grid',\n    position: 'relative',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      // Both insets set, so the run's BOX spans the row and `placeItems: center`\n      // puts the actions on its centre line. What sits in the box does not grow\n      // with it — every child is a fixed `$action-size`, which is capped so a\n      // large row does not get oversized buttons.\n      inset: {\n        '': '1bw right dock',\n        'type=card': '(1bw + .5x) right dock',\n        '@block-description': '1bw 1bw auto auto',\n        'type=card & @block-description': '(1bw + .5x) (1bw + .5x) auto auto',\n      },\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n\n      // The run lies OVER the row. Left opaque, its padding and the gaps between\n      // its actions eat presses that belong to the row behind it, and a\n      // non-interactive control inside it (a picker's caret) could never reach\n      // its own trigger. The run itself is therefore transparent to the pointer\n      // and its children opt back in — see `ActionsChild` — so a child that\n      // wants to stay transparent, like that caret, only has to say so.\n      pointerEvents: 'none',\n\n      padding: '0 $side-padding',\n      // Only where the run is top-anchored: there the box has no bottom to\n      // measure from, so `$size` is what gives it one. Everywhere else the two\n      // insets decide the height, and this floor would force the box back to\n      // `$size` and re-anchor it at the top.\n      height: {\n        '': 'min 0',\n        '@block-description': 'min ($size - 2bw)',\n      },\n      opacity: {\n        '': 1,\n        '!actions-shown': 0,\n      },\n      translate: {\n        '': '0 0',\n        '!actions-shown': '.5x 0',\n      },\n      transition: 'theme, translate',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n\n    // Whatever a caller put in the run: interactive again, so the transparency\n    // above applies only to the space BETWEEN and AROUND the actions. `*`\n    // because the run's content is the caller's — there is no element name to\n    // key on.\n    ActionsChild: {\n      $: '>Actions>*',\n      pointerEvents: {\n        '': 'auto',\n        '!actions-shown': 'none',\n      },\n    },\n\n    // A non-interactive box in the run, the same size as an action so it lines\n    // up with one. `$side-padding + $action-size / 2` collapses to\n    // `($size - 2bw) / 2` — the centre of `Item`'s own `rightIcon` square — so a\n    // caret moved out of that slot and into the run does not move on screen.\n    ActionIcon: {\n      $: '>Actions>',\n      display: 'grid',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      width: '$action-size',\n      height: '$action-size',\n      // The run's children are interactive by default; this one is not, and a\n      // press on it belongs to the row underneath.\n      pointerEvents: 'none',\n      // `--icon-size` comes from the preset, and the run is outside the row that\n      // sets one — so the box restates the ladder `Item` uses. The `m` weights a\n      // non-`item` type picks carry the same icon size as their plain\n      // counterparts, so weight is not a factor here.\n      preset: {\n        '': 't3',\n        'size=xsmall': 't4',\n        'size=xlarge': 't2',\n      },\n    },\n  },\n});\n\n/**\n * A non-interactive box inside an actions run — a dropdown caret, a loading\n * spinner. It occupies an action's footprint so the run stays evenly spaced,\n * and it lets presses through to the row behind it.\n */\nexport function ItemActionIcon(props: { children: ReactNode }) {\n  return <div data-element=\"ActionIcon\">{props.children}</div>;\n}\n\nexport interface ItemActionsWrapperProps {\n  /**\n   * The row or trigger the actions are laid over. Receives the resolved\n   * visibility so it can reserve space for the run while it is shown.\n   */\n  children: (state: { showActions: boolean }) => ReactNode;\n  /**\n   * The run's content. Rendering the wrapper with an empty run is supported and\n   * costs nothing — the measured width is 0 — which is how a trigger keeps its\n   * markup stable across states that do and do not have trailing controls.\n   */\n  actions?: ReactNode;\n  type?: string;\n  theme?: string;\n  /** `Item`'s size token, or a pixel number. */\n  size?: CubeItemProps['size'];\n  isDisabled?: boolean;\n  disableActionsFocus?: boolean;\n  /**\n   * Hide the actions until the row is hovered, focused, or holds a pressed\n   * control.\n   * @default false\n   */\n  autoHideActions?: boolean;\n  /** Extra modifiers for the wrapper, merged after the ones it derives itself. */\n  mods?: Mods;\n  /** Styles for the wrapper element — the one that is the row's layout box. */\n  styles?: Styles;\n  /** Props spread on the run's container, e.g. `data-trigger-action`. */\n  actionsProps?: HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * Wraps a row in the sibling-actions layout and publishes `--actions-width` so\n * the row can reserve the space the run covers.\n */\nexport function ItemActionsWrapper(props: ItemActionsWrapperProps) {\n  const {\n    children,\n    actions,\n    type = 'item',\n    theme = 'default',\n    size = 'medium',\n    isDisabled,\n    disableActionsFocus,\n    autoHideActions = false,\n    mods,\n    styles,\n    actionsProps,\n  } = props;\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWidth, setActionsWidth] = useState(0);\n  const [areActionsVisible, setAreActionsVisible] = useState(false);\n\n  useLayoutEffect(() => {\n    const el = actionsRef.current;\n\n    if (!el) return;\n\n    // An empty run still has the container's side padding, which would reserve\n    // space inside the row for nothing. Nothing rendered means nothing to\n    // reserve.\n    const width = el.childElementCount ? Math.round(el.offsetWidth) : 0;\n\n    if (width !== actionsWidth) {\n      setActionsWidth(width);\n    }\n  }, [actions, areActionsVisible, actionsWidth]);\n\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const [hasPressed, setHasPressed] = useState(false);\n  const { hoverProps, isHovered } = useHover({});\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Watch for data-pressed attribute on any descendant element\n  useLayoutEffect(() => {\n    const actionsEl = actionsRef.current;\n\n    if (!actionsEl || !autoHideActions) return;\n\n    const checkPressed = () => {\n      setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n    };\n\n    const observer = new MutationObserver(checkPressed);\n\n    observer.observe(actionsEl, {\n      attributes: true,\n      attributeFilter: ['data-pressed'],\n      subtree: true,\n    });\n\n    checkPressed();\n\n    return () => observer.disconnect();\n  }, [areActionsVisible, autoHideActions]);\n\n  const shouldShowActions =\n    isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n  // `disabled` is on the wrapper so its variant can paint the row's DISABLED\n  // label color, not just the resting one. Actions default to the `current` type\n  // and suppress their own fade when the disabled state is inherited — on the\n  // grounds that the host already faded the color they paint from — so without\n  // this the wrapper would hand them a full-strength color and a disabled button\n  // would sit next to full-strength actions. See `ITEM_RESTING_COLOR_VARIANTS`.\n  const finalMods = useMemo(() => {\n    return {\n      ...mods,\n      ...(shouldShowActions ? { 'actions-shown': true } : null),\n      disabled: isDisabled,\n    };\n  }, [mods, shouldShowActions, isDisabled]);\n\n  return (\n    <ItemActionsWrapperElement\n      {...hoverProps}\n      // The same resolver `Item` uses, so the wrapper cannot land on a\n      // different variant than the row it wraps.\n      variant={resolveItemVariant(theme, type)}\n      data-size={size}\n      data-type={type}\n      data-theme={theme}\n      mods={finalMods}\n      styles={styles}\n      style={\n        {\n          '--actions-width':\n            areActionsVisible || !autoHideActions ? `${actionsWidth}px` : '0px',\n          ...(typeof size === 'number' && { '--size': `${size}px` }),\n        } as CSSProperties\n      }\n    >\n      {children({ showActions: shouldShowActions })}\n      <ItemActionProvider\n        type={type}\n        theme={theme}\n        disableActionsFocus={disableActionsFocus}\n        isDisabled={isDisabled}\n      >\n        {autoHideActions ? (\n          <DisplayTransition\n            exposeUnmounted\n            isShown={shouldShowActions}\n            onPhaseChange={(phase) => {\n              setAreActionsVisible(phase !== 'unmounted');\n            }}\n          >\n            {({ ref: transitionRef }) => {\n              return (\n                <div\n                  {...focusWithinProps}\n                  {...actionsProps}\n                  ref={(node: any) => {\n                    actionsRef.current = node;\n                    transitionRef(node);\n                  }}\n                  data-element=\"Actions\"\n                >\n                  {actions}\n                </div>\n              );\n            }}\n          </DisplayTransition>\n        ) : (\n          <div ref={actionsRef} {...actionsProps} data-element=\"Actions\">\n            {actions}\n          </div>\n        )}\n      </ItemActionProvider>\n    </ItemActionsWrapperElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,4BAA4B,MAAM;CAQtC,UAAU;CACV,QAAQ;EAON,GAAG;EAUH,sBAAsB;EAEtB,SAAS;EACT,UAAU;EACV,cAAc;EACd,YAAY;EAEZ,OAAO;GACL,IAAI;GACJ,eAAe;GACf,cAAc;GACd,eAAe;GACf,cAAc;GACd,eAAe;GAChB;EAED,SAAS;GACP,GAAG;GACH,UAAU;GAKV,OAAO;IACL,IAAI;IACJ,aAAa;IACb,sBAAsB;IACtB,kCAAkC;IACnC;GACD,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GAQd,eAAe;GAEf,SAAS;GAKT,QAAQ;IACN,IAAI;IACJ,sBAAsB;IACvB;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IACnB;GACD,WAAW;IACT,IAAI;IACJ,kBAAkB;IACnB;GACD,YAAY;GAGZ,gBAAgB;GAEhB,iBAAiB;GAClB;EAMD,cAAc;GACZ,GAAG;GACH,eAAe;IACb,IAAI;IACJ,kBAAkB;IACnB;GACF;EAMD,YAAY;GACV,GAAG;GACH,SAAS;GACT,YAAY;GACZ,cAAc;GACd,YAAY;GACZ,OAAO;GACP,QAAQ;GAGR,eAAe;GAKf,QAAQ;IACN,IAAI;IACJ,eAAe;IACf,eAAe;IAChB;GACF;EACF;CACF,CAAC;;;;;;AAOF,SAAgB,eAAe,OAAgC;AAC7D,QAAO,oBAAC;EAAI,gBAAa;YAAc,MAAM;GAAe;;;;;;AAuC9D,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EACJ,UACA,SACA,OAAO,QACP,QAAQ,WACR,OAAO,UACP,YACA,qBACA,kBAAkB,OAClB,MACA,QACA,iBACE;CAEJ,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;AAEjE,uBAAsB;EACpB,MAAM,KAAK,WAAW;AAEtB,MAAI,CAAC,GAAI;EAKT,MAAM,QAAQ,GAAG,oBAAoB,KAAK,MAAM,GAAG,YAAY,GAAG;AAElE,MAAI,UAAU,aACZ,iBAAgB,MAAM;IAEvB;EAAC;EAAS;EAAmB;EAAa,CAAC;CAE9C,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,EAAE,qBAAqB,eAAe,EAC1C,qBAAqB,kBACtB,CAAC;AAGF,uBAAsB;EACpB,MAAM,YAAY,WAAW;AAE7B,MAAI,CAAC,aAAa,CAAC,gBAAiB;EAEpC,MAAM,qBAAqB;AACzB,iBAAc,UAAU,cAAc,iBAAiB,KAAK,KAAK;;EAGnE,MAAM,WAAW,IAAI,iBAAiB,aAAa;AAEnD,WAAS,QAAQ,WAAW;GAC1B,YAAY;GACZ,iBAAiB,CAAC,eAAe;GACjC,SAAS;GACV,CAAC;AAEF,gBAAc;AAEd,eAAa,SAAS,YAAY;IACjC,CAAC,mBAAmB,gBAAgB,CAAC;CAExC,MAAM,oBACJ,aAAa,iBAAiB,cAAc,CAAC;CAQ/C,MAAM,YAAY,cAAc;AAC9B,SAAO;GACL,GAAG;GACH,GAAI,oBAAoB,EAAE,iBAAiB,MAAM,GAAG;GACpD,UAAU;GACX;IACA;EAAC;EAAM;EAAmB;EAAW,CAAC;AAEzC,QACE,qBAAC;EACC,GAAI;EAGJ,SAAS,mBAAmB,OAAO,KAAK;EACxC,aAAW;EACX,aAAW;EACX,cAAY;EACZ,MAAM;EACE;EACR,OACE;GACE,mBACE,qBAAqB,CAAC,kBAAkB,GAAG,aAAa,MAAM;GAChE,GAAI,OAAO,SAAS,YAAY,EAAE,UAAU,GAAG,KAAK,KAAK;GAC1D;aAGF,SAAS,EAAE,aAAa,mBAAmB,CAAC,EAC7C,oBAAC;GACO;GACC;GACc;GACT;aAEX,kBACC,oBAAC;IACC;IACA,SAAS;IACT,gBAAgB,UAAU;AACxB,0BAAqB,UAAU,YAAY;;eAG3C,EAAE,KAAK,oBAAoB;AAC3B,YACE,oBAAC;MACC,GAAI;MACJ,GAAI;MACJ,MAAM,SAAc;AAClB,kBAAW,UAAU;AACrB,qBAAc,KAAK;;MAErB,gBAAa;gBAEZ;OACG;;KAGQ,GAEpB,oBAAC;IAAI,KAAK;IAAY,GAAI;IAAc,gBAAa;cAClD;KACG;IAEW;GACK"}

package/dist/components/actions/ItemButton/ItemButton.d.ts

@@ -8,7 +8,7 @@ import "../ItemAction/index.js";
 import "../../../index.js";
 import { Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/actions/ItemButton/ItemButton.d.ts
@@ -16,6 +16,11 @@ interface CubeItemButtonProps extends Omit<CubeItemProps, 'size'>, Omit<CubeUseA
   actions?: ReactNode;
   size?: Omit<CubeItemProps['size'], 'inline'>;
   wrapperStyles?: Styles;
+  /**
+   * Props spread on the actions run's container — `data-trigger-action` and
+   * friends. Only meaningful together with `actions`.
+   */
+  actionsProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _ItemButton: react.ForwardRefExoticComponent<Omit<CubeItemButtonProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>> & {
   Action: react.ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;