@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,60 @@
+
+import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps } from "./types.js";
+import { CubeTabsActionProps, TabsAction } from "./TabsAction.js";
+import * as react from "react";
+import { ReactElement } from "react";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/navigation/Tabs/Tabs.d.ts
+declare function Tab(_props: CubeTabProps): ReactElement | null;
+declare namespace Tab {
+  var displayName: string;
+}
+declare function TabPanel(_props: CubeTabPanelProps): ReactElement | null;
+declare namespace TabPanel {
+  var displayName: string;
+}
+declare function TabList(_props: CubeTabListProps): ReactElement | null;
+declare namespace TabList {
+  var displayName: string;
+}
+/**
+ * Tabs component for organizing content into multiple panels.
+ * Built with React Aria for full accessibility support.
+ *
+ * **Note:** Tab keys are internally converted to strings for React Aria compatibility.
+ *
+ * @example
+ * // Simple usage
+ * <Tabs defaultActiveKey="tab1">
+ *   <Tab key="tab1" title="Tab 1">Content 1</Tab>
+ *   <Tab key="tab2" title="Tab 2">Content 2</Tab>
+ * </Tabs>
+ *
+ * @example
+ * // Tabs-only (no panels)
+ * <Tabs activeKey={activeTab} onChange={setActiveTab}>
+ *   <Tab key="overview" title="Overview" />
+ *   <Tab key="settings" title="Settings" />
+ * </Tabs>
+ *
+ * @example
+ * // Explicit panels
+ * <Tabs defaultActiveKey="tab1">
+ *   <Tabs.List>
+ *     <Tab key="tab1" title="Tab 1" />
+ *     <Tab key="tab2" title="Tab 2" />
+ *   </Tabs.List>
+ *   <Tabs.Panel key="tab1">Content 1</Tabs.Panel>
+ *   <Tabs.Panel key="tab2">Content 2</Tabs.Panel>
+ * </Tabs>
+ */
+declare const Tabs: react.ForwardRefExoticComponent<CubeTabsProps & react.RefAttributes<HTMLDivElement>> & {
+  Tab: typeof Tab;
+  List: typeof TabList;
+  Panel: typeof TabPanel;
+  Action: react.ForwardRefExoticComponent<Omit<CubeTabsActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+};
+//#endregion
+export { Tab, Tabs };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1,419 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
+import { OUTER_STYLES } from "../../../tasty/styles/list.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useMergeStyles } from "../../../utils/react/useMergeStyles.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
+import { useTinyScrollbar } from "../../content/Layout/hooks/useTinyScrollbar.js";
+import { DraggableTabList } from "./DraggableTabList.js";
+import { TabIndicatorElement, TabsElement } from "./styled.js";
+import { TabsProvider } from "./TabsContext.js";
+import { TabButton } from "./TabButton.js";
+import { CachedPanelRenderer, TabPanelRenderer } from "./TabPanel.js";
+import { TabPicker } from "./TabPicker.js";
+import { TabsAction } from "./TabsAction.js";
+import { useTabEditing } from "./use-tab-editing.js";
+import { useTabIndicator } from "./use-tab-indicator.js";
+import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTabList } from "react-aria";
+import { Item, useTabListState } from "react-stately";
+
+//#region src/components/navigation/Tabs/Tabs.tsx
+/**
+* Generic helper to check if a child is a specific component by displayName.
+*/
+function isComponentElement(child, displayName) {
+	return isValidElement(child) && typeof child.type === "function" && child.type.displayName === displayName;
+}
+/** Checks if a child is a Tab component. */
+const isTabElement = (child) => isComponentElement(child, "CubeTab");
+/** Checks if a child is a TabPanel component. */
+const isTabPanelElement = (child) => isComponentElement(child, "CubeTabPanel");
+/** Checks if a child is a TabList component. */
+const isTabListElement = (child) => isComponentElement(child, "CubeTabList");
+/**
+* Extracts the raw key from a React element, stripping the ".$" prefix
+* that React adds via Children.map/toArray.
+*/
+function getRawKey(element) {
+	if (element.key == null) return null;
+	const keyStr = String(element.key);
+	return keyStr.startsWith(".$") ? keyStr.slice(2) : keyStr;
+}
+function Tab(_props) {
+	return null;
+}
+Tab.displayName = "CubeTab";
+function TabPanel(_props) {
+	return null;
+}
+TabPanel.displayName = "CubeTabPanel";
+function TabList(_props) {
+	return null;
+}
+TabList.displayName = "CubeTabList";
+function TabsComponent(props, ref) {
+	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", onChange, onDelete, onTitleChange, autoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = "Tabs", renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = "suffix", scrollArrowsPosition = "suffix", tabListPadding, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
+	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
+	const tabListPaddingStyles = useMemo(() => tabListPadding ? { padding: `0 ${tabListPadding}` } : void 0, [tabListPadding]);
+	const combinedStyles = useMergeStyles(baseStyles, {
+		TabList: useMemo(() => mergeStyles(tabListPaddingStyles, tabListStyles), [tabListPaddingStyles, tabListStyles]),
+		Prefix: prefixStyles,
+		Suffix: suffixStyles
+	});
+	const listRef = useRef(null);
+	const scrollRef = useRef(null);
+	const visitedKeysRef = useRef(/* @__PURE__ */ new Set());
+	const { editingKey, editValue, setEditValue, startEditing, cancelEditing, submitEditing } = useTabEditing({
+		onChange,
+		onTitleChange
+	});
+	const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {
+		const childArray = Children.toArray(children);
+		const tabs = [];
+		const panels = /* @__PURE__ */ new Map();
+		let hasExplicitList = false;
+		let tabChildren = [];
+		for (const child of childArray) if (isTabListElement(child)) {
+			hasExplicitList = true;
+			tabChildren = Children.toArray(child.props.children);
+		} else if (isTabPanelElement(child)) {
+			const key = getRawKey(child);
+			if (key != null) panels.set(key, {
+				key,
+				content: child.props.children,
+				prerender: child.props.prerender,
+				keepMounted: child.props.keepMounted,
+				styles: child.props.styles,
+				qa: child.props.qa,
+				qaVal: child.props.qaVal
+			});
+		}
+		if (!hasExplicitList) tabChildren = childArray;
+		let hasContent = panels.size > 0;
+		for (const child of tabChildren) if (isTabElement(child)) {
+			const key = getRawKey(child) ?? child.props.id;
+			if (key != null) {
+				const { id: _id, children: tabContent, ...tabProps } = child.props;
+				tabs.push({
+					...tabProps,
+					key,
+					content: tabContent
+				});
+				if (tabContent != null) hasContent = true;
+			}
+		}
+		return {
+			parsedTabs: tabs,
+			explicitPanels: panels,
+			hasAnyContent: hasContent
+		};
+	}, [children]);
+	const currentTabKeysSet = useMemo(() => new Set(parsedTabs.map((t) => t.key)), [parsedTabs]);
+	useEffect(() => {
+		for (const key of visitedKeysRef.current) if (!currentTabKeysSet.has(key)) visitedKeysRef.current.delete(key);
+	}, [currentTabKeysSet]);
+	const orderedParsedTabs = useMemo(() => {
+		if (!keyOrder || keyOrder.length === 0) return parsedTabs;
+		const tabMap = /* @__PURE__ */ new Map();
+		for (const tab of parsedTabs) tabMap.set(tab.key, tab);
+		const ordered = [];
+		for (const key of keyOrder) {
+			const tab = tabMap.get(String(key));
+			if (tab) {
+				ordered.push(tab);
+				tabMap.delete(String(key));
+			}
+		}
+		for (const tab of parsedTabs) if (tabMap.has(tab.key)) ordered.push(tab);
+		return ordered;
+	}, [parsedTabs, keyOrder]);
+	const collectionItems = useMemo(() => {
+		return orderedParsedTabs.map((tab) => /* @__PURE__ */ jsx(Item, {
+			textValue: typeof tab.title === "string" ? tab.title : String(tab.key),
+			children: tab.title
+		}, tab.key));
+	}, [orderedParsedTabs]);
+	const disabledKeys = useMemo(() => {
+		return new Set(parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key));
+	}, [parsedTabs]);
+	const handleSelectionChange = useEvent((key) => {
+		const keyStr = String(key);
+		visitedKeysRef.current.add(keyStr);
+		onChange?.(keyStr);
+	});
+	const selectedKey = activeKey != null ? String(activeKey) : void 0;
+	const defaultSelectedKey = defaultActiveKey != null ? String(defaultActiveKey) : void 0;
+	const ariaProps = useMemo(() => ({
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: handleSelectionChange,
+		disabledKeys,
+		children: collectionItems,
+		"aria-label": label
+	}), [
+		selectedKey,
+		defaultSelectedKey,
+		handleSelectionChange,
+		disabledKeys,
+		collectionItems,
+		label
+	]);
+	const state = useTabListState(ariaProps);
+	useEffect(() => {
+		if (state.selectedKey != null) visitedKeysRef.current.add(String(state.selectedKey));
+	}, [state.selectedKey]);
+	const { tabListProps } = useTabList(ariaProps, state, listRef);
+	const handleTabPickerSelect = useEvent((key) => {
+		state.setSelectedKey(key);
+		handleSelectionChange(key);
+	});
+	const orderToken = useMemo(() => orderedParsedTabs.map((t) => t.key).join(","), [orderedParsedTabs]);
+	const indicatorStyle = useTabIndicator(listRef, state.selectedKey, type === "default" || type === "narrow", orderToken);
+	const isTinyScrollbar = type !== "radio";
+	const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } = useTinyScrollbar(scrollRef, isTinyScrollbar);
+	const hasPanels = hasAnyContent || !!renderPanel;
+	useWarn(showTabPicker && type === "radio", {
+		key: ["tabs-tabpicker-radio-unsupported"],
+		args: ["Tabs:", "`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered."]
+	});
+	const shouldShowTabPicker = type !== "radio" && (showTabPicker === true || showTabPicker === "auto" && hasOverflowX);
+	useWarn(showScrollArrows && type === "radio", {
+		key: ["tabs-scrollarrows-radio-unsupported"],
+		args: ["Tabs:", "`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered."]
+	});
+	const shouldShowScrollArrows = type !== "radio" && (showScrollArrows === true || showScrollArrows === "auto" && hasOverflowX);
+	const handleScrollLeft = useEvent(() => {
+		const el = scrollRef.current;
+		if (el) el.scrollTo({
+			left: el.scrollLeft - el.clientWidth,
+			behavior: "smooth"
+		});
+	});
+	const handleScrollRight = useEvent(() => {
+		const el = scrollRef.current;
+		if (el) el.scrollTo({
+			left: el.scrollLeft + el.clientWidth,
+			behavior: "smooth"
+		});
+	});
+	const baseContextValue = useMemo(() => ({
+		state,
+		type,
+		size,
+		autoHideActions,
+		isEditable: parentIsEditable,
+		menu: parentMenu,
+		menuTriggerProps: parentMenuTriggerProps,
+		menuProps: parentMenuProps,
+		contextMenu: parentContextMenu,
+		onDelete,
+		onAction: parentOnAction,
+		editingKey,
+		editValue,
+		setEditValue,
+		startEditing,
+		submitEditing,
+		cancelEditing
+	}), [
+		state,
+		type,
+		size,
+		autoHideActions,
+		parentIsEditable,
+		parentMenu,
+		parentMenuTriggerProps,
+		parentMenuProps,
+		parentContextMenu,
+		onDelete,
+		parentOnAction,
+		editingKey,
+		editValue,
+		setEditValue,
+		startEditing,
+		submitEditing,
+		cancelEditing
+	]);
+	const createContextValue = (dragState, dropState) => ({
+		...baseContextValue,
+		dragState,
+		dropState
+	});
+	const renderTabListContent = (contextValue, collectionProps = {}) => /* @__PURE__ */ jsxs("div", {
+		...mergeProps$1(tabListProps, collectionProps),
+		ref: listRef,
+		"data-element": "TabList",
+		children: [/* @__PURE__ */ jsx(TabsProvider, {
+			value: contextValue,
+			children: orderedParsedTabs.map((tab, index) => {
+				const item = state.collection.getItem(tab.key);
+				if (!item) return null;
+				return /* @__PURE__ */ jsx(TabButton, {
+					item,
+					tabData: tab,
+					isLastTab: index === orderedParsedTabs.length - 1
+				}, item.key);
+			})
+		}), indicatorStyle && /* @__PURE__ */ jsx(TabIndicatorElement, { style: {
+			left: indicatorStyle.left,
+			width: indicatorStyle.width
+		} })]
+	});
+	const mods = useMemo(() => ({
+		type,
+		size,
+		deletable: !!onDelete,
+		scrolling: isScrolling,
+		"fade-left": !isAtStartX,
+		"fade-right": !isAtEndX,
+		"has-panels": hasPanels
+	}), [
+		type,
+		size,
+		onDelete,
+		isScrolling,
+		isAtStartX,
+		isAtEndX,
+		hasPanels
+	]);
+	const scrollArrowsElement = shouldShowScrollArrows ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TabsAction, {
+		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: "left" }),
+		"aria-label": "Scroll tabs left",
+		isDisabled: isAtStartX,
+		onPress: handleScrollLeft
+	}), /* @__PURE__ */ jsx(TabsAction, {
+		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: "right" }),
+		"aria-label": "Scroll tabs right",
+		isDisabled: isAtEndX,
+		onPress: handleScrollRight
+	})] }) : null;
+	const tabPickerElement = shouldShowTabPicker ? /* @__PURE__ */ jsx(TabPicker, {
+		tabs: orderedParsedTabs,
+		selectedKey: state.selectedKey,
+		size,
+		type,
+		onSelect: handleTabPickerSelect,
+		onDelete
+	}) : null;
+	const prefixHasActions = shouldShowTabPicker && tabPickerPosition === "prefix" || shouldShowScrollArrows && scrollArrowsPosition === "prefix";
+	const suffixHasActions = shouldShowTabPicker && tabPickerPosition === "suffix" || shouldShowScrollArrows && scrollArrowsPosition === "suffix";
+	return /* @__PURE__ */ jsxs(TabsProvider, {
+		value: baseContextValue,
+		children: [
+			/* @__PURE__ */ jsxs(TabsElement, {
+				ref,
+				qa,
+				mods,
+				styles: combinedStyles,
+				style: handleHStyle,
+				"data-size": size,
+				children: [
+					prefix || prefixHasActions ? /* @__PURE__ */ jsxs("div", {
+						"data-element": "Prefix",
+						children: [
+							tabPickerPosition === "prefix" && tabPickerElement,
+							scrollArrowsPosition === "prefix" && scrollArrowsElement,
+							prefix
+						]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						"data-element": "ScrollWrapper",
+						children: [/* @__PURE__ */ jsx("div", {
+							ref: scrollRef,
+							"data-element": "Scroll",
+							children: isReorderable ? /* @__PURE__ */ jsx(DraggableTabList, {
+								state,
+								listRef,
+								orderedKeys: orderedParsedTabs.map((t) => t.key),
+								onReorder,
+								children: (dragState, dropState, collectionProps) => renderTabListContent(createContextValue(dragState, dropState), collectionProps)
+							}) : renderTabListContent(createContextValue())
+						}), isTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" })]
+					}),
+					suffix || suffixHasActions ? /* @__PURE__ */ jsxs("div", {
+						"data-element": "Suffix",
+						children: [
+							scrollArrowsPosition === "suffix" && scrollArrowsElement,
+							tabPickerPosition === "suffix" && tabPickerElement,
+							suffix
+						]
+					}) : null
+				]
+			}),
+			renderPanel && /* @__PURE__ */ jsx(CachedPanelRenderer, {
+				parsedTabs,
+				explicitPanels,
+				state,
+				renderPanel,
+				panelCacheKeys,
+				prerender,
+				keepMounted,
+				visitedKeys: visitedKeysRef.current
+			}),
+			!renderPanel && hasAnyContent && parsedTabs.map((tab) => {
+				const explicitPanel = explicitPanels.get(tab.key);
+				const content = explicitPanel?.content ?? tab.content;
+				if (content == null) return null;
+				return /* @__PURE__ */ jsx(TabPanelRenderer, {
+					tabKey: tab.key,
+					state,
+					content,
+					prerender,
+					keepMounted,
+					tabPrerender: explicitPanel?.prerender ?? tab.prerender,
+					tabKeepMounted: explicitPanel?.keepMounted ?? tab.keepMounted,
+					visitedKeys: visitedKeysRef.current,
+					panelStyles: explicitPanel?.styles,
+					qa: explicitPanel?.qa,
+					qaVal: explicitPanel?.qaVal
+				}, tab.key);
+			})
+		]
+	});
+}
+const _Tabs = forwardRef(TabsComponent);
+/**
+* Tabs component for organizing content into multiple panels.
+* Built with React Aria for full accessibility support.
+*
+* **Note:** Tab keys are internally converted to strings for React Aria compatibility.
+*
+* @example
+* // Simple usage
+* <Tabs defaultActiveKey="tab1">
+*   <Tab key="tab1" title="Tab 1">Content 1</Tab>
+*   <Tab key="tab2" title="Tab 2">Content 2</Tab>
+* </Tabs>
+*
+* @example
+* // Tabs-only (no panels)
+* <Tabs activeKey={activeTab} onChange={setActiveTab}>
+*   <Tab key="overview" title="Overview" />
+*   <Tab key="settings" title="Settings" />
+* </Tabs>
+*
+* @example
+* // Explicit panels
+* <Tabs defaultActiveKey="tab1">
+*   <Tabs.List>
+*     <Tab key="tab1" title="Tab 1" />
+*     <Tab key="tab2" title="Tab 2" />
+*   </Tabs.List>
+*   <Tabs.Panel key="tab1">Content 1</Tabs.Panel>
+*   <Tabs.Panel key="tab2">Content 2</Tabs.Panel>
+* </Tabs>
+*/
+const Tabs = Object.assign(_Tabs, {
+	Tab,
+	List: TabList,
+	Panel: TabPanel,
+	Action: TabsAction
+});
+
+//#endregion
+export { Tab, Tabs };
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\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';\nimport { extractStyles, mergeStyles, OUTER_STYLES } from '../../../tasty';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\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// 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// 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    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    tabListPadding,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Extract outer styles\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () => (tabListPadding ? { padding: `0 ${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\n  const combinedStyles = useMergeStyles(baseStyles, {\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  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  } = useTabEditing({ onChange, onTitleChange });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = 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\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      } 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    };\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    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\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    type === 'default' || type === 'narrow',\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = type !== 'radio';\n  const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n    useTinyScrollbar(scrollRef, isTinyScrollbar);\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && type === '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    type !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && type === '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    type !== 'radio' &&\n    (showScrollArrows === true ||\n      (showScrollArrows === 'auto' && hasOverflowX));\n\n  const handleScrollLeft = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollRight = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\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,\n      size,\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      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      type,\n      size,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\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    >\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            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type,\n      size,\n      deletable: !!onDelete,\n      scrolling: isScrolling,\n      'fade-left': !isAtStartX,\n      'fade-right': !isAtEndX,\n      'has-panels': hasPanels,\n    }),\n    [type, size, onDelete, isScrolling, isAtStartX, isAtEndX, hasPanels],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={<DirectionIcon to=\"left\" />}\n        aria-label=\"Scroll tabs left\"\n        isDisabled={isAtStartX}\n        onPress={handleScrollLeft}\n      />\n      <TabsAction\n        icon={<DirectionIcon to=\"right\" />}\n        aria-label=\"Scroll tabs right\"\n        isDisabled={isAtEndX}\n        onPress={handleScrollRight}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={type}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\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  // Wrap with TabsProvider so prefix/suffix can access context (size, type)\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={handleHStyle}\n        data-size={size}\n      >\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                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          {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\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      </TabsElement>\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={keepMounted}\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={keepMounted}\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    </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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAS,mBACP,OACA,aAC0B;AAC1B,QACE,eAAe,MAAM,IACrB,OAAO,MAAM,SAAS,cACrB,MAAM,KAAa,gBAAgB;;;AAKxC,MAAM,gBAAgB,UACpB,mBAAiC,OAAO,UAAU;;AAGpD,MAAM,qBACJ,UAEA,mBAAsC,OAAO,eAAe;;AAG9D,MAAM,oBACJ,UAEA,mBAAqC,OAAO,cAAc;;;;;AAM5D,SAAS,UAAU,SAAsC;AACvD,KAAI,QAAQ,OAAO,KAAM,QAAO;CAChC,MAAM,SAAS,OAAO,QAAQ,IAAI;AAClC,QAAO,OAAO,WAAW,KAAK,GAAG,OAAO,MAAM,EAAE,GAAG;;AAOrD,SAAS,IAAI,QAA2C;AACtD,QAAO;;AAGT,IAAI,cAAc;AAMlB,SAAS,SAAS,QAAgD;AAChE,QAAO;;AAGT,SAAS,cAAc;AAMvB,SAAS,QAAQ,QAA+C;AAC9D,QAAO;;AAGT,QAAQ,cAAc;AAMtB,SAAS,cACP,OACA,KACA;CACA,MAAM,EACJ,QAAQ,QACR,kBACA,WACA,MACA,OAAO,WACP,UACA,UACA,eACA,iBACA,YAAY,kBACZ,MAAM,YACN,kBAAkB,wBAClB,WAAW,iBACX,aAAa,mBACb,UAAU,gBACV,UACA,QACA,QACA,YAAY,OACZ,cAAc,OACd,KAAK,QACL,aACA,gBACA,gBAAgB,OAChB,UACA,WACA,gBAAgB,OAChB,mBAAmB,OACnB,oBAAoB,UACpB,uBAAuB,UACvB,gBACA,eACA,cACA,cACA,GAAG,eACD;CAGJ,MAAM,aAAa,cAAc,YAAY,aAAa;CAG1D,MAAM,uBAAuB,cACpB,iBAAiB,EAAE,SAAS,KAAK,kBAAkB,GAAG,QAC7D,CAAC,eAAe,CACjB;CASD,MAAM,iBAAiB,eAAe,YAAY;EAChD,SAP0B,cACpB,YAAY,sBAAsB,cAAc,EACtD,CAAC,sBAAsB,cAAc,CACtC;EAKC,QAAQ;EACR,QAAQ;EACT,CAAC;CAGF,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,YAAY,OAAuB,KAAK;CAG9C,MAAM,iBAAiB,uBAAoB,IAAI,KAAK,CAAC;CAKrD,MAAM,EACJ,YACA,WACA,cACA,cACA,eACA,kBACE,cAAc;EAAE;EAAU;EAAe,CAAC;CAK9C,MAAM,EAAE,YAAY,gBAAgB,kBAAkB,cAAc;EAClE,MAAM,aAAa,SAAS,QAAQ,SAAS;EAC7C,MAAM,OAAoB,EAAE;EAC5B,MAAM,yBAAS,IAAI,KAA0B;EAC7C,IAAI,kBAAkB;EACtB,IAAI,cAA2B,EAAE;AAGjC,OAAK,MAAM,SAAS,WAClB,KAAI,iBAAiB,MAAM,EAAE;AAC3B,qBAAkB;AAClB,iBAAc,SAAS,QAAQ,MAAM,MAAM,SAAS;aAC3C,kBAAkB,MAAM,EAAE;GACnC,MAAM,MAAM,UAAU,MAAsB;AAE5C,OAAI,OAAO,KACT,QAAO,IAAI,KAAK;IACd;IACA,SAAS,MAAM,MAAM;IACrB,WAAW,MAAM,MAAM;IACvB,aAAa,MAAM,MAAM;IACzB,QAAQ,MAAM,MAAM;IACpB,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACpB,CAAC;;AAMR,MAAI,CAAC,gBACH,eAAc;EAIhB,IAAI,aAAa,OAAO,OAAO;AAE/B,OAAK,MAAM,SAAS,YAClB,KAAI,aAAa,MAAM,EAAE;GACvB,MAAM,MAAM,UAAU,MAAM,IAAI,MAAM,MAAM;AAE5C,OAAI,OAAO,MAAM;IACf,MAAM,EAAE,IAAI,KAAK,UAAU,YAAY,GAAG,aAAa,MAAM;AAE7D,SAAK,KAAK;KACR,GAAG;KACH;KACA,SAAS;KACV,CAAC;AAEF,QAAI,cAAc,KAChB,cAAa;;;AAMrB,SAAO;GACL,YAAY;GACZ,gBAAgB;GAChB,eAAe;GAChB;IACA,CAAC,SAAS,CAAC;CAGd,MAAM,oBAAoB,cAClB,IAAI,IAAI,WAAW,KAAK,MAAM,EAAE,IAAI,CAAC,EAC3C,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,OAAK,MAAM,OAAO,eAAe,QAC/B,KAAI,CAAC,kBAAkB,IAAI,IAAI,CAC7B,gBAAe,QAAQ,OAAO,IAAI;IAGrC,CAAC,kBAAkB,CAAC;CAKvB,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,YAAY,SAAS,WAAW,EACnC,QAAO;EAGT,MAAM,yBAAS,IAAI,KAAwB;AAC3C,OAAK,MAAM,OAAO,WAChB,QAAO,IAAI,IAAI,KAAK,IAAI;EAG1B,MAAM,UAAuB,EAAE;AAC/B,OAAK,MAAM,OAAO,UAAU;GAC1B,MAAM,MAAM,OAAO,IAAI,OAAO,IAAI,CAAC;AACnC,OAAI,KAAK;AACP,YAAQ,KAAK,IAAI;AACjB,WAAO,OAAO,OAAO,IAAI,CAAC;;;AAK9B,OAAK,MAAM,OAAO,WAChB,KAAI,OAAO,IAAI,IAAI,IAAI,CACrB,SAAQ,KAAK,IAAI;AAIrB,SAAO;IACN,CAAC,YAAY,SAAS,CAAC;CAG1B,MAAM,kBAAkB,cAAc;AACpC,SAAO,kBAAkB,KAAK,QAC5B,oBAACA;GAEC,WAAW,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,OAAO,IAAI,IAAI;aAErE,IAAI;KAHA,IAAI,IAIM,CACjB;IACD,CAAC,kBAAkB,CAAC;CAGvB,MAAM,eAAe,cAAc;AACjC,SAAO,IAAI,IACT,WAAW,QAAQ,QAAQ,IAAI,WAAW,CAAC,KAAK,QAAQ,IAAI,IAAI,CACjE;IACA,CAAC,WAAW,CAAC;CAGhB,MAAM,wBAAwB,UAAU,QAAa;EACnD,MAAM,SAAS,OAAO,IAAI;AAC1B,iBAAe,QAAQ,IAAI,OAAO;AAClC,aAAW,OAAO;GAClB;CAGF,MAAM,cAAc,aAAa,OAAO,OAAO,UAAU,GAAG;CAC5D,MAAM,qBACJ,oBAAoB,OAAO,OAAO,iBAAiB,GAAG;CAGxD,MAAM,YAAsC,eACnC;EACL;EACA;EACA,mBAAmB;EACnB;EACA,UAAU;EACV,cAAc;EACf,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,QAAQ,gBAAgB,UAAU;AAGxC,iBAAgB;AACd,MAAI,MAAM,eAAe,KACvB,gBAAe,QAAQ,IAAI,OAAO,MAAM,YAAY,CAAC;IAEtD,CAAC,MAAM,YAAY,CAAC;CAGvB,MAAM,EAAE,iBAAiB,WAAW,WAAW,OAAO,QAAQ;CAG9D,MAAM,wBAAwB,UAAU,QAAgB;AAEtD,QAAM,eAAe,IAAI;AAEzB,wBAAsB,IAAI;GAC1B;CAMF,MAAM,aAAa,cACX,kBAAkB,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,EACnD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,gBACrB,SACA,MAAM,aACN,SAAS,aAAa,SAAS,UAC/B,WACD;CAKD,MAAM,kBAAkB,SAAS;CACjC,MAAM,EAAE,cAAc,cAAc,aAAa,YAAY,aAC3D,iBAAiB,WAAW,gBAAgB;CAE9C,MAAM,YAAY,iBAAiB,CAAC,CAAC;AAKrC,SAAQ,iBAAiB,SAAS,SAAS;EACzC,KAAK,CAAC,mCAAmC;EACzC,MAAM,CACJ,SACA,8FACD;EACF,CAAC;CAEF,MAAM,sBACJ,SAAS,YACR,kBAAkB,QAAS,kBAAkB,UAAU;AAK1D,SAAQ,oBAAoB,SAAS,SAAS;EAC5C,KAAK,CAAC,sCAAsC;EAC5C,MAAM,CACJ,SACA,qGACD;EACF,CAAC;CAEF,MAAM,yBACJ,SAAS,YACR,qBAAqB,QACnB,qBAAqB,UAAU;CAEpC,MAAM,mBAAmB,eAAe;EACtC,MAAM,KAAK,UAAU;AACrB,MAAI,GACF,IAAG,SAAS;GACV,MAAM,GAAG,aAAa,GAAG;GACzB,UAAU;GACX,CAAC;GAEJ;CAEF,MAAM,oBAAoB,eAAe;EACvC,MAAM,KAAK,UAAU;AACrB,MAAI,GACF,IAAG,SAAS;GACV,MAAM,GAAG,aAAa,GAAG;GACzB,UAAU;GACX,CAAC;GAEJ;CAKF,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACA;EACA,YAAY;EACZ,MAAM;EACN,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,sBACJ,WACA,eACsB;EACtB,GAAG;EACH;EACA;EACD;CAKD,MAAM,wBACJ,cACA,kBAA2C,EAAE,KAE7C,qBAAC;EACC,GAAIC,aAAW,cAAc,gBAAgB;EAC7C,KAAK;EACL,gBAAa;aAEb,oBAAC;GAAa,OAAO;aAClB,kBAAkB,KAAK,KAAK,UAAU;IACrC,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI,IAAI;AAC9C,QAAI,CAAC,KAAM,QAAO;AAElB,WACE,oBAAC;KAEO;KACN,SAAS;KACT,WAAW,UAAU,kBAAkB,SAAS;OAH3C,KAAK,IAIV;KAEJ;IACW,EACd,kBACC,oBAAC,uBACC,OAAO;GACL,MAAM,eAAe;GACrB,OAAO,eAAe;GACvB,GACD;GAEA;CAMR,MAAM,OAAO,eACJ;EACL;EACA;EACA,WAAW,CAAC,CAAC;EACb,WAAW;EACX,aAAa,CAAC;EACd,cAAc,CAAC;EACf,cAAc;EACf,GACD;EAAC;EAAM;EAAM;EAAU;EAAa;EAAY;EAAU;EAAU,CACrE;CAKD,MAAM,sBAAsB,yBAC1B,8CACE,oBAAC;EACC,MAAM,oBAAC,iBAAc,IAAG,SAAS;EACjC,cAAW;EACX,YAAY;EACZ,SAAS;GACT,EACF,oBAAC;EACC,MAAM,oBAAC,iBAAc,IAAG,UAAU;EAClC,cAAW;EACX,YAAY;EACZ,SAAS;GACT,IACD,GACD;CAEJ,MAAM,mBAAmB,sBACvB,oBAAC;EACC,MAAM;EACN,aAAa,MAAM;EACb;EACA;EACN,UAAU;EACA;GACV,GACA;CAKJ,MAAM,mBACH,uBAAuB,sBAAsB,YAC7C,0BAA0B,yBAAyB;CAEtD,MAAM,mBACH,uBAAuB,sBAAsB,YAC7C,0BAA0B,yBAAyB;AAItD,QACE,qBAAC;EAAa,OAAO;;GACnB,qBAAC;IACM;IACD;IACE;IACN,QAAQ;IACR,OAAO;IACP,aAAW;;KAEV,UAAU,mBACT,qBAAC;MAAI,gBAAa;;OACf,sBAAsB,YAAY;OAClC,yBAAyB,YAAY;OACrC;;OACG,GACJ;KACJ,qBAAC;MAAI,gBAAa;iBAChB,oBAAC;OAAI,KAAK;OAAW,gBAAa;iBAC/B,gBACC,oBAAC;QACQ;QACE;QACT,aAAa,kBAAkB,KAAK,MAAM,EAAE,IAAI;QACrC;mBAET,WAAW,WAAW,oBACtB,qBACE,mBAAmB,WAAW,UAAU,EACxC,gBACD;SAEc,GAEnB,qBAAqB,oBAAoB,CAAC;QAExC,EACL,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;OACjE;KACL,UAAU,mBACT,qBAAC;MAAI,gBAAa;;OACf,yBAAyB,YAAY;OACrC,sBAAsB,YAAY;OAClC;;OACG,GACJ;;KACQ;GAGb,eACC,oBAAC;IACa;IACI;IACT;IACM;IACG;IACL;IACE;IACb,aAAa,eAAe;KAC5B;GAIH,CAAC,eACA,iBACA,WAAW,KAAK,QAAQ;IACtB,MAAM,gBAAgB,eAAe,IAAI,IAAI,IAAI;IACjD,MAAM,UAAU,eAAe,WAAW,IAAI;AAE9C,QAAI,WAAW,KAAM,QAAO;AAE5B,WACE,oBAAC;KAEC,QAAQ,IAAI;KACL;KACE;KACE;KACE;KACb,cAAc,eAAe,aAAa,IAAI;KAC9C,gBAAgB,eAAe,eAAe,IAAI;KAClD,aAAa,eAAe;KAC5B,aAAa,eAAe;KAC5B,IAAI,eAAe;KACnB,OAAO,eAAe;OAXjB,IAAI,IAYT;KAEJ;;GACS;;AAQnB,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCvC,MAAa,OAAO,OAAO,OAAO,OAAO;CACvC;CACA,MAAM;CACN,OAAO;CACP,QAAQ;CACT,CAAC"}

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

