@cube-dev/ui-kit 0.137.0 → 0.138.0

package/dist/components/navigation/Tabs/TabButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabButton.js","names":["Menu","MenuTrigger","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/TabButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useDraggableItem,\n  useFocus,\n  useFocusVisible,\n  useHover,\n  useTab,\n} from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { CloseIcon, MoreIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\nimport {\n  CubeInlineInputRef,\n  InlineInput,\n} from '../../content/InlineInput/InlineInput';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { TabContainer, TabElement } from './styled';\nimport { TabDropIndicator } from './TabDropIndicator';\nimport { useTabsContext } from './TabsContext';\nimport { ParsedTab, RADIO_SIZE_MAP } from './types';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport type { DraggableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Event handlers for actions to prevent event propagation to tab button\n// =============================================================================\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\n// Inherit the tab button's pointer cursor — InlineInput's default `cursor: text`\n// hover hint is misleading inside a clickable tab.\nconst INLINE_INPUT_STYLES = { cursor: 'inherit' } as const;\n\n// =============================================================================\n// Menu Processing Utilities\n// =============================================================================\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n  theme?: string;\n}\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/**\n * Process menu items for predefined action keys (rename, delete).\n * Auto-adds labels and disables items when requirements aren't met.\n */\nfunction processMenuItems(\n  children: ReactNode,\n  effectiveIsEditable: boolean,\n  isDeletable: boolean,\n): ReactNode {\n  // Use Children.forEach instead of Children.toArray to avoid React prepending\n  // \".$\" to element keys, which breaks selectedKeys matching in Menu.\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      result.push(child);\n      return;\n    }\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Rename',\n          isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n        }),\n      );\n      return;\n    }\n    if (childKey === 'delete') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Delete',\n          theme: childProps.theme ?? 'danger',\n          isDisabled: childProps.isDisabled ?? !isDeletable,\n        }),\n      );\n      return;\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: processMenuItems(\n            childProps.children,\n            effectiveIsEditable,\n            isDeletable,\n          ),\n        }),\n      );\n      return;\n    }\n\n    result.push(child);\n  });\n\n  return result;\n}\n\n/**\n * Check if menu children is empty (null, undefined, or empty fragment)\n */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined) return true;\n  const children = Children.toArray(menu);\n  return children.length === 0;\n}\n\n// =============================================================================\n// TabButton Props\n// =============================================================================\n\nexport interface TabButtonProps {\n  /** React Aria collection item */\n  item: Node<object>;\n  /** Parsed tab data */\n  tabData: ParsedTab;\n  /** Whether this is the last tab (for drop indicator) */\n  isLastTab?: boolean;\n}\n\n// =============================================================================\n// TabButton Component\n// =============================================================================\n\n/**\n * Individual tab button component.\n *\n * Uses TabsContext to access shared props, dramatically reducing prop drilling.\n * Handles:\n * - Tab selection and keyboard navigation\n * - Inline title editing\n * - Menu and context menu\n * - Drag-and-drop reordering\n * - Focus and hover states\n */\nexport function TabButton({ item, tabData, isLastTab }: TabButtonProps) {\n  // Get shared context\n  const {\n    state,\n    type,\n    size,\n    autoHideActions: parentAutoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    onDelete,\n    dragState,\n    dropState,\n    editingKey,\n    startEditing,\n    submitEditing,\n    cancelEditing,\n  } = useTabsContext();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const inlineInputRef = useRef<CubeInlineInputRef>(null);\n  const { tabProps } = useTab({ key: item.key }, state, ref);\n\n  // Measure actions width for proper space allocation in Item\n  const [actionsWidth, setActionsWidth] = useState(0);\n\n  // Drag-and-drop support - only enable when both states are provided\n  const isDraggable = !!dragState && !!dropState;\n\n  // useDraggableItem must be called unconditionally (Rules of Hooks)\n  // When dragState is undefined, we pass a minimal mock state to satisfy the hook\n  const mockDragState = useMemo(\n    () => createMockDragState(state.collection, state.selectionManager),\n    [state.collection, state.selectionManager],\n  );\n\n  const dragResult = useDraggableItem(\n    { key: item.key },\n    dragState ?? mockDragState,\n  );\n  const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n  const isDragging = isDraggable && dragResult.isDragging;\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  // Hover, focus, and focus-visible state handling\n  const { hoverProps, isHovered } = useHover({});\n  const [isFocused, setIsFocused] = useState(false);\n  const { focusProps } = useFocus({ onFocusChange: setIsFocused });\n  const { isFocusVisible } = useFocusVisible();\n\n  // Suppress focus-visible when restoring focus after editing\n  const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);\n  const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;\n\n  const isActive = state.selectedKey === item.key;\n  const isDisabled = state.disabledKeys.has(item.key);\n  const isDeletable = !!onDelete;\n  const isEditing = editingKey === item.key;\n\n  // Compute effective values - Tab-level overrides Tabs-level\n  const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;\n  const effectiveMenu =\n    tabData.menu === null ? null : tabData.menu ?? parentMenu;\n  const effectiveMenuTriggerProps: Partial<CubeItemActionProps> = {\n    ...parentMenuTriggerProps,\n    ...tabData.menuTriggerProps,\n  };\n  const effectiveMenuProps: Partial<CubeMenuProps<object>> = {\n    ...parentMenuProps,\n    ...tabData.menuProps,\n  };\n  const effectiveContextMenu =\n    tabData.contextMenu ?? parentContextMenu ?? false;\n  const effectiveType = tabData.type ?? type ?? 'default';\n\n  const contextMenuEnabled =\n    effectiveContextMenu === true || effectiveContextMenu === 'context-only';\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Inline close when no menu, or context-only (no overflow trigger)\n  const showDeleteButton =\n    isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);\n\n  // Process menu items for auto-labels and disabled states\n  const processedMenu =\n    effectiveMenu && !isMenuEmpty(effectiveMenu)\n      ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)\n      : null;\n\n  const itemKeyStr = String(item.key);\n\n  const handleDelete = useEvent(() => {\n    onDelete?.(itemKeyStr);\n  });\n\n  const titleString =\n    typeof tabData.title === 'string' ? tabData.title : itemKeyStr;\n\n  const handleStartEditing = useEvent(() => {\n    if (!effectiveIsEditable || isDisabled) return;\n    startEditing(itemKeyStr, titleString);\n  });\n\n  const handleSubmitEditing = useEvent((newTitle: string) => {\n    submitEditing(itemKeyStr, newTitle, tabData.onTitleChange);\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    ref.current?.focus();\n  });\n\n  const handleCancelEditing = useEvent(() => {\n    cancelEditing();\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    ref.current?.focus();\n  });\n\n  const handleEditingChange = useEvent((editing: boolean) => {\n    if (editing && !isEditing) {\n      handleStartEditing();\n    }\n  });\n\n  // Handle menu actions - predefined actions first, then callbacks\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\n    // Handle predefined actions first (only if requirements are met)\n    if (normalizedAction === 'rename' && effectiveIsEditable) {\n      inlineInputRef.current?.startEditing();\n    }\n    if (normalizedAction === 'delete' && isDeletable) {\n      onDelete?.(itemKeyStr);\n    }\n    // Call Tab-level onAction first (with normalized action)\n    tabData.onAction?.(normalizedAction);\n    // Then call Tabs-level onAction with tab key (with normalized action)\n    parentOnAction?.(normalizedAction, itemKeyStr);\n  });\n\n  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\n  const contextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...effectiveMenuProps,\n      onAction: handleMenuAction,\n      children: processedMenu,\n    },\n  );\n\n  // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Reset focus-visible suppression on any keyboard interaction\n    if (suppressFocusVisible) {\n      setSuppressFocusVisible(false);\n    }\n\n    // F2 to start editing (standard rename shortcut)\n    if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      inlineInputRef.current?.startEditing();\n    }\n\n    // Shift+F10 opens the menu (standard context menu shortcut)\n    if (e.key === 'F10' && e.shiftKey && processedMenu) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        contextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n    }\n\n    // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)\n    // Skip when editing to allow normal text editing operations\n    if (\n      (e.key === 'Delete' || e.key === 'Backspace') &&\n      isDeletable &&\n      !isEditing\n    ) {\n      e.preventDefault();\n      onDelete?.(itemKeyStr);\n    }\n  });\n\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      active: isActive,\n      deletable: isDeletable,\n      disabled: isDisabled,\n      editing: isEditing,\n      hovered: isHovered,\n      focused: isFocused,\n      'focus-visible': effectiveFocusVisible,\n      draggable: isDraggable,\n      dragging: isDragging,\n    }),\n    [\n      effectiveType,\n      isActive,\n      isDeletable,\n      isDisabled,\n      isEditing,\n      isHovered,\n      isFocused,\n      effectiveFocusVisible,\n      isDraggable,\n      isDragging,\n    ],\n  );\n\n  // Scroll active tab into view\n  useEffect(() => {\n    if (ref.current && isActive) {\n      ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }\n  }, [isActive]);\n\n  // Overflow trigger (hidden in context-only mode)\n  const menuAction =\n    menuElement && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          {...effectiveMenuTriggerProps}\n        />\n        {menuElement}\n      </MenuTrigger>\n    ) : null;\n\n  // Build delete button (only shown when no menu)\n  const deleteAction = showDeleteButton ? (\n    <ItemAction\n      tabIndex={-1}\n      icon={<CloseIcon />}\n      tooltip=\"Close\"\n      onPress={handleDelete}\n    />\n  ) : null;\n\n  // Order: custom actions → menu trigger → delete button\n  const actions =\n    tabData.actions || menuAction || deleteAction ? (\n      <>\n        {tabData.actions}\n        {menuAction}\n        {deleteAction}\n      </>\n    ) : undefined;\n\n  // Measure actions width to pass to Item for proper space allocation\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      setActionsWidth(Math.round(actionsRef.current.offsetWidth));\n    }\n  }, [actions]);\n\n  // Determine effective size\n  const effectiveSize = tabData.size ?? size ?? 'medium';\n  const itemSize =\n    effectiveType === 'radio'\n      ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']\n      : effectiveSize;\n\n  // Determine Item type prop\n  const itemType =\n    effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';\n\n  // Determine shape - file type uses sharp edges\n  const isFileType = effectiveType === 'file';\n  const itemShape = isFileType ? 'sharp' : undefined;\n\n  // Determine autoHideActions - tab-level overrides parent-level\n  const effectiveAutoHideActions =\n    tabData.autoHideActions ?? parentAutoHideActions;\n\n  // Render title with editing support if editable\n  // Override InlineInput's default `cursor: text` hover hint — in Tabs the\n  // title sits inside a clickable tab, so a text caret cursor is misleading.\n  //\n  // When the title is a plain string we let InlineInput render it directly,\n  // which lets the optimistic display kick in (avoids flicker if the parent's\n  // `onTitleChange` updates the source asynchronously, e.g. inside a RAF).\n  // For ReactNode titles (icons, badges, ...), preserve the original node.\n  const renderTitleDisplay =\n    typeof tabData.title === 'string' ? undefined : () => tabData.title;\n  const titleContent = effectiveIsEditable ? (\n    <InlineInput\n      ref={inlineInputRef}\n      value={titleString}\n      isEditing={isEditing}\n      isDisabled={isDisabled}\n      aria-label=\"Edit tab title\"\n      styles={INLINE_INPUT_STYLES}\n      renderDisplay={renderTitleDisplay}\n      onEditingChange={handleEditingChange}\n      onSubmit={handleSubmitEditing}\n      onCancel={handleCancelEditing}\n    />\n  ) : (\n    tabData.title\n  );\n\n  // Extract tab-specific props and pass through the rest (style props) to the Item\n  const {\n    title: _title,\n    content: _content,\n    key: _key,\n    isDisabled: _isDisabled,\n    prerender: _prerender,\n    keepMounted: _keepMounted,\n    size: _size,\n    type: _type,\n    actions: _actions,\n    autoHideActions: _autoHideActions,\n    isEditable: _isEditable,\n    onTitleChange: _onTitleChange,\n    menu: _menu,\n    menuTriggerProps: _menuTriggerProps,\n    menuProps: _menuProps,\n    contextMenu: _contextMenu,\n    onAction: _onAction,\n    qa,\n    qaVal,\n    styles,\n    ...itemStyleProps\n  } = tabData;\n\n  // Use the hook's targetRef when context menu is enabled\n  const effectiveContainerRef =\n    contextMenuEnabled && processedMenu ? contextMenu.targetRef : containerRef;\n\n  // ARIA: indicate popup menu presence\n  const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' as const } : {};\n\n  // Mods for TabContainer\n  const containerMods = {\n    ...mods,\n    'auto-hide-actions': effectiveAutoHideActions,\n  };\n\n  return (\n    <TabContainer\n      ref={effectiveContainerRef}\n      data-size={itemSize}\n      mods={containerMods}\n      tokens={{ '$actions-width': `${actionsWidth}px` }}\n      {...effectiveDragProps}\n    >\n      {/* Drop indicator before this tab */}\n      {isDraggable && dropState && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n          dropState={dropState}\n          position=\"before\"\n        />\n      )}\n      <TabElement\n        preserveActionsSpace\n        autoHideActions={effectiveAutoHideActions}\n        as=\"button\"\n        {...mergeProps(tabProps, hoverProps, focusProps, {\n          onKeyDown: handleKeyDown,\n        })}\n        {...ariaProps}\n        {...itemStyleProps}\n        ref={ref}\n        qa={qa ?? `Tab-${String(item.key)}`}\n        qaVal={qaVal}\n        styles={styles}\n        mods={mods}\n        isSelected={isActive}\n        isDisabled={isDisabled}\n        size={itemSize}\n        type={itemType}\n        shape={itemShape}\n        actions={actions ? true : undefined}\n      >\n        {titleContent}\n      </TabElement>\n      {/* Actions rendered outside the button for accessibility */}\n      {actions && (\n        <div\n          ref={actionsRef}\n          data-element=\"Actions\"\n          {...ACTIONS_EVENT_HANDLERS}\n        >\n          <ItemActionProvider\n            type={itemType}\n            theme=\"default\"\n            isDisabled={isDisabled}\n          >\n            {actions}\n          </ItemActionProvider>\n        </div>\n      )}\n      {contextMenuEnabled && processedMenu && contextMenu.rendered}\n      {/* Drop indicator after the last tab */}\n      {isDraggable && dropState && isLastTab && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n          dropState={dropState}\n          position=\"after\"\n        />\n      )}\n    </TabContainer>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabButton.js","names":["Menu","MenuTrigger","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/TabButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useDraggableItem,\n  useFocus,\n  useFocusVisible,\n  useHover,\n  useTab,\n} from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { CloseIcon, MoreIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\nimport {\n  CubeInlineInputRef,\n  InlineInput,\n} from '../../content/InlineInput/InlineInput';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { TabContainer, TabElement } from './styled';\nimport { TabDropIndicator } from './TabDropIndicator';\nimport { useTabsContext } from './TabsContext';\nimport { ParsedTab, RADIO_SIZE_MAP } from './types';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport type { DraggableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Event handlers for actions to prevent event propagation to tab button\n// =============================================================================\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\n// Inherit the tab button's pointer cursor — InlineInput's default `cursor: text`\n// hover hint is misleading inside a clickable tab.\nconst INLINE_INPUT_STYLES = { cursor: 'inherit' } as const;\n\n// =============================================================================\n// Menu Processing Utilities\n// =============================================================================\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n  theme?: string;\n}\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/**\n * Process menu items for predefined action keys (rename, delete).\n * Auto-adds labels and disables items when requirements aren't met.\n */\nfunction processMenuItems(\n  children: ReactNode,\n  effectiveIsEditable: boolean,\n  isDeletable: boolean,\n): ReactNode {\n  // Use Children.forEach instead of Children.toArray to avoid React prepending\n  // \".$\" to element keys, which breaks selectedKeys matching in Menu.\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      result.push(child);\n      return;\n    }\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Rename',\n          isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n        }),\n      );\n      return;\n    }\n    if (childKey === 'delete') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Delete',\n          theme: childProps.theme ?? 'danger',\n          isDisabled: childProps.isDisabled ?? !isDeletable,\n        }),\n      );\n      return;\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: processMenuItems(\n            childProps.children,\n            effectiveIsEditable,\n            isDeletable,\n          ),\n        }),\n      );\n      return;\n    }\n\n    result.push(child);\n  });\n\n  return result;\n}\n\n/**\n * Check if menu children is empty (null, undefined, or empty fragment)\n */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined) return true;\n  const children = Children.toArray(menu);\n  return children.length === 0;\n}\n\n// =============================================================================\n// TabButton Props\n// =============================================================================\n\nexport interface TabButtonProps {\n  /** React Aria collection item */\n  item: Node<object>;\n  /** Parsed tab data */\n  tabData: ParsedTab;\n  /** Whether this is the last tab (for drop indicator) */\n  isLastTab?: boolean;\n}\n\n// =============================================================================\n// TabButton Component\n// =============================================================================\n\n/**\n * Individual tab button component.\n *\n * Uses TabsContext to access shared props, dramatically reducing prop drilling.\n * Handles:\n * - Tab selection and keyboard navigation\n * - Inline title editing\n * - Menu and context menu\n * - Drag-and-drop reordering\n * - Focus and hover states\n */\nexport function TabButton({ item, tabData, isLastTab }: TabButtonProps) {\n  // Get shared context\n  const {\n    state,\n    type,\n    size,\n    autoHideActions: parentAutoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    onDelete,\n    dragState,\n    dropState,\n    editingKey,\n    startEditing,\n    submitEditing,\n    cancelEditing,\n  } = useTabsContext();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const inlineInputRef = useRef<CubeInlineInputRef>(null);\n  const { tabProps } = useTab({ key: item.key }, state, ref);\n\n  // Measure actions width for proper space allocation in Item\n  const [actionsWidth, setActionsWidth] = useState(0);\n\n  // Drag-and-drop support - only enable when both states are provided\n  const isDraggable = !!dragState && !!dropState;\n\n  // useDraggableItem must be called unconditionally (Rules of Hooks)\n  // When dragState is undefined, we pass a minimal mock state to satisfy the hook\n  const mockDragState = useMemo(\n    () => createMockDragState(state.collection, state.selectionManager),\n    [state.collection, state.selectionManager],\n  );\n\n  const dragResult = useDraggableItem(\n    { key: item.key },\n    dragState ?? mockDragState,\n  );\n  const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n  const isDragging = isDraggable && dragResult.isDragging;\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  // Hover, focus, and focus-visible state handling\n  const { hoverProps, isHovered } = useHover({});\n  const [isFocused, setIsFocused] = useState(false);\n  const { focusProps } = useFocus({ onFocusChange: setIsFocused });\n  const { isFocusVisible } = useFocusVisible();\n\n  // Suppress focus-visible when restoring focus after editing\n  const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);\n  const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;\n\n  const isActive = state.selectedKey === item.key;\n  const isDisabled = state.disabledKeys.has(item.key);\n  const isDeletable = !!onDelete;\n  const isEditing = editingKey === item.key;\n\n  // Compute effective values - Tab-level overrides Tabs-level\n  const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;\n  const effectiveMenu =\n    tabData.menu === null ? null : tabData.menu ?? parentMenu;\n  const effectiveMenuTriggerProps: Partial<CubeItemActionProps> = {\n    ...parentMenuTriggerProps,\n    ...tabData.menuTriggerProps,\n  };\n  const effectiveMenuProps: Partial<CubeMenuProps<object>> = {\n    ...parentMenuProps,\n    ...tabData.menuProps,\n  };\n  const effectiveContextMenu =\n    tabData.contextMenu ?? parentContextMenu ?? false;\n  const effectiveType = tabData.type ?? type ?? 'default';\n\n  const contextMenuEnabled =\n    effectiveContextMenu === true || effectiveContextMenu === 'context-only';\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Inline close when no menu, or context-only (no overflow trigger)\n  const showDeleteButton =\n    isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);\n\n  // Process menu items for auto-labels and disabled states\n  const processedMenu =\n    effectiveMenu && !isMenuEmpty(effectiveMenu)\n      ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)\n      : null;\n\n  const itemKeyStr = String(item.key);\n\n  const handleDelete = useEvent(() => {\n    onDelete?.(itemKeyStr);\n  });\n\n  const titleString =\n    typeof tabData.title === 'string' ? tabData.title : itemKeyStr;\n\n  const handleStartEditing = useEvent(() => {\n    if (!effectiveIsEditable || isDisabled) return;\n    startEditing(itemKeyStr, titleString);\n  });\n\n  const handleSubmitEditing = useEvent((newTitle: string) => {\n    submitEditing(itemKeyStr, newTitle, tabData.onTitleChange);\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    ref.current?.focus();\n  });\n\n  const handleCancelEditing = useEvent(() => {\n    cancelEditing();\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    ref.current?.focus();\n  });\n\n  const handleEditingChange = useEvent((editing: boolean) => {\n    if (editing && !isEditing) {\n      handleStartEditing();\n    }\n  });\n\n  // Handle menu actions - predefined actions first, then callbacks\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\n    // Handle predefined actions first (only if requirements are met)\n    if (normalizedAction === 'rename' && effectiveIsEditable) {\n      inlineInputRef.current?.startEditing();\n    }\n    if (normalizedAction === 'delete' && isDeletable) {\n      onDelete?.(itemKeyStr);\n    }\n    // Call Tab-level onAction first (with normalized action)\n    tabData.onAction?.(normalizedAction);\n    // Then call Tabs-level onAction with tab key (with normalized action)\n    parentOnAction?.(normalizedAction, itemKeyStr);\n  });\n\n  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\n  const contextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...effectiveMenuProps,\n      onAction: handleMenuAction,\n      children: processedMenu,\n    },\n  );\n\n  // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Reset focus-visible suppression on any keyboard interaction\n    if (suppressFocusVisible) {\n      setSuppressFocusVisible(false);\n    }\n\n    // F2 to start editing (standard rename shortcut)\n    if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      inlineInputRef.current?.startEditing();\n    }\n\n    // Shift+F10 opens the menu (standard context menu shortcut)\n    if (e.key === 'F10' && e.shiftKey && processedMenu) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        contextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n    }\n\n    // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)\n    // Skip when editing to allow normal text editing operations\n    if (\n      (e.key === 'Delete' || e.key === 'Backspace') &&\n      isDeletable &&\n      !isEditing\n    ) {\n      e.preventDefault();\n      onDelete?.(itemKeyStr);\n    }\n  });\n\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      active: isActive,\n      deletable: isDeletable,\n      disabled: isDisabled,\n      editing: isEditing,\n      hovered: isHovered,\n      focused: isFocused,\n      'focus-visible': effectiveFocusVisible,\n      draggable: isDraggable,\n      dragging: isDragging,\n    }),\n    [\n      effectiveType,\n      isActive,\n      isDeletable,\n      isDisabled,\n      isEditing,\n      isHovered,\n      isFocused,\n      effectiveFocusVisible,\n      isDraggable,\n      isDragging,\n    ],\n  );\n\n  // Scroll active tab into view\n  useEffect(() => {\n    if (ref.current && isActive) {\n      ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }\n  }, [isActive]);\n\n  // Overflow trigger (hidden in context-only mode)\n  const menuAction =\n    menuElement && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          {...effectiveMenuTriggerProps}\n        />\n        {menuElement}\n      </MenuTrigger>\n    ) : null;\n\n  // Build delete button (only shown when no menu)\n  const deleteAction = showDeleteButton ? (\n    <ItemAction\n      tabIndex={-1}\n      icon={<CloseIcon />}\n      tooltip=\"Close\"\n      onPress={handleDelete}\n    />\n  ) : null;\n\n  // Order: custom actions → menu trigger → delete button\n  const actions =\n    tabData.actions || menuAction || deleteAction ? (\n      <>\n        {tabData.actions}\n        {menuAction}\n        {deleteAction}\n      </>\n    ) : undefined;\n\n  // Measure actions width to pass to Item for proper space allocation\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      setActionsWidth(Math.round(actionsRef.current.offsetWidth));\n    }\n  }, [actions]);\n\n  // Determine effective size\n  const effectiveSize = tabData.size ?? size ?? 'medium';\n  const itemSize =\n    effectiveType === 'radio'\n      ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']\n      : effectiveSize;\n\n  // Determine Item type prop\n  const itemType =\n    effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';\n\n  // Determine shape - file type uses sharp edges\n  const isFileType = effectiveType === 'file';\n  const itemShape = isFileType ? 'sharp' : undefined;\n\n  // Determine autoHideActions - tab-level overrides parent-level\n  const effectiveAutoHideActions =\n    tabData.autoHideActions ?? parentAutoHideActions;\n\n  // Extract tab-specific props and pass through the rest (style props) to the Item\n  const {\n    title: _title,\n    content: _content,\n    key: _key,\n    isDisabled: _isDisabled,\n    prerender: _prerender,\n    keepMounted: _keepMounted,\n    size: _size,\n    type: _type,\n    actions: _actions,\n    autoHideActions: _autoHideActions,\n    isEditable: _isEditable,\n    onTitleChange: _onTitleChange,\n    menu: _menu,\n    menuTriggerProps: _menuTriggerProps,\n    menuProps: _menuProps,\n    contextMenu: _contextMenu,\n    onAction: _onAction,\n    tooltip: tabTooltip,\n    qa,\n    qaVal,\n    styles,\n    ...itemStyleProps\n  } = tabData;\n\n  // Render title with editing support if editable\n  // Override InlineInput's default `cursor: text` hover hint — in Tabs the\n  // title sits inside a clickable tab, so a text caret cursor is misleading.\n  //\n  // When the title is a plain string we let InlineInput render it directly,\n  // which lets the optimistic display kick in (avoids flicker if the parent's\n  // `onTitleChange` updates the source asynchronously, e.g. inside a RAF).\n  // For ReactNode titles (icons, badges, ...), preserve the original node.\n  //\n  // For editable tabs, route the tab's `tooltip` prop through InlineInput so\n  // it owns the truncation + tooltip behaviour (and we pass `tooltip={false}`\n  // to `TabElement` below to avoid double tooltips).\n  const renderTitleDisplay =\n    typeof tabData.title === 'string' ? undefined : () => tabData.title;\n  const titleContent = effectiveIsEditable ? (\n    <InlineInput\n      ref={inlineInputRef}\n      value={titleString}\n      isEditing={isEditing}\n      isDisabled={isDisabled}\n      keyboardActivation={false}\n      aria-label=\"Edit tab title\"\n      styles={INLINE_INPUT_STYLES}\n      renderDisplay={renderTitleDisplay}\n      tooltip={tabTooltip ?? true}\n      onEditingChange={handleEditingChange}\n      onSubmit={handleSubmitEditing}\n      onCancel={handleCancelEditing}\n    />\n  ) : (\n    tabData.title\n  );\n\n  // Use the hook's targetRef when context menu is enabled\n  const effectiveContainerRef =\n    contextMenuEnabled && processedMenu ? contextMenu.targetRef : containerRef;\n\n  // ARIA: indicate popup menu presence\n  const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' as const } : {};\n\n  // Mods for TabContainer\n  const containerMods = {\n    ...mods,\n    'auto-hide-actions': effectiveAutoHideActions,\n  };\n\n  return (\n    <TabContainer\n      ref={effectiveContainerRef}\n      data-size={itemSize}\n      mods={containerMods}\n      tokens={{ '$actions-width': `${actionsWidth}px` }}\n      {...effectiveDragProps}\n    >\n      {/* Drop indicator before this tab */}\n      {isDraggable && dropState && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n          dropState={dropState}\n          position=\"before\"\n        />\n      )}\n      <TabElement\n        preserveActionsSpace\n        autoHideActions={effectiveAutoHideActions}\n        as=\"button\"\n        {...mergeProps(tabProps, hoverProps, focusProps, {\n          onKeyDown: handleKeyDown,\n        })}\n        {...ariaProps}\n        {...itemStyleProps}\n        ref={ref}\n        qa={qa ?? `Tab-${String(item.key)}`}\n        qaVal={qaVal}\n        styles={styles}\n        mods={mods}\n        isSelected={isActive}\n        isDisabled={isDisabled}\n        size={itemSize}\n        type={itemType}\n        shape={itemShape}\n        actions={actions ? true : undefined}\n        tooltip={effectiveIsEditable ? false : tabTooltip}\n      >\n        {titleContent}\n      </TabElement>\n      {/* Actions rendered outside the button for accessibility */}\n      {actions && (\n        <div\n          ref={actionsRef}\n          data-element=\"Actions\"\n          {...ACTIONS_EVENT_HANDLERS}\n        >\n          <ItemActionProvider\n            type={itemType}\n            theme=\"default\"\n            isDisabled={isDisabled}\n          >\n            {actions}\n          </ItemActionProvider>\n        </div>\n      )}\n      {contextMenuEnabled && processedMenu && contextMenu.rendered}\n      {/* Drop indicator after the last tab */}\n      {isDraggable && dropState && isLastTab && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n          dropState={dropState}\n          position=\"after\"\n        />\n      )}\n    </TabContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/TabDropIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";

package/dist/components/navigation/Tabs/Tabs.js

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

package/dist/components/navigation/Tabs/TabsAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/navigation/Tabs/TabsContext.js

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

package/dist/components/navigation/Tabs/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 
@@ -29,7 +29,7 @@ const TabsElement = tasty({ styles: {
 	},
 	fill: {
 		"": "#clear",
-		"type=radio": "#dark.06"
+		"type=radio": "#surface-3"
 	},
 	flexShrink: 0,
 	flexGrow: 0,
@@ -184,7 +184,7 @@ const TabElement = tasty(_Item, {
 			"": "#dark-02",
 			"type=narrow & (hovered & !selected)": "#primary-text",
 			"(type=default | type=narrow) & selected": "#primary-text",
-			disabled: "#dark-04"
+			disabled: "#disabled-surface-text"
 		},
 		fill: {
 			"": "#clear",

package/dist/components/navigation/Tabs/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: {\n      '': 'end stretch',\n      'type=radio | type=file': 'stretch',\n    },\n    overflow: 'visible',\n    border: {\n      '': 0,\n      '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n    },\n    width: {\n      '': '100%',\n      'type=radio': 'max-content',\n    },\n    padding: {\n      '': 0,\n      'type=radio': '.5x',\n    },\n    radius: {\n      '': 0,\n      'type=radio': '1cr',\n    },\n    fill: {\n      '': '#clear',\n      'type=radio': '#dark.06',\n    },\n    flexShrink: 0,\n    flexGrow: 0,\n\n    $transition: '$tab-transition',\n    '$tab-indicator-size': {\n      '': '2bw',\n      'size=large': '1ow',\n    },\n\n    Prefix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n      },\n    },\n\n    Suffix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '>',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: 'min 0',\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Use multi-group fade with color tokens for smooth transitions\n      fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-left': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-left': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-right': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-right': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n      },\n      padding: '0 $tablist-padding',\n\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper\n    ScrollbarH: {\n      $: '> ScrollWrapper >',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#dark-04',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    },\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      'type=default': '.5x 0',\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: '.5x',\n    top: 0,\n    bottom: 0,\n    left: {\n      '': 'auto',\n      before: '-2px',\n    },\n    right: {\n      '': 'auto',\n      after: '-2px',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default type)\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: '0',\n    left: 0,\n    height: '$tab-indicator-size',\n    fill: '#primary',\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: {\n      '': 'end stretch',\n      'type=radio | type=file': 'stretch',\n    },\n    overflow: 'visible',\n    border: {\n      '': 0,\n      '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n    },\n    width: {\n      '': '100%',\n      'type=radio': 'max-content',\n    },\n    padding: {\n      '': 0,\n      'type=radio': '.5x',\n    },\n    radius: {\n      '': 0,\n      'type=radio': '1cr',\n    },\n    fill: {\n      '': '#clear',\n      'type=radio': '#surface-3',\n    },\n    flexShrink: 0,\n    flexGrow: 0,\n\n    $transition: '$tab-transition',\n    '$tab-indicator-size': {\n      '': '2bw',\n      'size=large': '1ow',\n    },\n\n    Prefix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n      },\n    },\n\n    Suffix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '>',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: 'min 0',\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Use multi-group fade with color tokens for smooth transitions\n      fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-left': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-left': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-right': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-right': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n      },\n      padding: '0 $tablist-padding',\n\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper\n    ScrollbarH: {\n      $: '> ScrollWrapper >',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    },\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      'type=default': '.5x 0',\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: '.5x',\n    top: 0,\n    bottom: 0,\n    left: {\n      '': 'auto',\n      before: '-2px',\n    },\n    right: {\n      '': 'auto',\n      after: '-2px',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default type)\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: '0',\n    left: 0,\n    height: '$tab-indicator-size',\n    fill: '#primary',\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { useCallback, useState } from "react";
 
 //#region src/components/navigation/Tabs/use-tab-editing.ts

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 

package/dist/components/organisms/FileTabs/FileTabs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { Space } from "../../layout/Space.js";
@@ -72,7 +72,7 @@ const TabElement = tasty(Action, { styles: {
 	fill: {
 		"": "#dark.04",
 		hovered: "#dark.08",
-		"disabled, disabled & hover": "#white"
+		"disabled, disabled & hover": "#surface"
 	},
 	color: {
 		"": "#dark-02",

package/dist/components/organisms/FileTabs/FileTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTabs.js","names":[],"sources":["../../../../src/components/organisms/FileTabs/FileTabs.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CloseIcon } from '../../../icons';\nimport { useLayoutEffect } from '../../../utils/react';\nimport { Action, Button, CubeActionProps } from '../../actions';\nimport { Block } from '../../Block';\nimport { CubeFlexProps, Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\n\ninterface TabData {\n  id: string | number;\n  title?: string;\n  isDirty?: boolean;\n}\n\ninterface FileTabContextValue {\n  addTab: (tab: TabData) => void;\n  setTab: (id: string | number) => void;\n  removeTab: (tab: TabData) => void;\n  currentTab?: string | number;\n  setDirtyTab: (id: string | number, isDirty: boolean) => void;\n}\n\nconst FileTabsContext = createContext<FileTabContextValue>({\n  addTab() {},\n  removeTab() {},\n  setTab() {},\n  setDirtyTab() {},\n});\n\nconst TabsPanelElement = tasty(Space, {\n  qa: 'TabsPanel',\n  styles: {\n    position: 'relative',\n    overflow: 'auto hidden',\n    top: '1bw',\n    gap: '.5x',\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    scrollbar: 'styled',\n    padding: '1ow 1ow 0 1ow',\n    fade: {\n      '': false,\n      'left-fade': '3x left',\n      'right-fade': '3x right',\n      'right-fade & left-fade': '3x left right',\n    },\n    transition: 'fade',\n    '--scrollbar-radius': '1ow',\n    '--scrollbar-width': '.75x',\n    '--scrollbar-outline-width': '1px',\n  },\n});\n\nconst TabsContainerElement = tasty(Flex, {\n  qa: 'TabsContainer',\n  styles: {\n    flow: 'column',\n    height: 'max 100%',\n    width: 'max 100%',\n    position: 'relative',\n  },\n});\n\nconst DirtyBadge = tasty({\n  element: 'DirtyBadge',\n  styles: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '1x',\n    height: '1x',\n    fill: '#dark.30',\n    radius: 'round',\n  },\n});\n\nconst TabElement = tasty(Action, {\n  styles: {\n    radius: '1r 1r 0 0',\n    padding: '1x 1.5x',\n    border: {\n      '': 'left top right #clear',\n      disabled: 'left top right #border',\n    },\n    fill: {\n      '': '#dark.04',\n      hovered: '#dark.08',\n      'disabled, disabled & hover': '#white',\n    },\n    color: {\n      '': '#dark-02',\n      'disabled, hovered, hovered & disabled': '#dark',\n    },\n    cursor: {\n      '': '$pointer',\n      disabled: 'default',\n    },\n    fontWeight: 500,\n    opacity: 1,\n    preset: 'default',\n    transform: {\n      '': 'translate(0, 0)',\n      disabled: 'translate(0, 1bw)',\n    },\n    transition: 'theme 0.2s',\n    margin: '1bw bottom',\n\n    DirtyBadge: {\n      opacity: {\n        '': 1,\n        'dirty & :hover': 0,\n      },\n      pointerEvents: {\n        '': 'auto',\n        'dirty & :hover': 'none',\n      },\n    },\n\n    CloseButton: {\n      opacity: {\n        '': 0,\n        '!dirty | :hover': 1,\n      },\n    },\n  },\n});\n\nconst CloseButton = tasty(Button, {\n  element: 'CloseButton',\n  type: 'neutral',\n  icon: <CloseIcon />,\n  label: 'Close Tab',\n  styles: {\n    width: '3x',\n    height: '3x',\n    padding: 0,\n  },\n});\n\n/**\n * @deprecated consider using <Tabs /> instead\n */\nexport interface FileTabProps extends Omit<CubeActionProps, 'id'> {\n  isDirty?: boolean;\n  isDisabled?: boolean;\n  children?: ReactNode;\n  isClosable?: boolean;\n  onClose?: () => void;\n}\n\nfunction Tab({\n  isDirty,\n  isDisabled,\n  children,\n  isClosable,\n  onClose,\n  ...props\n}: FileTabProps) {\n  return (\n    <TabElement\n      mods={{\n        dirty: isDirty,\n      }}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      <Space gap=\".75x\">\n        <Block>{children}</Block>\n        {(isClosable || isDirty) && (\n          <Flex placeItems=\"center\" style={{ position: 'relative' }}>\n            {isClosable ? <CloseButton onPress={onClose} /> : <div></div>}\n            {isDirty ? <DirtyBadge /> : null}\n          </Flex>\n        )}\n      </Space>\n    </TabElement>\n  );\n}\n\nexport interface CubeFileTabsProps extends CubeFlexProps {\n  /** The initial active key in the tabs (uncontrolled). */\n  defaultActiveKey?: string;\n  /** The currently active key in the tabs (controlled). */\n  activeKey?: string | number;\n  /** Handler that is called when the tab is clicked. */\n  onTabClick?: (string) => void;\n  /** Handler that is called when the tab is closed. */\n  onTabClose?: (string) => void;\n  /** Styles for each tab pane */\n  paneStyles?: Styles;\n  /** Whether the tabs are closable */\n  isClosable?: boolean;\n  children?: ReactNode;\n}\n\nexport function FileTabs({\n  defaultActiveKey,\n  activeKey: activeKeyProp,\n  onTabClick,\n  onTabClose,\n  paneStyles,\n  isClosable = true,\n  children,\n  ...props\n}: CubeFileTabsProps) {\n  const tabsRef = useRef<HTMLButtonElement>(null);\n  const [tabs, setTabs] = useState<TabData[]>([]);\n  const [activeKey, setActiveKey] = useState<string | number | undefined>(\n    activeKeyProp || defaultActiveKey,\n  );\n\n  const [leftFade, setLeftFade] = useState(false);\n  const [rightFade, setRightFade] = useState(false);\n\n  function updateScroll() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    setLeftFade(!!el.scrollLeft);\n    setRightFade(\n      el.scrollWidth !== el.offsetWidth &&\n        !!(el.scrollWidth - el.offsetWidth - el.scrollLeft),\n    );\n  }\n\n  useLayoutEffect(updateScroll, [tabs]);\n\n  function scrollCurrentIntoView() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    const current = el.querySelector('button[disabled]');\n\n    if (!current) return;\n\n    current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });\n  }\n\n  useEffect(() => {\n    function update() {\n      updateScroll();\n    }\n\n    if (tabsRef && tabsRef.current) {\n      tabsRef.current.addEventListener('scroll', update);\n      tabsRef.current.addEventListener('mousewheel', update);\n      window.addEventListener('resize', update);\n    }\n\n    return () => {\n      if (tabsRef && tabsRef.current) {\n        tabsRef.current.removeEventListener('scroll', update);\n        tabsRef.current.removeEventListener('mousewheel', update);\n      }\n\n      window.removeEventListener('resize', update);\n    };\n  }, [tabsRef]);\n\n  useEffect(scrollCurrentIntoView, [activeKey]);\n\n  useEffect(() => {\n    setActiveKey(activeKeyProp);\n  }, [activeKeyProp]);\n\n  function getTab(tabs: TabData[], key: string | number): TabData | undefined {\n    return tabs.find((tab) => tab.id === key);\n  }\n\n  function setTab(key: string | number) {\n    if (getTab(tabs, key)) {\n      setActiveKey(key);\n    }\n  }\n\n  function addTab(tab: TabData) {\n    setTabs((tabs) => {\n      if (!getTab(tabs, tab.id)) {\n        return [...tabs, tab];\n      }\n\n      return tabs;\n    });\n  }\n\n  function setDirtyTab(id: string | number, isDirty: boolean) {\n    setTabs((tabs) => {\n      const tab = getTab(tabs, id);\n\n      if (tab) {\n        tab.isDirty = isDirty;\n\n        return [...tabs];\n      }\n\n      return tabs;\n    });\n  }\n\n  function handleClose(tab) {\n    if (getTab(tabs, tab.id)) {\n      onTabClose && onTabClose(tab.id);\n    }\n  }\n\n  function removeTab(tab) {\n    setTabs((tabs) => {\n      const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);\n\n      setActiveKey((prevActiveKey) => {\n        if (prevActiveKey === tab.id) {\n          return _tabs[0] && _tabs[0].id;\n        }\n\n        return prevActiveKey;\n      });\n\n      return _tabs;\n    });\n  }\n\n  function onPress(tab) {\n    setTab(tab.id);\n    onTabClick && onTabClick(tab.id);\n  }\n\n  return (\n    <TabsContainerElement {...props}>\n      <FileTabsContext.Provider\n        value={{\n          addTab,\n          setTab,\n          removeTab,\n          setDirtyTab,\n          currentTab: activeKey,\n        }}\n      >\n        <TabsPanelElement\n          ref={tabsRef}\n          data-left-fade={leftFade || null}\n          data-right-fade={rightFade || null}\n        >\n          {tabs.map((tab) => {\n            return (\n              <Tab\n                key={tab.id}\n                isClosable={isClosable}\n                isDisabled={tab.id === activeKey || false}\n                isDirty={tab.isDirty}\n                onPress={() => onPress(tab)}\n                onClose={() => isClosable && handleClose(tab)}\n              >\n                {tab.title}\n              </Tab>\n            );\n          })}\n        </TabsPanelElement>\n        <Flex flexGrow={1} border=\"top\" {...(paneStyles || {})}>\n          {children}\n        </Flex>\n      </FileTabsContext.Provider>\n    </TabsContainerElement>\n  );\n}\n\nexport interface CubeFileTabProps extends FileTabProps {\n  id: string | number;\n  title: string;\n}\n\nFileTabs.TabPane = function FileTabPane(allProps: CubeFileTabProps) {\n  let { id, title, isDirty, children, ...props } = allProps;\n  const { addTab, removeTab, currentTab, setDirtyTab } =\n    useContext(FileTabsContext);\n\n  useEffect(() => {\n    const tabData = {\n      id,\n      title,\n      isDirty,\n    };\n\n    addTab(tabData);\n\n    return () => {\n      removeTab(tabData);\n    };\n  }, [id, title]);\n\n  useEffect(() => {\n    setDirtyTab(id, isDirty || false);\n  }, [isDirty]);\n\n  const isCurrent = id === currentTab;\n\n  return (\n    <Block\n      style={{ display: isCurrent ? 'block' : 'none', maxWidth: '100%' }}\n      flexGrow={1}\n      {...props}\n    >\n      {children}\n    </Block>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FileTabs.js","names":[],"sources":["../../../../src/components/organisms/FileTabs/FileTabs.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CloseIcon } from '../../../icons';\nimport { useLayoutEffect } from '../../../utils/react';\nimport { Action, Button, CubeActionProps } from '../../actions';\nimport { Block } from '../../Block';\nimport { CubeFlexProps, Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\n\ninterface TabData {\n  id: string | number;\n  title?: string;\n  isDirty?: boolean;\n}\n\ninterface FileTabContextValue {\n  addTab: (tab: TabData) => void;\n  setTab: (id: string | number) => void;\n  removeTab: (tab: TabData) => void;\n  currentTab?: string | number;\n  setDirtyTab: (id: string | number, isDirty: boolean) => void;\n}\n\nconst FileTabsContext = createContext<FileTabContextValue>({\n  addTab() {},\n  removeTab() {},\n  setTab() {},\n  setDirtyTab() {},\n});\n\nconst TabsPanelElement = tasty(Space, {\n  qa: 'TabsPanel',\n  styles: {\n    position: 'relative',\n    overflow: 'auto hidden',\n    top: '1bw',\n    gap: '.5x',\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    scrollbar: 'styled',\n    padding: '1ow 1ow 0 1ow',\n    fade: {\n      '': false,\n      'left-fade': '3x left',\n      'right-fade': '3x right',\n      'right-fade & left-fade': '3x left right',\n    },\n    transition: 'fade',\n    '--scrollbar-radius': '1ow',\n    '--scrollbar-width': '.75x',\n    '--scrollbar-outline-width': '1px',\n  },\n});\n\nconst TabsContainerElement = tasty(Flex, {\n  qa: 'TabsContainer',\n  styles: {\n    flow: 'column',\n    height: 'max 100%',\n    width: 'max 100%',\n    position: 'relative',\n  },\n});\n\nconst DirtyBadge = tasty({\n  element: 'DirtyBadge',\n  styles: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '1x',\n    height: '1x',\n    fill: '#dark.30',\n    radius: 'round',\n  },\n});\n\nconst TabElement = tasty(Action, {\n  styles: {\n    radius: '1r 1r 0 0',\n    padding: '1x 1.5x',\n    border: {\n      '': 'left top right #clear',\n      disabled: 'left top right #border',\n    },\n    fill: {\n      '': '#dark.04',\n      hovered: '#dark.08',\n      'disabled, disabled & hover': '#surface',\n    },\n    color: {\n      '': '#dark-02',\n      'disabled, hovered, hovered & disabled': '#dark',\n    },\n    cursor: {\n      '': '$pointer',\n      disabled: 'default',\n    },\n    fontWeight: 500,\n    opacity: 1,\n    preset: 'default',\n    transform: {\n      '': 'translate(0, 0)',\n      disabled: 'translate(0, 1bw)',\n    },\n    transition: 'theme 0.2s',\n    margin: '1bw bottom',\n\n    DirtyBadge: {\n      opacity: {\n        '': 1,\n        'dirty & :hover': 0,\n      },\n      pointerEvents: {\n        '': 'auto',\n        'dirty & :hover': 'none',\n      },\n    },\n\n    CloseButton: {\n      opacity: {\n        '': 0,\n        '!dirty | :hover': 1,\n      },\n    },\n  },\n});\n\nconst CloseButton = tasty(Button, {\n  element: 'CloseButton',\n  type: 'neutral',\n  icon: <CloseIcon />,\n  label: 'Close Tab',\n  styles: {\n    width: '3x',\n    height: '3x',\n    padding: 0,\n  },\n});\n\n/**\n * @deprecated consider using <Tabs /> instead\n */\nexport interface FileTabProps extends Omit<CubeActionProps, 'id'> {\n  isDirty?: boolean;\n  isDisabled?: boolean;\n  children?: ReactNode;\n  isClosable?: boolean;\n  onClose?: () => void;\n}\n\nfunction Tab({\n  isDirty,\n  isDisabled,\n  children,\n  isClosable,\n  onClose,\n  ...props\n}: FileTabProps) {\n  return (\n    <TabElement\n      mods={{\n        dirty: isDirty,\n      }}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      <Space gap=\".75x\">\n        <Block>{children}</Block>\n        {(isClosable || isDirty) && (\n          <Flex placeItems=\"center\" style={{ position: 'relative' }}>\n            {isClosable ? <CloseButton onPress={onClose} /> : <div></div>}\n            {isDirty ? <DirtyBadge /> : null}\n          </Flex>\n        )}\n      </Space>\n    </TabElement>\n  );\n}\n\nexport interface CubeFileTabsProps extends CubeFlexProps {\n  /** The initial active key in the tabs (uncontrolled). */\n  defaultActiveKey?: string;\n  /** The currently active key in the tabs (controlled). */\n  activeKey?: string | number;\n  /** Handler that is called when the tab is clicked. */\n  onTabClick?: (string) => void;\n  /** Handler that is called when the tab is closed. */\n  onTabClose?: (string) => void;\n  /** Styles for each tab pane */\n  paneStyles?: Styles;\n  /** Whether the tabs are closable */\n  isClosable?: boolean;\n  children?: ReactNode;\n}\n\nexport function FileTabs({\n  defaultActiveKey,\n  activeKey: activeKeyProp,\n  onTabClick,\n  onTabClose,\n  paneStyles,\n  isClosable = true,\n  children,\n  ...props\n}: CubeFileTabsProps) {\n  const tabsRef = useRef<HTMLButtonElement>(null);\n  const [tabs, setTabs] = useState<TabData[]>([]);\n  const [activeKey, setActiveKey] = useState<string | number | undefined>(\n    activeKeyProp || defaultActiveKey,\n  );\n\n  const [leftFade, setLeftFade] = useState(false);\n  const [rightFade, setRightFade] = useState(false);\n\n  function updateScroll() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    setLeftFade(!!el.scrollLeft);\n    setRightFade(\n      el.scrollWidth !== el.offsetWidth &&\n        !!(el.scrollWidth - el.offsetWidth - el.scrollLeft),\n    );\n  }\n\n  useLayoutEffect(updateScroll, [tabs]);\n\n  function scrollCurrentIntoView() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    const current = el.querySelector('button[disabled]');\n\n    if (!current) return;\n\n    current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });\n  }\n\n  useEffect(() => {\n    function update() {\n      updateScroll();\n    }\n\n    if (tabsRef && tabsRef.current) {\n      tabsRef.current.addEventListener('scroll', update);\n      tabsRef.current.addEventListener('mousewheel', update);\n      window.addEventListener('resize', update);\n    }\n\n    return () => {\n      if (tabsRef && tabsRef.current) {\n        tabsRef.current.removeEventListener('scroll', update);\n        tabsRef.current.removeEventListener('mousewheel', update);\n      }\n\n      window.removeEventListener('resize', update);\n    };\n  }, [tabsRef]);\n\n  useEffect(scrollCurrentIntoView, [activeKey]);\n\n  useEffect(() => {\n    setActiveKey(activeKeyProp);\n  }, [activeKeyProp]);\n\n  function getTab(tabs: TabData[], key: string | number): TabData | undefined {\n    return tabs.find((tab) => tab.id === key);\n  }\n\n  function setTab(key: string | number) {\n    if (getTab(tabs, key)) {\n      setActiveKey(key);\n    }\n  }\n\n  function addTab(tab: TabData) {\n    setTabs((tabs) => {\n      if (!getTab(tabs, tab.id)) {\n        return [...tabs, tab];\n      }\n\n      return tabs;\n    });\n  }\n\n  function setDirtyTab(id: string | number, isDirty: boolean) {\n    setTabs((tabs) => {\n      const tab = getTab(tabs, id);\n\n      if (tab) {\n        tab.isDirty = isDirty;\n\n        return [...tabs];\n      }\n\n      return tabs;\n    });\n  }\n\n  function handleClose(tab) {\n    if (getTab(tabs, tab.id)) {\n      onTabClose && onTabClose(tab.id);\n    }\n  }\n\n  function removeTab(tab) {\n    setTabs((tabs) => {\n      const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);\n\n      setActiveKey((prevActiveKey) => {\n        if (prevActiveKey === tab.id) {\n          return _tabs[0] && _tabs[0].id;\n        }\n\n        return prevActiveKey;\n      });\n\n      return _tabs;\n    });\n  }\n\n  function onPress(tab) {\n    setTab(tab.id);\n    onTabClick && onTabClick(tab.id);\n  }\n\n  return (\n    <TabsContainerElement {...props}>\n      <FileTabsContext.Provider\n        value={{\n          addTab,\n          setTab,\n          removeTab,\n          setDirtyTab,\n          currentTab: activeKey,\n        }}\n      >\n        <TabsPanelElement\n          ref={tabsRef}\n          data-left-fade={leftFade || null}\n          data-right-fade={rightFade || null}\n        >\n          {tabs.map((tab) => {\n            return (\n              <Tab\n                key={tab.id}\n                isClosable={isClosable}\n                isDisabled={tab.id === activeKey || false}\n                isDirty={tab.isDirty}\n                onPress={() => onPress(tab)}\n                onClose={() => isClosable && handleClose(tab)}\n              >\n                {tab.title}\n              </Tab>\n            );\n          })}\n        </TabsPanelElement>\n        <Flex flexGrow={1} border=\"top\" {...(paneStyles || {})}>\n          {children}\n        </Flex>\n      </FileTabsContext.Provider>\n    </TabsContainerElement>\n  );\n}\n\nexport interface CubeFileTabProps extends FileTabProps {\n  id: string | number;\n  title: string;\n}\n\nFileTabs.TabPane = function FileTabPane(allProps: CubeFileTabProps) {\n  let { id, title, isDirty, children, ...props } = allProps;\n  const { addTab, removeTab, currentTab, setDirtyTab } =\n    useContext(FileTabsContext);\n\n  useEffect(() => {\n    const tabData = {\n      id,\n      title,\n      isDirty,\n    };\n\n    addTab(tabData);\n\n    return () => {\n      removeTab(tabData);\n    };\n  }, [id, title]);\n\n  useEffect(() => {\n    setDirtyTab(id, isDirty || false);\n  }, [isDirty]);\n\n  const isCurrent = id === currentTab;\n\n  return (\n    <Block\n      style={{ display: isCurrent ? 'block' : 'none', maxWidth: '100%' }}\n      flexGrow={1}\n      {...props}\n    >\n      {children}\n    </Block>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,kBAAkB,cAAmC;CACzD,SAAS;CACT,YAAY;CACZ,SAAS;CACT,cAAc;CACf,CAAC;AAEF,MAAM,mBAAmB,MAAM,OAAO;CACpC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,UAAU;EACV,KAAK;EACL,KAAK;EACL,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,cAAc;GACd,0BAA0B;GAC3B;EACD,YAAY;EACZ,sBAAsB;EACtB,qBAAqB;EACrB,6BAA6B;EAC9B;CACF,CAAC;AAEF,MAAM,uBAAuB,MAAM,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP,UAAU;EACX;CACF,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,SAAS;CACT,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,WAAW;EACX,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,aAAa,MAAM,QAAQ,EAC/B,QAAQ;CACN,QAAQ;CACR,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,UAAU;EACX;CACD,MAAM;EACJ,IAAI;EACJ,SAAS;EACT,8BAA8B;EAC/B;CACD,OAAO;EACL,IAAI;EACJ,yCAAyC;EAC1C;CACD,QAAQ;EACN,IAAI;EACJ,UAAU;EACX;CACD,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,UAAU;EACX;CACD,YAAY;CACZ,QAAQ;CAER,YAAY;EACV,SAAS;GACP,IAAI;GACJ,kBAAkB;GACnB;EACD,eAAe;GACb,IAAI;GACJ,kBAAkB;GACnB;EACF;CAED,aAAa,EACX,SAAS;EACP,IAAI;EACJ,mBAAmB;EACpB,EACF;CACF,EACF,CAAC;AAEF,MAAM,cAAc,MAAM,QAAQ;CAChC,SAAS;CACT,MAAM;CACN,MAAM,oBAAC,cAAY;CACnB,OAAO;CACP,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAaF,SAAS,IAAI,EACX,SACA,YACA,UACA,YACA,SACA,GAAG,SACY;AACf,QACE,oBAAC;EACC,MAAM,EACJ,OAAO,SACR;EACW;EACZ,GAAI;YAEJ,qBAAC;GAAM,KAAI;cACT,oBAAC,SAAO,WAAiB,GACvB,cAAc,YACd,qBAAC;IAAK,YAAW;IAAS,OAAO,EAAE,UAAU,YAAY;eACtD,aAAa,oBAAC,eAAY,SAAS,UAAW,GAAG,oBAAC,UAAU,EAC5D,UAAU,oBAAC,eAAa,GAAG;KACvB;IAEH;GACG;;AAoBjB,SAAgB,SAAS,EACvB,kBACA,WAAW,eACX,YACA,YACA,YACA,aAAa,MACb,UACA,GAAG,SACiB;CACpB,MAAM,UAAU,OAA0B,KAAK;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAoB,EAAE,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAChC,iBAAiB,iBAClB;CAED,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,SAAS,eAAe;EACtB,MAAM,KAAK,WAAW,QAAQ;AAE9B,MAAI,CAAC,GAAI;AAET,cAAY,CAAC,CAAC,GAAG,WAAW;AAC5B,eACE,GAAG,gBAAgB,GAAG,eACpB,CAAC,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,YAC3C;;AAGH,mBAAgB,cAAc,CAAC,KAAK,CAAC;CAErC,SAAS,wBAAwB;EAC/B,MAAM,KAAK,WAAW,QAAQ;AAE9B,MAAI,CAAC,GAAI;EAET,MAAM,UAAU,GAAG,cAAc,mBAAmB;AAEpD,MAAI,CAAC,QAAS;AAEd,UAAQ,eAAe;GAAE,UAAU;GAAU,QAAQ;GAAO,OAAO;GAAO,CAAC;;AAG7E,iBAAgB;EACd,SAAS,SAAS;AAChB,iBAAc;;AAGhB,MAAI,WAAW,QAAQ,SAAS;AAC9B,WAAQ,QAAQ,iBAAiB,UAAU,OAAO;AAClD,WAAQ,QAAQ,iBAAiB,cAAc,OAAO;AACtD,UAAO,iBAAiB,UAAU,OAAO;;AAG3C,eAAa;AACX,OAAI,WAAW,QAAQ,SAAS;AAC9B,YAAQ,QAAQ,oBAAoB,UAAU,OAAO;AACrD,YAAQ,QAAQ,oBAAoB,cAAc,OAAO;;AAG3D,UAAO,oBAAoB,UAAU,OAAO;;IAE7C,CAAC,QAAQ,CAAC;AAEb,WAAU,uBAAuB,CAAC,UAAU,CAAC;AAE7C,iBAAgB;AACd,eAAa,cAAc;IAC1B,CAAC,cAAc,CAAC;CAEnB,SAAS,OAAO,MAAiB,KAA2C;AAC1E,SAAO,KAAK,MAAM,QAAQ,IAAI,OAAO,IAAI;;CAG3C,SAAS,OAAO,KAAsB;AACpC,MAAI,OAAO,MAAM,IAAI,CACnB,cAAa,IAAI;;CAIrB,SAAS,OAAO,KAAc;AAC5B,WAAS,SAAS;AAChB,OAAI,CAAC,OAAO,MAAM,IAAI,GAAG,CACvB,QAAO,CAAC,GAAG,MAAM,IAAI;AAGvB,UAAO;IACP;;CAGJ,SAAS,YAAY,IAAqB,SAAkB;AAC1D,WAAS,SAAS;GAChB,MAAM,MAAM,OAAO,MAAM,GAAG;AAE5B,OAAI,KAAK;AACP,QAAI,UAAU;AAEd,WAAO,CAAC,GAAG,KAAK;;AAGlB,UAAO;IACP;;CAGJ,SAAS,YAAY,KAAK;AACxB,MAAI,OAAO,MAAM,IAAI,GAAG,CACtB,eAAc,WAAW,IAAI,GAAG;;CAIpC,SAAS,UAAU,KAAK;AACtB,WAAS,SAAS;GAChB,MAAM,QAAQ,KAAK,QAAQ,SAAS,KAAK,OAAO,IAAI,GAAG;AAEvD,iBAAc,kBAAkB;AAC9B,QAAI,kBAAkB,IAAI,GACxB,QAAO,MAAM,MAAM,MAAM,GAAG;AAG9B,WAAO;KACP;AAEF,UAAO;IACP;;CAGJ,SAAS,QAAQ,KAAK;AACpB,SAAO,IAAI,GAAG;AACd,gBAAc,WAAW,IAAI,GAAG;;AAGlC,QACE,oBAAC;EAAqB,GAAI;YACxB,qBAAC,gBAAgB;GACf,OAAO;IACL;IACA;IACA;IACA;IACA,YAAY;IACb;cAED,oBAAC;IACC,KAAK;IACL,kBAAgB,YAAY;IAC5B,mBAAiB,aAAa;cAE7B,KAAK,KAAK,QAAQ;AACjB,YACE,oBAAC;MAEa;MACZ,YAAY,IAAI,OAAO,aAAa;MACpC,SAAS,IAAI;MACb,eAAe,QAAQ,IAAI;MAC3B,eAAe,cAAc,YAAY,IAAI;gBAE5C,IAAI;QAPA,IAAI,GAQL;MAER;KACe,EACnB,oBAAC;IAAK,UAAU;IAAG,QAAO;IAAM,GAAK,cAAc,EAAE;IAClD;KACI;IACkB;GACN;;AAS3B,SAAS,UAAU,SAAS,YAAY,UAA4B;CAClE,IAAI,EAAE,IAAI,OAAO,SAAS,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,QAAQ,WAAW,YAAY,gBACrC,WAAW,gBAAgB;AAE7B,iBAAgB;EACd,MAAM,UAAU;GACd;GACA;GACA;GACD;AAED,SAAO,QAAQ;AAEf,eAAa;AACX,aAAU,QAAQ;;IAEnB,CAAC,IAAI,MAAM,CAAC;AAEf,iBAAgB;AACd,cAAY,IAAI,WAAW,MAAM;IAChC,CAAC,QAAQ,CAAC;AAIb,QACE,oBAAC;EACC,OAAO;GAAE,SAJK,OAAO,aAIS,UAAU;GAAQ,UAAU;GAAQ;EAClE,UAAU;EACV,GAAI;EAEH;GACK"}

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";
@@ -11,7 +11,7 @@ function StatsCard({ title, value, suffix, ...props }) {
 		placeContent: "space-between",
 		gap: "1x",
 		border: false,
-		shadow: "0 2px 6px #dark.10",
+		shadow: "$shadow",
 		padding: "2.5x",
 		...props,
 		children: [/* @__PURE__ */ jsx(_Title, {

package/dist/components/organisms/StatsCard/StatsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.js","names":["Title","Text"],"sources":["../../../../src/components/organisms/StatsCard/StatsCard.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Card, CubeCardProps } from '../../content/Card/Card';\nimport { Text } from '../../content/Text';\nimport { Title } from '../../content/Title';\n\nexport interface CubeStatsCard extends CubeCardProps {\n  title?: string | ReactNode;\n  value?: string | number | ReactNode;\n  suffix?: string | number | ReactNode;\n}\n\nexport function StatsCard({ title, value, suffix, ...props }: CubeStatsCard) {\n  return (\n    <Card\n      display=\"flex\"\n      placeContent=\"space-between\"\n      gap=\"1x\"\n      border={false}\n      shadow=\"0 2px 6px #dark.10\"\n      padding=\"2.5x\"\n      {...props}\n    >\n      <Title nowrap level={4} color=\"#minor\" preset=\"default\">\n        {title}\n      </Title>\n      <Text.Strong preset=\"h3\">\n        {value} {suffix}\n      </Text.Strong>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,UAAU,EAAE,OAAO,OAAO,QAAQ,GAAG,SAAwB;AAC3E,QACE,qBAAC;EACC,SAAQ;EACR,cAAa;EACb,KAAI;EACJ,QAAQ;EACR,QAAO;EACP,SAAQ;EACR,GAAI;aAEJ,oBAACA;GAAM;GAAO,OAAO;GAAG,OAAM;GAAS,QAAO;aAC3C;IACK,EACR,qBAACC,MAAK;GAAO,QAAO;;IACjB;IAAM;IAAE;;IACG;GACT"}
+{"version":3,"file":"StatsCard.js","names":["Title","Text"],"sources":["../../../../src/components/organisms/StatsCard/StatsCard.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Card, CubeCardProps } from '../../content/Card/Card';\nimport { Text } from '../../content/Text';\nimport { Title } from '../../content/Title';\n\nexport interface CubeStatsCard extends CubeCardProps {\n  title?: string | ReactNode;\n  value?: string | number | ReactNode;\n  suffix?: string | number | ReactNode;\n}\n\nexport function StatsCard({ title, value, suffix, ...props }: CubeStatsCard) {\n  return (\n    <Card\n      display=\"flex\"\n      placeContent=\"space-between\"\n      gap=\"1x\"\n      border={false}\n      shadow=\"$shadow\"\n      padding=\"2.5x\"\n      {...props}\n    >\n      <Title nowrap level={4} color=\"#minor\" preset=\"default\">\n        {title}\n      </Title>\n      <Text.Strong preset=\"h3\">\n        {value} {suffix}\n      </Text.Strong>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,UAAU,EAAE,OAAO,OAAO,QAAQ,GAAG,SAAwB;AAC3E,QACE,qBAAC;EACC,SAAQ;EACR,cAAa;EACb,KAAI;EACJ,QAAQ;EACR,QAAO;EACP,SAAQ;EACR,GAAI;aAEJ,oBAACA;GAAM;GAAO,OAAO;GAAG,OAAM;GAAS,QAAO;aAC3C;IACK,EACR,qBAACC,MAAK;GAAO,QAAO;;IACjB;IAAM;IAAE;;IACG;GACT"}

package/dist/components/other/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/other/Calendar/CalendarCell.js

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

package/dist/components/other/Calendar/CalendarGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { CalendarCell } from "./CalendarCell.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/other/Calendar/RangeCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/other/CloudLogo/CloudLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { Button } from "../../actions/index.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/overlays/AlertDialog/AlertDialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { _Title } from "../../content/Title.js";

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";

package/dist/components/overlays/Dialog/Dialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SlotProvider } from "../../../utils/react/Slots.js";
@@ -25,7 +25,7 @@ const DialogElement = tasty({
 	styles: {
 		display: "flex",
 		flow: "column",
-		fill: "#white",
+		fill: "#surface",
 		pointerEvents: "auto",
 		outline: 0,
 		position: {

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n  useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#white',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'neutral',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nconst intlMessages = {\n  'en-US': {\n    dismiss: 'Dismiss',\n    alert: 'Alert',\n  },\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on close.\n    <FocusScope restoreFocus contain={shouldContainFocus}>\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  let formatMessage = useMessageFormatter(intlMessages);\n\n  let domRef = useDOMRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={formatMessage('dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useEffect, useMemo } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n  useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'neutral',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nconst intlMessages = {\n  'en-US': {\n    dismiss: 'Dismiss',\n    alert: 'Alert',\n  },\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus =\n    isEntered && !!context.isOpen && context.type !== 'panel';\n\n  return (\n    // This component traps the focus inside the dialog and restores it on close.\n    <FocusScope restoreFocus contain={shouldContainFocus}>\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  let formatMessage = useMessageFormatter(intlMessages);\n\n  let domRef = useDOMRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (!domRef.current) return;\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: autofocus input or primary button\n        const priorityElement = domRef.current.querySelector(\n          'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n        ) as HTMLElement | null;\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={formatMessage('dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/DialogContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
 import { DialogContext } from "./context.js";
 import { Children, isValidElement, useRef } from "react";

package/dist/components/overlays/Dialog/DialogForm.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
 import { Button } from "../../actions/index.js";

package/dist/components/overlays/Dialog/DialogTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { _Modal } from "../Modal/Modal.js";
 import { _Tray } from "../Modal/Tray.js";

package/dist/components/overlays/Dialog/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import invariant from "tiny-invariant";