npm - @cube-dev/ui-kit - Versions diffs - 0.196.0 → 0.198.0 - Mend

@cube-dev/ui-kit 0.196.0 → 0.198.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1663) hide show

package/dist/components/navigation/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":["mergeStyles","OUTER_STYLES","Children","ForwardedRef","forwardRef","isValidElement","ReactElement","ReactNode","useEffect","useMemo","useRef","AriaTabListProps","useTabList","Item","CollectionItem","DraggableCollectionState","DroppableCollectionState","useTabListState","useEvent","useWarn","DirectionIcon","mergeProps","useMergeStyles","extractStyles","ItemAction","useTinyScrollbar","useBoardDragActive","DraggableTabList","TabIndicatorElement","TabsElement","TabButton","CachedPanelRenderer","TabPanelRenderer","TabPicker","TabsAction","TabsContextValue","TabsProvider","useTabEditing","useTabIndicator","Key","CubeTabListProps","CubeTabPanelProps","CubeTabProps","CubeTabsProps","ParsedPanel","ParsedTab","isComponentElement","child","displayName","T","type","isTabElement","isTabPanelElement","isTabListElement","getRawKey","element","key","keyStr","String","startsWith","slice","tabHasPanel","tab","explicitPanels","Map","hasRenderPanel","get","content","Tab","_props","Action","TabPanel","TabList","TabsComponent","props","ref","HTMLDivElement","label","defaultActiveKey","activeKey","size","placement","onChange","onDelete","onTitleChange","autoHideActions","isEditable","parentIsEditable","menu","parentMenu","menuTriggerProps","parentMenuTriggerProps","menuProps","parentMenuProps","contextMenu","parentContextMenu","onAction","parentOnAction","children","prefix","suffix","prerender","keepMounted","qa","renderPanel","panelCacheKeys","isReorderable","keyOrder","onReorder","showTabPicker","showScrollArrows","tabPickerPosition","scrollArrowsPosition","hideTabListScroll","tabListPadding","barStyles","tabListStyles","prefixStyles","suffixStyles","otherProps","orientation","effectiveType","baseStyles","tabListPaddingStyles","undefined","mergedTabListStyles","combinedStyles","Bar","Prefix","Suffix","listRef","scrollRef","visitedKeysRef","Set","isBoardDragActive","effectiveKeepMounted","onTitleChangeRaf","newTitle","requestAnimationFrame","editingKey","startEditing","cancelEditing","submitEditing","parsedTabs","hasAnyContent","listQa","childArray","toArray","tabs","panels","hasExplicitList","tabChildren","tabListQa","Pick","qaVal","set","styles","hasContent","id","_id","tabContent","tabProps","push","currentTabKeysSet","map","t","current","has","delete","orderedParsedTabs","length","tabMap","ordered","collectionItems","title","disabledKeys","filter","isDisabled","handleSelectionChange","add","selectedKey","defaultSelectedKey","ariaProps","onSelectionChange","state","tabListProps","handleTabPickerSelect","setSelectedKey","orderToken","join","indicatorStyle","isTinyScrollbar","handleHStyle","handleVStyle","hasOverflowX","hasOverflowY","isScrolling","isAtStartX","isAtEndX","isAtStartY","isAtEndY","showTinyScrollbar","hasOverflow","isAtStart","isAtEnd","hasPanels","args","shouldShowTabPicker","shouldShowScrollArrows","handleScrollStart","el","scrollTo","top","scrollTop","clientHeight","behavior","left","scrollLeft","clientWidth","handleScrollEnd","baseContextValue","createContextValue","dragState","dropState","renderTabListContent","contextValue","collectionProps","Record","index","item","collection","getItem","start","height","width","mods","deletable","scrolling","scrollArrowsElement","tabPickerElement","prefixHasActions","suffixHasActions","handleStyle","explicitPanel","_Tabs","Tabs","Object","assign","List","Panel"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n Children,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n Item as CollectionItem,\n DraggableCollectionState,\n DroppableCollectionState,\n useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { useBoardDragActive } from './BoardDragActiveProvider';\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n CubeTabListProps,\n CubeTabPanelProps,\n CubeTabProps,\n CubeTabsProps,\n ParsedPanel,\n ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/*\n Generic helper to check if a child is a specific component by displayName.\n /\nfunction isComponentElement<T>(\n child: ReactNode,\n displayName: string,\n): child is ReactElement<T> {\n return (\n isValidElement(child) &&\n typeof child.type === 'function' &&\n (child.type as any).displayName === displayName\n );\n}\n\n/* Checks if a child is a Tab component. /\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/* Checks if a child is a TabPanel component. /\nconst isTabPanelElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/* Checks if a child is a TabList component. /\nconst isTabListElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/\n Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n /\nfunction getRawKey(element: ReactElement): string \| null {\n if (element.key == null) return null;\n const keyStr = String(element.key);\n return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/\n Whether a tabpanel renders for this tab when it is selected. `renderPanel`\n * renders one for every tab; otherwise only a tab with content (its own\n * children or a `Tabs.Panel`) gets one, matching the static panel renderer.\n /\nfunction tabHasPanel(\n tab: ParsedTab,\n explicitPanels: Map<string, ParsedPanel>,\n hasRenderPanel: boolean,\n): boolean {\n if (hasRenderPanel) return true;\n\n return (explicitPanels.get(tab.key)?.content ?? tab.content) != null;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement \| null {\n return null;\n}\n\nTab.displayName = 'CubeTab';\n\n/\n Action for a tab's own `actions` slot, where it renders left of the built-in\n * menu trigger and delete button — which are `ItemAction`s themselves.\n \n Not to be confused with `Tabs.Action`, which is an `ItemButton` sized for the\n * tab bar's `prefix` / `suffix` slots rather than for a tab.\n /\nTab.Action = ItemAction;\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement \| null {\n return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement \| null {\n return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n props: CubeTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n label = 'Tabs',\n defaultActiveKey,\n activeKey,\n size,\n type = 'default',\n placement = 'top',\n onChange,\n onDelete,\n onTitleChange,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onAction: parentOnAction,\n children,\n prefix,\n suffix,\n prerender = false,\n keepMounted = false,\n qa = 'Tabs',\n renderPanel,\n panelCacheKeys,\n isReorderable = false,\n keyOrder,\n onReorder,\n showTabPicker = false,\n showScrollArrows = false,\n tabPickerPosition = 'suffix',\n scrollArrowsPosition = 'suffix',\n hideTabListScroll = false,\n tabListPadding,\n barStyles,\n tabListStyles,\n prefixStyles,\n suffixStyles,\n ...otherProps\n } = props;\n\n // Derive orientation from placement\n const orientation: 'horizontal' \| 'vertical' =\n placement === 'left' \|\| placement === 'right' ? 'vertical' : 'horizontal';\n\n // `narrow` only makes sense for a horizontal strip — its whole point is\n // collapsed horizontal padding for a denser row of tabs. Force `default`\n // when the strip is vertical.\n const effectiveType =\n orientation === 'vertical' && type === 'narrow' ? 'default' : type;\n\n // Extract outer styles (these go on the new outer wrapper)\n const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n // Build TabList padding style (memoized)\n const tabListPaddingStyles = useMemo(\n () =>\n tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n [tabListPadding],\n );\n\n // Merge tabListPaddingStyles with tabListStyles (memoized)\n const mergedTabListStyles = useMemo(\n () => mergeStyles(tabListPaddingStyles, tabListStyles),\n [tabListPaddingStyles, tabListStyles],\n );\n\n // Merge all sub-element styles into baseStyles. The outer `TabsElement`\n // exposes `Bar`, `Prefix`, `Suffix`, `TabList`, `ScrollWrapper`, `Scroll`,\n // and `Scrollbar` sub-elements (defined in styled.ts).\n const combinedStyles = useMergeStyles(baseStyles, {\n Bar: barStyles,\n TabList: mergedTabListStyles,\n Prefix: prefixStyles,\n Suffix: suffixStyles,\n });\n\n // DOM element refs\n const listRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n // Track visited tabs for keepMounted functionality\n const visitedKeysRef = useRef<Set<string>>(new Set());\n\n // While a board widget is being dragged (a `BoardDragActiveProvider` above\n // reports it), force panels to stay mounted so a tab a widget is dragged out\n // of - and its board owning the in-flight drag gesture - is not unmounted\n // when the user spring-loads a different tab by hovering it. Always `false`\n // outside a provider.\n const isBoardDragActive = useBoardDragActive();\n const effectiveKeepMounted = keepMounted \|\| isBoardDragActive;\n\n // =========================================================================\n // Tab Title Editing Hook\n // =========================================================================\n const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n requestAnimationFrame(() => {\n onTitleChange?.(key, newTitle);\n });\n });\n\n const { editingKey, startEditing, cancelEditing, submitEditing } =\n useTabEditing({\n onChange,\n onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n });\n\n // =========================================================================\n // Parse children to extract tabs and explicit panels\n // =========================================================================\n const { parsedTabs, explicitPanels, hasAnyContent, listQa } = useMemo(() => {\n const childArray = Children.toArray(children);\n const tabs: ParsedTab[] = [];\n const panels = new Map<string, ParsedPanel>();\n let hasExplicitList = false;\n let tabChildren: ReactNode[] = [];\n let tabListQa: Pick<CubeTabListProps, 'qa' \| 'qaVal'> = {};\n\n // Check for explicit Tabs.List / Tabs.Panel structure\n for (const child of childArray) {\n if (isTabListElement(child)) {\n hasExplicitList = true;\n tabChildren = Children.toArray(child.props.children);\n tabListQa = { qa: child.props.qa, qaVal: child.props.qaVal };\n } else if (isTabPanelElement(child)) {\n const key = getRawKey(child as ReactElement);\n\n if (key != null) {\n panels.set(key, {\n key,\n content: child.props.children,\n prerender: child.props.prerender,\n keepMounted: child.props.keepMounted,\n styles: child.props.styles,\n qa: child.props.qa,\n qaVal: child.props.qaVal,\n });\n }\n }\n }\n\n // If no explicit list, use direct Tab children\n if (!hasExplicitList) {\n tabChildren = childArray;\n }\n\n // Parse Tab elements\n let hasContent = panels.size > 0;\n\n for (const child of tabChildren) {\n if (isTabElement(child)) {\n const key = getRawKey(child) ?? child.props.id;\n\n if (key != null) {\n const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n tabs.push({\n ...tabProps,\n key,\n content: tabContent,\n });\n\n if (tabContent != null) {\n hasContent = true;\n }\n }\n }\n }\n\n return {\n parsedTabs: tabs,\n explicitPanels: panels,\n hasAnyContent: hasContent,\n listQa: tabListQa,\n };\n }, [children]);\n\n // Clean up visitedKeys when tabs are removed\n const currentTabKeysSet = useMemo(\n () => new Set(parsedTabs.map((t) => t.key)),\n [parsedTabs],\n );\n\n useEffect(() => {\n for (const key of visitedKeysRef.current) {\n if (!currentTabKeysSet.has(key)) {\n visitedKeysRef.current.delete(key);\n }\n }\n }, [currentTabKeysSet]);\n\n // =========================================================================\n // Order tabs according to keyOrder\n // =========================================================================\n const orderedParsedTabs = useMemo(() => {\n if (!keyOrder \|\| keyOrder.length === 0) {\n return parsedTabs;\n }\n\n const tabMap = new Map<string, ParsedTab>();\n for (const tab of parsedTabs) {\n tabMap.set(tab.key, tab);\n }\n\n const ordered: ParsedTab[] = [];\n for (const key of keyOrder) {\n const tab = tabMap.get(String(key));\n if (tab) {\n ordered.push(tab);\n tabMap.delete(String(key));\n }\n }\n\n // Append any tabs not in keyOrder\n for (const tab of parsedTabs) {\n if (tabMap.has(tab.key)) {\n ordered.push(tab);\n }\n }\n\n return ordered;\n }, [parsedTabs, keyOrder]);\n\n // Create collection items for React Stately\n const collectionItems = useMemo(() => {\n return orderedParsedTabs.map((tab) => (\n <CollectionItem\n key={tab.key}\n textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n >\n {tab.title}\n </CollectionItem>\n ));\n }, [orderedParsedTabs]);\n\n // Determine disabled keys\n const disabledKeys = useMemo(() => {\n return new Set(\n parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n );\n }, [parsedTabs]);\n\n // Handle selection change (converts React Aria's Key to string for our API)\n const handleSelectionChange = useEvent((key: Key) => {\n const keyStr = String(key);\n visitedKeysRef.current.add(keyStr);\n onChange?.(keyStr);\n });\n\n // Convert keys to strings for React Aria compatibility\n const selectedKey = activeKey != null ? String(activeKey) : undefined;\n const defaultSelectedKey =\n defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n // Create aria props for useTabListState\n const ariaProps: AriaTabListProps<object> = useMemo(\n () => ({\n selectedKey,\n defaultSelectedKey,\n onSelectionChange: handleSelectionChange,\n disabledKeys,\n children: collectionItems,\n 'aria-label': label,\n orientation,\n }),\n [\n selectedKey,\n defaultSelectedKey,\n handleSelectionChange,\n disabledKeys,\n collectionItems,\n label,\n orientation,\n ],\n );\n\n // Create state using useTabListState\n const state = useTabListState(ariaProps);\n\n // Track initial selected key for visited tabs\n useEffect(() => {\n if (state.selectedKey != null) {\n visitedKeysRef.current.add(String(state.selectedKey));\n }\n }, [state.selectedKey]);\n\n // Get tablist props from react-aria\n const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n const handleTabPickerSelect = useEvent((key: string) => {\n // Update internal state (for uncontrolled mode)\n state.setSelectedKey(key);\n // Also call the external onChange handler\n handleSelectionChange(key);\n });\n\n // =========================================================================\n // Tab Indicator (for default type)\n // =========================================================================\n // Create order token that changes when tab order changes (for indicator recalculation)\n const orderToken = useMemo(\n () => orderedParsedTabs.map((t) => t.key).join(','),\n [orderedParsedTabs],\n );\n\n const indicatorStyle = useTabIndicator(\n listRef,\n state.selectedKey,\n effectiveType === 'default' \|\| effectiveType === 'narrow',\n orientation,\n orderToken,\n );\n\n // =========================================================================\n // Tiny Scrollbar (not for radio type)\n // =========================================================================\n const isTinyScrollbar = effectiveType !== 'radio';\n const {\n handleHStyle,\n handleVStyle,\n hasOverflowX,\n hasOverflowY,\n isScrolling,\n isAtStartX,\n isAtEndX,\n isAtStartY,\n isAtEndY,\n } = useTinyScrollbar(scrollRef, isTinyScrollbar);\n const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n // Active-axis aggregates (used everywhere downstream so we don't sprinkle\n // orientation checks around).\n const hasOverflow = orientation === 'vertical' ? hasOverflowY : hasOverflowX;\n const isAtStart = orientation === 'vertical' ? isAtStartY : isAtStartX;\n const isAtEnd = orientation === 'vertical' ? isAtEndY : isAtEndX;\n\n const hasPanels = hasAnyContent \|\| !!renderPanel;\n\n // =========================================================================\n // Tab Picker visibility\n // =========================================================================\n useWarn(showTabPicker && effectiveType === 'radio', {\n key: ['tabs-tabpicker-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n ],\n });\n\n const shouldShowTabPicker =\n effectiveType !== 'radio' &&\n (showTabPicker === true \|\| (showTabPicker === 'auto' && hasOverflow));\n\n // =========================================================================\n // Scroll Arrows visibility and handlers\n // =========================================================================\n useWarn(showScrollArrows && effectiveType === 'radio', {\n key: ['tabs-scrollarrows-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n ],\n });\n\n const shouldShowScrollArrows =\n effectiveType !== 'radio' &&\n (showScrollArrows === true \|\| (showScrollArrows === 'auto' && hasOverflow));\n\n const handleScrollStart = useEvent(() => {\n const el = scrollRef.current;\n if (!el) return;\n if (orientation === 'vertical') {\n el.scrollTo({\n top: el.scrollTop - el.clientHeight,\n behavior: 'smooth',\n });\n } else {\n el.scrollTo({\n left: el.scrollLeft - el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n const handleScrollEnd = useEvent(() => {\n const el = scrollRef.current;\n if (!el) return;\n if (orientation === 'vertical') {\n el.scrollTo({\n top: el.scrollTop + el.clientHeight,\n behavior: 'smooth',\n });\n } else {\n el.scrollTo({\n left: el.scrollLeft + el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n // =========================================================================\n // Base Context Value (without drag/drop states)\n // =========================================================================\n const baseContextValue = useMemo(\n () => ({\n state,\n type: effectiveType,\n size,\n placement,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onDelete,\n onAction: parentOnAction,\n editingKey,\n startEditing,\n submitEditing,\n cancelEditing,\n }),\n [\n state,\n effectiveType,\n size,\n placement,\n autoHideActions,\n parentIsEditable,\n parentMenu,\n parentMenuTriggerProps,\n parentMenuProps,\n parentContextMenu,\n onDelete,\n parentOnAction,\n editingKey,\n startEditing,\n submitEditing,\n cancelEditing,\n ],\n );\n\n // Helper to create full context value with optional drag/drop states\n const createContextValue = (\n dragState?: DraggableCollectionState,\n dropState?: DroppableCollectionState,\n ): TabsContextValue => ({\n ...baseContextValue,\n dragState,\n dropState,\n });\n\n // =========================================================================\n // Tab List Content Renderer\n // =========================================================================\n const renderTabListContent = (\n contextValue: TabsContextValue,\n collectionProps: Record<string, unknown> = {},\n ) => (\n <div\n {...mergeProps(tabListProps, collectionProps)}\n ref={listRef}\n data-element=\"TabList\"\n data-qa={listQa.qa}\n data-qaval={listQa.qaVal}\n >\n <TabsProvider value={contextValue}>\n {orderedParsedTabs.map((tab, index) => {\n const item = state.collection.getItem(tab.key);\n if (!item) return null;\n\n return (\n <TabButton\n key={item.key}\n item={item}\n tabData={tab}\n isLastTab={index === orderedParsedTabs.length - 1}\n hasPanel={tabHasPanel(tab, explicitPanels, !!renderPanel)}\n />\n );\n })}\n </TabsProvider>\n {indicatorStyle && (\n <TabIndicatorElement\n mods={{ placement }}\n style={\n orientation === 'vertical'\n ? {\n top: indicatorStyle.start,\n height: indicatorStyle.size,\n }\n : {\n left: indicatorStyle.start,\n width: indicatorStyle.size,\n }\n }\n />\n )}\n </div>\n );\n\n // =========================================================================\n // Mods for styling\n // =========================================================================\n const mods = useMemo(\n () => ({\n type: effectiveType,\n size,\n placement,\n deletable: !!onDelete,\n scrolling: showTinyScrollbar && isScrolling,\n 'fade-start': !isAtStart,\n 'fade-end': !isAtEnd,\n 'has-panels': hasPanels,\n }),\n [\n effectiveType,\n size,\n placement,\n onDelete,\n showTinyScrollbar,\n isScrolling,\n isAtStart,\n isAtEnd,\n hasPanels,\n ],\n );\n\n // =========================================================================\n // Action Elements (TabPicker and Scroll Arrows)\n // =========================================================================\n const scrollArrowsElement = shouldShowScrollArrows ? (\n <>\n <TabsAction\n icon={\n <DirectionIcon to={orientation === 'vertical' ? 'top' : 'left'} />\n }\n aria-label={\n orientation === 'vertical' ? 'Scroll tabs up' : 'Scroll tabs left'\n }\n isDisabled={isAtStart}\n onPress={handleScrollStart}\n />\n <TabsAction\n icon={\n <DirectionIcon to={orientation === 'vertical' ? 'bottom' : 'right'} />\n }\n aria-label={\n orientation === 'vertical' ? 'Scroll tabs down' : 'Scroll tabs right'\n }\n isDisabled={isAtEnd}\n onPress={handleScrollEnd}\n />\n </>\n ) : null;\n\n const tabPickerElement = shouldShowTabPicker ? (\n <TabPicker\n tabs={orderedParsedTabs}\n selectedKey={state.selectedKey == null ? null : String(state.selectedKey)}\n size={size}\n type={effectiveType}\n placement={placement}\n isReorderable={isReorderable}\n onSelect={handleTabPickerSelect}\n onDelete={onDelete}\n onReorder={onReorder}\n />\n ) : null;\n\n // Determine which actions go in prefix/suffix\n // In prefix: TabPicker first (left), then scroll arrows (right)\n // In suffix: scroll arrows first (left), then TabPicker (right)\n const prefixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'prefix') \|\|\n (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n const suffixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'suffix') \|\|\n (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n // Apply the active-axis scrollbar handle vars to the outer wrapper so the\n // `Scrollbar` sub-element can read them via CSS variables.\n const handleStyle = showTinyScrollbar\n ? orientation === 'vertical'\n ? handleVStyle\n : handleHStyle\n : undefined;\n\n // Wrap with TabsProvider so prefix/suffix can access context (size, type, placement).\n // The inner TabsProvider in renderTabListContent will override for tab buttons.\n return (\n <TabsProvider value={baseContextValue}>\n <TabsElement\n ref={ref}\n qa={qa}\n mods={mods}\n styles={combinedStyles}\n style={handleStyle}\n data-size={size}\n >\n <div data-element=\"Bar\">\n {prefix \|\| prefixHasActions ? (\n <div data-element=\"Prefix\">\n {tabPickerPosition === 'prefix' && tabPickerElement}\n {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n {prefix}\n </div>\n ) : null}\n <div data-element=\"ScrollWrapper\">\n <div ref={scrollRef} data-element=\"Scroll\">\n {isReorderable ? (\n <DraggableTabList\n state={state}\n listRef={listRef}\n orderedKeys={orderedParsedTabs.map((t) => t.key)}\n orientation={orientation}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTabListContent(\n createContextValue(dragState, dropState),\n collectionProps,\n )\n }\n </DraggableTabList>\n ) : (\n renderTabListContent(createContextValue())\n )}\n </div>\n {showTinyScrollbar && hasOverflow && (\n <div data-element=\"Scrollbar\" />\n )}\n </div>\n {suffix \|\| suffixHasActions ? (\n <div data-element=\"Suffix\">\n {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n {tabPickerPosition === 'suffix' && tabPickerElement}\n {suffix}\n </div>\n ) : null}\n </div>\n\n {/ Functional panel rendering with content caching /}\n {renderPanel && (\n <CachedPanelRenderer\n parsedTabs={parsedTabs}\n explicitPanels={explicitPanels}\n state={state}\n renderPanel={renderPanel}\n panelCacheKeys={panelCacheKeys}\n prerender={prerender}\n keepMounted={effectiveKeepMounted}\n visitedKeys={visitedKeysRef.current}\n />\n )}\n\n {/ Static panel rendering (traditional children-based approach) /}\n {!renderPanel &&\n hasAnyContent &&\n parsedTabs.map((tab) => {\n const explicitPanel = explicitPanels.get(tab.key);\n const content = explicitPanel?.content ?? tab.content;\n\n if (content == null) return null;\n\n return (\n <TabPanelRenderer\n key={tab.key}\n tabKey={tab.key}\n state={state}\n content={content}\n prerender={prerender}\n keepMounted={effectiveKeepMounted}\n tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n visitedKeys={visitedKeysRef.current}\n panelStyles={explicitPanel?.styles}\n qa={explicitPanel?.qa}\n qaVal={explicitPanel?.qaVal}\n />\n );\n })}\n </TabsElement>\n </TabsProvider>\n );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/\n Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n \n Note: Tab keys are internally converted to strings for React Aria compatibility.\n \n @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n * <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n \n @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n * <Tab key=\"overview\" title=\"Overview\" />\n * <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n \n @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tabs.List>\n * <Tab key=\"tab1\" title=\"Tab 1\" />\n * <Tab key=\"tab2\" title=\"Tab 2\" />\n * </Tabs.List>\n * <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n * <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n Tab,\n List: TabList,\n Panel: TabPanel,\n Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.js","names":["mergeStyles","OUTER_STYLES","Children","ForwardedRef","forwardRef","isValidElement","ReactElement","ReactNode","useEffect","useMemo","useRef","AriaTabListProps","useTabList","Item","CollectionItem","DraggableCollectionState","DroppableCollectionState","useTabListState","useEvent","useWarn","DirectionIcon","mergeProps","useMergeStyles","extractStyles","ItemAction","useTinyScrollbar","useBoardDragActive","DraggableTabList","TabIndicatorElement","TabsElement","TabButton","CachedPanelRenderer","TabPanelRenderer","TabPicker","TabsAction","TabsContextValue","TabsProvider","useTabEditing","useTabIndicator","Key","CubeTabListProps","CubeTabPanelProps","CubeTabProps","CubeTabsProps","ParsedPanel","ParsedTab","isComponentElement","child","displayName","T","type","isTabElement","isTabPanelElement","isTabListElement","getRawKey","element","key","keyStr","String","startsWith","slice","tabHasPanel","tab","explicitPanels","Map","hasRenderPanel","get","content","Tab","_props","Action","TabPanel","TabList","TabsComponent","props","ref","HTMLDivElement","label","defaultActiveKey","activeKey","size","placement","onChange","onDelete","onTitleChange","autoHideActions","isEditable","parentIsEditable","menu","parentMenu","menuTriggerProps","parentMenuTriggerProps","menuProps","parentMenuProps","contextMenu","parentContextMenu","onAction","parentOnAction","children","prefix","suffix","prerender","keepMounted","qa","renderPanel","panelCacheKeys","isReorderable","keyOrder","onReorder","showTabPicker","showScrollArrows","tabPickerPosition","scrollArrowsPosition","hideTabListScroll","tabListPadding","barStyles","tabListStyles","prefixStyles","suffixStyles","otherProps","orientation","effectiveType","baseStyles","tabListPaddingStyles","undefined","mergedTabListStyles","combinedStyles","Bar","Prefix","Suffix","listRef","scrollRef","visitedKeysRef","Set","isBoardDragActive","effectiveKeepMounted","onTitleChangeRaf","newTitle","requestAnimationFrame","editingKey","startEditing","cancelEditing","submitEditing","parsedTabs","hasAnyContent","listQa","childArray","toArray","tabs","panels","hasExplicitList","tabChildren","tabListQa","Pick","qaVal","set","styles","hasContent","id","_id","tabContent","tabProps","push","currentTabKeysSet","map","t","current","has","delete","orderedParsedTabs","length","tabMap","ordered","collectionItems","title","disabledKeys","filter","isDisabled","handleSelectionChange","add","selectedKey","defaultSelectedKey","ariaProps","onSelectionChange","state","tabListProps","handleTabPickerSelect","setSelectedKey","orderToken","join","indicatorStyle","isTinyScrollbar","handleHStyle","handleVStyle","hasOverflowX","hasOverflowY","isScrolling","isAtStartX","isAtEndX","isAtStartY","isAtEndY","showTinyScrollbar","hasOverflow","isAtStart","isAtEnd","hasPanels","args","shouldShowTabPicker","shouldShowScrollArrows","handleScrollStart","el","scrollTo","top","scrollTop","clientHeight","behavior","left","scrollLeft","clientWidth","handleScrollEnd","baseContextValue","createContextValue","dragState","dropState","renderTabListContent","contextValue","collectionProps","Record","index","item","collection","getItem","start","height","width","mods","deletable","scrolling","scrollArrowsElement","tabPickerElement","prefixHasActions","suffixHasActions","handleStyle","explicitPanel","_Tabs","Tabs","Object","assign","List","Panel","CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n Children,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n Item as CollectionItem,\n DraggableCollectionState,\n DroppableCollectionState,\n useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { useBoardDragActive } from './BoardDragActiveProvider';\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n CubeTabListProps,\n CubeTabPanelProps,\n CubeTabProps,\n CubeTabsProps,\n ParsedPanel,\n ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/*\n Generic helper to check if a child is a specific component by displayName.\n /\nfunction isComponentElement<T>(\n child: ReactNode,\n displayName: string,\n): child is ReactElement<T> {\n return (\n isValidElement(child) &&\n typeof child.type === 'function' &&\n (child.type as any).displayName === displayName\n );\n}\n\n/* Checks if a child is a Tab component. /\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/* Checks if a child is a TabPanel component. /\nconst isTabPanelElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/* Checks if a child is a TabList component. /\nconst isTabListElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/\n Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n /\nfunction getRawKey(element: ReactElement): string \| null {\n if (element.key == null) return null;\n const keyStr = String(element.key);\n return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/\n Whether a tabpanel renders for this tab when it is selected. `renderPanel`\n * renders one for every tab; otherwise only a tab with content (its own\n * children or a `Tabs.Panel`) gets one, matching the static panel renderer.\n /\nfunction tabHasPanel(\n tab: ParsedTab,\n explicitPanels: Map<string, ParsedPanel>,\n hasRenderPanel: boolean,\n): boolean {\n if (hasRenderPanel) return true;\n\n return (explicitPanels.get(tab.key)?.content ?? tab.content) != null;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement \| null {\n return null;\n}\n\nTab.displayName = 'CubeTab';\n\n/\n Action for a tab's own `actions` slot, where it renders left of the built-in\n * menu trigger and delete button — which are `ItemAction`s themselves.\n \n Not to be confused with `Tabs.Action`, which is an `ItemButton` sized for the\n * tab bar's `prefix` / `suffix` slots rather than for a tab.\n /\nTab.Action = ItemAction;\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement \| null {\n return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement \| null {\n return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n props: CubeTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n label = 'Tabs',\n defaultActiveKey,\n activeKey,\n size,\n type = 'default',\n placement = 'top',\n onChange,\n onDelete,\n onTitleChange,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onAction: parentOnAction,\n children,\n prefix,\n suffix,\n prerender = false,\n keepMounted = false,\n qa = 'Tabs',\n renderPanel,\n panelCacheKeys,\n isReorderable = false,\n keyOrder,\n onReorder,\n showTabPicker = false,\n showScrollArrows = false,\n tabPickerPosition = 'suffix',\n scrollArrowsPosition = 'suffix',\n hideTabListScroll = false,\n tabListPadding,\n barStyles,\n tabListStyles,\n prefixStyles,\n suffixStyles,\n ...otherProps\n } = props;\n\n // Derive orientation from placement\n const orientation: 'horizontal' \| 'vertical' =\n placement === 'left' \|\| placement === 'right' ? 'vertical' : 'horizontal';\n\n // `narrow` only makes sense for a horizontal strip — its whole point is\n // collapsed horizontal padding for a denser row of tabs. Force `default`\n // when the strip is vertical.\n const effectiveType =\n orientation === 'vertical' && type === 'narrow' ? 'default' : type;\n\n // Extract outer styles (these go on the new outer wrapper)\n const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n // Build TabList padding style (memoized)\n const tabListPaddingStyles = useMemo(\n () =>\n tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n [tabListPadding],\n );\n\n // Merge tabListPaddingStyles with tabListStyles (memoized)\n const mergedTabListStyles = useMemo(\n () => mergeStyles(tabListPaddingStyles, tabListStyles),\n [tabListPaddingStyles, tabListStyles],\n );\n\n // Merge all sub-element styles into baseStyles. The outer `TabsElement`\n // exposes `Bar`, `Prefix`, `Suffix`, `TabList`, `ScrollWrapper`, `Scroll`,\n // and `Scrollbar` sub-elements (defined in styled.ts).\n const combinedStyles = useMergeStyles(baseStyles, {\n Bar: barStyles,\n TabList: mergedTabListStyles,\n Prefix: prefixStyles,\n Suffix: suffixStyles,\n });\n\n // DOM element refs\n const listRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n // Track visited tabs for keepMounted functionality\n const visitedKeysRef = useRef<Set<string>>(new Set());\n\n // While a board widget is being dragged (a `BoardDragActiveProvider` above\n // reports it), force panels to stay mounted so a tab a widget is dragged out\n // of - and its board owning the in-flight drag gesture - is not unmounted\n // when the user spring-loads a different tab by hovering it. Always `false`\n // outside a provider.\n const isBoardDragActive = useBoardDragActive();\n const effectiveKeepMounted = keepMounted \|\| isBoardDragActive;\n\n // =========================================================================\n // Tab Title Editing Hook\n // =========================================================================\n const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n requestAnimationFrame(() => {\n onTitleChange?.(key, newTitle);\n });\n });\n\n const { editingKey, startEditing, cancelEditing, submitEditing } =\n useTabEditing({\n onChange,\n onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n });\n\n // =========================================================================\n // Parse children to extract tabs and explicit panels\n // =========================================================================\n const { parsedTabs, explicitPanels, hasAnyContent, listQa } = useMemo(() => {\n const childArray = Children.toArray(children);\n const tabs: ParsedTab[] = [];\n const panels = new Map<string, ParsedPanel>();\n let hasExplicitList = false;\n let tabChildren: ReactNode[] = [];\n let tabListQa: Pick<CubeTabListProps, 'qa' \| 'qaVal'> = {};\n\n // Check for explicit Tabs.List / Tabs.Panel structure\n for (const child of childArray) {\n if (isTabListElement(child)) {\n hasExplicitList = true;\n tabChildren = Children.toArray(child.props.children);\n tabListQa = { qa: child.props.qa, qaVal: child.props.qaVal };\n } else if (isTabPanelElement(child)) {\n const key = getRawKey(child as ReactElement);\n\n if (key != null) {\n panels.set(key, {\n key,\n content: child.props.children,\n prerender: child.props.prerender,\n keepMounted: child.props.keepMounted,\n styles: child.props.styles,\n qa: child.props.qa,\n qaVal: child.props.qaVal,\n });\n }\n }\n }\n\n // If no explicit list, use direct Tab children\n if (!hasExplicitList) {\n tabChildren = childArray;\n }\n\n // Parse Tab elements\n let hasContent = panels.size > 0;\n\n for (const child of tabChildren) {\n if (isTabElement(child)) {\n const key = getRawKey(child) ?? child.props.id;\n\n if (key != null) {\n const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n tabs.push({\n ...tabProps,\n key,\n content: tabContent,\n });\n\n if (tabContent != null) {\n hasContent = true;\n }\n }\n }\n }\n\n return {\n parsedTabs: tabs,\n explicitPanels: panels,\n hasAnyContent: hasContent,\n listQa: tabListQa,\n };\n }, [children]);\n\n // Clean up visitedKeys when tabs are removed\n const currentTabKeysSet = useMemo(\n () => new Set(parsedTabs.map((t) => t.key)),\n [parsedTabs],\n );\n\n useEffect(() => {\n for (const key of visitedKeysRef.current) {\n if (!currentTabKeysSet.has(key)) {\n visitedKeysRef.current.delete(key);\n }\n }\n }, [currentTabKeysSet]);\n\n // =========================================================================\n // Order tabs according to keyOrder\n // =========================================================================\n const orderedParsedTabs = useMemo(() => {\n if (!keyOrder \|\| keyOrder.length === 0) {\n return parsedTabs;\n }\n\n const tabMap = new Map<string, ParsedTab>();\n for (const tab of parsedTabs) {\n tabMap.set(tab.key, tab);\n }\n\n const ordered: ParsedTab[] = [];\n for (const key of keyOrder) {\n const tab = tabMap.get(String(key));\n if (tab) {\n ordered.push(tab);\n tabMap.delete(String(key));\n }\n }\n\n // Append any tabs not in keyOrder\n for (const tab of parsedTabs) {\n if (tabMap.has(tab.key)) {\n ordered.push(tab);\n }\n }\n\n return ordered;\n }, [parsedTabs, keyOrder]);\n\n // Create collection items for React Stately\n const collectionItems = useMemo(() => {\n return orderedParsedTabs.map((tab) => (\n <CollectionItem\n key={tab.key}\n textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n >\n {tab.title}\n </CollectionItem>\n ));\n }, [orderedParsedTabs]);\n\n // Determine disabled keys\n const disabledKeys = useMemo(() => {\n return new Set(\n parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n );\n }, [parsedTabs]);\n\n // Handle selection change (converts React Aria's Key to string for our API)\n const handleSelectionChange = useEvent((key: Key) => {\n const keyStr = String(key);\n visitedKeysRef.current.add(keyStr);\n onChange?.(keyStr);\n });\n\n // Convert keys to strings for React Aria compatibility\n const selectedKey = activeKey != null ? String(activeKey) : undefined;\n const defaultSelectedKey =\n defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n // Create aria props for useTabListState\n const ariaProps: AriaTabListProps<object> = useMemo(\n () => ({\n selectedKey,\n defaultSelectedKey,\n onSelectionChange: handleSelectionChange,\n disabledKeys,\n children: collectionItems,\n 'aria-label': label,\n orientation,\n }),\n [\n selectedKey,\n defaultSelectedKey,\n handleSelectionChange,\n disabledKeys,\n collectionItems,\n label,\n orientation,\n ],\n );\n\n // Create state using useTabListState\n const state = useTabListState(ariaProps);\n\n // Track initial selected key for visited tabs\n useEffect(() => {\n if (state.selectedKey != null) {\n visitedKeysRef.current.add(String(state.selectedKey));\n }\n }, [state.selectedKey]);\n\n // Get tablist props from react-aria\n const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n const handleTabPickerSelect = useEvent((key: string) => {\n // Update internal state (for uncontrolled mode)\n state.setSelectedKey(key);\n // Also call the external onChange handler\n handleSelectionChange(key);\n });\n\n // =========================================================================\n // Tab Indicator (for default type)\n // =========================================================================\n // Create order token that changes when tab order changes (for indicator recalculation)\n const orderToken = useMemo(\n () => orderedParsedTabs.map((t) => t.key).join(','),\n [orderedParsedTabs],\n );\n\n const indicatorStyle = useTabIndicator(\n listRef,\n state.selectedKey,\n effectiveType === 'default' \|\| effectiveType === 'narrow',\n orientation,\n orderToken,\n );\n\n // =========================================================================\n // Tiny Scrollbar (not for radio type)\n // =========================================================================\n const isTinyScrollbar = effectiveType !== 'radio';\n const {\n handleHStyle,\n handleVStyle,\n hasOverflowX,\n hasOverflowY,\n isScrolling,\n isAtStartX,\n isAtEndX,\n isAtStartY,\n isAtEndY,\n } = useTinyScrollbar(scrollRef, isTinyScrollbar);\n const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n // Active-axis aggregates (used everywhere downstream so we don't sprinkle\n // orientation checks around).\n const hasOverflow = orientation === 'vertical' ? hasOverflowY : hasOverflowX;\n const isAtStart = orientation === 'vertical' ? isAtStartY : isAtStartX;\n const isAtEnd = orientation === 'vertical' ? isAtEndY : isAtEndX;\n\n const hasPanels = hasAnyContent \|\| !!renderPanel;\n\n // =========================================================================\n // Tab Picker visibility\n // =========================================================================\n useWarn(showTabPicker && effectiveType === 'radio', {\n key: ['tabs-tabpicker-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n ],\n });\n\n const shouldShowTabPicker =\n effectiveType !== 'radio' &&\n (showTabPicker === true \|\| (showTabPicker === 'auto' && hasOverflow));\n\n // =========================================================================\n // Scroll Arrows visibility and handlers\n // =========================================================================\n useWarn(showScrollArrows && effectiveType === 'radio', {\n key: ['tabs-scrollarrows-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n ],\n });\n\n const shouldShowScrollArrows =\n effectiveType !== 'radio' &&\n (showScrollArrows === true \|\| (showScrollArrows === 'auto' && hasOverflow));\n\n const handleScrollStart = useEvent(() => {\n const el = scrollRef.current;\n if (!el) return;\n if (orientation === 'vertical') {\n el.scrollTo({\n top: el.scrollTop - el.clientHeight,\n behavior: 'smooth',\n });\n } else {\n el.scrollTo({\n left: el.scrollLeft - el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n const handleScrollEnd = useEvent(() => {\n const el = scrollRef.current;\n if (!el) return;\n if (orientation === 'vertical') {\n el.scrollTo({\n top: el.scrollTop + el.clientHeight,\n behavior: 'smooth',\n });\n } else {\n el.scrollTo({\n left: el.scrollLeft + el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n // =========================================================================\n // Base Context Value (without drag/drop states)\n // =========================================================================\n const baseContextValue = useMemo(\n () => ({\n state,\n type: effectiveType,\n size,\n placement,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onDelete,\n onAction: parentOnAction,\n editingKey,\n startEditing,\n submitEditing,\n cancelEditing,\n }),\n [\n state,\n effectiveType,\n size,\n placement,\n autoHideActions,\n parentIsEditable,\n parentMenu,\n parentMenuTriggerProps,\n parentMenuProps,\n parentContextMenu,\n onDelete,\n parentOnAction,\n editingKey,\n startEditing,\n submitEditing,\n cancelEditing,\n ],\n );\n\n // Helper to create full context value with optional drag/drop states\n const createContextValue = (\n dragState?: DraggableCollectionState,\n dropState?: DroppableCollectionState,\n ): TabsContextValue => ({\n ...baseContextValue,\n dragState,\n dropState,\n });\n\n // =========================================================================\n // Tab List Content Renderer\n // =========================================================================\n const renderTabListContent = (\n contextValue: TabsContextValue,\n collectionProps: Record<string, unknown> = {},\n ) => (\n <div\n {...mergeProps(tabListProps, collectionProps)}\n ref={listRef}\n data-element=\"TabList\"\n data-qa={listQa.qa}\n data-qaval={listQa.qaVal}\n >\n <TabsProvider value={contextValue}>\n {orderedParsedTabs.map((tab, index) => {\n const item = state.collection.getItem(tab.key);\n if (!item) return null;\n\n return (\n <TabButton\n key={item.key}\n item={item}\n tabData={tab}\n isLastTab={index === orderedParsedTabs.length - 1}\n hasPanel={tabHasPanel(tab, explicitPanels, !!renderPanel)}\n />\n );\n })}\n </TabsProvider>\n {indicatorStyle && (\n <TabIndicatorElement\n mods={{ placement }}\n style={\n orientation === 'vertical'\n ? {\n top: indicatorStyle.start,\n height: indicatorStyle.size,\n }\n : {\n left: indicatorStyle.start,\n width: indicatorStyle.size,\n }\n }\n />\n )}\n </div>\n );\n\n // =========================================================================\n // Mods for styling\n // =========================================================================\n const mods = useMemo(\n () => ({\n type: effectiveType,\n size,\n placement,\n deletable: !!onDelete,\n scrolling: showTinyScrollbar && isScrolling,\n 'fade-start': !isAtStart,\n 'fade-end': !isAtEnd,\n 'has-panels': hasPanels,\n }),\n [\n effectiveType,\n size,\n placement,\n onDelete,\n showTinyScrollbar,\n isScrolling,\n isAtStart,\n isAtEnd,\n hasPanels,\n ],\n );\n\n // =========================================================================\n // Action Elements (TabPicker and Scroll Arrows)\n // =========================================================================\n const scrollArrowsElement = shouldShowScrollArrows ? (\n <>\n <TabsAction\n icon={\n <DirectionIcon to={orientation === 'vertical' ? 'top' : 'left'} />\n }\n aria-label={\n orientation === 'vertical' ? 'Scroll tabs up' : 'Scroll tabs left'\n }\n isDisabled={isAtStart}\n onPress={handleScrollStart}\n />\n <TabsAction\n icon={\n <DirectionIcon to={orientation === 'vertical' ? 'bottom' : 'right'} />\n }\n aria-label={\n orientation === 'vertical' ? 'Scroll tabs down' : 'Scroll tabs right'\n }\n isDisabled={isAtEnd}\n onPress={handleScrollEnd}\n />\n </>\n ) : null;\n\n const tabPickerElement = shouldShowTabPicker ? (\n <TabPicker\n tabs={orderedParsedTabs}\n selectedKey={state.selectedKey == null ? null : String(state.selectedKey)}\n size={size}\n type={effectiveType}\n placement={placement}\n isReorderable={isReorderable}\n onSelect={handleTabPickerSelect}\n onDelete={onDelete}\n onReorder={onReorder}\n />\n ) : null;\n\n // Determine which actions go in prefix/suffix\n // In prefix: TabPicker first (left), then scroll arrows (right)\n // In suffix: scroll arrows first (left), then TabPicker (right)\n const prefixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'prefix') \|\|\n (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n const suffixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'suffix') \|\|\n (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n // Apply the active-axis scrollbar handle vars to the outer wrapper so the\n // `Scrollbar` sub-element can read them via CSS variables.\n const handleStyle = showTinyScrollbar\n ? orientation === 'vertical'\n ? handleVStyle\n : handleHStyle\n : undefined;\n\n // Wrap with TabsProvider so prefix/suffix can access context (size, type, placement).\n // The inner TabsProvider in renderTabListContent will override for tab buttons.\n return (\n <TabsProvider value={baseContextValue}>\n <TabsElement\n ref={ref}\n qa={qa}\n mods={mods}\n styles={combinedStyles}\n style={handleStyle}\n data-size={size}\n >\n <div data-element=\"Bar\">\n {prefix \|\| prefixHasActions ? (\n <div data-element=\"Prefix\">\n {tabPickerPosition === 'prefix' && tabPickerElement}\n {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n {prefix}\n </div>\n ) : null}\n <div data-element=\"ScrollWrapper\">\n <div ref={scrollRef} data-element=\"Scroll\">\n {isReorderable ? (\n <DraggableTabList\n state={state}\n listRef={listRef}\n orderedKeys={orderedParsedTabs.map((t) => t.key)}\n orientation={orientation}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTabListContent(\n createContextValue(dragState, dropState),\n collectionProps,\n )\n }\n </DraggableTabList>\n ) : (\n renderTabListContent(createContextValue())\n )}\n </div>\n {showTinyScrollbar && hasOverflow && (\n <div data-element=\"Scrollbar\" />\n )}\n </div>\n {suffix \|\| suffixHasActions ? (\n <div data-element=\"Suffix\">\n {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n {tabPickerPosition === 'suffix' && tabPickerElement}\n {suffix}\n </div>\n ) : null}\n </div>\n\n {/ Functional panel rendering with content caching /}\n {renderPanel && (\n <CachedPanelRenderer\n parsedTabs={parsedTabs}\n explicitPanels={explicitPanels}\n state={state}\n renderPanel={renderPanel}\n panelCacheKeys={panelCacheKeys}\n prerender={prerender}\n keepMounted={effectiveKeepMounted}\n visitedKeys={visitedKeysRef.current}\n />\n )}\n\n {/ Static panel rendering (traditional children-based approach) /}\n {!renderPanel &&\n hasAnyContent &&\n parsedTabs.map((tab) => {\n const explicitPanel = explicitPanels.get(tab.key);\n const content = explicitPanel?.content ?? tab.content;\n\n if (content == null) return null;\n\n return (\n <TabPanelRenderer\n key={tab.key}\n tabKey={tab.key}\n state={state}\n content={content}\n prerender={prerender}\n keepMounted={effectiveKeepMounted}\n tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n visitedKeys={visitedKeysRef.current}\n panelStyles={explicitPanel?.styles}\n qa={explicitPanel?.qa}\n qaVal={explicitPanel?.qaVal}\n />\n );\n })}\n </TabsElement>\n </TabsProvider>\n );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/\n Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n \n Note: Tab keys are internally converted to strings for React Aria compatibility.\n \n @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n * <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n \n @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n * <Tab key=\"overview\" title=\"Overview\" />\n * <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n \n @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tabs.List>\n * <Tab key=\"tab1\" title=\"Tab 1\" />\n * <Tab key=\"tab2\" title=\"Tab 2\" />\n * </Tabs.List>\n * <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n * <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n Tab,\n List: TabList,\n Panel: TabPanel,\n Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/TabsAction.d.ts CHANGED Viewed

@@ -1,11 +1,8 @@
 import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
 import { TabSize } from "./types.js";
-import * as react from "react";
-import * as _react_types_shared0 from "@react-types/shared";
 //#region src/components/navigation/Tabs/TabsAction.d.ts
-interface CubeTabsActionProps extends Omit<CubeItemButtonProps, 'size' | 'shape'> {
+export interface CubeTabsActionProps extends Omit<CubeItemButtonProps, 'size' | 'shape'> {
   /**
    * Size of the action button.
    * When used inside Tabs prefix/suffix, inherits from Tabs size by default.
@@ -40,7 +37,6 @@ interface CubeTabsActionProps extends Omit<CubeItemButtonProps, 'size' | 'shape'
  *   <Tab key="tab1" title="Tab 1">Content</Tab>
  * </Tabs>
  */
-declare const TabsAction: react.ForwardRefExoticComponent<CubeTabsActionProps & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+export declare const TabsAction: import("react").ForwardRefExoticComponent<CubeTabsActionProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion
-export { CubeTabsActionProps, TabsAction };
 //# sourceMappingURL=TabsAction.d.ts.map

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

@@ -1,11 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
-import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
+import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Tabs/TabsAction.tsx
 const TabsActionElement = tasty(_ItemButton, { styles: {
 	border: {
@@ -100,7 +99,7 @@ const TabsAction = forwardRef(function TabsAction(props, ref) {
 	} else t3 = $[14];
 	return t3;
 });
 //#endregion
 export { TabsAction };
 //# sourceMappingURL=TabsAction.js.map

package/dist/components/navigation/Tabs/TabsAction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsAction.js","names":["FocusableRef","tasty","forwardRef","CubeItemButtonProps","ItemButton","useOptionalTabsContext","TabSize","CubeTabsActionProps","Omit","size","TabsActionElement","styles","border","radius","TabsAction","props","ref","$","_c","mods","rest","type","tabsContext","effectiveSize","tabsType","tabsPlacement","placement","tabsVertical","t0","t1","combinedMods","t2","t3"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport {\n CubeItemButtonProps,\n ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps\n extends Omit<CubeItemButtonProps, 'size' \| 'shape'> {\n /*\n Size of the action button.\n * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n /\n size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n styles: {\n border: {\n 'type=clear': 0,\n 'type=clear & tabs-type-file & !:first-child & !tabs-vertical': 'left',\n 'type=clear & tabs-type-file & !:first-child & tabs-vertical': 'top',\n },\n radius: {\n 'type=clear': 0,\n },\n },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/\n Action button designed for the Tabs prefix/suffix slots.\n \n Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n \n Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n \n @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n * <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n \n @example\n * // Multiple actions with automatic dividers\n * <Tabs\n * suffix={\n * <>\n * <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n * <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n * </>\n * }\n * >\n * <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n props: CubeTabsActionProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const { size, mods, type, ...rest } = props;\n\n // Get size, type, and placement from context if available (when used inside Tabs)\n const tabsContext = useOptionalTabsContext();\n const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n const tabsType = tabsContext?.type ?? 'default';\n const tabsPlacement = tabsContext?.placement ?? 'top';\n const tabsVertical = tabsPlacement === 'left' \|\| tabsPlacement === 'right';\n\n const combinedMods = {\n 'tabs-type-file': tabsType === 'file',\n 'tabs-vertical': tabsVertical,\n ...mods,\n };\n\n return (\n <TabsActionElement\n ref={ref}\n type={type ?? (tabsType === 'default' ? 'outline' : 'clear')}\n size={effectiveSize}\n mods={combinedMods}\n {...rest}\n />\n );\n});\n"],"mappings":"~~;;;;;;;;;AA8BA~~,MAAMU,oBAAoBT,MAAMG,aAAY,EAC1CO,QAAQ;CACNC,QAAQ;EACN,cAAc;EACd,gEAAgE;EAChE,+DAA+D;~~EAChE~~;~~CACDC~~,QAAQ,EACN,cAAc,~~GAChB~~;~~CACF~~,~~EACD~~,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkCF~~,MAAaC,aAAaZ,WAAW,SAAAY,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,~~GAAA~~;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAX;CAAA,IAAAY;~~AAAA~~,~~KAAAJ~~,EAAA,OAAAF,OAAA;~~AAInC~~,~~GAAA~~,CAAAN,MAAAU,MAAAE,~~SAAAD~~,QAAsCL;~~AAAME~~,~~IAAA~~,KAAAF;~~AAAAE~~,~~IAAA~~,KAAAE;~~AAAAF~~,~~IAAA~~,KAAAG;~~AAAAH~~,~~IAAA~~,KAAAR;~~AAAAQ~~,~~IAAA~~,KAAAI;~~QAAA~~;~~AAAAF~~,~~SAAAF~~,EAAA;~~AAAAG~~,~~SAAAH~~,EAAA;~~AAAAR~~,~~SAAAQ~~,EAAA;~~AAAAI~~,~~SAAAJ~~,EAAA;;CAG5C,MAAAK,cAAoBjB,~~wBAAwB~~;~~CAC5C~~,MAAAkB,gBAAsBd,QAAQa,aAAWb,QAAnB;CACtB,MAAAe,WAAiBF,aAAWD,QAAX;CACjB,MAAAI,gBAAsBH,aAAWI,aAAX;CACtB,MAAAC,eAAqBF,kBAAkB,UAAUA,kBAAkB;CAG/C,MAAAG,KAAAJ,aAAa;CAAM,IAAAK;~~AAAA~~,~~KAAAZ~~,EAAA,OAAAE,QAAAF,EAAA,OAAAW,MAAAX,EAAA,OAAAU,cAAA;~~AADlBE~~,~~OAAA~~;GAAA,kBACDD;GAAmB,iBACpBD;GAAY,GAC1BR;~~GACJ~~;~~AAAAF~~,~~IAAA~~,KAAAE;~~AAAAF~~,~~IAAA~~,KAAAW;~~AAAAX~~,~~IAAA~~,KAAAU;~~AAAAV~~,~~IAAA~~,KAAAY;OAAAA,~~MAAAZ~~,EAAA;CAJD,MAAAa,eAAqBD;CASX,MAAAE,KAAAV,SAASG,aAAa,YAAb,YAAA;CAA6C,IAAAQ;~~AAAA~~,~~KAAAf~~,EAAA,OAAAa,gBAAAb,EAAA,QAAAM,iBAAAN,EAAA,QAAAD,OAAAC,EAAA,QAAAG,QAAAH,EAAA,QAAAc,IAAA;~~AAF9DC~~,~~OAAA~~,oBAAC;~~GACMhB~~;GACC,MAAAe;GACAR,MAAAA;GACAO,MAAAA;GAAY,GACdV;~~IACJ~~;~~AAAAH~~,~~IAAA~~,KAAAa;~~AAAAb~~,~~IAAA~~,MAAAM;~~AAAAN~~,~~IAAA~~,MAAAD;~~AAAAC~~,~~IAAA~~,MAAAG;~~AAAAH~~,~~IAAA~~,MAAAc;~~AAAAd~~,~~IAAA~~,MAAAe;OAAAA,~~MAAAf~~,EAAA;~~AAAA~~,~~QANFe~~;~~EAQF~~"}
1	+ {"version":3,"file":"TabsAction.js","names":["FocusableRef","tasty","forwardRef","CubeItemButtonProps","ItemButton","useOptionalTabsContext","TabSize","CubeTabsActionProps","Omit","size","TabsActionElement","styles","border","radius","TabsAction","props","ref","$","_c","mods","rest","type","tabsContext","effectiveSize","tabsType","tabsPlacement","placement","tabsVertical","t0","t1","combinedMods","t2","t3","ItemButton","_c"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport {\n CubeItemButtonProps,\n ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps extends Omit<\n CubeItemButtonProps,\n 'size' \| 'shape'\n> {\n /*\n Size of the action button.\n * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n /\n size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n styles: {\n border: {\n 'type=clear': 0,\n 'type=clear & tabs-type-file & !:first-child & !tabs-vertical': 'left',\n 'type=clear & tabs-type-file & !:first-child & tabs-vertical': 'top',\n },\n radius: {\n 'type=clear': 0,\n },\n },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/\n Action button designed for the Tabs prefix/suffix slots.\n \n Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n \n Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n \n @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n * <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n \n @example\n * // Multiple actions with automatic dividers\n * <Tabs\n * suffix={\n * <>\n * <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n * <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n * </>\n * }\n * >\n * <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n props: CubeTabsActionProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const { size, mods, type, ...rest } = props;\n\n // Get size, type, and placement from context if available (when used inside Tabs)\n const tabsContext = useOptionalTabsContext();\n const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n const tabsType = tabsContext?.type ?? 'default';\n const tabsPlacement = tabsContext?.placement ?? 'top';\n const tabsVertical = tabsPlacement === 'left' \|\| tabsPlacement === 'right';\n\n const combinedMods = {\n 'tabs-type-file': tabsType === 'file',\n 'tabs-vertical': tabsVertical,\n ...mods,\n };\n\n return (\n <TabsActionElement\n ref={ref}\n type={type ?? (tabsType === 'default' ? 'outline' : 'clear')}\n size={effectiveSize}\n mods={combinedMods}\n {...rest}\n />\n );\n});\n"],"mappings":";;;;;;;;AAgCA,MAAMU,oBAAoBT,MAAMG,aAAY,EAC1CO,QAAQ;CACNC,QAAQ;EACN,cAAc;EACd,gEAAgE;EAChE,+DAA+D;CACjE;CACAC,QAAQ,EACN,cAAc,EAChB;AACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCD,MAAaC,aAAaZ,WAAW,SAAAY,WAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAX;CAAA,IAAAY;CAAA,IAAAJ,EAAA,OAAAF,OAAA;EAInC,CAAA,CAAAN,MAAAU,MAAAE,MAAA,GAAAD,QAAsCL;EAAME,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;CAAA,OAAA;EAAAF,OAAAF,EAAA;EAAAG,OAAAH,EAAA;EAAAR,OAAAQ,EAAA;EAAAI,OAAAJ,EAAA;CAAA;CAG5C,MAAAK,cAAoBjB,uBAAuB;CAC3C,MAAAkB,gBAAsBd,QAAQa,aAAWb,QAAnB;CACtB,MAAAe,WAAiBF,aAAWD,QAAX;CACjB,MAAAI,gBAAsBH,aAAWI,aAAX;CACtB,MAAAC,eAAqBF,kBAAkB,UAAUA,kBAAkB;CAG/C,MAAAG,KAAAJ,aAAa;CAAM,IAAAK;CAAA,IAAAZ,EAAA,OAAAE,QAAAF,EAAA,OAAAW,MAAAX,EAAA,OAAAU,cAAA;EADlBE,KAAA;GAAA,kBACDD;GAAmB,iBACpBD;GAAY,GAC1BR;EACL;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAW;EAAAX,EAAA,KAAAU;EAAAV,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAJD,MAAAa,eAAqBD;CASX,MAAAE,KAAAV,SAASG,aAAa,YAAb,YAAA;CAA6C,IAAAQ;CAAA,IAAAf,EAAA,OAAAa,gBAAAb,EAAA,QAAAM,iBAAAN,EAAA,QAAAD,OAAAC,EAAA,QAAAG,QAAAH,EAAA,QAAAc,IAAA;EAF9DC,KAAA,oBAAC,mBAAD;GACOhB;GACC,MAAAe;GACAR,MAAAA;GACAO,MAAAA;GAAY,GACdV;EAAI,CAAA;EACRH,EAAA,KAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAD;EAAAC,EAAA,MAAAG;EAAAH,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OANFe;AAME,CAEL"}

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

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Tabs/TabsContext.tsx
 const TabsContext = createContext(null);
 TabsContext.displayName = "TabsContext";
@@ -33,7 +32,7 @@ function useTabsContext() {
 function useOptionalTabsContext() {
 	return useContext(TabsContext);
 }
 //#endregion
 export { TabsProvider, useOptionalTabsContext, useTabsContext };
 //# sourceMappingURL=TabsContext.js.map

package/dist/components/navigation/Tabs/TabsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsContext.js","names":["createContext","ReactNode","useContext","DraggableCollectionState","DroppableCollectionState","TabListState","CubeItemActionProps","CubeMenuProps","TabContextMenu","TabPlacement","TabSize","TabType","TabsContextValue","state","type","size","placement","autoHideActions","isEditable","menu","menuTriggerProps","Partial","menuProps","contextMenu","onDelete","key","onAction","action","tabKey","dragState","dropState","editingKey","startEditing","currentTitle","submitEditing","newTitle","tabOnTitleChange","title","cancelEditing","TabsContext","displayName","TabsProviderProps","value","children","TabsProvider","t0","$","_c","t1","useTabsContext","context","Error","useOptionalTabsContext"],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n DraggableCollectionState,\n DroppableCollectionState,\n TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabContextMenu, TabPlacement, TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n /** Tab list state from React Stately /\n state: TabListState<object>;\n /* Parent-level type default /\n type: TabType;\n /* Parent-level size default /\n size?: TabSize;\n /* Where the tab bar sits relative to its panels /\n placement: TabPlacement;\n /* Parent-level autoHideActions default /\n autoHideActions?: boolean;\n /* Parent-level isEditable default /\n isEditable?: boolean;\n /* Parent-level menu default /\n menu?: ReactNode;\n /* Parent-level menuTriggerProps default /\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /* Parent-level menuProps default /\n menuProps?: Partial<CubeMenuProps<object>>;\n /* Parent-level contextMenu default /\n contextMenu?: TabContextMenu;\n /* Callback when tab is deleted /\n onDelete?: (key: string) => void;\n /* Parent-level onAction callback /\n onAction?: (action: string, tabKey: string) => void;\n /* Drag state for reorderable tabs (undefined if not reorderable) /\n dragState?: DraggableCollectionState;\n /* Drop state for reorderable tabs (undefined if not reorderable) /\n dropState?: DroppableCollectionState;\n\n // Editing callbacks\n /* Current tab being edited (null if none) /\n editingKey: string \| null;\n /* Start editing a tab /\n startEditing: (key: string, currentTitle: string) => void;\n /* Submit the current edit /\n submitEditing: (\n key: string,\n newTitle: string,\n tabOnTitleChange?: (title: string) => void,\n ) => void;\n /* Cancel the current edit /\n cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue \| null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n value: TabsContextValue;\n children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n\n if (!context) {\n throw new Error('useTabsContext must be used within a TabsProvider');\n }\n\n return context;\n}\n\n/\n Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue \| null {\n return useContext(TabsContext);\n}\n"],"mappings":"~~;;;;;;~~AAgEA,MAAMuC,cAAcvC,cAAuC,~~KAAK~~;~~AAEhEuC~~,YAAYC,cAAc;AAW1B,SAAOI,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,~~EAAA~~;CAAsB,MAAA,EAAAL,OAAAC,aAAAE;CAAsC,IAAAG;~~AAAA~~,~~KAAAF~~,EAAA,OAAAH,YAAAG,EAAA,OAAAJ,OAAA;~~AAC1DM~~,~~OAAA~~,oBAAA,YAAA;GAA6BN;GAAQC;~~IAAgC~~;~~AAAAG~~,~~IAAA~~,KAAAH;~~AAAAG~~,~~IAAA~~,KAAAJ;~~AAAAI~~,~~IAAA~~,KAAAE;OAAAA,~~MAAAF~~,EAAA;~~AAAA~~,~~QAArEE;;AAOT~~,SAAOC,iBAAA;CACL,MAAAC,UAAgBhD,WAAWqC,~~YAAY~~;~~AAEvC~~,~~KAAI~~,CAACW,~~QACH~~,~~OAAM~~,IAAIC,MAAM,~~oDAAoD~~;~~AACrE~~,~~QAEMD;;;;;;AAOT~~,SAAOE,yBAAA;~~AAAA~~,~~QACElD~~,WAAWqC,~~YAAY~~"}
1	+ {"version":3,"file":"TabsContext.js","names":["createContext","ReactNode","useContext","DraggableCollectionState","DroppableCollectionState","TabListState","CubeItemActionProps","CubeMenuProps","TabContextMenu","TabPlacement","TabSize","TabType","TabsContextValue","state","type","size","placement","autoHideActions","isEditable","menu","menuTriggerProps","Partial","menuProps","contextMenu","onDelete","key","onAction","action","tabKey","dragState","dropState","editingKey","startEditing","currentTitle","submitEditing","newTitle","tabOnTitleChange","title","cancelEditing","TabsContext","displayName","TabsProviderProps","value","children","TabsProvider","t0","$","_c","t1","useTabsContext","context","Error","useOptionalTabsContext","_c"],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n DraggableCollectionState,\n DroppableCollectionState,\n TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabContextMenu, TabPlacement, TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n /** Tab list state from React Stately /\n state: TabListState<object>;\n /* Parent-level type default /\n type: TabType;\n /* Parent-level size default /\n size?: TabSize;\n /* Where the tab bar sits relative to its panels /\n placement: TabPlacement;\n /* Parent-level autoHideActions default /\n autoHideActions?: boolean;\n /* Parent-level isEditable default /\n isEditable?: boolean;\n /* Parent-level menu default /\n menu?: ReactNode;\n /* Parent-level menuTriggerProps default /\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /* Parent-level menuProps default /\n menuProps?: Partial<CubeMenuProps<object>>;\n /* Parent-level contextMenu default /\n contextMenu?: TabContextMenu;\n /* Callback when tab is deleted /\n onDelete?: (key: string) => void;\n /* Parent-level onAction callback /\n onAction?: (action: string, tabKey: string) => void;\n /* Drag state for reorderable tabs (undefined if not reorderable) /\n dragState?: DraggableCollectionState;\n /* Drop state for reorderable tabs (undefined if not reorderable) /\n dropState?: DroppableCollectionState;\n\n // Editing callbacks\n /* Current tab being edited (null if none) /\n editingKey: string \| null;\n /* Start editing a tab /\n startEditing: (key: string, currentTitle: string) => void;\n /* Submit the current edit /\n submitEditing: (\n key: string,\n newTitle: string,\n tabOnTitleChange?: (title: string) => void,\n ) => void;\n /* Cancel the current edit /\n cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue \| null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n value: TabsContextValue;\n children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n\n if (!context) {\n throw new Error('useTabsContext must be used within a TabsProvider');\n }\n\n return context;\n}\n\n/\n Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue \| null {\n return useContext(TabsContext);\n}\n"],"mappings":";;;;;AAgEA,MAAMuC,cAAcvC,cAAuC,IAAI;AAE/DuC,YAAYC,cAAc;AAW1B,SAAOI,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAL,OAAAC,aAAAE;CAAsC,IAAAG;CAAA,IAAAF,EAAA,OAAAH,YAAAG,EAAA,OAAAJ,OAAA;EAC1DM,KAAA,oBAAA,YAAA,UAAA;GAA6BN;GAAQC;EAAS,CAAA;EAAuBG,EAAA,KAAAH;EAAAG,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAArEE;AAAqE;AAO9E,SAAOC,iBAAA;CACL,MAAAC,UAAgBhD,WAAWqC,WAAW;CAEtC,IAAI,CAACW,SACH,MAAM,IAAIC,MAAM,mDAAmD;CACpE,OAEMD;AAAO;;;;;AAOhB,SAAOE,yBAAA;CAAA,OACElD,WAAWqC,WAAW;AAAC"}

package/dist/components/navigation/Tabs/index.d.ts CHANGED Viewed

@@ -2,4 +2,5 @@
 import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabContextMenu, TabSize, TabType, TabsActionPosition } from "./types.js";
 import { CubeTabsActionProps, TabsAction } from "./TabsAction.js";
 import { Tab, Tabs } from "./Tabs.js";
-import { BoardDragActiveProvider, CubeBoardDragActiveProviderProps } from "./BoardDragActiveProvider.js";
+import { BoardDragActiveProvider, CubeBoardDragActiveProviderProps } from "./BoardDragActiveProvider.js";
+export { BoardDragActiveProvider, type CubeBoardDragActiveProviderProps, type CubeTabListProps, type CubeTabPanelProps, type CubeTabProps, type CubeTabsActionProps, type CubeTabsProps, Tab, type TabContextMenu, type TabSize, type TabType, Tabs, TabsAction, type TabsActionPosition };

package/dist/components/navigation/Tabs/popover-placement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 //#region src/components/navigation/Tabs/popover-placement.ts
 /**
 * Maps the parent Tabs `placement` to the popover placement for menus and
@@ -15,7 +15,7 @@ const POPOVER_PLACEMENT_BY_TABS_PLACEMENT = {
 	left: "right top",
 	right: "left top"
 };
 //#endregion
 export { POPOVER_PLACEMENT_BY_TABS_PLACEMENT };
 //# sourceMappingURL=popover-placement.js.map

package/dist/components/navigation/Tabs/popover-placement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-placement.js","names":["Placement","TabPlacement","POPOVER_PLACEMENT_BY_TABS_PLACEMENT","Record","top","bottom","left","right"],"sources":["../../../../src/components/navigation/Tabs/popover-placement.ts"],"sourcesContent":["import type { Placement } from 'react-aria';\nimport type { TabPlacement } from './types';\n\n/*\n Maps the parent Tabs `placement` to the popover placement for menus and\n * pickers anchored to the strip (tab overflow menu, context menu, TabPicker).\n \n The popover always opens toward the panel area so it never covers the\n * bar itself and stays inside the visible Tabs region. Tooltips are the only\n * surface that opens on the outer-edge side; menus and pickers must flow into\n * the content side instead.\n */\nexport const POPOVER_PLACEMENT_BY_TABS_PLACEMENT: Record<\n TabPlacement,\n Placement\n> = {\n top: 'bottom start',\n bottom: 'top start',\n left: 'right top',\n right: 'left top',\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAaE,sCAGT;CACFE,KAAK;CACLC,QAAQ;CACRC,MAAM;CACNC,OAAO;~~CACR~~"}
1	+ {"version":3,"file":"popover-placement.js","names":["Placement","TabPlacement","POPOVER_PLACEMENT_BY_TABS_PLACEMENT","Record","top","bottom","left","right"],"sources":["../../../../src/components/navigation/Tabs/popover-placement.ts"],"sourcesContent":["import type { Placement } from 'react-aria';\nimport type { TabPlacement } from './types';\n\n/*\n Maps the parent Tabs `placement` to the popover placement for menus and\n * pickers anchored to the strip (tab overflow menu, context menu, TabPicker).\n \n The popover always opens toward the panel area so it never covers the\n * bar itself and stays inside the visible Tabs region. Tooltips are the only\n * surface that opens on the outer-edge side; menus and pickers must flow into\n * the content side instead.\n */\nexport const POPOVER_PLACEMENT_BY_TABS_PLACEMENT: Record<\n TabPlacement,\n Placement\n> = {\n top: 'bottom start',\n bottom: 'top start',\n left: 'right top',\n right: 'left top',\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAaE,sCAGT;CACFE,KAAK;CACLC,QAAQ;CACRC,MAAM;CACNC,OAAO;AACT"}

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
-import { _Item } from "../../content/Item/Item.js";
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
+import { Item as _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 //#region src/components/navigation/Tabs/styled.ts
 const TabsElement = tasty({ styles: {
 	display: "flex",
@@ -429,7 +428,7 @@ const TabPanelElement = tasty({
 		}
 	}
 });
 //#endregion
 export { DropIndicatorElement, TabContainer, TabElement, TabIndicatorElement, TabPanelElement, TabsElement };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","boxSizing","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': '#black',\n 'fade-start': '#black.0',\n },\n '#tabs-fade-end': {\n '': '#black',\n 'fade-end': '#black.0',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n flow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n // Sized by content like a radio button, but the label column keeps a\n // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n // its title truncates it — and gets the auto tooltip — instead of\n // spilling the title out of the tab.\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","boxSizing","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active","Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': '#black',\n 'fade-start': '#black.0',\n },\n '#tabs-fade-end': {\n '': '#black',\n 'fade-end': '#black.0',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n flow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n // Sized by content like a radio button, but the label column keeps a\n // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n // its title truncates it — and gets the auto tooltip — instead of\n // spilling the title out of the tab.\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":"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"}