@@ -0,0 +1,46 @@
+
+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'> {
+  /**
+   * Size of the action button.
+   * When used inside Tabs prefix/suffix, inherits from Tabs size by default.
+   */
+  size?: TabSize;
+}
+/**
+ * Action button designed for the Tabs prefix/suffix slots.
+ *
+ * Styled with sharp edges and no border to match the TabPicker trigger.
+ * When multiple TabsAction components are placed together, they automatically
+ * display dividers between them using CSS :not(:first-child) border styling
+ * (only for file tab type).
+ *
+ * Inherits size from the parent Tabs component when used inside prefix/suffix slots.
+ *
+ * @example
+ * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>
+ *   <Tab key="tab1" title="Tab 1">Content</Tab>
+ * </Tabs>
+ *
+ * @example
+ * // Multiple actions with automatic dividers
+ * <Tabs
+ *   suffix={
+ *     <>
+ *       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />
+ *       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />
+ *     </>
+ *   }
+ * >
+ *   <Tab key="tab1" title="Tab 1">Content</Tab>
+ * </Tabs>
+ */
+declare const TabsAction: react.ForwardRefExoticComponent<Omit<CubeTabsActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeTabsActionProps, TabsAction };
+//# sourceMappingURL=TabsAction.d.ts.map

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

