@cube-dev/ui-kit 0.142.9 → 0.143.0

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -0,0 +1,164 @@
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { Portal } from "../../portal/Portal.js";
+import { ListBox } from "../ListBox/ListBox.js";
+import { tasty } from "@tenphi/tasty";
+import React, { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useOverlay, useOverlayPosition } from "react-aria";
+
+//#region src/components/fields/ListBoxPopover/ListBoxPopover.tsx
+const ListBoxPopoverWrapper = tasty({
+	qa: "ComboBoxOverlayWrapper",
+	styles: {
+		position: "absolute",
+		zIndex: 1e3
+	}
+});
+const ListBoxPopoverElement = tasty({
+	qa: "ComboBoxOverlay",
+	styles: {
+		display: "grid",
+		gridRows: "1sf",
+		gridColumns: "1sf",
+		width: "$overlay-min-width max-content 50vw",
+		height: "initial max-content (50vh - 5x)",
+		overflow: "auto",
+		fill: "#surface",
+		radius: "1cr",
+		shadow: true,
+		padding: "0",
+		border: "#border",
+		hide: {
+			"": false,
+			hidden: true
+		},
+		boxSizing: "border-box",
+		transition: "translate $transition ease-out, scale $transition ease-out, theme $transition ease-out",
+		translate: {
+			"": "0 0",
+			"open & [data-placement=\"top\"]": "0 0",
+			"!open & [data-placement=\"top\"]": "0 1x",
+			"open & ([data-placement=\"bottom\"] | ![data-placement])": "0 0",
+			"!open & ([data-placement=\"bottom\"] | ![data-placement])": "0 -1x"
+		},
+		transformOrigin: {
+			"": "top center",
+			"[data-placement=\"top\"]": "bottom center"
+		},
+		scale: {
+			"": "1 1",
+			"!open": "1 .9"
+		},
+		opacity: {
+			"": 1,
+			"!open": .001
+		},
+		"$overlay-min-width": "min 30x"
+	}
+});
+const ListBoxPopover = function ListBoxPopover(props) {
+	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium", positionTargetRef, positionApiRef } = props;
+	const mergedPopoverRef = popoverRef;
+	const overlayScrollRef = useRef(null);
+	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition({
+		targetRef: positionTargetRef ?? triggerRef,
+		overlayRef: mergedPopoverRef,
+		scrollRef: overlayScrollRef,
+		placement: `${direction} start`,
+		shouldFlip,
+		isOpen,
+		offset: overlayOffset,
+		containerPadding
+	});
+	const { maxHeight, maxWidth, ...positionStyle } = overlayPositionProps.style ?? {};
+	useEffect(() => {
+		if (positionApiRef) positionApiRef.current = { updatePosition };
+		return () => {
+			if (positionApiRef) positionApiRef.current = null;
+		};
+	}, [positionApiRef, updatePosition]);
+	const { overlayProps: overlayBehaviorProps } = useOverlay({
+		onClose,
+		shouldCloseOnBlur: true,
+		isOpen,
+		isDismissable: true,
+		shouldCloseOnInteractOutside: (el) => {
+			const menuTriggerEl = el.closest("[data-popover-trigger]");
+			if (!menuTriggerEl) {
+				if (el.closest("[data-popover-keep]")) return false;
+				if (el.closest("[data-popover-dismiss]")) {
+					setTimeout(onClose, 0);
+					return false;
+				}
+				return true;
+			}
+			if (menuTriggerEl === triggerRef?.current) return true;
+			return false;
+		}
+	}, mergedPopoverRef);
+	const placementDirection = placement?.split(" ")[0] || direction;
+	const transitionRefHolder = useRef(null);
+	const setScrollRef = useCallback((node) => {
+		overlayScrollRef.current = node;
+		transitionRefHolder.current?.(node);
+	}, []);
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+		isShown: isOpen,
+		children: ({ phase, isShown, ref: transitionRef }) => {
+			transitionRefHolder.current = transitionRef;
+			return /* @__PURE__ */ jsx(ListBoxPopoverWrapper, {
+				...mergeProps$1({
+					...overlayPositionProps,
+					style: positionStyle
+				}, overlayBehaviorProps, compositeFocusProps),
+				ref: mergedPopoverRef,
+				style: positionStyle,
+				children: /* @__PURE__ */ jsx(ListBoxPopoverElement, {
+					ref: setScrollRef,
+					"data-placement": placementDirection,
+					"data-phase": phase,
+					mods: {
+						open: isShown,
+						hidden: phase === "unmounted"
+					},
+					styles: overlayStyles,
+					style: {
+						"--overlay-min-width": comboBoxWidth ? `${comboBoxWidth}px` : void 0,
+						maxHeight,
+						maxWidth
+					},
+					children: /* @__PURE__ */ jsx(ListBox, {
+						ref: listBoxRef,
+						focusOnHover: true,
+						disableSelectionToggle: true,
+						id: listBoxId,
+						"aria-label": ariaLabel || (typeof label === "string" ? label : "Options"),
+						selectedKey,
+						selectionMode: "single",
+						isDisabled,
+						disabledKeys,
+						shouldUseVirtualFocus: true,
+						items,
+						filter,
+						styles: listBoxStyles,
+						optionStyles,
+						optionHighlight,
+						sectionStyles,
+						headingStyles,
+						stateRef: listStateRef,
+						size: "medium",
+						shape: "popover",
+						onSelectionChange,
+						children
+					})
+				})
+			});
+		}
+	}) });
+};
+
+//#endregion
+export { ListBoxPopover };
+//# sourceMappingURL=ListBoxPopover.js.map

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxPopover.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, {\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n  isOpen: boolean;\n  triggerRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLDivElement>;\n  listBoxRef: RefObject<HTMLDivElement>;\n  direction: 'bottom' | 'top';\n  shouldFlip: boolean;\n  overlayOffset: number;\n  containerPadding: number;\n  /** Min width (px) for the overlay; usually the trigger's width. */\n  comboBoxWidth?: number;\n  /** Stable id used for the ListBox element and aria-controls wiring. */\n  listBoxId: string;\n  overlayStyles?: Styles;\n  listBoxStyles?: Styles;\n  optionStyles?: Styles;\n  /** Substring to highlight within each option's (text) children. */\n  optionHighlight?: string;\n  sectionStyles?: Styles;\n  headingStyles?: Styles;\n  selectedKey?: Key | null;\n  isDisabled?: boolean;\n  disabledKeys?: Iterable<Key>;\n  items?: Iterable<any>;\n  children: ReactNode;\n  /** Ref through which the ListBox exposes its internal list state. */\n  listStateRef: RefObject<any>;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClose: () => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n  /** Collection node filter applied to the ListBox. */\n  filter?: (nodes: Iterable<any>) => Iterable<any>;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * Element to anchor the overlay to geometrically. Defaults to `triggerRef`.\n   * Use this to anchor to something other than the trigger (e.g. the caret in\n   * a textarea) while keeping `triggerRef` for outside-click/dismiss logic.\n   */\n  positionTargetRef?: RefObject<Element | null>;\n  /**\n   * Receives an imperative handle exposing `updatePosition()` so the caller can\n   * force the overlay to re-anchor (e.g. when the caret moves).\n   */\n  positionApiRef?: RefObject<{ updatePosition: () => void } | null>;\n}\n\nconst ListBoxPopoverWrapper = tasty({\n  qa: 'ComboBoxOverlayWrapper',\n  styles: {\n    position: 'absolute',\n    zIndex: 1000,\n  },\n});\n\nconst ListBoxPopoverElement = tasty({\n  qa: 'ComboBoxOverlay',\n  styles: {\n    display: 'grid',\n    gridRows: '1sf',\n    gridColumns: '1sf',\n    width: '$overlay-min-width max-content 50vw',\n    height: 'initial max-content (50vh - 5x)',\n    overflow: 'auto',\n    fill: '#surface',\n    radius: '1cr',\n    shadow: true,\n    padding: '0',\n    border: '#border',\n    hide: {\n      '': false,\n      hidden: true,\n    },\n    boxSizing: 'border-box',\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n      '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .9',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n\n    '$overlay-min-width': 'min 30x',\n  },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n  props: ListBoxPopoverProps,\n) {\n  const {\n    isOpen,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    direction,\n    shouldFlip,\n    overlayOffset,\n    containerPadding,\n    comboBoxWidth,\n    listBoxId,\n    overlayStyles,\n    listBoxStyles,\n    optionStyles,\n    optionHighlight,\n    sectionStyles,\n    headingStyles,\n    selectedKey,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Ref to the inner scrollable element (the visible popover). react-aria\n  // measures this for its flip/shrink math and writes maxHeight onto the\n  // overlay (positioning wrapper); we forward that maxHeight to this element\n  // below so the scroll container actually shrinks instead of overflowing.\n  const overlayScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // Overlay positioning — anchor to the explicit position target when given\n  // (e.g. a caret anchor), otherwise to the trigger. `triggerRef` is still\n  // used below for outside-click/dismiss behavior.\n  const {\n    overlayProps: overlayPositionProps,\n    placement,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: (positionTargetRef ?? triggerRef) as any,\n    overlayRef: mergedPopoverRef as any,\n    scrollRef: overlayScrollRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\n  });\n\n  // Keep positioning (top/left/zIndex) on the wrapper, but split out the\n  // available-space cap so it can be applied to the inner scroll element.\n  const { maxHeight, maxWidth, ...positionStyle } =\n    (overlayPositionProps.style ?? {}) as CSSProperties;\n\n  // Expose updatePosition so callers can re-anchor on demand (e.g. caret move).\n  useEffect(() => {\n    if (positionApiRef) {\n      positionApiRef.current = { updatePosition };\n    }\n    return () => {\n      if (positionApiRef) {\n        positionApiRef.current = null;\n      }\n    };\n  }, [positionApiRef, updatePosition]);\n\n  // Overlay behavior (dismiss on outside click, escape)\n  const { overlayProps: overlayBehaviorProps } = useOverlay(\n    {\n      onClose,\n      shouldCloseOnBlur: true,\n      isOpen,\n      isDismissable: true,\n      shouldCloseOnInteractOutside: (el) => {\n        const menuTriggerEl = el.closest('[data-popover-trigger]');\n        if (!menuTriggerEl) {\n          if (el.closest('[data-popover-keep]')) return false;\n          // Plain interactive controls (Button, ItemButton) opt in via\n          // `data-popover-dismiss` to dismiss us without losing their click\n          // to useOverlay's stopPropagation. Schedule the close after the\n          // click finishes so the button's onPress runs first.\n          if (el.closest('[data-popover-dismiss]')) {\n            setTimeout(onClose, 0);\n            return false;\n          }\n          return true;\n        }\n        if (menuTriggerEl === triggerRef?.current) return true;\n        return false;\n      },\n    },\n    mergedPopoverRef as any,\n  );\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || direction;\n\n  // Hold the DisplayTransition ref so we can bind the same node to both the\n  // transition listener and our scroll ref via a single stable callback.\n  const transitionRefHolder = useRef<\n    ((node: HTMLElement | null) => void) | null\n  >(null);\n  const setScrollRef = useCallback((node: HTMLElement | null) => {\n    overlayScrollRef.current = node as HTMLDivElement | null;\n    transitionRefHolder.current?.(node);\n  }, []);\n\n  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergedPopoverRef}\n            style={positionStyle}\n          >\n            <ListBoxPopoverElement\n              ref={setScrollRef}\n              data-placement={placementDirection}\n              data-phase={phase}\n              mods={{\n                open: isShown,\n                hidden: phase === 'unmounted',\n              }}\n              styles={overlayStyles}\n              style={{\n                '--overlay-min-width': comboBoxWidth\n                  ? `${comboBoxWidth}px`\n                  : undefined,\n                maxHeight,\n                maxWidth,\n              }}\n            >\n              <ListBox\n                ref={listBoxRef}\n                focusOnHover\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel || (typeof label === 'string' ? label : 'Options')\n                }\n                selectedKey={selectedKey}\n                selectionMode=\"single\"\n                isDisabled={isDisabled}\n                disabledKeys={disabledKeys}\n                shouldUseVirtualFocus={true}\n                items={items as any}\n                filter={filter}\n                styles={listBoxStyles}\n                optionStyles={optionStyles}\n                optionHighlight={optionHighlight}\n                sectionStyles={sectionStyles}\n                headingStyles={headingStyles}\n                stateRef={listStateRef}\n                size=\"medium\"\n                shape=\"popover\"\n                onSelectionChange={onSelectionChange}\n              >\n                {children as any}\n              </ListBox>\n            </ListBoxPopoverElement>\n          </ListBoxPopoverWrapper>\n        );\n      }}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+
+import "./ListBoxPopover.js";
+import "./useCompositeFocus.js";
+import { ListStateLike, TextFilterFn } from "./listNavigation.js";

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

@@ -0,0 +1,24 @@
+
+import { Key } from "@react-types/shared";
+
+//#region src/components/fields/ListBoxPopover/listNavigation.d.ts
+/**
+ * Minimal view of a React Stately list state. Kept structural (no imports from
+ * `react-stately`) so the helpers can be used from any collection-backed
+ * component without dragging extra types in.
+ */
+interface ListStateLike {
+  selectionManager: {
+    focusedKey: Key | null;
+    setFocusedKey: (key: Key | null) => void;
+  };
+  collection: Iterable<any>;
+  disabledKeys?: Set<Key>;
+  lastFocusSourceRef?: {
+    current: 'keyboard' | 'mouse' | 'other';
+  };
+}
+type TextFilterFn = (textValue: string, inputValue: string) => boolean;
+//#endregion
+export { ListStateLike, TextFilterFn };
+//# sourceMappingURL=listNavigation.d.ts.map

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -0,0 +1,102 @@
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
+//#region src/components/fields/ListBoxPopover/listNavigation.ts
+/**
+* Walks a collection (possibly nested under sections) and collects the keys of
+* selectable items, skipping disabled ones. Mirrors the inline walker that
+* used to live in `useComboBoxKeyboard`.
+*/
+function collectVisibleKeys(nodes, out, disabledKeys) {
+	for (const node of nodes) if (node.type === "item") {
+		if (!disabledKeys?.has(node.key)) out.push(node.key);
+	} else if (node.childNodes) collectVisibleKeys(node.childNodes, out, disabledKeys);
+}
+/** Convenience: returns the flat list of selectable keys for a list state. */
+function getVisibleKeys(listState) {
+	const keys = [];
+	collectVisibleKeys(listState.collection, keys, listState.disabledKeys);
+	return keys;
+}
+/**
+* Computes the next key to focus when navigating with ArrowUp/ArrowDown.
+*
+* - If `fromKey` is omitted, reads `selectionManager.focusedKey`.
+* - When nothing is focused (or the focused key is no longer visible), falls
+*   back to the first/last visible key depending on `direction`.
+* - When the current key is the boundary, either returns `null` (default) or
+*   wraps to the opposite edge when `opts.wrap` is true.
+*/
+function getNextVisibleKey(listState, direction, opts) {
+	const visibleKeys = getVisibleKeys(listState);
+	if (visibleKeys.length === 0) return null;
+	const isForward = direction === 1;
+	const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;
+	if (currentKey == null) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+	const currentIndex = visibleKeys.indexOf(currentKey);
+	if (currentIndex === -1) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+	const newIndex = currentIndex + direction;
+	if (newIndex >= 0 && newIndex < visibleKeys.length) return visibleKeys[newIndex];
+	if (opts?.wrap) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+	return null;
+}
+/** Returns the first or last selectable key. */
+function getEdgeVisibleKey(listState, edge) {
+	const visibleKeys = getVisibleKeys(listState);
+	if (visibleKeys.length === 0) return null;
+	return edge === "first" ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+}
+/**
+* Marks a focus change as keyboard-driven so the underlying ListBox scrolls the
+* highlighted option into view. No-op when the list state doesn't expose a
+* `lastFocusSourceRef`.
+*/
+function markKeyboardFocus(listState) {
+	if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
+}
+/**
+* Collects the strings a node can be matched against. Always includes the
+* node's `textValue`; when `matchExtraFields` is set, also includes any
+* plain-text `children` and `description` props. Non-string children/description
+* (e.g. React elements) are ignored since we can't reliably read their text.
+*/
+function getSearchableStrings(node, matchExtraFields) {
+	const strings = [];
+	if (node.textValue) strings.push(node.textValue);
+	if (matchExtraFields) {
+		const props = node.props;
+		if (props) {
+			if (typeof props.children === "string") strings.push(props.children);
+			if (typeof props.description === "string") strings.push(props.description);
+		}
+	}
+	return strings.length > 0 ? strings : [node.textValue || ""];
+}
+/** True when the term matches any of the node's searchable strings. */
+function nodeMatchesTerm(node, term, textFilterFn, matchExtraFields) {
+	return getSearchableStrings(node, matchExtraFields).some((text) => textFilterFn(text, term));
+}
+/**
+* Filters collection nodes by a search term while preserving section structure.
+* By default a node matches only when the term matches its `textValue`; pass
+* `{ matchExtraFields: true }` to also match its plain-text `children` and
+* `description`. Sections whose children all fail the filter are dropped.
+*/
+function filterCollectionNodes(nodes, term, textFilterFn, options = {}) {
+	if (!term) return nodes;
+	const matchExtraFields = options.matchExtraFields ?? false;
+	return [...nodes].map((node) => {
+		if (node.type === "section" && node.childNodes) {
+			const filteredChildren = [...node.childNodes].filter((child) => nodeMatchesTerm(child, term, textFilterFn, matchExtraFields));
+			if (filteredChildren.length === 0) return null;
+			return {
+				...node,
+				childNodes: filteredChildren,
+				hasChildNodes: true
+			};
+		}
+		return nodeMatchesTerm(node, term, textFilterFn, matchExtraFields) ? node : null;
+	}).filter(Boolean);
+}
+
+//#endregion
+export { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus };
+//# sourceMappingURL=listNavigation.js.map

package/dist/components/fields/ListBoxPopover/listNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listNavigation.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n  selectionManager: {\n    focusedKey: Key | null;\n    setFocusedKey: (key: Key | null) => void;\n  };\n  collection: Iterable<any>;\n  disabledKeys?: Set<Key>;\n  lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n  nodes: Iterable<any>,\n  out: Key[],\n  disabledKeys?: Set<Key>,\n): void {\n  for (const node of nodes) {\n    if (node.type === 'item') {\n      if (!disabledKeys?.has(node.key)) {\n        out.push(node.key);\n      }\n    } else if (node.childNodes) {\n      collectVisibleKeys(node.childNodes, out, disabledKeys);\n    }\n  }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n  const keys: Key[] = [];\n  collectVisibleKeys(\n    listState.collection,\n    keys,\n    listState.disabledKeys as Set<Key> | undefined,\n  );\n  return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n *   back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n *   wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n  listState: ListStateLike,\n  direction: NavigationDirection,\n  opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n\n  const isForward = direction === 1;\n  const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n  if (currentKey == null) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const currentIndex = visibleKeys.indexOf(currentKey);\n\n  if (currentIndex === -1) {\n    // Focused item was filtered out — restart from the matching edge.\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const newIndex = currentIndex + direction;\n  if (newIndex >= 0 && newIndex < visibleKeys.length) {\n    return visibleKeys[newIndex];\n  }\n\n  if (opts?.wrap) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n  listState: ListStateLike,\n  edge: NavigationEdge,\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n  return edge === 'first'\n    ? visibleKeys[0]\n    : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n  if (listState.lastFocusSourceRef) {\n    listState.lastFocusSourceRef.current = 'keyboard';\n  }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/** Options controlling how {@link filterCollectionNodes} matches nodes. */\nexport interface FilterCollectionOptions {\n  /**\n   * Also match against a node's plain-text `children` and `description` props\n   * in addition to its `textValue`. Defaults to `false` so the search stays\n   * consistent with the visible `textValue` (which is what components like\n   * ComboBox document). Components that surface `children`/`description` in the\n   * option list (e.g. CommandTextArea) can opt in.\n   */\n  matchExtraFields?: boolean;\n}\n\n/**\n * Collects the strings a node can be matched against. Always includes the\n * node's `textValue`; when `matchExtraFields` is set, also includes any\n * plain-text `children` and `description` props. Non-string children/description\n * (e.g. React elements) are ignored since we can't reliably read their text.\n */\nfunction getSearchableStrings(node: any, matchExtraFields: boolean): string[] {\n  const strings: string[] = [];\n\n  if (node.textValue) {\n    strings.push(node.textValue);\n  }\n\n  if (matchExtraFields) {\n    const props = node.props;\n    if (props) {\n      if (typeof props.children === 'string') {\n        strings.push(props.children);\n      }\n      if (typeof props.description === 'string') {\n        strings.push(props.description);\n      }\n    }\n  }\n\n  return strings.length > 0 ? strings : [node.textValue || ''];\n}\n\n/** True when the term matches any of the node's searchable strings. */\nfunction nodeMatchesTerm(\n  node: any,\n  term: string,\n  textFilterFn: TextFilterFn,\n  matchExtraFields: boolean,\n): boolean {\n  return getSearchableStrings(node, matchExtraFields).some((text) =>\n    textFilterFn(text, term),\n  );\n}\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * By default a node matches only when the term matches its `textValue`; pass\n * `{ matchExtraFields: true }` to also match its plain-text `children` and\n * `description`. Sections whose children all fail the filter are dropped.\n */\nexport function filterCollectionNodes(\n  nodes: Iterable<any>,\n  term: string,\n  textFilterFn: TextFilterFn,\n  options: FilterCollectionOptions = {},\n): Iterable<any> {\n  if (!term) {\n    return nodes;\n  }\n\n  const matchExtraFields = options.matchExtraFields ?? false;\n\n  return [...nodes]\n    .map((node: any) => {\n      if (node.type === 'section' && node.childNodes) {\n        const filteredChildren = [...node.childNodes].filter((child: any) =>\n          nodeMatchesTerm(child, term, textFilterFn, matchExtraFields),\n        );\n\n        if (filteredChildren.length === 0) {\n          return null;\n        }\n\n        return {\n          ...node,\n          childNodes: filteredChildren,\n          hasChildNodes: true,\n        };\n      }\n\n      return nodeMatchesTerm(node, term, textFilterFn, matchExtraFields)\n        ? node\n        : null;\n    })\n    .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,mBACd,OACA,KACA,cACM;AACN,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,SAAS,QAChB;MAAI,CAAC,cAAc,IAAI,KAAK,IAAI,CAC9B,KAAI,KAAK,KAAK,IAAI;YAEX,KAAK,WACd,oBAAmB,KAAK,YAAY,KAAK,aAAa;;;AAM5D,SAAgB,eAAe,WAAiC;CAC9D,MAAM,OAAc,EAAE;AACtB,oBACE,UAAU,YACV,MACA,UAAU,aACX;AACD,QAAO;;;;;;;;;;;AAYT,SAAgB,kBACd,WACA,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;CAErC,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa,MAAM,WAAW,UAAU,iBAAiB;AAE/D,KAAI,cAAc,KAChB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,KAAI,iBAAiB,GAEnB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,WAAW,eAAe;AAChC,KAAI,YAAY,KAAK,WAAW,YAAY,OAC1C,QAAO,YAAY;AAGrB,KAAI,MAAM,KACR,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;AAGvE,QAAO;;;AAIT,SAAgB,kBACd,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;AACrC,QAAO,SAAS,UACZ,YAAY,KACZ,YAAY,YAAY,SAAS;;;;;;;AAQvC,SAAgB,kBAAkB,WAAgC;AAChE,KAAI,UAAU,mBACZ,WAAU,mBAAmB,UAAU;;;;;;;;AAwB3C,SAAS,qBAAqB,MAAW,kBAAqC;CAC5E,MAAM,UAAoB,EAAE;AAE5B,KAAI,KAAK,UACP,SAAQ,KAAK,KAAK,UAAU;AAG9B,KAAI,kBAAkB;EACpB,MAAM,QAAQ,KAAK;AACnB,MAAI,OAAO;AACT,OAAI,OAAO,MAAM,aAAa,SAC5B,SAAQ,KAAK,MAAM,SAAS;AAE9B,OAAI,OAAO,MAAM,gBAAgB,SAC/B,SAAQ,KAAK,MAAM,YAAY;;;AAKrC,QAAO,QAAQ,SAAS,IAAI,UAAU,CAAC,KAAK,aAAa,GAAG;;;AAI9D,SAAS,gBACP,MACA,MACA,cACA,kBACS;AACT,QAAO,qBAAqB,MAAM,iBAAiB,CAAC,MAAM,SACxD,aAAa,MAAM,KAAK,CACzB;;;;;;;;AASH,SAAgB,sBACd,OACA,MACA,cACA,UAAmC,EAAE,EACtB;AACf,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,mBAAmB,QAAQ,oBAAoB;AAErD,QAAO,CAAC,GAAG,MAAM,CACd,KAAK,SAAc;AAClB,MAAI,KAAK,SAAS,aAAa,KAAK,YAAY;GAC9C,MAAM,mBAAmB,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,UACpD,gBAAgB,OAAO,MAAM,cAAc,iBAAiB,CAC7D;AAED,OAAI,iBAAiB,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAG;IACH,YAAY;IACZ,eAAe;IAChB;;AAGH,SAAO,gBAAgB,MAAM,MAAM,cAAc,iBAAiB,GAC9D,OACA;GACJ,CACD,OAAO,QAAQ"}

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

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

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -0,0 +1,53 @@
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/components/fields/ListBoxPopover/useCompositeFocus.ts
+/**
+* Tracks focus across a wrapper element and its (portaled) popover as a single
+* logical focus scope. Fires `onFocus` when focus enters either and `onBlur`
+* when it leaves both — essential for components whose overlay is portaled, so
+* that clicking an option does not look like a blur of the whole component.
+*
+* Focus checks are deferred to the next animation frame to tolerate the
+* synchronous focus shuffles React Aria and portals perform on selection.
+*/
+function useCompositeFocus({ wrapperRef, popoverRef, onFocus, onBlur, isDisabled }) {
+	const wasInsideRef = useRef(false);
+	const rafRef = useRef(null);
+	const checkFocus = useCallback(() => {
+		if (isDisabled) return;
+		const activeElement = document.activeElement;
+		const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
+		if (isInside !== wasInsideRef.current) {
+			wasInsideRef.current = isInside;
+			if (isInside) onFocus?.();
+			else onBlur?.();
+		}
+	}, [
+		wrapperRef,
+		popoverRef,
+		onFocus,
+		onBlur,
+		isDisabled
+	]);
+	const handleFocusOrBlur = useCallback((e) => {
+		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			checkFocus();
+		});
+	}, [checkFocus]);
+	useEffect(() => {
+		return () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		};
+	}, []);
+	return { compositeFocusProps: {
+		onFocus: handleFocusOrBlur,
+		onBlur: handleFocusOrBlur
+	} };
+}
+
+//#endregion
+export { useCompositeFocus };
+//# sourceMappingURL=useCompositeFocus.js.map

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCompositeFocus.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/useCompositeFocus.ts"],"sourcesContent":["import React, { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface UseCompositeFocusProps {\n  wrapperRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLElement>;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface UseCompositeFocusReturn {\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n}\n\n/**\n * Tracks focus across a wrapper element and its (portaled) popover as a single\n * logical focus scope. Fires `onFocus` when focus enters either and `onBlur`\n * when it leaves both — essential for components whose overlay is portaled, so\n * that clicking an option does not look like a blur of the whole component.\n *\n * Focus checks are deferred to the next animation frame to tolerate the\n * synchronous focus shuffles React Aria and portals perform on selection.\n */\nexport function useCompositeFocus({\n  wrapperRef,\n  popoverRef,\n  onFocus,\n  onBlur,\n  isDisabled,\n}: UseCompositeFocusProps): UseCompositeFocusReturn {\n  const wasInsideRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const checkFocus = useCallback(() => {\n    if (isDisabled) return;\n\n    const activeElement = document.activeElement;\n    const isInside =\n      (wrapperRef.current?.contains(activeElement) ?? false) ||\n      (popoverRef.current?.contains(activeElement) ?? false);\n\n    if (isInside !== wasInsideRef.current) {\n      wasInsideRef.current = isInside;\n      if (isInside) {\n        onFocus?.();\n      } else {\n        onBlur?.();\n      }\n    }\n  }, [wrapperRef, popoverRef, onFocus, onBlur, isDisabled]);\n\n  const handleFocusOrBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Cancel any pending check\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      // Schedule focus check for next frame\n      rafRef.current = requestAnimationFrame(() => {\n        rafRef.current = null;\n        checkFocus();\n      });\n    },\n    [checkFocus],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    compositeFocusProps: {\n      onFocus: handleFocusOrBlur,\n      onBlur: handleFocusOrBlur,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAgB,kBAAkB,EAChC,YACA,YACA,SACA,QACA,cACkD;CAClD,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,SAAS,OAAsB,KAAK;CAE1C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAY;EAEhB,MAAM,gBAAgB,SAAS;EAC/B,MAAM,YACH,WAAW,SAAS,SAAS,cAAc,IAAI,WAC/C,WAAW,SAAS,SAAS,cAAc,IAAI;AAElD,MAAI,aAAa,aAAa,SAAS;AACrC,gBAAa,UAAU;AACvB,OAAI,SACF,YAAW;OAEX,WAAU;;IAGb;EAAC;EAAY;EAAY;EAAS;EAAQ;EAAW,CAAC;CAEzD,MAAM,oBAAoB,aACvB,MAAwB;AAEvB,MAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;AAItC,SAAO,UAAU,4BAA4B;AAC3C,UAAO,UAAU;AACjB,eAAY;IACZ;IAEJ,CAAC,WAAW,CACb;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO,EACL,qBAAqB;EACnB,SAAS;EACT,QAAQ;EACT,EACF"}

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";
 import { tasty } from "@tenphi/tasty";
@@ -9,14 +9,15 @@ const StepButtonElement = tasty(Button, {
 	preventDefault: true,
 	type: "clear",
 	styles: {
-		width: "2.5x",
+		width: "($local-size * 1.25)",
 		height: "auto",
 		radius: {
 			"": "0 (1r - 1bw) 0 0",
 			down: "0 0 (1r - 1bw) 0"
 		},
 		padding: 0,
-		"$icon-size": "1em",
+		$size: "inherit",
+		"$local-size": "(($size - 2bw) / 2)",
 		Icon: {
 			width: "auto",
 			height: "auto"
@@ -36,7 +37,10 @@ function StepButton(props) {
 		},
 		label: `Step ${props.direction}`,
 		...props,
-		children: /* @__PURE__ */ jsx(DirectionIcon, { to: props.direction })
+		children: /* @__PURE__ */ jsx(DirectionIcon, {
+			to: props.direction,
+			styles: { fontSize: "$local-size" }
+		})
 	});
 }
 

package/dist/components/fields/NumberInput/StepButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButton.js","names":[],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { CaretDownIcon, CaretUpIcon, DirectionIcon } from '../../../icons';\nimport { Button } from '../../actions';\n\nconst StepButtonElement = tasty(Button, {\n  preventDefault: true,\n  type: 'clear',\n  styles: {\n    width: '2.5x',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    '$icon-size': '1em',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField.\n */\nexport function StepButton(props) {\n  return (\n    <StepButtonElement\n      preventDefault\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      label={`Step ${props.direction}`}\n      {...props}\n    >\n      <DirectionIcon to={props.direction} />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;AAKA,MAAM,oBAAoB,MAAM,QAAQ;CACtC,gBAAgB;CAChB,MAAM;CACN,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,SAAS;EAET,cAAc;EAEd,MAAM;GACJ,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;;;;AAKF,SAAgB,WAAW,OAAO;AAChC,QACE,oBAAC;EACC;EACA,MAAK;EACL,MAAM;GACJ,IAAI,MAAM,cAAc;GACxB,MAAM,MAAM,cAAc;GAC3B;EACD,OAAO,QAAQ,MAAM;EACrB,GAAI;YAEJ,oBAAC,iBAAc,IAAI,MAAM,YAAa;GACpB"}
+{"version":3,"file":"StepButton.js","names":[],"sources":["../../../../src/components/fields/NumberInput/StepButton.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { CaretDownIcon, CaretUpIcon, DirectionIcon } from '../../../icons';\nimport { Button } from '../../actions';\n\nconst StepButtonElement = tasty(Button, {\n  preventDefault: true,\n  type: 'clear',\n  styles: {\n    width: '($local-size * 1.25)',\n    height: 'auto',\n    radius: {\n      '': '0 (1r - 1bw) 0 0',\n      down: '0 0 (1r - 1bw) 0',\n    },\n    padding: 0,\n\n    $size: 'inherit',\n    '$local-size': '(($size - 2bw) / 2)',\n\n    Icon: {\n      width: 'auto',\n      height: 'auto',\n    },\n  },\n});\n\n/**\n * Buttons for NumberField.\n */\nexport function StepButton(props) {\n  return (\n    <StepButtonElement\n      preventDefault\n      type=\"clear\"\n      mods={{\n        up: props.direction === 'up',\n        down: props.direction === 'down',\n      }}\n      label={`Step ${props.direction}`}\n      {...props}\n    >\n      <DirectionIcon\n        to={props.direction}\n        styles={{ fontSize: '$local-size' }}\n      />\n    </StepButtonElement>\n  );\n}\n"],"mappings":";;;;;;;AAKA,MAAM,oBAAoB,MAAM,QAAQ;CACtC,gBAAgB;CAChB,MAAM;CACN,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,SAAS;EAET,OAAO;EACP,eAAe;EAEf,MAAM;GACJ,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;;;;AAKF,SAAgB,WAAW,OAAO;AAChC,QACE,oBAAC;EACC;EACA,MAAK;EACL,MAAM;GACJ,IAAI,MAAM,cAAc;GACxB,MAAM,MAAM,cAAc;GAC3B;EACD,OAAO,QAAQ,MAAM;EACrB,GAAI;YAEJ,oBAAC;GACC,IAAI,MAAM;GACV,QAAQ,EAAE,UAAU,eAAe;IACnC;GACgB"}

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Select/Select.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/Gradation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/Slider/HueSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/RangeSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";

package/dist/components/fields/Slider/Slider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";

package/dist/components/fields/Slider/SliderBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/SliderThumb.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SliderThumbElement } from "./elements.js";
 import { useMemo, useRef } from "react";

package/dist/components/fields/Slider/SliderTrack.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/elements.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

package/dist/components/fields/Switch/Switch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/TextArea/TextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/TextInput/TextInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/TextInputMapper/TextInputMapper.js

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