'use client';

import { cn } from "../../utils/cn.mjs";
import { useItemSelector } from "../../hooks/useItemSelector.mjs";
import { cloneElement, useEffect, useRef } from "react";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/TabSelector/TabSelector.tsx
let TabSelectorColor = /* @__PURE__ */ function(TabSelectorColor$1) {
	TabSelectorColor$1["PRIMARY"] = "primary";
	TabSelectorColor$1["SECONDARY"] = "secondary";
	TabSelectorColor$1["DESTRUCTIVE"] = "destructive";
	TabSelectorColor$1["NEUTRAL"] = "neutral";
	TabSelectorColor$1["LIGHT"] = "light";
	TabSelectorColor$1["DARK"] = "dark";
	TabSelectorColor$1["TEXT"] = "text";
	return TabSelectorColor$1;
}({});
const tabSelectorVariant = cva("relative z-0 flex size-full flex-row items-center gap-2", {
	variants: { color: {
		primary: "border-primary text-primary",
		secondary: "border-secondary text-secondary",
		destructive: "border-destructive bg-destructive text-destructive",
		neutral: "border-neutral text-neutral",
		light: "border-white text-white",
		dark: "border-neutral-800 text-neutral-800",
		text: "border-text text-text"
	} },
	defaultVariants: { color: "primary" }
});
const indicatorVariant = cva("absolute -z-1 rounded-lg duration-300 ease-in-out motion-reduce:transition-none", {
	variants: {
		color: {
			primary: "bg-primary/10 aria-selected:text-text",
			secondary: "bg-secondary/10 aria-selected:text-text",
			destructive: "bg-destructive/10 aria-selected:text-text",
			neutral: "bg-neutral/10 aria-selected:text-white/10",
			light: "bg-white/10 aria-selected:text-black",
			dark: "bg-neutral-800/10 aria-selected:text-white",
			text: "bg-text/10 aria-selected:text-text-opposite"
		},
		orientation: {
			horizontal: "top-0 h-full w-auto transition-[left,width]",
			vertical: "left-0 h-auto w-full transition-[top,height]"
		}
	},
	defaultVariants: { orientation: "horizontal" }
});
/**
*
* Component that allows the user to select one of the provided choices.
*
* Example:
* ```jsx
* <TabSelector
*   selectedChoice="option1"
*   onTabClick={(choice) => console.log(choice)}
*   hoverable={true}
* >
*   <Button key="option1"/>
*   <Button key="option2"/>
*   <Button key="option3"/>
* </TabSelector>
* ```
*/
const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColor.PRIMARY, hoverable = false, orientation = "horizontal", className }) => {
	const optionsRefs = useRef([]);
	const indicatorRef = useRef(null);
	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
		isHoverable: hoverable,
		orientation
	});
	useEffect(() => {
		calculatePosition();
	}, [selectedChoice, tabs]);
	return /* @__PURE__ */ jsxs("div", {
		className: cn(tabSelectorVariant({ color }), className),
		"aria-orientation": orientation,
		"aria-multiselectable": "false",
		role: "tablist",
		children: [tabs.map((Tab, index) => {
			const key = Tab.key;
			const isSelected = selectedChoice === key;
			return cloneElement(Tab, {
				key: key ?? index,
				role: "tab",
				onClick: (e) => {
					Tab.props?.onClick?.(e);
					onTabClick?.(key);
				},
				"aria-selected": isSelected,
				"data-active": isSelected,
				tabIndex: isSelected ? 0 : -1,
				ref: (el) => {
					optionsRefs.current[index] = el;
				}
			});
		}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
			className: cn(indicatorVariant({
				color,
				orientation
			})),
			style: choiceIndicatorPosition,
			ref: indicatorRef
		}, `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`)]
	});
};

//#endregion
export { TabSelector, TabSelectorColor };
//# sourceMappingURL=TabSelector.mjs.map