/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { cn } from "../../utils/cn.js";
import React from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
//#region src/core/Tabs/Tabs.tsx
var styles = {
	tabList: "flex gap-1 list-none overflow-x-auto border-b border-border-1",
	tab: {
		base: "font-semibold py-2.5 px-4 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) transition-colors whitespace-nowrap -mb-px border-b-2",
		selected: "border-(--primary) text-(--text)",
		notSelected: "border-transparent text-(--text-muted) hover:text-(--text)"
	},
	panel: "pt-4"
};
/**
* Collect the `Tabs.Item` children, unwrapping fragments along the way.
* `React.Children.toArray` flattens arrays but treats a `<>…</>` fragment as a
* single opaque child — so items wrapped in one produced a lone tab with
* `title`/`id` of `undefined` (an empty, unlabeled pill) instead of the tabs.
*/
function collectItems(children) {
	return React.Children.toArray(children).flatMap((child) => {
		if (!React.isValidElement(child)) return [];
		if (child.type === React.Fragment) return collectItems(child.props.children);
		return [child];
	});
}
/**
* Tabs — accessible tabs built on React Aria's `Tabs`, with token-driven,
* chrome-less underline styling: a 2px active underline over a hairline rule,
* muted inactive labels, unframed panels. Provide one or more
* `<Tabs.Item title="…">…</Tabs.Item>` children (a fragment around them is
* fine); selection is controllable via `selectedKey` / `onSelectionChange` or
* uncontrolled via `defaultSelectedKey`.
*/
var Tabs$1 = ({ children, defaultSelectedKey, selectedKey, onSelectionChange, className }) => {
	const validChildren = collectItems(children);
	return /* @__PURE__ */ jsxs(Tabs, {
		className,
		defaultSelectedKey,
		selectedKey,
		onSelectionChange: (key) => onSelectionChange?.(String(key)),
		children: [/* @__PURE__ */ jsx(TabList, {
			className: styles.tabList,
			children: validChildren.map((child) => {
				const id = child.props.id ?? child.props.title;
				return /* @__PURE__ */ jsx(Tab, {
					id,
					isDisabled: child.props.isDisabled,
					"data-testid": child.props.testId,
					className: ({ isSelected, isDisabled }) => cn(styles.tab.base, isSelected ? styles.tab.selected : styles.tab.notSelected, isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-(--text-muted)"),
					children: child.props.title
				}, id);
			})
		}), validChildren.map((child) => {
			const id = child.props.id ?? child.props.title;
			return /* @__PURE__ */ jsx(TabPanel, {
				id,
				className: cn(styles.panel, "outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"),
				children: child.props.children
			}, id);
		})]
	});
};
var TabItem = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
Tabs$1.Item = TabItem;
//#endregion
export { Tabs$1 as Tabs };

//# sourceMappingURL=Tabs.js.map