"use client";
import { cn } from "./index3.js";
import { cva } from "class-variance-authority";
import { Minus } from "lucide-react";
import * as React from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/ui/selection-group.tsx
/**
* Hook for managing single selection state (radio behavior).
* Supports both controlled and uncontrolled modes.
*/
function useSelectionState(options = {}) {
	const { value: controlledValue, defaultValue, onValueChange } = options;
	const [internalValue, setInternalValue] = React.useState(defaultValue);
	const isControlled = controlledValue !== void 0;
	return [isControlled ? controlledValue : internalValue, React.useCallback((newValue) => {
		if (!isControlled) setInternalValue(newValue);
		onValueChange?.(newValue);
	}, [isControlled, onValueChange])];
}
/**
* Hook for managing multi selection state (checkbox behavior).
* Supports both controlled and uncontrolled modes.
*/
function useMultiSelectionState(options = {}) {
	const { value: controlledValue, defaultValue = [], onValueChange } = options;
	const [internalValue, setInternalValue] = React.useState(defaultValue);
	const isControlled = controlledValue !== void 0;
	const selectedValues = isControlled ? controlledValue : internalValue;
	return [selectedValues, React.useCallback((itemValue, checked) => {
		const newValue = checked ? [...selectedValues, itemValue] : selectedValues.filter((v) => v !== itemValue);
		if (!isControlled) setInternalValue(newValue);
		onValueChange?.(newValue);
	}, [
		isControlled,
		selectedValues,
		onValueChange
	])];
}
var selectionColorClasses = {
	primary: {
		indicator: "border-primary",
		indicatorChecked: "bg-primary",
		border: "border-primary",
		bg: "bg-primary",
		text: "text-primary-foreground"
	},
	secondary: {
		indicator: "border-secondary",
		indicatorChecked: "bg-secondary",
		border: "border-secondary",
		bg: "bg-secondary",
		text: "text-secondary-foreground"
	},
	success: {
		indicator: "border-success",
		indicatorChecked: "bg-success",
		border: "border-success",
		bg: "bg-success",
		text: "text-success-foreground"
	},
	warning: {
		indicator: "border-warning",
		indicatorChecked: "bg-warning",
		border: "border-warning",
		bg: "bg-warning",
		text: "text-warning-foreground"
	},
	info: {
		indicator: "border-info",
		indicatorChecked: "bg-info",
		border: "border-info",
		bg: "bg-info",
		text: "text-info-foreground"
	},
	destructive: {
		indicator: "border-destructive",
		indicatorChecked: "bg-destructive",
		border: "border-destructive",
		bg: "bg-destructive",
		text: "text-destructive-foreground"
	}
};
/**
* Selection group container variants.
* Used for the outer wrapper of a group of selection items.
*/
var selectionGroupVariants = cva("flex", {
	variants: {
		orientation: {
			horizontal: "flex-row flex-wrap",
			vertical: "flex-col"
		},
		gap: {
			sm: "gap-2",
			md: "gap-3",
			lg: "gap-4"
		}
	},
	defaultVariants: {
		orientation: "horizontal",
		gap: "md"
	}
});
/**
* Selection indicator variants (for both radio and checkbox).
* Renders as a rounded indicator with border.
*/
var selectionIndicatorVariants = cva("shrink-0 rounded-full border-2 transition-all flex items-center justify-center", {
	variants: { size: {
		sm: "size-4",
		md: "size-5",
		lg: "size-6"
	} },
	defaultVariants: { size: "sm" }
});
/**
* Checkbox indicator variants (square with rounded corners).
*/
var checkboxIndicatorVariants = cva("shrink-0 border transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center", {
	variants: { size: {
		sm: "size-4 rounded-[4px]",
		md: "size-5 rounded-[5px]",
		lg: "size-6 rounded-[6px]"
	} },
	defaultVariants: { size: "sm" }
});
/**
* Inner dot sizes for radio indicators when checked.
*/
var innerDotSizes = {
	sm: "size-1.5",
	md: "size-2",
	lg: "size-2.5"
};
/**
* Text size classes for selection labels.
*/
var textSizeClasses = {
	sm: "text-sm",
	md: "text-sm",
	lg: "text-base"
};
/**
* Icon size classes for checkbox indicators.
*/
var iconSizeClasses = {
	sm: "size-3",
	md: "size-3.5",
	lg: "size-4"
};
var CHECKMARK_PATH = "M4 12l5 5L20 6";
function DrawCheck({ className }) {
	return /* @__PURE__ */ jsx("svg", {
		viewBox: "0 0 24 24",
		fill: "none",
		stroke: "currentColor",
		strokeWidth: 3,
		strokeLinecap: "round",
		strokeLinejoin: "round",
		className: cn(className, "delight-check-draw"),
		children: /* @__PURE__ */ jsx("path", { d: CHECKMARK_PATH })
	});
}
/**
* SelectionIndicator renders either a checkbox or radio indicator based on type.
* For checkbox: renders a check icon when checked.
* For radio: renders an inner dot when checked.
*/
var SelectionIndicator = React.forwardRef(({ type, checked = false, disabled = false, size = "sm", color = "primary", className, indeterminate = false }, ref) => {
	const colors = selectionColorClasses[color];
	if (type === "checkbox") return /* @__PURE__ */ jsx("span", {
		ref,
		"data-slot": "selection-indicator",
		"data-type": "checkbox",
		"data-checked": checked,
		className: cn(checkboxIndicatorVariants({ size }), checked ? cn(colors.indicatorChecked, colors.border, colors.text, "border", "delight-check-bounce") : "border-border bg-background", disabled && "opacity-50", className),
		"aria-hidden": "true",
		children: checked && (indeterminate ? /* @__PURE__ */ jsx(Minus, {
			className: cn(iconSizeClasses[size], "animate-[scale-in_150ms_ease-out] motion-reduce:animate-none"),
			strokeWidth: 3
		}) : /* @__PURE__ */ jsx(DrawCheck, { className: iconSizeClasses[size] }))
	});
	return /* @__PURE__ */ jsx("span", {
		ref,
		"data-slot": "selection-indicator",
		"data-type": "radio",
		"data-checked": checked,
		className: cn(selectionIndicatorVariants({ size }), "transition-[background-color,border-color] duration-150 motion-reduce:transition-none", checked ? cn(colors.indicatorChecked, "border-transparent") : "border-border bg-background", disabled && "opacity-50", className),
		"aria-hidden": "true",
		children: /* @__PURE__ */ jsx("span", { className: cn("bg-primary-foreground rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none", innerDotSizes[size], checked ? "scale-100" : "scale-0") })
	});
});
SelectionIndicator.displayName = "SelectionIndicator";
var featuredIconContainerSizes = {
	sm: "size-8",
	md: "size-10",
	lg: "size-12"
};
var featuredIconInnerSizes = {
	sm: "size-4",
	md: "size-5",
	lg: "size-6"
};
/**
* FeaturedIcon is a container for icons with border and shadow.
* Used in icon-simple and icon-card variants.
*/
var FeaturedIcon = React.forwardRef(({ children, size = "sm", className }, ref) => {
	const containerSize = featuredIconContainerSizes[size];
	const innerSize = featuredIconInnerSizes[size];
	return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "featured-icon",
		className: cn("shrink-0 rounded-md border border-border bg-card/60", "flex items-center justify-center", "dark:bg-foreground/60 dark:border-border", containerSize, className),
		style: { boxShadow: "var(--shadow-inset-ring)" },
		children: /* @__PURE__ */ jsx("div", {
			className: cn("text-secondary-foreground dark:text-quaternary-foreground", innerSize),
			children
		})
	});
});
FeaturedIcon.displayName = "FeaturedIcon";
var dotColorMap = {
	gray: "bg-muted",
	orange: "bg-warning",
	red: "bg-destructive",
	darkRed: "bg-destructive-hover",
	brand: "bg-primary/10",
	success: "bg-success/10",
	warning: "bg-warning/10",
	error: "bg-destructive/10"
};
var dotSizeMap = {
	sm: "size-[10px]",
	md: "size-3",
	lg: "size-3.5"
};
/**
* ColorDot renders a colored dot for chip variant.
* Supports named colors (gray, orange, red, etc.) and hex colors.
*/
var ColorDot = React.forwardRef(({ color, size = "sm", className }, ref) => {
	if (!color) return null;
	const colorClass = dotColorMap[color];
	const isHexColor = color.startsWith("#");
	return /* @__PURE__ */ jsx("span", {
		ref,
		"data-slot": "color-dot",
		className: cn("shrink-0 rounded-full", dotSizeMap[size], !isHexColor && colorClass, className),
		style: isHexColor ? { backgroundColor: color } : void 0,
		"aria-hidden": "true"
	});
});
ColorDot.displayName = "ColorDot";
//#endregion
export { ColorDot, DrawCheck, FeaturedIcon, SelectionIndicator, selectionColorClasses, selectionGroupVariants, textSizeClasses, useMultiSelectionState, useSelectionState };

//# sourceMappingURL=index23.js.map