"use client";
import { cn } from "./index3.js";
import { hasFieldProps, splitFieldProps } from "./index20.js";
import { FieldBottom, FieldDescription, FieldError, useFieldContextOptional } from "./index22.js";
import { ColorDot, FeaturedIcon, SelectionIndicator, selectionColorClasses, selectionGroupVariants, textSizeClasses, useMultiSelectionState } from "./index23.js";
import { Fieldset } from "./index26.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/atoms/forms/CheckboxGroup/CheckboxGroup.tsx
function CheckboxGroupItemRenderer({ item, checked, disabled, variant, size, color, filled, hasError, onToggle }) {
	const isDisabled = disabled || item.disabled;
	const colors = selectionColorClasses[color];
	const textSizeClass = textSizeClasses[size];
	const commonProps = {
		type: "button",
		role: "checkbox",
		"aria-checked": checked,
		disabled: isDisabled || void 0,
		onClick: () => onToggle(!checked)
	};
	if (variant === "default" || variant === "simple") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": variant,
		className: cn("group inline-flex items-start gap-3 text-left cursor-pointer transition-colors bg-transparent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 rounded", isDisabled && "cursor-not-allowed opacity-50"),
		children: [/* @__PURE__ */ jsx(SelectionIndicator, {
			type: "checkbox",
			checked,
			disabled: isDisabled,
			size,
			color: hasError ? "destructive" : color,
			className: cn(!checked && !isDisabled && "group-hover:border-primary")
		}), /* @__PURE__ */ jsxs("span", {
			className: "flex flex-col gap-0.5",
			children: [/* @__PURE__ */ jsxs("span", {
				className: "flex items-center gap-2",
				children: [/* @__PURE__ */ jsx("span", {
					className: cn("font-medium text-foreground select-none", textSizeClass),
					children: item.label
				}), item.subtext && /* @__PURE__ */ jsx("span", {
					className: cn("text-muted-foreground select-none", textSizeClass),
					children: item.subtext
				})]
			}), item.description && /* @__PURE__ */ jsx("span", {
				className: cn("text-muted-foreground select-none", textSizeClass),
				children: item.description
			})]
		})]
	});
	if (variant === "card") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "card",
		className: cn("group relative flex items-center text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-lg border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", size === "lg" ? "p-4 gap-4" : "p-3 gap-3", checked ? cn("border-2", colors.border) : "border border-border", filled && "bg-muted/50", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [
			item.avatar && /* @__PURE__ */ jsx("div", {
				className: "shrink-0",
				children: item.avatar
			}),
			item.icon && !item.avatar && /* @__PURE__ */ jsx(FeaturedIcon, {
				size: size === "lg" ? "md" : "sm",
				children: item.icon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex-1 flex flex-col gap-0.5 min-w-0",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-2",
					children: [/* @__PURE__ */ jsx("span", {
						className: cn("font-medium text-foreground select-none", textSizeClass),
						children: item.label
					}), item.badge]
				}), item.description && /* @__PURE__ */ jsx("span", {
					className: cn("text-muted-foreground select-none", textSizeClass),
					children: item.description
				})]
			}),
			item.image && item.imagePosition === "trailing" && /* @__PURE__ */ jsx("img", {
				src: item.image,
				alt: "",
				className: "h-5 w-auto object-contain shrink-0"
			}),
			/* @__PURE__ */ jsx(SelectionIndicator, {
				type: "checkbox",
				checked,
				disabled: isDisabled,
				size,
				color: hasError ? "destructive" : color
			})
		]
	});
	if (variant === "pill") {
		const paddingClass = size === "lg" ? "px-4 py-3" : "px-3 py-2.5";
		return /* @__PURE__ */ jsxs("button", {
			...commonProps,
			"data-slot": "checkbox-group-item",
			"data-variant": "pill",
			className: cn("group inline-flex items-center gap-3 cursor-pointer transition-all rounded-full delight-selection-press", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", paddingClass, checked ? cn(colors.bg, colors.text) : "bg-background border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
			children: [/* @__PURE__ */ jsx(SelectionIndicator, {
				type: "checkbox",
				checked,
				disabled: isDisabled,
				size,
				color: hasError ? "destructive" : color,
				className: checked ? "bg-white/20 border-transparent" : void 0
			}), /* @__PURE__ */ jsx("span", {
				className: cn("font-medium select-none", textSizeClass),
				children: item.label
			})]
		});
	}
	if (variant === "stacked") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "stacked",
		className: cn("group w-full text-left cursor-pointer transition-all delight-selection-press", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", "rounded-xl overflow-hidden", isDisabled && "cursor-not-allowed opacity-50"),
		children: [/* @__PURE__ */ jsxs("div", {
			className: cn("flex items-center justify-between p-3 bg-background border", checked ? cn("border-2", colors.border) : "border-border", "rounded-t-xl", !item.description && "rounded-b-xl"),
			children: [/* @__PURE__ */ jsx("span", {
				className: cn("font-medium text-foreground select-none", textSizeClass),
				children: item.label
			}), /* @__PURE__ */ jsx(SelectionIndicator, {
				type: "checkbox",
				checked,
				disabled: isDisabled,
				size,
				color: hasError ? "destructive" : color
			})]
		}), item.description && /* @__PURE__ */ jsx("div", {
			className: cn("p-3 bg-background border border-t-0", checked ? cn("border-2 border-t-0", colors.border) : "border-border", "rounded-b-xl"),
			children: /* @__PURE__ */ jsx("span", {
				className: cn("text-muted-foreground select-none", textSizeClass),
				children: item.description
			})
		})]
	});
	if (variant === "chip") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "chip",
		className: cn("group relative flex items-center text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", size === "lg" ? "py-3 px-4 gap-4" : size === "md" ? "py-2 px-4 gap-3" : "py-1.5 px-3 gap-2.5", checked ? "border-2 border-primary" : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-3 flex-1",
			children: [/* @__PURE__ */ jsx(ColorDot, {
				color: item.dotColor,
				size
			}), /* @__PURE__ */ jsx("span", {
				className: cn("font-medium text-secondary-foreground select-none flex-1", textSizeClass),
				children: item.label
			})]
		}), /* @__PURE__ */ jsx(SelectionIndicator, {
			type: "checkbox",
			checked,
			disabled: isDisabled,
			size,
			color: hasError ? "destructive" : color
		})]
	});
	if (variant === "icon-simple") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "icon-simple",
		className: cn("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", size === "lg" ? "p-4 gap-4" : "p-4 gap-3", checked ? cn("border-2", colors.border) : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [
			item.icon && /* @__PURE__ */ jsx(FeaturedIcon, {
				size: size === "lg" ? "md" : "sm",
				children: item.icon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex-1 min-w-0 space-y-0",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-1 flex-wrap",
					children: [/* @__PURE__ */ jsx("span", {
						className: cn("font-medium text-secondary-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
						children: item.label
					}), item.subtext && /* @__PURE__ */ jsx("span", {
						className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
						children: item.subtext
					})]
				}), item.description && /* @__PURE__ */ jsx("p", {
					className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
					children: item.description
				})]
			}),
			/* @__PURE__ */ jsx("div", {
				className: "shrink-0 pt-0.5",
				children: /* @__PURE__ */ jsx(SelectionIndicator, {
					type: "checkbox",
					checked,
					disabled: isDisabled,
					size,
					color: hasError ? "destructive" : color
				})
			})
		]
	});
	if (variant === "icon-card") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "icon-card",
		className: cn("group relative flex flex-col text-left cursor-pointer transition-all delight-selection-press", "bg-background rounded-xl border box-border overflow-hidden", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", checked ? cn("border-2", colors.border) : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [/* @__PURE__ */ jsxs("div", {
			className: cn("flex items-center gap-1 w-full border-b px-3 py-3", checked ? colors.border : "border-border"),
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-3 flex-1",
				children: [item.icon && /* @__PURE__ */ jsx(FeaturedIcon, {
					size: size === "lg" ? "md" : "sm",
					children: item.icon
				}), /* @__PURE__ */ jsx("span", {
					className: "font-semibold text-secondary-foreground text-base leading-6",
					children: item.label
				})]
			}), /* @__PURE__ */ jsx(SelectionIndicator, {
				type: "checkbox",
				checked,
				disabled: isDisabled,
				size,
				color: hasError ? "destructive" : color
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: "p-4 w-full",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex items-start gap-1",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex-1 space-y-1",
					children: [item.price && /* @__PURE__ */ jsxs("div", {
						className: "flex items-end gap-1",
						children: [/* @__PURE__ */ jsx("span", {
							className: "text-display-sm font-semibold text-secondary-foreground",
							children: item.price
						}), item.pricePeriod && /* @__PURE__ */ jsx("span", {
							className: "text-sm text-muted-foreground pb-[3px]",
							children: item.pricePeriod
						})]
					}), item.description && /* @__PURE__ */ jsx("p", {
						className: "text-sm text-muted-foreground leading-5",
						children: item.description
					})]
				}), item.badge]
			})
		})]
	});
	if (variant === "avatar") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "avatar",
		className: cn("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", size === "lg" ? "p-4 gap-4" : "p-4 gap-3", checked ? cn("border-2", colors.border) : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [
			item.avatar && /* @__PURE__ */ jsx("div", {
				className: "shrink-0",
				children: item.avatar
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex-1 min-w-0 space-y-0",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-1 flex-wrap",
					children: [/* @__PURE__ */ jsx("span", {
						className: cn("font-medium text-secondary-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
						children: item.label
					}), item.subtext && /* @__PURE__ */ jsx("span", {
						className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
						children: item.subtext
					})]
				}), item.description && /* @__PURE__ */ jsx("p", {
					className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
					children: item.description
				})]
			}),
			/* @__PURE__ */ jsx("div", {
				className: "shrink-0 pt-0.5",
				children: /* @__PURE__ */ jsx(SelectionIndicator, {
					type: "checkbox",
					checked,
					disabled: isDisabled,
					size,
					color: hasError ? "destructive" : color
				})
			})
		]
	});
	if (variant === "payment") return /* @__PURE__ */ jsxs("button", {
		...commonProps,
		"data-slot": "checkbox-group-item",
		"data-variant": "payment",
		className: cn("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", size === "lg" ? "p-4 gap-4" : "p-4 gap-3", checked ? cn("border-2", colors.border) : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:border-muted-foreground/30"),
		children: [
			item.paymentIcon && /* @__PURE__ */ jsx("div", {
				className: "shrink-0 w-[46px] h-8 rounded border border-border bg-background flex items-center justify-center overflow-hidden",
				children: item.paymentIcon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex-1 min-w-0 space-y-2",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-1 flex-wrap",
						children: [/* @__PURE__ */ jsx("span", {
							className: cn("font-medium text-secondary-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
							children: item.label
						}), item.subtext && /* @__PURE__ */ jsx("span", {
							className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
							children: item.subtext
						})]
					}),
					item.description && /* @__PURE__ */ jsx("p", {
						className: cn("text-muted-foreground", size === "lg" ? "text-base leading-6" : "text-sm leading-5"),
						children: item.description
					}),
					item.actions && /* @__PURE__ */ jsx("div", {
						className: "flex items-center gap-3",
						children: item.actions
					})
				]
			}),
			/* @__PURE__ */ jsx("div", {
				className: "shrink-0 pt-0.5",
				children: /* @__PURE__ */ jsx(SelectionIndicator, {
					type: "checkbox",
					checked,
					disabled: isDisabled,
					size,
					color: hasError ? "destructive" : color
				})
			})
		]
	});
	return null;
}
var CheckboxGroupControl = React.forwardRef(({ className, items, value, defaultValue, onValueChange, variant = "default", size = "sm", orientation = "horizontal", gap = "md", color = "primary", filled = false, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
	const [selectedValues, setValue] = useMultiSelectionState({
		value,
		defaultValue,
		onValueChange
	});
	const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
	const hasError = useFieldContextOptional()?.state === "destructive";
	return /* @__PURE__ */ jsx("div", {
		ref,
		role: "group",
		"data-slot": "checkbox-group",
		"data-variant": variant,
		"aria-label": ariaLabel,
		"aria-labelledby": ariaLabelledBy,
		className: cn(selectionGroupVariants({
			orientation: variant === "stacked" ? "vertical" : orientation,
			gap
		}), className),
		...props,
		children: items.map((item) => /* @__PURE__ */ jsx(CheckboxGroupItemRenderer, {
			item,
			checked: selectedSet.has(item.value),
			disabled,
			variant,
			size,
			color,
			filled,
			hasError,
			onToggle: (checked) => setValue(item.value, checked)
		}, item.value))
	});
});
CheckboxGroupControl.displayName = "CheckboxGroupControl";
var CheckboxGroup = React.forwardRef((props, ref) => {
	const [fieldPropsObj, controlProps] = splitFieldProps(props);
	if (!hasFieldProps(fieldPropsObj)) return /* @__PURE__ */ jsx(CheckboxGroupControl, {
		ref,
		...controlProps
	});
	const { label, description, error, fieldClassName } = fieldPropsObj;
	return /* @__PURE__ */ jsxs(Fieldset, {
		legend: label,
		className: fieldClassName,
		children: [/* @__PURE__ */ jsx(CheckboxGroupControl, {
			ref,
			...controlProps
		}), (error || description) && /* @__PURE__ */ jsxs(FieldBottom, { children: [error && /* @__PURE__ */ jsx(FieldError, { children: error }), !error && description && /* @__PURE__ */ jsx(FieldDescription, { children: description })] })]
	});
});
CheckboxGroup.displayName = "CheckboxGroup";
//#endregion
export { CheckboxGroup };

//# sourceMappingURL=index27.js.map