@cube-dev/ui-kit 0.151.0 → 0.153.0

package/dist/components/content/Tree/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","names":["Menu","mergeProps","Checkbox","MenuTrigger"],"sources":["../../../../src/components/content/Tree/TreeNode.tsx"],"sourcesContent":["import { Children, memo, useMemo, useRef, useState } from 'react';\nimport { useHover, useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { DirectionIcon, LoadingIcon, MoreIcon } from '../../../icons';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\nimport { Checkbox } from '../../fields/Checkbox/Checkbox';\n\nimport {\n  TreeNodeCheckboxWrapper,\n  TreeNodeRow,\n  TreeNodeToggle,\n  TreeNodeTogglePlaceholder,\n  TreeRowItem,\n} from './styled';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type {\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  Ref,\n  SyntheticEvent,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type {\n  CubeTreeNodeData,\n  TreeContextMenu,\n  TreeItemProps,\n  TreeNodeState,\n} from './types';\n\nconst stopPropagation = (e: SyntheticEvent) => {\n  e.stopPropagation();\n};\n\n/** Check whether a `menu` ReactNode actually contains anything. */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined || menu === false) return true;\n  return Children.toArray(menu).length === 0;\n}\n\nexport interface TreeNodeProps {\n  node: Node<CubeTreeNodeData>;\n  /** The original `CubeTreeNodeData` for this row, looked up by key. */\n  data: CubeTreeNodeData;\n  state: TreeState<CubeTreeNodeData>;\n\n  /** Whether the tree as a whole renders checkboxes. */\n  isCheckable: boolean;\n  /** Whether this row is currently expanded. */\n  isExpanded: boolean;\n  /** Whether the row is in an indeterminate (half-checked) state. */\n  isIndeterminate: boolean;\n  /** Whether the row is fully checked. */\n  isChecked: boolean;\n  /** Whether `loadData` is currently fetching this row's children. */\n  isLoading: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Row size passed to the underlying Item. */\n  size?: string;\n\n  /** Per-node Item customization (static object or callback). */\n  itemProps?:\n    | TreeItemProps\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n\n  /** Inline style for virtualizer absolute positioning. */\n  virtualStyle?: CSSProperties;\n  /** Ref callback from `@tanstack/react-virtual` to measure row height. */\n  virtualRef?: (element: HTMLElement | null) => void;\n  /** Virtual index for `data-index` attribute. */\n  virtualIndex?: number;\n\n  /** Tree-wide menu default (resolved against `data.menu`). */\n  menu?:\n    | ReactNode\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => ReactNode | null);\n  /** Tree-wide `contextMenu` default. */\n  contextMenu?: TreeContextMenu;\n  /** Tree-wide `onAction` callback. */\n  onAction?: (action: string, key: Key) => void;\n  /** Forwarded to every per-row `MenuTrigger`. */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Forwarded to every per-row `Menu`. */\n  menuProps?: Partial<CubeMenuProps<object>>;\n}\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const { t } = useI18n();\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    onToggleChecked,\n    size,\n    itemProps,\n    rowStyles,\n    virtualStyle,\n    virtualRef,\n    virtualIndex,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node },\n    state,\n    rowRef,\n  );\n\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isSelected = state.selectionManager.isSelected(node.key);\n\n  // `useTreeItem` doesn't track hover; we need it for the `hovered` mod.\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  // React Aria's treegrid uses roving tabindex, so no `data-focused`\n  // attribute lands on the row — mirror it as a mod manually.\n  const isFocused =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n  // For lazy rows with no children yet, still render a toggle unless\n  // explicitly marked as leaf.\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const nodeState: TreeNodeState = {\n    isExpanded,\n    isSelected,\n    isChecked,\n    isIndeterminate,\n    isLeaf,\n  };\n\n  // ---- Menu resolution (per-node override > tree-level) --------------------\n\n  const effectiveMenuChildren: ReactNode =\n    data.menu === null\n      ? null\n      : data.menu !== undefined\n        ? data.menu\n        : typeof treeMenu === 'function'\n          ? treeMenu(data, nodeState)\n          : treeMenu ?? null;\n  const hasMenu = !isMenuEmpty(effectiveMenuChildren);\n\n  const effectiveContextMenu: TreeContextMenu =\n    data.contextMenu ?? treeContextMenu ?? false;\n  // The menu is exposed only when the consumer opts in via\n  // `contextMenu`. When `contextMenu` is `false` (default) we render\n  // nothing, even if `menu` is provided — this matches the plan and\n  // keeps default rows visually clean.\n  const menuExposed =\n    hasMenu &&\n    (effectiveContextMenu === true || effectiveContextMenu === 'context-only');\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map.\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n    data.onAction?.(normalizedAction);\n    treeOnAction?.(normalizedAction, node.key);\n    // Forward to the consumer-supplied `menuProps.onAction` so users\n    // who pass extra `Menu` props through `menuProps` still receive\n    // the action stream alongside the tree-level callback.\n    menuProps?.onAction?.(normalizedAction);\n  });\n\n  const rowContextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...menuProps,\n      onAction: handleMenuAction,\n      children: effectiveMenuChildren,\n    },\n  );\n\n  // ---- Checkbox ------------------------------------------------------------\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  const handleWrapperClick = useEvent((e: MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    if (isDisabled || data.isCheckboxDisabled) return;\n    // The inner <Checkbox> label toggles on direct click; skip to avoid a double toggle.\n    if ((e.target as HTMLElement).closest('[data-qa=\"CheckboxWrapper\"]'))\n      return;\n    onToggleChecked(String(node.key));\n  });\n\n  // ---- Keyboard ------------------------------------------------------------\n\n  // Composed keydown handler. Runs BEFORE `rowProps.onKeyDown` from\n  // `useTreeItem` so we can short-circuit the default react-aria\n  // behavior for our own shortcuts (Shift+F10 menu open, Space\n  // checkbox toggle). Returns `true` when the event was handled and\n  // react-aria's keydown must NOT run; returns `false` to chain to\n  // react-aria's handler.\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Space toggles the checkbox first when checkable. We DON'T claim\n    // the event (return `false`) so react-aria's onKeyDown still runs\n    // afterwards and the focused row also selects — matching the\n    // pre-refactor behavior when handlers were chained via\n    // `mergeProps`. `preventDefault` is kept to suppress page scroll.\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n      return false;\n    }\n\n    // Shift+F10 opens the row menu (standard accessibility shortcut).\n    if (e.key === 'F10' && e.shiftKey && menuExposed) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        rowContextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n      return true;\n    }\n\n    return false;\n  });\n\n  // Wrapper that delegates to react-aria's default keydown only when\n  // our handler did not claim the event. Replaces (rather than\n  // chains with) `rowProps.onKeyDown` so the order of handlers is\n  // strictly: our shortcuts → react-aria default.\n  const composedKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    if (handleKeyDown(e)) return;\n    rowProps.onKeyDown?.(e as unknown as globalThis.KeyboardEvent);\n  });\n\n  // ---- Mods ----------------------------------------------------------------\n\n  const sharedMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      loading: isLoading,\n      leaf: isLeaf,\n      'has-checkbox': isRowCheckable,\n      'has-menu': menuExposed,\n    }),\n    [\n      isChecked,\n      isIndeterminate,\n      isExpanded,\n      isLoading,\n      isLeaf,\n      isRowCheckable,\n      menuExposed,\n    ],\n  );\n\n  const rowMods = useMemo(\n    () => ({ ...sharedMods, disabled: isDisabled }),\n    [sharedMods, isDisabled],\n  );\n\n  const itemMods = useMemo(\n    () => ({\n      ...sharedMods,\n      focused: isFocused,\n      hovered: isHovered,\n      pressed: isPressed,\n    }),\n    [sharedMods, isFocused, isHovered, isPressed],\n  );\n\n  const rowStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(node.level ?? 0),\n      ...virtualStyle,\n    }),\n    [node.level, virtualStyle],\n  );\n\n  // Only emit `aria-checked` when the tree is in checkable mode.\n  const ariaChecked: 'mixed' | 'true' | 'false' | undefined = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  // ---- Compose row props ---------------------------------------------------\n\n  // Merge react-aria + hover props but EXCLUDE `onKeyDown` from the\n  // chain — `composedKeyDown` already wraps `rowProps.onKeyDown` and\n  // must run first so our Shift+F10 / Space-checkbox shortcuts can\n  // short-circuit the default react-aria behavior.\n  const finalRowProps = {\n    ...mergeProps(rowProps, hoverProps),\n    'aria-checked': ariaChecked,\n    onKeyDown: composedKeyDown,\n  };\n\n  // ---- Toggle (chevron) and checkbox slots --------------------------------\n\n  // Leaf rows get a placeholder so sibling indents align.\n  const toggleNode = isLeaf ? (\n    <TreeNodeTogglePlaceholder aria-hidden data-element=\"Toggle\" />\n  ) : (\n    <TreeNodeToggle {...expandButtonProps} tabIndex={-1} data-element=\"Toggle\">\n      {isLoading ? (\n        <LoadingIcon />\n      ) : (\n        <DirectionIcon to={isExpanded ? 'bottom' : 'right'} />\n      )}\n    </TreeNodeToggle>\n  );\n\n  const checkboxNode = isRowCheckable ? (\n    <TreeNodeCheckboxWrapper\n      data-element=\"Checkbox\"\n      role=\"presentation\"\n      onClick={handleWrapperClick}\n      onKeyDown={stopPropagation}\n    >\n      <Checkbox\n        isSelected={isChecked}\n        isIndeterminate={isIndeterminate}\n        isDisabled={isDisabled || data.isCheckboxDisabled}\n        aria-label={\n          typeof data.title === 'string' ? data.title : String(node.key)\n        }\n        // @ts-expect-error AriaCheckboxProps loses `onChange` where InputDOMProps overlaps (react-types).\n        onChange={handleCheckboxChange}\n      />\n    </TreeNodeCheckboxWrapper>\n  ) : null;\n\n  // ---- Resolve user-supplied per-node Item props --------------------------\n\n  const resolvedItemProps =\n    typeof itemProps === 'function' ? itemProps(data, nodeState) : itemProps;\n  const {\n    prefix: userPrefix,\n    actions: userActions,\n    ...restUserProps\n  } = resolvedItemProps ?? {};\n\n  const composedPrefix =\n    checkboxNode || userPrefix ? (\n      <>\n        {checkboxNode}\n        {userPrefix}\n      </>\n    ) : null;\n\n  // ---- Built-in overflow `⋮` action ---------------------------------------\n\n  const menuAction =\n    menuExposed && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          aria-label={t('tree.actions', 'Actions')}\n          {...menuTriggerProps}\n        />\n        <Menu {...menuProps} onAction={handleMenuAction}>\n          {effectiveMenuChildren}\n        </Menu>\n      </MenuTrigger>\n    ) : null;\n\n  // Compose with user-supplied actions (user actions render first).\n  const composedActions =\n    userActions || menuAction ? (\n      <>\n        {userActions}\n        {menuAction}\n      </>\n    ) : undefined;\n\n  // ---- Refs / context-menu wiring -----------------------------------------\n\n  // When the context menu is enabled for this row, attach the hook's\n  // `targetRef` to the row so right-clicks land on the correct anchor.\n  const refs = useMemo(() => {\n    const list: Ref<HTMLDivElement>[] = [rowRef];\n    if (virtualRef) list.push(virtualRef);\n    if (menuExposed) list.push(rowContextMenu.targetRef);\n    return mergeRefs(...list);\n  }, [virtualRef, menuExposed, rowContextMenu.targetRef]);\n\n  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={refs}\n      mods={rowMods}\n      style={rowStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n      data-index={virtualIndex}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        {...restUserProps}\n        size={size}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={composedPrefix}\n        actions={composedActions}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n      {menuExposed && rowContextMenu.rendered}\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":"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"}
+{"version":3,"file":"TreeNode.js","names":["Menu","mergeProps","Checkbox","MenuTrigger"],"sources":["../../../../src/components/content/Tree/TreeNode.tsx"],"sourcesContent":["import { Children, memo, useMemo, useRef, useState } from 'react';\nimport { useHover, useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { DirectionIcon, LoadingIcon, MoreIcon } from '../../../icons';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\nimport { Checkbox } from '../../fields/Checkbox/Checkbox';\n\nimport {\n  TreeNodeCheckboxWrapper,\n  TreeNodeRow,\n  TreeNodeToggle,\n  TreeNodeTogglePlaceholder,\n  TreeRowItem,\n} from './styled';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type {\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  Ref,\n  SyntheticEvent,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type {\n  CubeTreeNodeData,\n  TreeContextMenu,\n  TreeItemProps,\n  TreeNodeState,\n} from './types';\n\nconst stopPropagation = (e: SyntheticEvent) => {\n  e.stopPropagation();\n};\n\n/** Check whether a `menu` ReactNode actually contains anything. */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined || menu === false) return true;\n  return Children.toArray(menu).length === 0;\n}\n\nexport interface TreeNodeProps {\n  node: Node<CubeTreeNodeData>;\n  /** The original `CubeTreeNodeData` for this row, looked up by key. */\n  data: CubeTreeNodeData;\n  state: TreeState<CubeTreeNodeData>;\n\n  /** Whether the tree as a whole renders checkboxes. */\n  isCheckable: boolean;\n  /** Whether this row is currently expanded. */\n  isExpanded: boolean;\n  /** Whether the row is in an indeterminate (half-checked) state. */\n  isIndeterminate: boolean;\n  /** Whether the row is fully checked. */\n  isChecked: boolean;\n  /** Whether `loadData` is currently fetching this row's children. */\n  isLoading: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Row size passed to the underlying Item. */\n  size?: string;\n\n  /** Per-node Item customization (static object or callback). */\n  itemProps?:\n    | TreeItemProps\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n\n  /** Inline style for virtualizer absolute positioning. */\n  virtualStyle?: CSSProperties;\n  /** Ref callback from `@tanstack/react-virtual` to measure row height. */\n  virtualRef?: (element: HTMLElement | null) => void;\n  /** Virtual index for `data-index` attribute. */\n  virtualIndex?: number;\n\n  /** Tree-wide menu default (resolved against `data.menu`). */\n  menu?:\n    | ReactNode\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => ReactNode | null);\n  /** Tree-wide `contextMenu` default. */\n  contextMenu?: TreeContextMenu;\n  /** Tree-wide `onAction` callback. */\n  onAction?: (action: string, key: Key) => void;\n  /** Forwarded to every per-row `MenuTrigger`. */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Forwarded to every per-row `Menu`. */\n  menuProps?: Partial<CubeMenuProps<object>>;\n}\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const { t } = useI18n();\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    onToggleChecked,\n    size,\n    itemProps,\n    rowStyles,\n    virtualStyle,\n    virtualRef,\n    virtualIndex,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node },\n    state,\n    rowRef,\n  );\n\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isSelected = state.selectionManager.isSelected(node.key);\n\n  // `useTreeItem` doesn't track hover; we need it for the `hovered` mod.\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  // React Aria's treegrid uses roving tabindex, so no `data-focused`\n  // attribute lands on the row — mirror it as a mod manually.\n  const isFocused =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n  // For lazy rows with no children yet, still render a toggle unless\n  // explicitly marked as leaf.\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const nodeState: TreeNodeState = {\n    isExpanded,\n    isSelected,\n    isChecked,\n    isIndeterminate,\n    isLeaf,\n  };\n\n  // ---- Menu resolution (per-node override > tree-level) --------------------\n\n  const effectiveMenuChildren: ReactNode =\n    data.menu === null\n      ? null\n      : data.menu !== undefined\n        ? data.menu\n        : typeof treeMenu === 'function'\n          ? treeMenu(data, nodeState)\n          : treeMenu ?? null;\n  const hasMenu = !isMenuEmpty(effectiveMenuChildren);\n\n  const effectiveContextMenu: TreeContextMenu =\n    data.contextMenu ?? treeContextMenu ?? false;\n  // The menu is exposed only when the consumer opts in via\n  // `contextMenu`. When `contextMenu` is `false` (default) we render\n  // nothing, even if `menu` is provided — this matches the plan and\n  // keeps default rows visually clean.\n  const menuExposed =\n    hasMenu &&\n    (effectiveContextMenu === true || effectiveContextMenu === 'context-only');\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map.\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n    data.onAction?.(normalizedAction);\n    treeOnAction?.(normalizedAction, node.key);\n    // Forward to the consumer-supplied `menuProps.onAction` so users\n    // who pass extra `Menu` props through `menuProps` still receive\n    // the action stream alongside the tree-level callback.\n    menuProps?.onAction?.(normalizedAction);\n  });\n\n  const rowContextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...menuProps,\n      onAction: handleMenuAction,\n      children: effectiveMenuChildren,\n    },\n  );\n\n  // ---- Checkbox ------------------------------------------------------------\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  const handleWrapperClick = useEvent((e: MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    if (isDisabled || data.isCheckboxDisabled) return;\n    // The inner <Checkbox> label toggles on direct click; skip to avoid a double toggle.\n    if ((e.target as HTMLElement).closest('[data-qa=\"CheckboxWrapper\"]'))\n      return;\n    onToggleChecked(String(node.key));\n  });\n\n  // ---- Keyboard ------------------------------------------------------------\n\n  // Composed keydown handler. Runs BEFORE `rowProps.onKeyDown` from\n  // `useTreeItem` so we can short-circuit the default react-aria\n  // behavior for our own shortcuts (Shift+F10 menu open, Space\n  // checkbox toggle). Returns `true` when the event was handled and\n  // react-aria's keydown must NOT run; returns `false` to chain to\n  // react-aria's handler.\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Space toggles the checkbox first when checkable. We DON'T claim\n    // the event (return `false`) so react-aria's onKeyDown still runs\n    // afterwards and the focused row also selects — matching the\n    // pre-refactor behavior when handlers were chained via\n    // `mergeProps`. `preventDefault` is kept to suppress page scroll.\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n      return false;\n    }\n\n    // Shift+F10 opens the row menu (standard accessibility shortcut).\n    if (e.key === 'F10' && e.shiftKey && menuExposed) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        rowContextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n      return true;\n    }\n\n    return false;\n  });\n\n  // Wrapper that delegates to react-aria's default keydown only when\n  // our handler did not claim the event. Replaces (rather than\n  // chains with) `rowProps.onKeyDown` so the order of handlers is\n  // strictly: our shortcuts → react-aria default.\n  const composedKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    if (handleKeyDown(e)) return;\n    rowProps.onKeyDown?.(e as unknown as globalThis.KeyboardEvent);\n  });\n\n  // ---- Mods ----------------------------------------------------------------\n\n  const sharedMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      loading: isLoading,\n      leaf: isLeaf,\n      'has-checkbox': isRowCheckable,\n      'has-menu': menuExposed,\n    }),\n    [\n      isChecked,\n      isIndeterminate,\n      isExpanded,\n      isLoading,\n      isLeaf,\n      isRowCheckable,\n      menuExposed,\n    ],\n  );\n\n  const rowMods = useMemo(\n    () => ({ ...sharedMods, disabled: isDisabled }),\n    [sharedMods, isDisabled],\n  );\n\n  const itemMods = useMemo(\n    () => ({\n      ...sharedMods,\n      focused: isFocused,\n      hovered: isHovered,\n      pressed: isPressed,\n    }),\n    [sharedMods, isFocused, isHovered, isPressed],\n  );\n\n  const rowStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(node.level ?? 0),\n      ...virtualStyle,\n    }),\n    [node.level, virtualStyle],\n  );\n\n  // Only emit `aria-checked` when the tree is in checkable mode.\n  const ariaChecked: 'mixed' | 'true' | 'false' | undefined = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  // ---- Compose row props ---------------------------------------------------\n\n  // Merge react-aria + hover props but EXCLUDE `onKeyDown` from the\n  // chain — `composedKeyDown` already wraps `rowProps.onKeyDown` and\n  // must run first so our Shift+F10 / Space-checkbox shortcuts can\n  // short-circuit the default react-aria behavior.\n  const finalRowProps = {\n    ...mergeProps(rowProps, hoverProps),\n    'aria-checked': ariaChecked,\n    onKeyDown: composedKeyDown,\n  };\n\n  // ---- Toggle (chevron) and checkbox slots --------------------------------\n\n  // Leaf rows get a placeholder so sibling indents align.\n  const toggleNode = isLeaf ? (\n    <TreeNodeTogglePlaceholder aria-hidden data-element=\"Toggle\" />\n  ) : (\n    <TreeNodeToggle {...expandButtonProps} tabIndex={-1} data-element=\"Toggle\">\n      {isLoading ? (\n        <LoadingIcon />\n      ) : (\n        <DirectionIcon to={isExpanded ? 'bottom' : 'right'} />\n      )}\n    </TreeNodeToggle>\n  );\n\n  const checkboxNode = isRowCheckable ? (\n    <TreeNodeCheckboxWrapper\n      data-element=\"Checkbox\"\n      role=\"presentation\"\n      onClick={handleWrapperClick}\n      onKeyDown={stopPropagation}\n    >\n      <Checkbox\n        isSelected={isChecked}\n        isIndeterminate={isIndeterminate}\n        isDisabled={isDisabled || data.isCheckboxDisabled}\n        aria-label={\n          typeof data.title === 'string' ? data.title : String(node.key)\n        }\n        onChange={handleCheckboxChange}\n      />\n    </TreeNodeCheckboxWrapper>\n  ) : null;\n\n  // ---- Resolve user-supplied per-node Item props --------------------------\n\n  const resolvedItemProps =\n    typeof itemProps === 'function' ? itemProps(data, nodeState) : itemProps;\n  const {\n    prefix: userPrefix,\n    actions: userActions,\n    ...restUserProps\n  } = resolvedItemProps ?? {};\n\n  const composedPrefix =\n    checkboxNode || userPrefix ? (\n      <>\n        {checkboxNode}\n        {userPrefix}\n      </>\n    ) : null;\n\n  // ---- Built-in overflow `⋮` action ---------------------------------------\n\n  const menuAction =\n    menuExposed && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          aria-label={t('tree.actions', 'Actions')}\n          {...menuTriggerProps}\n        />\n        <Menu {...menuProps} onAction={handleMenuAction}>\n          {effectiveMenuChildren}\n        </Menu>\n      </MenuTrigger>\n    ) : null;\n\n  // Compose with user-supplied actions (user actions render first).\n  const composedActions =\n    userActions || menuAction ? (\n      <>\n        {userActions}\n        {menuAction}\n      </>\n    ) : undefined;\n\n  // ---- Refs / context-menu wiring -----------------------------------------\n\n  // When the context menu is enabled for this row, attach the hook's\n  // `targetRef` to the row so right-clicks land on the correct anchor.\n  const refs = useMemo(() => {\n    const list: Ref<HTMLDivElement>[] = [rowRef];\n    if (virtualRef) list.push(virtualRef);\n    if (menuExposed) list.push(rowContextMenu.targetRef);\n    return mergeRefs(...list);\n  }, [virtualRef, menuExposed, rowContextMenu.targetRef]);\n\n  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={refs}\n      mods={rowMods}\n      style={rowStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n      data-index={virtualIndex}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        {...restUserProps}\n        size={size}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={composedPrefix}\n        actions={composedActions}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n      {menuExposed && rowContextMenu.rendered}\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":"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"}

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

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

package/dist/components/content/Tree/use-load-data.js

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

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldBaseProps } from "../../../shared/form.js";
+import { FieldBaseProps, ToggleSelectionProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import { CubeCheckboxGroupProps, _CheckboxGroup } from "./CheckboxGroup.js";
@@ -9,7 +9,7 @@ import { AriaCheckboxProps, useCheckbox } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/fields/Checkbox/Checkbox.d.ts
-interface CubeCheckboxProps extends BaseProps, ContainerStyleProps, AriaCheckboxProps, FieldBaseProps {
+interface CubeCheckboxProps extends BaseProps, ContainerStyleProps, AriaCheckboxProps, ToggleSelectionProps, FieldBaseProps {
   inputStyles?: Styles;
   isIndeterminate?: boolean;
   value?: string;

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
@@ -85,7 +85,7 @@ function Checkbox(props, ref) {
 		}),
 		unsafe__isDisabled: !!groupState
 	});
