/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b859c78 | 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