@@ -0,0 +1,63 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
+import { useOptionalTabsContext } from "./TabsContext.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/navigation/Tabs/TabsAction.tsx
+const TabsActionElement = tasty(_ItemButton, {
+	shape: "sharp",
+	type: "neutral",
+	styles: { border: {
+		"": 0,
+		"tabs-type-file & !:first-child": "left"
+	} }
+});
+/**
+* Action button designed for the Tabs prefix/suffix slots.
+*
+* Styled with sharp edges and no border to match the TabPicker trigger.
+* When multiple TabsAction components are placed together, they automatically
+* display dividers between them using CSS :not(:first-child) border styling
+* (only for file tab type).
+*
+* Inherits size from the parent Tabs component when used inside prefix/suffix slots.
+*
+* @example
+* <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>
+*   <Tab key="tab1" title="Tab 1">Content</Tab>
+* </Tabs>
+*
+* @example
+* // Multiple actions with automatic dividers
+* <Tabs
+*   suffix={
+*     <>
+*       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />
+*       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />
+*     </>
+*   }
+* >
+*   <Tab key="tab1" title="Tab 1">Content</Tab>
+* </Tabs>
+*/
+const TabsAction = forwardRef(function TabsAction(props, ref) {
+	const { size, mods, ...rest } = props;
+	const tabsContext = useOptionalTabsContext();
+	const effectiveSize = size ?? tabsContext?.size ?? "medium";
+	const tabsType = tabsContext?.type ?? "default";
+	return /* @__PURE__ */ jsx(TabsActionElement, {
+		ref,
+		size: effectiveSize,
+		mods: useMemo(() => ({
+			"tabs-type-file": tabsType === "file",
+			...mods
+		}), [tabsType, mods]),
+		...rest
+	});
+});
+
+//#endregion
+export { TabsAction };
+//# sourceMappingURL=TabsAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsAction.js","names":["ItemButton"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useMemo } from 'react';\n\nimport { tasty } from '../../../tasty';\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  shape: 'sharp',\n  type: 'neutral',\n  styles: {\n    border: {\n      '': 0,\n      'tabs-type-file & !:first-child': 'left',\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, ...rest } = props;\n\n  // Get size and type 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\n  const combinedMods = useMemo(\n    () => ({\n      'tabs-type-file': tabsType === 'file',\n      ...mods,\n    }),\n    [tabsType, mods],\n  );\n\n  return (\n    <TabsActionElement\n      ref={ref}\n      size={effectiveSize}\n      mods={combinedMods}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AA8BA,MAAM,oBAAoB,MAAMA,aAAY;CAC1C,OAAO;CACP,MAAM;CACN,QAAQ,EACN,QAAQ;EACN,IAAI;EACJ,kCAAkC;EACnC,EACF;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,aAAa,WAAW,SAAS,WAC5C,OACA,KACA;CACA,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;CAGhC,MAAM,cAAc,wBAAwB;CAC5C,MAAM,gBAAgB,QAAQ,aAAa,QAAQ;CACnD,MAAM,WAAW,aAAa,QAAQ;AAUtC,QACE,oBAAC;EACM;EACL,MAAM;EACN,MAZiB,eACZ;GACL,kBAAkB,aAAa;GAC/B,GAAG;GACJ,GACD,CAAC,UAAU,KAAK,CACjB;EAOG,GAAI;GACJ;EAEJ"}