-	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, ...otherProps } = props;
+	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, onChange, ...otherProps } = props;
 	let styles = extractStyles(props, CONTAINER_STYLES);
 	labelStyles = useMemo(() => ({
 		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,SAAS;EACT,YAAY;EACZ,cAAc;EACd,KAAK;EACL,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;EACR;CACF,CAAC;AAEF,MAAM,kBAAkB,MAAM;CAC5B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,2BAA2B;GAC3B,sBAAsB;GACtB,qBAAqB;GACrB,oBAAoB;GACpB,mBAAmB;GACnB,UAAU;GACX;EAMD,OAAO;GACL,IAAI;GACJ,2BAA2B;GAC5B;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,OAAO;GACP,8DAA8D;GAC/D;EACD,OAAO;EACP,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,YAAY;EACb;CACF,CAAC;AAEF,SAAS,SACP,OACA,KACA;CAIA,IAAI,aAAa,WAAW,qBAAqB;AAEjD,SAAQ,uBAAuB,MAAM;CAErC,IAAI,gBAAgB;AAEpB,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,YAAY,SAAS;GACrB,iBAAiB;GACP;GACX;EACD,oBAAoB,CAAC,CAAC;EACvB,CAAC;CAEF,IAAI,EACF,IACA,kBAAkB,OAClB,aAAa,OACb,YACA,YACA,UACA,OACA,WACA,SACA,YACA,aACA,eACA,aACA,UACA,MACA,GAAG,eACD;CAEJ,IAAI,SAAiB,cAAc,OAAO,iBAAiB;AAE3D,eAAc,eACL;EACL,GAAI,CAAC,aAAa,eAAe;EACjC,GAAG;EACJ,GACD,CAAC,YAAY,YAAY,CAC1B;CAED,IAAI,EAAE,WAAW,eAAeA,WAAS,EAAE,YAAY,EAAE,KAAK;CAC9D,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAExD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,SAAS,gBAAgB,KAAK,SAAS;CAE3C,MAAM,cAAc,eAAe,MAAM;CAEzC,IAAI,EAAE,eAAe,aACjB,qBACE;EACE,GAAG;EAGH,OAAO,MAAM,SAAS;EAGtB,YAAY,cAAc;EAC1B,WAAW,uBAAuB,cAAc,CAAC;EAClD,EACD,YACA,SACD,GACD,YACE;EACE,GAAG;EACH,GAAI,OAAO,UAAU,YAAY,MAAM,MAAM,GACzC,EAAE,cAAc,OAAO,GACvB,EAAE;EACP,EACD,aACA,SACD;CAEL,IAAI,WAAW,kBACb,oBAAC;EAAK,MAAM;EAAI,QAAQ;YACtB,oBAAC,cAAY;GACR,GAEP,oBAAC;EAAK,MAAM;EAAI,QAAQ;YACtB,oBAAC,cAAY;GACR;AAGT,KAAI,YAAY;AACd,OAAK,IAAI,OAAO;GAAC;GAAc;GAAmB;GAAe,CAC/D,KAAI,cAAc,QAAQ,KACxB,SAAQ,KACN,cAAc,IAAI,4HACnB;AAGL,MAAI,MAAM,SAAS,KACjB,SAAQ,KACN,wFACD;;CAIL,MAAM,OAAO;EACX,SAAS,WAAW;EACpB,eAAe;EACf,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,UAAU;EACV,SAAS;EACT,SAAS;EACT,cAAc,kBAAkB;EAChC,eAAe;EAChB;CAED,MAAM,WACJ,8CACE,oBAAC;EACC,IAAI,MAAM;EACV,mBAAgB;EAChB,GAAIC,aAAW,YAAY,WAAW;EACtC,KAAK;GACL,EACF,oBAAC;EAAsB;EAAM,QAAQ;YAClC;GACe,IACjB;CAGL,MAAM,gBACJ,qBAAC;EAAiC;EAAgB;aAC/C,UACA,YAAY,oBAACC;GAAK;GAAQ;IAAgB;GACpB;AAG3B,KAAI,CAAC,WACH,QAAO,cAAc,eAAe,QAAQ,MAAM;AAGpD,QACE,qBAAC;EACS;EACE;EACV,GAAI;EACJ,GAAI,gBAAgB,WAAW;EAC/B,KAAK;aAEJ,UACA,SAAS,WACR,oBAAC;GACC,QAAQ;GACR,MAAM;IACJ,GAAG,kBAAkB;KAAE;KAAW;KAAS,CAAC;IAC5C,UAAU;IACX;GACD,GAAK,aAAa,gBAAgB,WAAW,GAAG;aAE/C,SAAS;IACF,GACR;GACmB;;;;;;AAQ7B,IAAI,YAAY,WAAW,SAAS;AAEpC,AAAC,UAAkB,gBAAgB;AACnC,IAAI,aAAa,OAAO,OACtB,WACA,EAAE,OAAOC,gBAAe,CACzB;AAED,WAAW,cAAc"}
+{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

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

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

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

package/dist/components/fields/ComboBox/ComboBox.js

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

package/dist/components/fields/CommandTextArea/CommandTextArea.js

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

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

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

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

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

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

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

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/dist/components/fields/DatePicker/TimeInput.js

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

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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/FilterPicker/FilterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { _FileInput } from "../FileInput/FileInput.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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.151.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.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";
@@ -90,7 +90,7 @@ const RadioNormalElement = tasty({ styles: {
 	},
 	color: {
 		"": "#clear",
-		checked: "#primary",
+		checked: "#primary-text",
 		"invalid & checked": "#danger-text",
 		"valid & checked": "#success-text",
 		"disabled | !checked": "#clear",

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Item","useFocus","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n  getValidationMods,\n  getValidationTheme,\n  INLINE_LABEL_STYLES,\n  useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n  qa: 'RadioButton',\n  as: 'label',\n  styles: {\n    preset: 't3m',\n    lineHeight: '1em',\n    flexGrow: 1,\n    gridTemplate:\n      '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    placeContent: 'center',\n    shadow: {\n      '': false,\n      'tabs & selected': '$item-shadow',\n      'tabs & selected & disabled': false,\n    },\n    fill: {\n      'selected & tabs': '#surface',\n      'selected & tabs & disabled': '#surface.6',\n    },\n    color: {\n      'selected & tabs': '#dark',\n      'selected & tabs & disabled': '#dark.3',\n    },\n\n    // Mirror the ButtonSplit grouping: the corner radius is shared so the\n    // first/last items keep only their outer-side radius and middle items go\n    // square; a -1bw left margin overlaps adjacent borders into a single\n    // continuous edge. The selected button is bumped above its siblings so its\n    // brand-tinted border is visible from all four sides — without the bump\n    // the right edge of an adjacent sibling would paint over the selected\n    // button's left edge (and vice-versa). Hover / focus-visible bump higher\n    // still so they always read on top of the selected highlight.\n    radius: {\n      '': true,\n      '!tabs & !:last-child': '1r left',\n      '!tabs & !:first-child': '1r right',\n      '!tabs & !:first-child & !:last-child': 0,\n    },\n    margin: {\n      '': 0,\n      '!tabs & !:first-child': '-1bw left',\n    },\n    zIndex: {\n      '!tabs & selected': 1,\n    },\n\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n      },\n    },\n  },\n});\n\nconst RadioWrapperElement = tasty({\n  as: 'label',\n  qa: 'RadioWrapper',\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center start',\n    placeContent: 'center start',\n    gap: '1x',\n    flow: 'column',\n    preset: 'default',\n    width: 'min-content',\n    radius: true,\n    margin: {\n      '': '1x right',\n      button: '0',\n    },\n    zIndex: {\n      '': 'initial',\n      checked: 1,\n    },\n    flexGrow: 1,\n  },\n});\n\nconst RadioNormalElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      disabled: '#disabled-surface',\n    },\n    color: {\n      '': '#clear',\n      checked: '#primary',\n      'invalid & checked': '#danger-text',\n      'valid & checked': '#success-text',\n      'disabled | !checked': '#clear',\n      'disabled & checked': '#dark.12',\n    },\n    border: {\n      '': '#dark-04',\n      checked: '#primary-text',\n      invalid: '#danger-text.50',\n      valid: '#success-text.50',\n      disabled: '#dark.12',\n    },\n    width: '2x',\n    height: '2x',\n    outline: {\n      '': '#primary-text.0 / 1bw',\n      focused: '1bw #primary-text / 1bw',\n    },\n    transition: 'theme',\n    whiteSpace: 'nowrap',\n\n    RadioCircle: {\n      display: 'block',\n      radius: 'round',\n      width: '1x',\n      height: '1x',\n      fill: '#current',\n    },\n  },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n  qa: 'RadioLabel',\n  styles: INLINE_LABEL_STYLES,\n});\n\nexport interface CubeRadioProps\n  extends BaseProps,\n    AriaRadioProps,\n    Omit<FieldBaseProps, 'tooltip'>,\n    OuterStyleProps {\n  'aria-label'?: string;\n  /* The visual type of the radio button */\n  type?: 'button' | 'radio';\n  buttonType?: CubeItemProps['type'];\n  value?: string;\n  /* Size of the button (for button type only) */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Icon to display (for button type only) */\n  icon?: CubeItemProps['icon'];\n  /* Icon to display on the right (for button type only) */\n  rightIcon?: CubeItemProps['rightIcon'];\n  /* Prefix element (for button type only) */\n  prefix?: CubeItemProps['prefix'];\n  /* Suffix element (for button type only) */\n  suffix?: CubeItemProps['suffix'];\n  /* Description text (for button type only) */\n  description?: CubeItemProps['description'];\n  /* Tooltip configuration (for button type only) */\n  tooltip?: CubeItemProps['tooltip'];\n  /* Keyboard shortcut (for button type only) */\n  hotkeys?: CubeItemProps['hotkeys'];\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    children,\n    label,\n    autoFocus,\n    labelStyles,\n    labelProps,\n    type,\n    buttonType,\n    size,\n    icon,\n    rightIcon,\n    prefix,\n    suffix,\n    description,\n    tooltip,\n    hotkeys,\n    'aria-label': ariaLabel,\n    form,\n    ...otherProps\n  } = props;\n\n  label = label || children;\n\n  let styles = extractStyles(otherProps, OUTER_STYLES);\n\n  labelStyles = {\n    ...INLINE_LABEL_STYLES,\n    ...labelStyles,\n  };\n\n  let radioGroupProps = useRadioProvider();\n\n  let state = radioGroupProps && radioGroupProps.state;\n  let name = radioGroupProps && radioGroupProps.name;\n  let contextSize = radioGroupProps?.size;\n  let contextButtonType = radioGroupProps?.buttonType;\n  let contextType = radioGroupProps?.type;\n  let contextIsDisabled = radioGroupProps?.isDisabled;\n\n  if (!state) {\n    throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n  }\n\n  // Determine effective type from props or context\n  let effectiveType = type ?? contextType ?? 'radio';\n  let isButton = effectiveType === 'button' || effectiveType === 'tabs';\n\n  // Determine effective size with priority: prop > context > default\n  let effectiveSize: CubeItemProps['size'] = (size ??\n    contextSize ??\n    'medium') as CubeItemProps['size'];\n\n  // Apply size mapping for tabs mode button radios.\n  // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n  if (effectiveType === 'tabs' && isButton) {\n    effectiveSize =\n      RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n  }\n\n  // Determine effective button type\n  // In tabs mode, always use 'clear' and ignore buttonType prop.\n  let effectiveButtonType: string;\n  // When buttonType is 'primary', non-selected radios use 'outline' with a\n  // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n  // outline+selected look — this is the only place mods.selected intentionally\n  // decouples from the aria/isSelected state.\n  let forceSelectedMod = false;\n  if (effectiveType === 'tabs') {\n    effectiveButtonType = 'clear';\n  } else {\n    const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n    if (baseButtonType === 'primary') {\n      if (state.selectedValue === props.value) {\n        effectiveButtonType = 'primary';\n      } else {\n        effectiveButtonType = 'outline';\n        forceSelectedMod = true;\n      }\n    } else {\n      effectiveButtonType = baseButtonType;\n    }\n  }\n\n  // Use context isDisabled if prop isDisabled is not explicitly set\n  let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n  let { isFocused, focusProps } = useFocus(\n    { isDisabled: effectiveIsDisabled },\n    true,\n  );\n  let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {\n    inputProps,\n    isDisabled: isRadioDisabled,\n    isSelected: isRadioSelected,\n  } = useRadio(\n    {\n      name,\n      ...props,\n      isDisabled: effectiveIsDisabled,\n    },\n    state,\n    inputRef,\n  );\n\n  const mods = useMemo(\n    () => ({\n      checked: isRadioSelected,\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: isRadioDisabled,\n      hovered: isHovered,\n      button: isButton,\n      focused: isFocused,\n      tabs: effectiveType === 'tabs',\n    }),\n    [\n      isRadioSelected,\n      isInvalid,\n      isValid,\n      isRadioDisabled,\n      isHovered,\n      isButton,\n      isFocused,\n      effectiveType,\n    ],\n  );\n\n  // Render button type using Item\n  if (isButton) {\n    return (\n      <RadioButtonElement\n        ref={domRef}\n        type={effectiveButtonType}\n        theme={getValidationTheme(\n          'default',\n          { isInvalid, isValid },\n          { includeValid: true },\n        )}\n        size={effectiveSize}\n        icon={icon}\n        rightIcon={rightIcon}\n        prefix={prefix}\n        suffix={suffix}\n        description={description}\n        tooltip={tooltip}\n        hotkeys={hotkeys}\n        isSelected={isRadioSelected}\n        isDisabled={isRadioDisabled}\n        mods={{ ...mods, ...(forceSelectedMod ? { selected: true } : {}) }}\n        styles={styles}\n        {...mergeProps(hoverProps, focusProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Radio'}\n          data-input-type=\"radio\"\n          aria-label={ariaLabel}\n          {...inputProps}\n          ref={inputRef}\n          form={null}\n          mods={{ button: isButton, disabled: isRadioDisabled }}\n        />\n        {label}\n      </RadioButtonElement>\n    );\n  }\n\n  // Render classic radio type\n  return (\n    <RadioWrapperElement\n      styles={styles}\n      {...hoverProps}\n      ref={domRef}\n      mods={mods}\n      data-type={type}\n    >\n      <HiddenInput\n        qa={qa || 'Radio'}\n        data-input-type=\"radio\"\n        aria-label={ariaLabel}\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        mods={{ button: isButton }}\n      />\n      <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n        {RadioCircleElement}\n      </RadioNormalElement>\n      {label && (\n        <RadioLabelElement\n          mods={mods}\n          styles={labelStyles}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label}\n        </RadioLabelElement>\n      )}\n    </RadioWrapperElement>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n  type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n  type: 'button',\n});\n\nconst __Radio = Object.assign(\n  _Radio as typeof _Radio & {\n    Group: typeof RadioGroup;\n    Tabs: typeof Tabs;\n    ButtonGroup: typeof ButtonGroup;\n    Button: typeof _Radio;\n  },\n  {\n    Group: RadioGroup,\n    Tabs,\n    ButtonGroup,\n    Button: _Radio,\n  },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":["Item","useFocus","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n  getValidationMods,\n  getValidationTheme,\n  INLINE_LABEL_STYLES,\n  useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n  qa: 'RadioButton',\n  as: 'label',\n  styles: {\n    preset: 't3m',\n    lineHeight: '1em',\n    flexGrow: 1,\n    gridTemplate:\n      '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    placeContent: 'center',\n    shadow: {\n      '': false,\n      'tabs & selected': '$item-shadow',\n      'tabs & selected & disabled': false,\n    },\n    fill: {\n      'selected & tabs': '#surface',\n      'selected & tabs & disabled': '#surface.6',\n    },\n    color: {\n      'selected & tabs': '#dark',\n      'selected & tabs & disabled': '#dark.3',\n    },\n\n    // Mirror the ButtonSplit grouping: the corner radius is shared so the\n    // first/last items keep only their outer-side radius and middle items go\n    // square; a -1bw left margin overlaps adjacent borders into a single\n    // continuous edge. The selected button is bumped above its siblings so its\n    // brand-tinted border is visible from all four sides — without the bump\n    // the right edge of an adjacent sibling would paint over the selected\n    // button's left edge (and vice-versa). Hover / focus-visible bump higher\n    // still so they always read on top of the selected highlight.\n    radius: {\n      '': true,\n      '!tabs & !:last-child': '1r left',\n      '!tabs & !:first-child': '1r right',\n      '!tabs & !:first-child & !:last-child': 0,\n    },\n    margin: {\n      '': 0,\n      '!tabs & !:first-child': '-1bw left',\n    },\n    zIndex: {\n      '!tabs & selected': 1,\n    },\n\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n      },\n    },\n  },\n});\n\nconst RadioWrapperElement = tasty({\n  as: 'label',\n  qa: 'RadioWrapper',\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center start',\n    placeContent: 'center start',\n    gap: '1x',\n    flow: 'column',\n    preset: 'default',\n    width: 'min-content',\n    radius: true,\n    margin: {\n      '': '1x right',\n      button: '0',\n    },\n    zIndex: {\n      '': 'initial',\n      checked: 1,\n    },\n    flexGrow: 1,\n  },\n});\n\nconst RadioNormalElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      disabled: '#disabled-surface',\n    },\n    color: {\n      '': '#clear',\n      checked: '#primary-text',\n      'invalid & checked': '#danger-text',\n      'valid & checked': '#success-text',\n      'disabled | !checked': '#clear',\n      'disabled & checked': '#dark.12',\n    },\n    border: {\n      '': '#dark-04',\n      checked: '#primary-text',\n      invalid: '#danger-text.50',\n      valid: '#success-text.50',\n      disabled: '#dark.12',\n    },\n    width: '2x',\n    height: '2x',\n    outline: {\n      '': '#primary-text.0 / 1bw',\n      focused: '1bw #primary-text / 1bw',\n    },\n    transition: 'theme',\n    whiteSpace: 'nowrap',\n\n    RadioCircle: {\n      display: 'block',\n      radius: 'round',\n      width: '1x',\n      height: '1x',\n      fill: '#current',\n    },\n  },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n  qa: 'RadioLabel',\n  styles: INLINE_LABEL_STYLES,\n});\n\nexport interface CubeRadioProps\n  extends BaseProps,\n    AriaRadioProps,\n    Omit<FieldBaseProps, 'tooltip'>,\n    OuterStyleProps {\n  'aria-label'?: string;\n  /* The visual type of the radio button */\n  type?: 'button' | 'radio';\n  buttonType?: CubeItemProps['type'];\n  value?: string;\n  /* Size of the button (for button type only) */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Icon to display (for button type only) */\n  icon?: CubeItemProps['icon'];\n  /* Icon to display on the right (for button type only) */\n  rightIcon?: CubeItemProps['rightIcon'];\n  /* Prefix element (for button type only) */\n  prefix?: CubeItemProps['prefix'];\n  /* Suffix element (for button type only) */\n  suffix?: CubeItemProps['suffix'];\n  /* Description text (for button type only) */\n  description?: CubeItemProps['description'];\n  /* Tooltip configuration (for button type only) */\n  tooltip?: CubeItemProps['tooltip'];\n  /* Keyboard shortcut (for button type only) */\n  hotkeys?: CubeItemProps['hotkeys'];\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    children,\n    label,\n    autoFocus,\n    labelStyles,\n    labelProps,\n    type,\n    buttonType,\n    size,\n    icon,\n    rightIcon,\n    prefix,\n    suffix,\n    description,\n    tooltip,\n    hotkeys,\n    'aria-label': ariaLabel,\n    form,\n    ...otherProps\n  } = props;\n\n  label = label || children;\n\n  let styles = extractStyles(otherProps, OUTER_STYLES);\n\n  labelStyles = {\n    ...INLINE_LABEL_STYLES,\n    ...labelStyles,\n  };\n\n  let radioGroupProps = useRadioProvider();\n\n  let state = radioGroupProps && radioGroupProps.state;\n  let name = radioGroupProps && radioGroupProps.name;\n  let contextSize = radioGroupProps?.size;\n  let contextButtonType = radioGroupProps?.buttonType;\n  let contextType = radioGroupProps?.type;\n  let contextIsDisabled = radioGroupProps?.isDisabled;\n\n  if (!state) {\n    throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n  }\n\n  // Determine effective type from props or context\n  let effectiveType = type ?? contextType ?? 'radio';\n  let isButton = effectiveType === 'button' || effectiveType === 'tabs';\n\n  // Determine effective size with priority: prop > context > default\n  let effectiveSize: CubeItemProps['size'] = (size ??\n    contextSize ??\n    'medium') as CubeItemProps['size'];\n\n  // Apply size mapping for tabs mode button radios.\n  // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n  if (effectiveType === 'tabs' && isButton) {\n    effectiveSize =\n      RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n  }\n\n  // Determine effective button type\n  // In tabs mode, always use 'clear' and ignore buttonType prop.\n  let effectiveButtonType: string;\n  // When buttonType is 'primary', non-selected radios use 'outline' with a\n  // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n  // outline+selected look — this is the only place mods.selected intentionally\n  // decouples from the aria/isSelected state.\n  let forceSelectedMod = false;\n  if (effectiveType === 'tabs') {\n    effectiveButtonType = 'clear';\n  } else {\n    const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n    if (baseButtonType === 'primary') {\n      if (state.selectedValue === props.value) {\n        effectiveButtonType = 'primary';\n      } else {\n        effectiveButtonType = 'outline';\n        forceSelectedMod = true;\n      }\n    } else {\n      effectiveButtonType = baseButtonType;\n    }\n  }\n\n  // Use context isDisabled if prop isDisabled is not explicitly set\n  let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n  let { isFocused, focusProps } = useFocus(\n    { isDisabled: effectiveIsDisabled },\n    true,\n  );\n  let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {\n    inputProps,\n    isDisabled: isRadioDisabled,\n    isSelected: isRadioSelected,\n  } = useRadio(\n    {\n      name,\n      ...props,\n      isDisabled: effectiveIsDisabled,\n    },\n    state,\n    inputRef,\n  );\n\n  const mods = useMemo(\n    () => ({\n      checked: isRadioSelected,\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: isRadioDisabled,\n      hovered: isHovered,\n      button: isButton,\n      focused: isFocused,\n      tabs: effectiveType === 'tabs',\n    }),\n    [\n      isRadioSelected,\n      isInvalid,\n      isValid,\n      isRadioDisabled,\n      isHovered,\n      isButton,\n      isFocused,\n      effectiveType,\n    ],\n  );\n\n  // Render button type using Item\n  if (isButton) {\n    return (\n      <RadioButtonElement\n        ref={domRef}\n        type={effectiveButtonType}\n        theme={getValidationTheme(\n          'default',\n          { isInvalid, isValid },\n          { includeValid: true },\n        )}\n        size={effectiveSize}\n        icon={icon}\n        rightIcon={rightIcon}\n        prefix={prefix}\n        suffix={suffix}\n        description={description}\n        tooltip={tooltip}\n        hotkeys={hotkeys}\n        isSelected={isRadioSelected}\n        isDisabled={isRadioDisabled}\n        mods={{ ...mods, ...(forceSelectedMod ? { selected: true } : {}) }}\n        styles={styles}\n        {...mergeProps(hoverProps, focusProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Radio'}\n          data-input-type=\"radio\"\n          aria-label={ariaLabel}\n          {...inputProps}\n          ref={inputRef}\n          form={null}\n          mods={{ button: isButton, disabled: isRadioDisabled }}\n        />\n        {label}\n      </RadioButtonElement>\n    );\n  }\n\n  // Render classic radio type\n  return (\n    <RadioWrapperElement\n      styles={styles}\n      {...hoverProps}\n      ref={domRef}\n      mods={mods}\n      data-type={type}\n    >\n      <HiddenInput\n        qa={qa || 'Radio'}\n        data-input-type=\"radio\"\n        aria-label={ariaLabel}\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        mods={{ button: isButton }}\n      />\n      <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n        {RadioCircleElement}\n      </RadioNormalElement>\n      {label && (\n        <RadioLabelElement\n          mods={mods}\n          styles={labelStyles}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label}\n        </RadioLabelElement>\n      )}\n    </RadioWrapperElement>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n  type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n  type: 'button',\n});\n\nconst __Radio = Object.assign(\n  _Radio as typeof _Radio & {\n    Group: typeof RadioGroup;\n    Tabs: typeof Tabs;\n    ButtonGroup: typeof ButtonGroup;\n    Button: typeof _Radio;\n  },\n  {\n    Group: RadioGroup,\n    Tabs,\n    ButtonGroup,\n    Button: _Radio,\n  },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,MAAM,qBAAqB,MAAMA,OAAM;CACrC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,YAAY;EACZ,UAAU;EACV,cACE;EACF,cAAc;EACd,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACnB,8BAA8B;GAC/B;EACD,MAAM;GACJ,mBAAmB;GACnB,8BAA8B;GAC/B;EACD,OAAO;GACL,mBAAmB;GACnB,8BAA8B;GAC/B;EAUD,QAAQ;GACN,IAAI;GACJ,wBAAwB;GACxB,yBAAyB;GACzB,wCAAwC;GACzC;EACD,QAAQ;GACN,IAAI;GACJ,yBAAyB;GAC1B;EACD,QAAQ,EACN,oBAAoB,GACrB;EAED,OAAO,EACL,WAAW;GACT,IAAI;GACJ,2DAA2D;GAC5D,EACF;EACF;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,SAAS;EACT,YAAY;EACZ,cAAc;EACd,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,QAAQ;GACT;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACV;EACD,UAAU;EACX;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM,EAC/B,QAAQ;CACN,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACT,qBAAqB;EACrB,mBAAmB;EACnB,uBAAuB;EACvB,sBAAsB;EACvB;CACD,QAAQ;EACN,IAAI;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,UAAU;EACX;CACD,OAAO;CACP,QAAQ;CACR,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACD,YAAY;CACZ,YAAY;CAEZ,aAAa;EACX,SAAS;EACT,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CACF,EACF,CAAC;AAEF,MAAM,qBAAqB,oBAAC,SAAI,gBAAa,gBAAgB;AAE7D,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;CACT,CAAC;AA8BF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,YACA,WACA,SACA,UACA,OACA,WACA,aACA,YACA,MACA,YACA,MACA,MACA,WACA,QACA,QACA,aACA,SACA,SACA,cAAc,WACd,MACA,GAAG,eACD;AAEJ,SAAQ,SAAS;CAEjB,IAAI,SAAS,cAAc,YAAY,aAAa;AAEpD,eAAc;EACZ,GAAG;EACH,GAAG;EACJ;CAED,IAAI,kBAAkB,kBAAkB;CAExC,IAAI,QAAQ,mBAAmB,gBAAgB;CAC/C,IAAI,OAAO,mBAAmB,gBAAgB;CAC9C,IAAI,cAAc,iBAAiB;CACnC,IAAI,oBAAoB,iBAAiB;CACzC,IAAI,cAAc,iBAAiB;CACnC,IAAI,oBAAoB,iBAAiB;AAEzC,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,2DAA2D;CAI7E,IAAI,gBAAgB,QAAQ,eAAe;CAC3C,IAAI,WAAW,kBAAkB,YAAY,kBAAkB;CAG/D,IAAI,gBAAwC,QAC1C,eACA;AAIF,KAAI,kBAAkB,UAAU,SAC9B,iBACE,eAAe,kBAAkB,UAAU,UAAU;CAKzD,IAAI;CAKJ,IAAI,mBAAmB;AACvB,KAAI,kBAAkB,OACpB,uBAAsB;MACjB;EACL,MAAM,iBAAiB,cAAc,qBAAqB;AAC1D,MAAI,mBAAmB,UACrB,KAAI,MAAM,kBAAkB,MAAM,MAChC,uBAAsB;OACjB;AACL,yBAAsB;AACtB,sBAAmB;;MAGrB,uBAAsB;;CAK1B,IAAI,sBAAsB,cAAc,qBAAqB;CAE7D,IAAI,EAAE,WAAW,eAAeC,WAC9B,EAAE,YAAY,qBAAqB,EACnC,KACD;CACD,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,qBAAqB,CAAC;CAE7E,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,SAAS,gBAAgB,KAAK,SAAS;CAE3C,IAAI,EACF,YACA,YAAY,iBACZ,YAAY,oBACV,SACF;EACE;EACA,GAAG;EACH,YAAY;EACb,EACD,OACA,SACD;CAED,MAAM,OAAO,eACJ;EACL,SAAS;EACT,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,UAAU;EACV,SAAS;EACT,QAAQ;EACR,SAAS;EACT,MAAM,kBAAkB;EACzB,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAGD,KAAI,SACF,QACE,qBAAC;EACC,KAAK;EACL,MAAM;EACN,OAAO,mBACL,WACA;GAAE;GAAW;GAAS,EACtB,EAAE,cAAc,MAAM,CACvB;EACD,MAAM;EACA;EACK;EACH;EACA;EACK;EACJ;EACA;EACT,YAAY;EACZ,YAAY;EACZ,MAAM;GAAE,GAAG;GAAM,GAAI,mBAAmB,EAAE,UAAU,MAAM,GAAG,EAAE;GAAG;EAC1D;EACR,GAAIC,aAAW,YAAY,WAAW;aAEtC,oBAAC;GACC,IAAI,MAAM;GACV,mBAAgB;GAChB,cAAY;GACZ,GAAI;GACJ,KAAK;GACL,MAAM;GACN,MAAM;IAAE,QAAQ;IAAU,UAAU;IAAiB;IACrD,EACD;GACkB;AAKzB,QACE,qBAAC;EACS;EACR,GAAI;EACJ,KAAK;EACC;EACN,aAAW;;GAEX,oBAAC;IACC,IAAI,MAAM;IACV,mBAAgB;IAChB,cAAY;IACZ,GAAIA,aAAW,YAAY,WAAW;IACtC,KAAK;IACL,MAAM,EAAE,QAAQ,UAAU;KAC1B;GACF,oBAAC;IAAmB,gBAAa;IAAc;IAAM,aAAW;cAC7D;KACkB;GACpB,SACC,oBAAC;IACO;IACN,QAAQ;IACR,GAAK,aAAa,gBAAgB,WAAW,GAAG;cAE/C;KACiB;;GAEF;;;;;;AAQ1B,MAAM,SAAS,WAAW,MAAM;AAEhC,MAAM,OAAO,MAAMC,aAAY,EAC7B,MAAM,QACP,CAAC;AAEF,MAAM,cAAc,MAAMA,aAAY,EACpC,MAAM,UACP,CAAC;AAEF,MAAM,UAAU,OAAO,OACrB,QAMA;CACE,OAAOA;CACP;CACA;CACA,QAAQ;CACT,CACF;AAED,QAAQ,cAAc"}

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

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