'use client';


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

//#region src/components/SwitchSelector/index.tsx
const defaultChoices = [{
	content: "Off",
	value: false
}, {
	content: "On",
	value: true
}];
/**
* Color variants for the SwitchSelector component
*
* @enum SwitchSelectorColor
*/
let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor$1) {
	/** Primary brand color theme */
	SwitchSelectorColor$1["PRIMARY"] = "primary";
	/** Secondary accent color theme */
	SwitchSelectorColor$1["SECONDARY"] = "secondary";
	/** Destructive/error color theme for dangerous actions */
	SwitchSelectorColor$1["DESTRUCTIVE"] = "destructive";
	/** Neutral gray color theme */
	SwitchSelectorColor$1["NEUTRAL"] = "neutral";
	/** Light color theme for dark backgrounds */
	SwitchSelectorColor$1["LIGHT"] = "light";
	/** Dark color theme for light backgrounds */
	SwitchSelectorColor$1["DARK"] = "dark";
	/** Text color theme that adapts to content */
	SwitchSelectorColor$1["TEXT"] = "text";
	return SwitchSelectorColor$1;
}({});
const switchSelectorVariant = cva("flex w-fit flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]", {
	variants: { color: {
		[SwitchSelectorColor.PRIMARY]: "border-primary text-primary",
		[SwitchSelectorColor.SECONDARY]: "border-secondary text-secondary",
		[SwitchSelectorColor.DESTRUCTIVE]: "border-destructive bg-destructive text-destructive",
		[SwitchSelectorColor.NEUTRAL]: "border-neutral text-neutral",
		[SwitchSelectorColor.LIGHT]: "border-white text-white",
		[SwitchSelectorColor.DARK]: "border-neutral-800 text-neutral-800",
		[SwitchSelectorColor.TEXT]: "border-text text-text"
	} },
	defaultVariants: { color: SwitchSelectorColor.PRIMARY }
});
/**
* Size variants for the SwitchSelector component
*
* @enum SwitchSelectorSize
*/
let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize$1) {
	/** Small size - compact for tight layouts */
	SwitchSelectorSize$1["SM"] = "sm";
	/** Medium size - standard for most use cases */
	SwitchSelectorSize$1["MD"] = "md";
	/** Large size - prominent for important selections */
	SwitchSelectorSize$1["LG"] = "lg";
	return SwitchSelectorSize$1;
}({});
const choiceVariant = cva("z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none", {
	variants: { size: {
		[SwitchSelectorSize.SM]: "px-2 py-1 text-xs",
		[SwitchSelectorSize.MD]: "p-2 text-sm",
		[SwitchSelectorSize.LG]: "p-4 text-base"
	} },
	defaultVariants: { size: SwitchSelectorSize.MD }
});
const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
	[SwitchSelectorColor.PRIMARY]: "bg-primary aria-selected:text-text",
	[SwitchSelectorColor.SECONDARY]: "bg-secondary aria-selected:text-text",
	[SwitchSelectorColor.DESTRUCTIVE]: "bg-destructive aria-selected:text-text",
	[SwitchSelectorColor.NEUTRAL]: "bg-neutral aria-selected:text-white",
	[SwitchSelectorColor.LIGHT]: "bg-white aria-selected:text-black",
	[SwitchSelectorColor.DARK]: "bg-neutral-800 aria-selected:text-white",
	[SwitchSelectorColor.TEXT]: "bg-text aria-selected:text-text-opposite"
} } });
/**
* SwitchSelector - A versatile toggle component for multi-option selection
*
* A sophisticated switch selector component that provides an elegant way to choose between
* multiple options with smooth animations and visual feedback. Built with accessibility
* in mind, it supports keyboard navigation and screen reader announcements.
*
* ## Key Features
* - **Smooth Animations**: Fluid indicator transitions between options
* - **Accessible**: Full keyboard navigation and ARIA support
* - **Flexible Styling**: Multiple color themes and size variants
* - **Generic Types**: Type-safe values with TypeScript generics
* - **Controlled/Uncontrolled**: Supports both usage patterns
* - **Custom Content**: Rich content support including icons and text
*
* ## Use Cases
* - Settings toggles (On/Off, Light/Dark theme)
* - Status selectors (Draft/Published/Archived)
* - View mode switches (List/Grid/Card)
* - Filter options (All/Active/Completed)
* - Language or region selection
* - Any multi-option toggle interface
*
* ## Accessibility
* - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options
* - **Screen Readers**: Proper ARIA labels and role attributes
* - **Focus Management**: Clear visual focus indicators
* - **State Announcements**: Selection changes announced to assistive technology
*
* ## Visual Design
* The component features a pill-shaped container with individual choice buttons.
* A smooth-sliding background indicator highlights the active selection, creating
* an intuitive and polished user experience.
*
* @template T - The type of values for the choices (string, number, boolean, etc.)
*
* @example
* Basic boolean toggle:
* ```tsx
* <SwitchSelector
*   defaultValue={false}
*   onChange={(value) => setEnabled(value)}
* />
* ```
*
* @example
* Multi-option selector with custom content:
* ```tsx
* <SwitchSelector
*   choices={[
*     { content: <>📝 Draft</>, value: 'draft' },
*     { content: <>✅ Published</>, value: 'published' },
*     { content: <>📦 Archived</>, value: 'archived' }
*   ]}
*   value={currentStatus}
*   onChange={setStatus}
*   color={SwitchSelectorColor.SECONDARY}
*   size={SwitchSelectorSize.LG}
* />
* ```
*
* @example
* View mode switcher:
* ```tsx
* <SwitchSelector
*   choices={[
*     { content: 'List', value: 'list' },
*     { content: 'Grid', value: 'grid' },
*     { content: 'Card', value: 'card' }
*   ]}
*   defaultValue="grid"
*   color={SwitchSelectorColor.NEUTRAL}
*   onChange={(view) => setViewMode(view)}
* />
* ```
*
* @example
* Theme selector with icons:
* ```tsx
* <SwitchSelector
*   choices={[
*     { content: <>☀️ Light</>, value: 'light' },
*     { content: <>🌙 Dark</>, value: 'dark' },
*     { content: <>⚙️ System</>, value: 'system' }
*   ]}
*   value={theme}
*   onChange={setTheme}
*   size={SwitchSelectorSize.SM}
* />
* ```
*/
const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = SwitchSelectorColor.PRIMARY, size = SwitchSelectorSize.MD, className }) => {
	const [valueState, setValue] = useState(value ?? defaultValue ?? choices[0].value);
	const optionsRefs = useRef([]);
	const indicatorRef = useRef(null);
	const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
	const handleChange = (newValue) => {
		setValue(newValue);
		onChange?.(newValue);
	};
	useEffect(() => {
		if (value === void 0) return;
		setValue(value);
	}, [value]);
	return /* @__PURE__ */ jsx("div", {
		className: switchSelectorVariant({
			color,
			className
		}),
		role: "tablist",
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative flex size-full flex-row items-center justify-center",
			children: [choices.map((choice, index) => {
				const { content, value: value$1,...buttonProps } = choice;
				const isKeyOfKey = typeof value$1 === "string" || typeof value$1 === "number";
				const isSelected = value$1 === valueState;
				return /* @__PURE__ */ createElement("button", {
					...buttonProps,
					className: cn(choiceVariant({ size })),
					key: isKeyOfKey ? value$1 : index,
					role: "tab",
					onClick: () => handleChange(value$1),
					"aria-selected": isSelected,
					disabled: isSelected,
					ref: (el) => {
						optionsRefs.current[index] = el;
					}
				}, content);
			}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
				className: cn(indicatorVariant({ color })),
				style: choiceIndicatorPosition,
				ref: indicatorRef
			})]
		})
	});
};

//#endregion
export { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize };
//# sourceMappingURL=index.mjs.map