"use client";
import { cn } from "./index3.js";
import { useControllableState } from "./index11.js";
import { Badge } from "./index13.js";
import { tabsListVariants, tabsTriggerVariants } from "./index405.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tabs } from "@base-ui/react/tabs";
//#region src/components/molecules/navigation/Tabs/Tabs.tsx
/**
* Tabs Component
*
* A flexible tabs component with multiple visual variants.
*
* ## Variants
*
* Pass `variant` prop to `TabsList`:
*
* - **boxed** - Tabs with muted background container (default)
* - **pill** - Fully rounded tabs with muted background
* - **bordered** - Transparent background with bottom border indicator
* - **lifted** - Browser-tab style with active tab lifted above border
*
* ## Usage
*
* ```tsx
* // Boxed variant (default)
* <Tabs defaultValue="tab1">
*   <TabsList variant="boxed">
*     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
*   </TabsList>
* </Tabs>
*
* // Bordered variant with counts
* <Tabs defaultValue="all">
*   <TabsList variant="bordered">
*     <TabsTriggerWithCount value="all" count={5} isActive>All</TabsTriggerWithCount>
*     <TabsTriggerWithCount value="mine" count={3}>Mine</TabsTriggerWithCount>
*   </TabsList>
* </Tabs>
*
* // With icons
* <Tabs defaultValue="home">
*   <TabsList variant="boxed" size="md">
*     <TabsTrigger value="home" icon={<Home />}>Home</TabsTrigger>
*     <TabsTrigger value="settings" icon={<Settings />}>Settings</TabsTrigger>
*   </TabsList>
* </Tabs>
*
* // Pill variant with gradient
* <Tabs defaultValue="tab1">
*   <TabsList variant="pill" gradient>
*     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
*     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
*   </TabsList>
* </Tabs>
*
* // Animated indicator (smooth sliding underline)
* <Tabs defaultValue="tab1">
*   <TabsList variant="bordered">
*     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
*     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
*     <TabsIndicator />
*   </TabsList>
* </Tabs>
* ```
*
* @module Tabs
*/
function TabsRoot({ value: controlledValue, defaultValue, onValueChange, orientation = "horizontal", children, className, ...props }) {
	const [value, setValue] = useControllableState({
		value: controlledValue,
		defaultValue: defaultValue ?? "",
		onChange: onValueChange
	});
	const handleValueChange = React.useCallback((newValue) => {
		if (newValue !== null) setValue(newValue);
	}, [setValue]);
	return /* @__PURE__ */ jsx(Tabs.Root, {
		"data-slot": "tabs",
		"data-orientation": orientation,
		value,
		onValueChange: handleValueChange,
		className: cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className),
		...props,
		children
	});
}
function TabsList({ className, variant = "boxed", size = "md", align = "start", borderPosition = "bottom", gradient, ...props }) {
	return /* @__PURE__ */ jsx(Tabs.List, {
		"data-slot": "tabs-list",
		"data-variant": variant,
		"data-size": size,
		"data-align": align,
		"data-border-position": borderPosition,
		...gradient ? { "data-gradient": "" } : {},
		className: cn(tabsListVariants({
			variant,
			size,
			align,
			borderPosition
		}), className),
		...props
	});
}
function TabsTrigger({ className, icon, iconPosition = "start", dot, badge, children, ...props }) {
	const isIconOnly = icon && !children;
	return /* @__PURE__ */ jsxs(Tabs.Tab, {
		"data-slot": "tabs-trigger",
		"data-icon-position": iconPosition,
		"data-icon-only": isIconOnly || void 0,
		className: cn(tabsTriggerVariants(), iconPosition === "top" && "flex-col gap-1 pb-6", isIconOnly && "px-2", className),
		...props,
		children: [
			icon && /* @__PURE__ */ jsx("span", {
				"data-slot": "tabs-trigger-icon",
				className: cn("shrink-0 [&_svg:not([class*='size-'])]:size-4", iconPosition === "top" && "[&_svg:not([class*='size-'])]:size-[18px]"),
				children: icon
			}),
			children,
			badge,
			dot && /* @__PURE__ */ jsx("span", {
				"data-slot": "tabs-trigger-dot",
				className: "absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary delight-status-pulse"
			})
		]
	});
}
function TabsContent({ className, ...props }) {
	return /* @__PURE__ */ jsx(Tabs.Panel, {
		"data-slot": "tabs-content",
		className: cn("flex-1 focus-visible:outline-none delight-fade-in", className),
		...props
	});
}
/**
* Animated indicator that slides to the active tab position.
* Use with `variant="bordered"` on TabsList.
*
* @example
* ```tsx
* <TabsList variant="bordered">
*   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
*   <TabsTrigger value="tab2">Tab 2</TabsTrigger>
*   <TabsIndicator />
* </TabsList>
* ```
*/
function TabsIndicator({ className, ...props }) {
	return /* @__PURE__ */ jsx(Tabs.Indicator, {
		"data-slot": "tabs-indicator",
		className: cn("absolute bottom-0 left-0 h-0.5 z-10 bg-primary/90", "w-[var(--active-tab-width)]", "transition-[transform,width] duration-300 ease-smooth motion-reduce:transition-none", className),
		style: { transform: "translateX(var(--active-tab-left, 0px))" },
		...props
	});
}
/**
* Extended tab trigger with an optional count badge.
* Best used with the `bordered` variant for filter-style tabs.
*
* @example
* ```tsx
* <TabsList variant="bordered">
*   <TabsTriggerWithCount value="all" count={5} isActive>All Meetings</TabsTriggerWithCount>
*   <TabsTriggerWithCount value="my" count={4}>My Meetings</TabsTriggerWithCount>
*   <TabsTriggerWithCount value="shared" count={1}>Shared with me</TabsTriggerWithCount>
* </TabsList>
* ```
*/
function TabsTriggerWithCount({ children, count, isActive, className, ...props }) {
	return /* @__PURE__ */ jsxs(TabsTrigger, {
		className: cn("gap-2", className),
		...props,
		children: [children, count !== void 0 && /* @__PURE__ */ jsx(Badge, {
			variant: "soft",
			color: isActive ? "primary" : "secondary",
			size: "xs",
			className: "min-w-[18px]",
			children: count
		})]
	});
}
TabsRoot.displayName = "Tabs";
TabsList.displayName = "TabsList";
TabsTrigger.displayName = "TabsTrigger";
TabsContent.displayName = "TabsContent";
TabsIndicator.displayName = "TabsIndicator";
TabsTriggerWithCount.displayName = "TabsTriggerWithCount";
/**
* Tabs compound component with dot notation access to sub-components.
*
* @example
* ```tsx
* <Tabs defaultValue="tab1">
*   <Tabs.List>
*     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
*     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
*   </Tabs.List>
*   <Tabs.Content value="tab1">Content 1</Tabs.Content>
*   <Tabs.Content value="tab2">Content 2</Tabs.Content>
* </Tabs>
* ```
*/
var Tabs$1 = Object.assign(TabsRoot, {
	Root: TabsRoot,
	List: TabsList,
	Trigger: TabsTrigger,
	Content: TabsContent,
	Indicator: TabsIndicator,
	TriggerWithCount: TabsTriggerWithCount
});
//#endregion
export { Tabs$1 as Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, TabsTriggerWithCount };

//# sourceMappingURL=index406.js.map