@cube-dev/ui-kit 0.138.6 → 0.140.0

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Tab has its own TabType\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Visual appearance type. */\n  type?: TabType;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AA2BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
@@ -6,17 +6,18 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react
 /**
 * Hook to track and animate tab indicator position.
 *
-* Calculates the position and width of the selection indicator
-* based on the currently selected tab. Returns null if disabled
-* (e.g., for non-default tab types).
+* Calculates the start position and size of the selection indicator
+* along the orientation axis. Returns null if disabled (e.g., for
+* non-default/narrow tab types).
 *
 * @param containerRef - Ref to the tab container element
 * @param selectedKey - Currently selected tab key
 * @param enabled - Whether the indicator should be shown
+* @param orientation - Axis along which the indicator moves
 * @param orderToken - Optional token that changes when tab order changes (triggers recalculation)
-* @returns Indicator style (left, width) or null if disabled/not ready
+* @returns Indicator style (`start`, `size`) or null if disabled/not ready
 */
-function useTabIndicator(containerRef, selectedKey, enabled, orderToken) {
+function useTabIndicator(containerRef, selectedKey, enabled, orientation = "horizontal", orderToken) {
 	const [style, setStyle] = useState(null);
 	const cancelRef = useRef(null);
 	const updateIndicator = useCallback(() => {
@@ -31,14 +32,20 @@ function useTabIndicator(containerRef, selectedKey, enabled, orderToken) {
 		}
 		const containerRect = containerRef.current.getBoundingClientRect();
 		const tabRect = selectedTab.getBoundingClientRect();
-		if (tabRect.width > 0) setStyle({
-			left: tabRect.left - containerRect.left + containerRef.current.scrollLeft,
-			width: tabRect.width
+		if (orientation === "vertical") {
+			if (tabRect.height > 0) setStyle({
+				start: tabRect.top - containerRect.top + containerRef.current.scrollTop,
+				size: tabRect.height
+			});
+		} else if (tabRect.width > 0) setStyle({
+			start: tabRect.left - containerRect.left + containerRef.current.scrollLeft,
+			size: tabRect.width
 		});
 	}, [
 		containerRef,
 		selectedKey,
 		enabled,
+		orientation,
 		orderToken
 	]);
 	useLayoutEffect(() => {
@@ -60,17 +67,22 @@ function useTabIndicator(containerRef, selectedKey, enabled, orderToken) {
 		if (!enabled) return;
 		const container = containerRef.current;
 		if (!container) return;
-		let prevWidth = container.getBoundingClientRect().width;
+		const getAxisSize = (rect) => orientation === "vertical" ? rect.height : rect.width;
+		let prevSize = getAxisSize(container.getBoundingClientRect());
 		const observer = new ResizeObserver((entries) => {
 			const entry = entries[0];
 			if (!entry) return;
-			const newWidth = entry.contentRect.width;
-			if (prevWidth === 0 && newWidth > 0) updateIndicator();
-			prevWidth = newWidth;
+			const newSize = getAxisSize(entry.contentRect);
+			if (prevSize === 0 && newSize > 0) updateIndicator();
+			prevSize = newSize;
 		});
 		observer.observe(container);
 		return () => observer.disconnect();
-	}, [enabled, updateIndicator]);
+	}, [
+		enabled,
+		orientation,
+		updateIndicator
+	]);
 	return enabled ? style : null;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/use-tab-indicator.ts"],"sourcesContent":["import {\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { chainRaf } from '../../../utils/raf';\n\nimport type { Key } from '@react-types/shared';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface IndicatorStyle {\n  left: number;\n  width: number;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Hook to track and animate tab indicator position.\n *\n * Calculates the position and width of the selection indicator\n * based on the currently selected tab. Returns null if disabled\n * (e.g., for non-default tab types).\n *\n * @param containerRef - Ref to the tab container element\n * @param selectedKey - Currently selected tab key\n * @param enabled - Whether the indicator should be shown\n * @param orderToken - Optional token that changes when tab order changes (triggers recalculation)\n * @returns Indicator style (left, width) or null if disabled/not ready\n */\nexport function useTabIndicator(\n  containerRef: RefObject<HTMLElement | null>,\n  selectedKey: Key | null,\n  enabled: boolean,\n  orderToken?: string,\n): IndicatorStyle | null {\n  const [style, setStyle] = useState<IndicatorStyle | null>(null);\n  const cancelRef = useRef<(() => void) | null>(null);\n\n  const updateIndicator = useCallback(() => {\n    if (!enabled || !containerRef.current || selectedKey == null) {\n      setStyle(null);\n      return;\n    }\n\n    // Find the selected tab button within the container\n    const selectedTab = containerRef.current.querySelector(\n      '[aria-selected=\"true\"]',\n    ) as HTMLElement | null;\n\n    if (!selectedTab) {\n      setStyle(null);\n      return;\n    }\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const tabRect = selectedTab.getBoundingClientRect();\n\n    // Only update if dimensions are valid (element has been painted)\n    if (tabRect.width > 0) {\n      setStyle({\n        left:\n          tabRect.left - containerRect.left + containerRef.current.scrollLeft,\n        width: tabRect.width,\n      });\n    }\n  }, [containerRef, selectedKey, enabled, orderToken]);\n\n  // Update on selectedKey change - use chainRaf to ensure DOM is fully painted\n  useLayoutEffect(() => {\n    // Cancel any pending RAF chain\n    if (cancelRef.current) {\n      cancelRef.current();\n    }\n\n    // Schedule update after 2 frames to ensure layout is complete\n    cancelRef.current = chainRaf(() => {\n      updateIndicator();\n    }, 2);\n\n    return () => {\n      if (cancelRef.current) {\n        cancelRef.current();\n      }\n    };\n  }, [updateIndicator]);\n\n  // Update on window resize\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleResize = () => updateIndicator();\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, [enabled, updateIndicator]);\n\n  // Recalculate when container becomes visible (0 -> non-zero width)\n  useEffect(() => {\n    if (!enabled) return;\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    let prevWidth = container.getBoundingClientRect().width;\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n\n      const newWidth = entry.contentRect.width;\n\n      if (prevWidth === 0 && newWidth > 0) {\n        updateIndicator();\n      }\n\n      prevWidth = newWidth;\n    });\n\n    observer.observe(container);\n\n    return () => observer.disconnect();\n  }, [enabled, updateIndicator]);\n\n  return enabled ? style : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuCA,SAAgB,gBACd,cACA,aACA,SACA,YACuB;CACvB,MAAM,CAAC,OAAO,YAAY,SAAgC,KAAK;CAC/D,MAAM,YAAY,OAA4B,KAAK;CAEnD,MAAM,kBAAkB,kBAAkB;AACxC,MAAI,CAAC,WAAW,CAAC,aAAa,WAAW,eAAe,MAAM;AAC5D,YAAS,KAAK;AACd;;EAIF,MAAM,cAAc,aAAa,QAAQ,cACvC,2BACD;AAED,MAAI,CAAC,aAAa;AAChB,YAAS,KAAK;AACd;;EAGF,MAAM,gBAAgB,aAAa,QAAQ,uBAAuB;EAClE,MAAM,UAAU,YAAY,uBAAuB;AAGnD,MAAI,QAAQ,QAAQ,EAClB,UAAS;GACP,MACE,QAAQ,OAAO,cAAc,OAAO,aAAa,QAAQ;GAC3D,OAAO,QAAQ;GAChB,CAAC;IAEH;EAAC;EAAc;EAAa;EAAS;EAAW,CAAC;AAGpD,uBAAsB;AAEpB,MAAI,UAAU,QACZ,WAAU,SAAS;AAIrB,YAAU,UAAU,eAAe;AACjC,oBAAiB;KAChB,EAAE;AAEL,eAAa;AACX,OAAI,UAAU,QACZ,WAAU,SAAS;;IAGtB,CAAC,gBAAgB,CAAC;AAGrB,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,qBAAqB,iBAAiB;AAE5C,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,CAAC,SAAS,gBAAgB,CAAC;AAG9B,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,IAAI,YAAY,UAAU,uBAAuB,CAAC;EAElD,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;GAEZ,MAAM,WAAW,MAAM,YAAY;AAEnC,OAAI,cAAc,KAAK,WAAW,EAChC,kBAAiB;AAGnB,eAAY;IACZ;AAEF,WAAS,QAAQ,UAAU;AAE3B,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,gBAAgB,CAAC;AAE9B,QAAO,UAAU,QAAQ"}
+{"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/use-tab-indicator.ts"],"sourcesContent":["import {\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { chainRaf } from '../../../utils/raf';\n\nimport type { Key } from '@react-types/shared';\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/**\n * Axis-agnostic indicator geometry.\n * For horizontal orientation: `start` is `left`, `size` is `width`.\n * For vertical   orientation: `start` is `top`,  `size` is `height`.\n */\nexport interface IndicatorStyle {\n  start: number;\n  size: number;\n}\n\nexport type IndicatorOrientation = 'horizontal' | 'vertical';\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Hook to track and animate tab indicator position.\n *\n * Calculates the start position and size of the selection indicator\n * along the orientation axis. Returns null if disabled (e.g., for\n * non-default/narrow tab types).\n *\n * @param containerRef - Ref to the tab container element\n * @param selectedKey - Currently selected tab key\n * @param enabled - Whether the indicator should be shown\n * @param orientation - Axis along which the indicator moves\n * @param orderToken - Optional token that changes when tab order changes (triggers recalculation)\n * @returns Indicator style (`start`, `size`) or null if disabled/not ready\n */\nexport function useTabIndicator(\n  containerRef: RefObject<HTMLElement | null>,\n  selectedKey: Key | null,\n  enabled: boolean,\n  orientation: IndicatorOrientation = 'horizontal',\n  orderToken?: string,\n): IndicatorStyle | null {\n  const [style, setStyle] = useState<IndicatorStyle | null>(null);\n  const cancelRef = useRef<(() => void) | null>(null);\n\n  const updateIndicator = useCallback(() => {\n    if (!enabled || !containerRef.current || selectedKey == null) {\n      setStyle(null);\n      return;\n    }\n\n    // Find the selected tab button within the container\n    const selectedTab = containerRef.current.querySelector(\n      '[aria-selected=\"true\"]',\n    ) as HTMLElement | null;\n\n    if (!selectedTab) {\n      setStyle(null);\n      return;\n    }\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const tabRect = selectedTab.getBoundingClientRect();\n\n    if (orientation === 'vertical') {\n      // Only update if dimensions are valid (element has been painted)\n      if (tabRect.height > 0) {\n        setStyle({\n          start:\n            tabRect.top - containerRect.top + containerRef.current.scrollTop,\n          size: tabRect.height,\n        });\n      }\n    } else {\n      if (tabRect.width > 0) {\n        setStyle({\n          start:\n            tabRect.left - containerRect.left + containerRef.current.scrollLeft,\n          size: tabRect.width,\n        });\n      }\n    }\n  }, [containerRef, selectedKey, enabled, orientation, orderToken]);\n\n  // Update on selectedKey change - use chainRaf to ensure DOM is fully painted\n  useLayoutEffect(() => {\n    // Cancel any pending RAF chain\n    if (cancelRef.current) {\n      cancelRef.current();\n    }\n\n    // Schedule update after 2 frames to ensure layout is complete\n    cancelRef.current = chainRaf(() => {\n      updateIndicator();\n    }, 2);\n\n    return () => {\n      if (cancelRef.current) {\n        cancelRef.current();\n      }\n    };\n  }, [updateIndicator]);\n\n  // Update on window resize\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleResize = () => updateIndicator();\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, [enabled, updateIndicator]);\n\n  // Recalculate when container becomes visible (0 -> non-zero size along the axis)\n  useEffect(() => {\n    if (!enabled) return;\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getAxisSize = (rect: { width: number; height: number }) =>\n      orientation === 'vertical' ? rect.height : rect.width;\n\n    let prevSize = getAxisSize(container.getBoundingClientRect());\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n\n      const newSize = getAxisSize(entry.contentRect);\n\n      if (prevSize === 0 && newSize > 0) {\n        updateIndicator();\n      }\n\n      prevSize = newSize;\n    });\n\n    observer.observe(container);\n\n    return () => observer.disconnect();\n  }, [enabled, orientation, updateIndicator]);\n\n  return enabled ? style : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,gBACd,cACA,aACA,SACA,cAAoC,cACpC,YACuB;CACvB,MAAM,CAAC,OAAO,YAAY,SAAgC,KAAK;CAC/D,MAAM,YAAY,OAA4B,KAAK;CAEnD,MAAM,kBAAkB,kBAAkB;AACxC,MAAI,CAAC,WAAW,CAAC,aAAa,WAAW,eAAe,MAAM;AAC5D,YAAS,KAAK;AACd;;EAIF,MAAM,cAAc,aAAa,QAAQ,cACvC,2BACD;AAED,MAAI,CAAC,aAAa;AAChB,YAAS,KAAK;AACd;;EAGF,MAAM,gBAAgB,aAAa,QAAQ,uBAAuB;EAClE,MAAM,UAAU,YAAY,uBAAuB;AAEnD,MAAI,gBAAgB,YAElB;OAAI,QAAQ,SAAS,EACnB,UAAS;IACP,OACE,QAAQ,MAAM,cAAc,MAAM,aAAa,QAAQ;IACzD,MAAM,QAAQ;IACf,CAAC;aAGA,QAAQ,QAAQ,EAClB,UAAS;GACP,OACE,QAAQ,OAAO,cAAc,OAAO,aAAa,QAAQ;GAC3D,MAAM,QAAQ;GACf,CAAC;IAGL;EAAC;EAAc;EAAa;EAAS;EAAa;EAAW,CAAC;AAGjE,uBAAsB;AAEpB,MAAI,UAAU,QACZ,WAAU,SAAS;AAIrB,YAAU,UAAU,eAAe;AACjC,oBAAiB;KAChB,EAAE;AAEL,eAAa;AACX,OAAI,UAAU,QACZ,WAAU,SAAS;;IAGtB,CAAC,gBAAgB,CAAC;AAGrB,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,qBAAqB,iBAAiB;AAE5C,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,CAAC,SAAS,gBAAgB,CAAC;AAG9B,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,eAAe,SACnB,gBAAgB,aAAa,KAAK,SAAS,KAAK;EAElD,IAAI,WAAW,YAAY,UAAU,uBAAuB,CAAC;EAE7D,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;GAEZ,MAAM,UAAU,YAAY,MAAM,YAAY;AAE9C,OAAI,aAAa,KAAK,UAAU,EAC9B,kBAAiB;AAGnB,cAAW;IACX;AAEF,WAAS,QAAQ,UAAU;AAE3B,eAAa,SAAS,YAAY;IACjC;EAAC;EAAS;EAAa;EAAgB,CAAC;AAE3C,QAAO,UAAU,QAAQ"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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";
@@ -108,7 +108,7 @@ const TabElement = tasty(Action, { styles: {
 } });
 const CloseButton = tasty(Button, {
 	element: "CloseButton",
-	type: "neutral",
+	type: "clear",
 	icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 	label: "Close Tab",
 	styles: {

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': '#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":"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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: 'clear',\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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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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";
@@ -87,7 +87,7 @@ const DialogElement = tasty({
 });
 const CloseButton = tasty(_ItemButton, {
 	qa: "ModalCloseButton",
-	type: "neutral",
+	type: "clear",
 	styles: {
 		position: "absolute",
 		top: "1x",

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: '#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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"}
+{"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: 'clear',\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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import invariant from "tiny-invariant";
 

package/dist/components/overlays/Dialog/use-dialog-container.js

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

package/dist/components/overlays/Modal/Modal.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";

package/dist/components/overlays/Modal/OpenTransitionContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/overlays/Modal/OpenTransitionContext.tsx

package/dist/components/overlays/Modal/Overlay.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { OpenTransitionContext } from "./OpenTransitionContext.js";

package/dist/components/overlays/Modal/Popover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/overlays/Modal/Tray.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";

package/dist/components/overlays/Modal/Underlay.js

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

package/dist/components/overlays/Notifications/Notification.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useNotificationContext } from "./NotificationContext.js";
 import { useEffect, useRef } from "react";
 

package/dist/components/overlays/Notifications/NotificationAction.d.ts

@@ -12,7 +12,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * - An action with no `onPress` and `closeOnPress: true` acts as a dismiss-only action.
  * - `isDismiss` — marks this action as the dismiss button; when present, the default
  *   "Dismiss" button is auto-suppressed via context detection.
- * - Type (primary/secondary/etc.) is set automatically via ItemActionProvider context.
+ * - Type (primary/outline/clear/etc.) is set automatically via ItemActionProvider context.
  */
 declare function NotificationAction({
   children,

package/dist/components/overlays/Notifications/NotificationAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { createContext, useContext, useMemo } from "react";
@@ -37,7 +37,7 @@ const DismissActionDetectedContext = createContext(null);
 * - An action with no `onPress` and `closeOnPress: true` acts as a dismiss-only action.
 * - `isDismiss` — marks this action as the dismiss button; when present, the default
 *   "Dismiss" button is auto-suppressed via context detection.
-* - Type (primary/secondary/etc.) is set automatically via ItemActionProvider context.
+* - Type (primary/outline/clear/etc.) is set automatically via ItemActionProvider context.
 */
 function NotificationAction({ children, onPress, closeOnPress = true, isDisabled, isDismiss }) {
 	const dismissCtx = useContext(NotificationDismissContext);
@@ -45,7 +45,8 @@ function NotificationAction({ children, onPress, closeOnPress = true, isDisabled
 	if (isDismiss && dismissDetectedRef) dismissDetectedRef.current = true;
 	const actionInterceptor = useContext(NotificationActionInterceptorContext);
 	return /* @__PURE__ */ jsx(ItemAction, {
-		type: "secondary",
+		isSelected: true,
+		type: "outline",
 		isDisabled,
 		onPress: useEvent(async () => {
 			actionInterceptor?.();

package/dist/components/overlays/Notifications/NotificationAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationAction.js","names":[],"sources":["../../../../src/components/overlays/Notifications/NotificationAction.tsx"],"sourcesContent":["import {\n  createContext,\n  Key,\n  ReactNode,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\n\nimport type { NotificationActionProps } from './types';\n\n// ─── Notification Action Interceptor Context ─────────────────────────\n\n/**\n * Optional callback invoked BEFORE any action's onPress handler.\n * Provided by PersistentNotificationsList so the parent (e.g. popover)\n * can close itself when an action is triggered.\n */\nconst NotificationActionInterceptorContext = createContext<(() => void) | null>(\n  null,\n);\n\nexport { NotificationActionInterceptorContext };\n\n// ─── Notification Dismiss Context ────────────────────────────────────\n\ninterface NotificationDismissContextValue {\n  dismiss: (reason: 'action' | 'close') => void;\n  restore: () => void;\n}\n\nconst NotificationDismissContext =\n  createContext<NotificationDismissContextValue | null>(null);\n\nexport interface NotificationDismissProviderProps {\n  notificationId: Key;\n  onDismiss: (id: Key, reason: 'action' | 'close') => void;\n  onRestore?: (id: Key) => void;\n  children: ReactNode;\n}\n\nexport function NotificationDismissProvider({\n  notificationId,\n  onDismiss,\n  onRestore,\n  children,\n}: NotificationDismissProviderProps) {\n  const dismiss = useEvent((reason: 'action' | 'close') => {\n    onDismiss(notificationId, reason);\n  });\n\n  const restore = useEvent(() => {\n    onRestore?.(notificationId);\n  });\n\n  const value = useMemo(() => ({ dismiss, restore }), [dismiss, restore]);\n\n  return (\n    <NotificationDismissContext.Provider value={value}>\n      {children}\n    </NotificationDismissContext.Provider>\n  );\n}\n\n// ─── Dismiss Action Detection Context ────────────────────────────────\n//\n// Allows NotificationCard to detect whether any child NotificationAction\n// has `isDismiss` set, without requiring a separate `hasDismissAction` prop.\n//\n// Mechanism:\n// - DismissActionDetector provides a ref via context and resets it each render.\n// - NotificationAction writes to the ref during render when isDismiss is true.\n// - DefaultDismissGuard reads the ref to decide whether to show the default button.\n//\n// This relies on React's left-to-right sibling render order: {actions}\n// children render before <DefaultDismissGuard />, so the ref is populated\n// before it's read. The ref is reset at the provider level each render,\n// making it safe under StrictMode double-rendering.\n\nexport const DismissActionDetectedContext = createContext<ReturnType<\n  typeof useRef<boolean>\n> | null>(null);\n\n// ─── NotificationAction Component ────────────────────────────────────\n\n/**\n * Action button for use inside Notification components.\n * Wraps ItemAction with auto-dismiss behavior.\n *\n * - `closeOnPress` (default: true) — auto-dismisses the notification after `onPress`.\n * - An action with no `onPress` and `closeOnPress: true` acts as a dismiss-only action.\n * - `isDismiss` — marks this action as the dismiss button; when present, the default\n *   \"Dismiss\" button is auto-suppressed via context detection.\n * - Type (primary/secondary/etc.) is set automatically via ItemActionProvider context.\n */\nexport function NotificationAction({\n  children,\n  onPress,\n  closeOnPress = true,\n  isDisabled,\n  isDismiss,\n}: NotificationActionProps) {\n  const dismissCtx = useContext(NotificationDismissContext);\n  const dismissDetectedRef = useContext(DismissActionDetectedContext);\n\n  // Register isDismiss during render (synchronous, before DefaultDismissGuard renders).\n  // Safe under StrictMode: the ref is reset at the DismissActionDetector level each render.\n  if (isDismiss && dismissDetectedRef) {\n    dismissDetectedRef.current = true;\n  }\n\n  const actionInterceptor = useContext(NotificationActionInterceptorContext);\n\n  const handlePress = useEvent(async () => {\n    actionInterceptor?.();\n\n    if (closeOnPress || actionInterceptor) {\n      // Dismiss immediately so the notification hides before the async action\n      // completes (e.g. opening a confirmation dialog).\n      // isDismiss actions use 'close' reason — the notification moves to the\n      // persistent list. Regular actions use 'action' reason — the notification\n      // is fully dismissed and won't reappear.\n      // When an actionInterceptor is present (persistent list), always dismiss\n      // regardless of closeOnPress — all actions remove the item permanently.\n      dismissCtx?.dismiss(isDismiss ? 'close' : 'action');\n    }\n\n    const result = await onPress?.();\n\n    if (result === false && (closeOnPress || actionInterceptor)) {\n      // The async action signalled cancellation — restore the notification.\n      dismissCtx?.restore();\n    }\n  });\n\n  return (\n    <ItemAction type=\"secondary\" isDisabled={isDisabled} onPress={handlePress}>\n      {children}\n    </ItemAction>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,uCAAuC,cAC3C,KACD;AAWD,MAAM,6BACJ,cAAsD,KAAK;AAS7D,SAAgB,4BAA4B,EAC1C,gBACA,WACA,WACA,YACmC;CACnC,MAAM,UAAU,UAAU,WAA+B;AACvD,YAAU,gBAAgB,OAAO;GACjC;CAEF,MAAM,UAAU,eAAe;AAC7B,cAAY,eAAe;GAC3B;CAEF,MAAM,QAAQ,eAAe;EAAE;EAAS;EAAS,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEvE,QACE,oBAAC,2BAA2B;EAAgB;EACzC;GACmC;;AAmB1C,MAAa,+BAA+B,cAElC,KAAK;;;;;;;;;;;AAcf,SAAgB,mBAAmB,EACjC,UACA,SACA,eAAe,MACf,YACA,aAC0B;CAC1B,MAAM,aAAa,WAAW,2BAA2B;CACzD,MAAM,qBAAqB,WAAW,6BAA6B;AAInE,KAAI,aAAa,mBACf,oBAAmB,UAAU;CAG/B,MAAM,oBAAoB,WAAW,qCAAqC;AAwB1E,QACE,oBAAC;EAAW,MAAK;EAAwB;EAAY,SAvBnC,SAAS,YAAY;AACvC,wBAAqB;AAErB,OAAI,gBAAgB,kBAQlB,aAAY,QAAQ,YAAY,UAAU,SAAS;AAKrD,OAFe,MAAM,WAAW,KAEjB,UAAU,gBAAgB,mBAEvC,aAAY,SAAS;IAEvB;EAIG;GACU"}
+{"version":3,"file":"NotificationAction.js","names":[],"sources":["../../../../src/components/overlays/Notifications/NotificationAction.tsx"],"sourcesContent":["import {\n  createContext,\n  Key,\n  ReactNode,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\n\nimport type { NotificationActionProps } from './types';\n\n// ─── Notification Action Interceptor Context ─────────────────────────\n\n/**\n * Optional callback invoked BEFORE any action's onPress handler.\n * Provided by PersistentNotificationsList so the parent (e.g. popover)\n * can close itself when an action is triggered.\n */\nconst NotificationActionInterceptorContext = createContext<(() => void) | null>(\n  null,\n);\n\nexport { NotificationActionInterceptorContext };\n\n// ─── Notification Dismiss Context ────────────────────────────────────\n\ninterface NotificationDismissContextValue {\n  dismiss: (reason: 'action' | 'close') => void;\n  restore: () => void;\n}\n\nconst NotificationDismissContext =\n  createContext<NotificationDismissContextValue | null>(null);\n\nexport interface NotificationDismissProviderProps {\n  notificationId: Key;\n  onDismiss: (id: Key, reason: 'action' | 'close') => void;\n  onRestore?: (id: Key) => void;\n  children: ReactNode;\n}\n\nexport function NotificationDismissProvider({\n  notificationId,\n  onDismiss,\n  onRestore,\n  children,\n}: NotificationDismissProviderProps) {\n  const dismiss = useEvent((reason: 'action' | 'close') => {\n    onDismiss(notificationId, reason);\n  });\n\n  const restore = useEvent(() => {\n    onRestore?.(notificationId);\n  });\n\n  const value = useMemo(() => ({ dismiss, restore }), [dismiss, restore]);\n\n  return (\n    <NotificationDismissContext.Provider value={value}>\n      {children}\n    </NotificationDismissContext.Provider>\n  );\n}\n\n// ─── Dismiss Action Detection Context ────────────────────────────────\n//\n// Allows NotificationCard to detect whether any child NotificationAction\n// has `isDismiss` set, without requiring a separate `hasDismissAction` prop.\n//\n// Mechanism:\n// - DismissActionDetector provides a ref via context and resets it each render.\n// - NotificationAction writes to the ref during render when isDismiss is true.\n// - DefaultDismissGuard reads the ref to decide whether to show the default button.\n//\n// This relies on React's left-to-right sibling render order: {actions}\n// children render before <DefaultDismissGuard />, so the ref is populated\n// before it's read. The ref is reset at the provider level each render,\n// making it safe under StrictMode double-rendering.\n\nexport const DismissActionDetectedContext = createContext<ReturnType<\n  typeof useRef<boolean>\n> | null>(null);\n\n// ─── NotificationAction Component ────────────────────────────────────\n\n/**\n * Action button for use inside Notification components.\n * Wraps ItemAction with auto-dismiss behavior.\n *\n * - `closeOnPress` (default: true) — auto-dismisses the notification after `onPress`.\n * - An action with no `onPress` and `closeOnPress: true` acts as a dismiss-only action.\n * - `isDismiss` — marks this action as the dismiss button; when present, the default\n *   \"Dismiss\" button is auto-suppressed via context detection.\n * - Type (primary/outline/clear/etc.) is set automatically via ItemActionProvider context.\n */\nexport function NotificationAction({\n  children,\n  onPress,\n  closeOnPress = true,\n  isDisabled,\n  isDismiss,\n}: NotificationActionProps) {\n  const dismissCtx = useContext(NotificationDismissContext);\n  const dismissDetectedRef = useContext(DismissActionDetectedContext);\n\n  // Register isDismiss during render (synchronous, before DefaultDismissGuard renders).\n  // Safe under StrictMode: the ref is reset at the DismissActionDetector level each render.\n  if (isDismiss && dismissDetectedRef) {\n    dismissDetectedRef.current = true;\n  }\n\n  const actionInterceptor = useContext(NotificationActionInterceptorContext);\n\n  const handlePress = useEvent(async () => {\n    actionInterceptor?.();\n\n    if (closeOnPress || actionInterceptor) {\n      // Dismiss immediately so the notification hides before the async action\n      // completes (e.g. opening a confirmation dialog).\n      // isDismiss actions use 'close' reason — the notification moves to the\n      // persistent list. Regular actions use 'action' reason — the notification\n      // is fully dismissed and won't reappear.\n      // When an actionInterceptor is present (persistent list), always dismiss\n      // regardless of closeOnPress — all actions remove the item permanently.\n      dismissCtx?.dismiss(isDismiss ? 'close' : 'action');\n    }\n\n    const result = await onPress?.();\n\n    if (result === false && (closeOnPress || actionInterceptor)) {\n      // The async action signalled cancellation — restore the notification.\n      dismissCtx?.restore();\n    }\n  });\n\n  return (\n    <ItemAction\n      isSelected\n      type=\"outline\"\n      isDisabled={isDisabled}\n      onPress={handlePress}\n    >\n      {children}\n    </ItemAction>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,uCAAuC,cAC3C,KACD;AAWD,MAAM,6BACJ,cAAsD,KAAK;AAS7D,SAAgB,4BAA4B,EAC1C,gBACA,WACA,WACA,YACmC;CACnC,MAAM,UAAU,UAAU,WAA+B;AACvD,YAAU,gBAAgB,OAAO;GACjC;CAEF,MAAM,UAAU,eAAe;AAC7B,cAAY,eAAe;GAC3B;CAEF,MAAM,QAAQ,eAAe;EAAE;EAAS;EAAS,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEvE,QACE,oBAAC,2BAA2B;EAAgB;EACzC;GACmC;;AAmB1C,MAAa,+BAA+B,cAElC,KAAK;;;;;;;;;;;AAcf,SAAgB,mBAAmB,EACjC,UACA,SACA,eAAe,MACf,YACA,aAC0B;CAC1B,MAAM,aAAa,WAAW,2BAA2B;CACzD,MAAM,qBAAqB,WAAW,6BAA6B;AAInE,KAAI,aAAa,mBACf,oBAAmB,UAAU;CAG/B,MAAM,oBAAoB,WAAW,qCAAqC;AAwB1E,QACE,oBAAC;EACC;EACA,MAAK;EACO;EACZ,SA3BgB,SAAS,YAAY;AACvC,wBAAqB;AAErB,OAAI,gBAAgB,kBAQlB,aAAY,QAAQ,YAAY,UAAU,SAAS;AAKrD,OAFe,MAAM,WAAW,KAEjB,UAAU,gBAAgB,mBAEvC,aAAY,SAAS;IAEvB;EASG;GACU"}