'use client';


import { cn } from "../../utils/cn.mjs";
import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
import { useTabContext } from "./TabContext.mjs";
import { Children, createContext, isValidElement, useState } from "react";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Tab/Tab.tsx
const TabContext = createContext(void 0);
const tabContainerVariant = cva("relative w-full rounded-lg border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", {
	variants: { variant: {
		default: "",
		bordered: "border-2",
		ghost: "border-0 bg-transparent shadow-none"
	} },
	defaultVariants: { variant: "default" }
});
/**
* TabItem component that represents a single tab
* Must be used as a child of the Tab component
*/
const TabItem = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
	...props,
	children
});
TabItem.displayName = "TabItem";
/**
* Tab container component that manages tab state and renders tab headers and content
*
* Example:
* ```jsx
* <Tab defaultTab="tab1">
*   <Tab.Item label="First Tab" value="tab1">
*     Content for first tab
*   </Tab.Item>
*   <Tab.Item label="Second Tab" value="tab2">
*     Content for second tab
*   </Tab.Item>
* </Tab>
* ```
*/
const TabComponent = ({ defaultTab, group, variant, children, className,...props }) => {
	const tabItems = Children.toArray(children).filter((child) => {
		return isValidElement(child) && child.type === TabItem;
	});
	const firstTabValue = tabItems[0]?.props?.value;
	const { tabsValues, setTabsValues } = useTabContext();
	const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? "");
	const currentTabValue = (group && typeof tabsValues === "object" ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;
	const activeTabIndex = tabItems.findIndex((tab) => tab.props.value === currentTabValue);
	const tabsCount = tabItems.length;
	const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({
		itemIndex: activeTabIndex,
		itemCount: tabsCount,
		onSwipeLeft: () => {
			const nextValue = tabItems[Math.min(tabsCount - 1, activeTabIndex + 1)]?.props?.value;
			if (nextValue) handleSetActiveTab(nextValue);
		},
		onSwipeRight: () => {
			const nextValue = tabItems[Math.max(0, activeTabIndex - 1)]?.props?.value;
			if (nextValue) handleSetActiveTab(nextValue);
		}
	});
	const handleSetActiveTab = (tab) => {
		setActiveTab(tab);
		if (typeof setTabsValues === "function") setTabsValues((prev) => ({
			...prev,
			[group]: tab
		}));
	};
	const contextValue = {
		activeTab: activeTab ?? firstTabValue ?? "",
		setActiveTab: handleSetActiveTab
	};
	return /* @__PURE__ */ jsx(TabContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsxs("div", {
			className: cn(tabContainerVariant({ variant }), className),
			...props,
			children: [/* @__PURE__ */ jsx("div", {
				className: "sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur",
				children: /* @__PURE__ */ jsx(TabSelector, {
					selectedChoice: currentTabValue,
					tabs: tabItems.map((child) => {
						const { label, value, disabled } = child.props;
						const isActive = currentTabValue === value;
						return /* @__PURE__ */ jsx("button", {
							className: cn("cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none", !isActive && "text-neutral/70"),
							"data-active": isActive,
							disabled,
							onClick: () => !disabled && handleSetActiveTab(value),
							role: "tab",
							"aria-selected": isActive,
							"aria-controls": `tabpanel-${value}`,
							id: `tab-${value}`,
							children: label
						}, value);
					}),
					hoverable: true,
					color: TabSelectorColor.TEXT
				})
			}), /* @__PURE__ */ jsx("div", {
				className: "relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]",
				...containerProps,
				children: /* @__PURE__ */ jsx("div", {
					role: "tablist",
					"aria-orientation": "horizontal",
					className: cn("grid w-full min-w-0", isDragging ? "transition-none" : "transition-transform duration-300 ease-in-out"),
					style: {
						gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,
						transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`
					},
					children: tabItems.map(({ props: props$1 }, index) => {
						const { value, children: children$1 } = props$1;
						const isActive = index === activeTabIndex;
						return /* @__PURE__ */ jsx("div", {
							role: "tabpanel",
							"aria-labelledby": `tab-${value}`,
							id: `tabpanel-${value}`,
							"aria-hidden": !isActive,
							tabIndex: isActive ? 0 : -1,
							"data-active": isActive,
							className: cn("w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out", !isActive && "pointer-events-none opacity-0"),
							children: /* @__PURE__ */ jsx("div", {
								className: "flex w-full min-w-0 flex-col items-stretch gap-6",
								children: children$1
							})
						}, value);
					})
				})
			})]
		})
	});
};
const Tab = Object.assign(TabComponent, { Item: TabItem });

//#endregion
export { Tab };
//# sourceMappingURL=Tab.mjs.map