"use client";
import { cn } from "./index3.js";
import { hasFieldProps, splitFieldProps } from "./index20.js";
import { FieldBottom, FieldDescription, FieldError, useFieldControlProps } from "./index22.js";
import { ColorDot, FeaturedIcon, SelectionIndicator, selectionColorClasses, selectionGroupVariants, textSizeClasses, useSelectionState } 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/RadioGroup/RadioGroup.tsx
var CARD_TRANSITION = "transition-[border-color,background-color,box-shadow,transform] duration-150 motion-reduce:transition-none";
var RadioGroupItemRenderer = ({ item, name, checked, onChange, variant, size, color, filled, disabled }) => {
	const id = React.useId();
	const isDisabled = disabled || item.disabled;
	const textSizeClass = textSizeClasses[size];
	if (variant === "card") {
		const isLeadingImage = item.image && item.imagePosition === "left";
		const colors = selectionColorClasses[color];
		return /* @__PURE__ */ jsxs("label", {
			htmlFor: id,
			"data-slot": "radio-group-item",
			"data-variant": "card",
			className: cn("group relative flex items-center cursor-pointer", CARD_TRANSITION, "bg-card rounded-lg border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within: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 hover:-translate-y-px hover:shadow-sm", isLeadingImage && "overflow-hidden"),
			children: [
				/* @__PURE__ */ jsx("input", {
					type: "radio",
					id,
					name,
					value: item.value,
					disabled: isDisabled,
					checked,
					onChange,
					className: "sr-only peer"
				}),
				isLeadingImage && /* @__PURE__ */ jsx("img", {
					src: item.image,
					alt: item.imageAlt ?? "",
					className: "h-[68px] w-28 rounded-lg object-cover shrink-0"
				}),
				item.avatar && /* @__PURE__ */ jsx("div", {
					className: "shrink-0",
					children: item.avatar
				}),
				item.icon && !item.avatar && /* @__PURE__ */ jsx(FeaturedIcon, {
					size,
					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.subtext || item.description) && /* @__PURE__ */ jsx("span", {
						className: cn("text-muted-foreground select-none", textSizeClass),
						children: item.subtext || item.description
					})]
				}),
				item.image && item.imagePosition === "trailing" && /* @__PURE__ */ jsx("img", {
					src: item.image,
					alt: item.imageAlt ?? "",
					className: "h-5 w-auto object-contain shrink-0"
				}),
				/* @__PURE__ */ jsx(SelectionIndicator, {
					type: "radio",
					checked,
					size,
					color
				})
			]
		});
	}
	if (variant === "pill") {
		const colors = selectionColorClasses[color];
		return /* @__PURE__ */ jsxs("label", {
			htmlFor: id,
			"data-slot": "radio-group-item",
			"data-variant": "pill",
			className: cn("group inline-flex items-center gap-3 cursor-pointer rounded-full", CARD_TRANSITION, "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", size === "lg" ? "px-4 py-3" : "px-3 py-2.5", 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("input", {
					type: "radio",
					id,
					name,
					value: item.value,
					disabled: isDisabled,
					checked,
					onChange,
					className: "sr-only peer"
				}),
				/* @__PURE__ */ jsx(SelectionIndicator, {
					type: "radio",
					checked,
					size,
					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") {
		const colors = selectionColorClasses[color];
		return /* @__PURE__ */ jsxs("label", {
			htmlFor: id,
			"data-slot": "radio-group-item",
			"data-variant": "stacked",
			className: cn("group cursor-pointer", CARD_TRANSITION, "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", "rounded-xl overflow-hidden", isDisabled && "cursor-not-allowed opacity-50"),
			children: [
				/* @__PURE__ */ jsx("input", {
					type: "radio",
					id,
					name,
					value: item.value,
					disabled: isDisabled,
					checked,
					onChange,
					className: "sr-only peer"
				}),
				/* @__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: "radio",
						checked,
						size,
						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 === "simple") return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "simple",
		className: cn("group inline-flex items-start gap-3 cursor-pointer transition-colors motion-reduce:transition-none min-h-[44px]", "focus-within:outline-none", isDisabled && "cursor-not-allowed opacity-50"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsx(SelectionIndicator, {
				type: "radio",
				size,
				checked,
				color,
				disabled: isDisabled,
				className: "group-focus-within:ring-2 group-focus-within:ring-primary/20"
			}),
			/* @__PURE__ */ jsxs("span", {
				className: "flex flex-col gap-0.5",
				children: [/* @__PURE__ */ jsxs("span", {
					className: cn("font-medium text-foreground select-none", textSizeClass),
					children: [item.label, item.subtext && /* @__PURE__ */ jsx("span", {
						className: "text-muted-foreground font-normal ml-1",
						children: item.subtext
					})]
				}), item.description && /* @__PURE__ */ jsx("span", {
					className: cn("text-muted-foreground select-none", textSizeClass),
					children: item.description
				})]
			})
		]
	});
	if (variant === "chip") return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "chip",
		className: cn("group relative flex items-center cursor-pointer", CARD_TRANSITION, "bg-card rounded-xl border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within: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:-translate-y-px hover:shadow-sm"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-3 flex-1",
				children: [/* @__PURE__ */ jsx(ColorDot, {
					color: item.dotColor,
					size
				}), /* @__PURE__ */ jsxs("span", {
					className: cn("font-medium text-secondary-foreground select-none flex-1", item.subtext && "flex items-center justify-between", textSizeClass),
					children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.subtext && /* @__PURE__ */ jsx("span", {
						className: "text-muted-foreground font-normal",
						children: item.subtext
					})]
				})]
			}),
			/* @__PURE__ */ jsx(SelectionIndicator, {
				type: "radio",
				checked,
				size,
				color
			})
		]
	});
	if (variant === "icon-simple") return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "icon-simple",
		className: cn("relative flex items-start bg-background rounded-xl cursor-pointer", CARD_TRANSITION, "border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", "dark:bg-card", size === "lg" ? "p-5 gap-4" : "p-4 gap-3", checked ? "border-2 border-primary" : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:-translate-y-px hover:shadow-sm"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex gap-3 flex-1 items-start",
				children: [item.icon && /* @__PURE__ */ jsx(FeaturedIcon, {
					size,
					children: item.icon
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex-1 min-w-0",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-1 flex-wrap",
						children: [/* @__PURE__ */ jsx("span", {
							className: cn("font-medium text-secondary-foreground", textSizeClass),
							children: item.label
						}), item.subtext && /* @__PURE__ */ jsx("span", {
							className: cn("text-muted-foreground", textSizeClass),
							children: item.subtext
						})]
					}), item.description && /* @__PURE__ */ jsx("p", {
						className: cn("text-muted-foreground", textSizeClass),
						children: item.description
					})]
				})]
			}),
			/* @__PURE__ */ jsx("div", {
				className: "shrink-0 pt-0.5",
				children: /* @__PURE__ */ jsx(SelectionIndicator, {
					type: "radio",
					checked,
					size,
					color
				})
			})
		]
	});
	if (variant === "icon-card") {
		const colors = selectionColorClasses[color];
		return /* @__PURE__ */ jsxs("label", {
			htmlFor: id,
			"data-slot": "radio-group-item",
			"data-variant": "icon-card",
			className: cn("relative flex flex-col bg-background rounded-xl cursor-pointer", CARD_TRANSITION, "border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", "dark:bg-card", checked ? "border-2 border-primary" : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:-translate-y-px hover:shadow-sm"),
			children: [
				/* @__PURE__ */ jsx("input", {
					type: "radio",
					id,
					name,
					value: item.value,
					disabled: isDisabled,
					checked,
					onChange,
					className: "sr-only peer"
				}),
				/* @__PURE__ */ jsxs("div", {
					className: cn("flex items-center gap-1 w-full rounded-t-xl 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,
							children: item.icon
						}), /* @__PURE__ */ jsx("span", {
							className: "font-semibold text-secondary-foreground text-base leading-6",
							children: item.label
						})]
					}), /* @__PURE__ */ jsx(SelectionIndicator, {
						type: "radio",
						checked,
						size,
						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("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "avatar",
		className: cn("relative flex items-start bg-background rounded-xl cursor-pointer", CARD_TRANSITION, "border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", "dark:bg-card", size === "lg" ? "p-5 gap-4" : "p-4 gap-3", checked ? "border-2 border-primary" : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:-translate-y-px hover:shadow-sm"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex gap-3 flex-1 items-start",
				children: [item.avatar && /* @__PURE__ */ jsx("div", {
					className: "shrink-0",
					children: item.avatar
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex-1 min-w-0",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-1 flex-wrap",
						children: [/* @__PURE__ */ jsx("span", {
							className: cn("font-medium text-secondary-foreground", textSizeClass),
							children: item.label
						}), item.subtext && /* @__PURE__ */ jsx("span", {
							className: cn("text-muted-foreground", textSizeClass),
							children: item.subtext
						})]
					}), item.description && /* @__PURE__ */ jsx("p", {
						className: cn("text-muted-foreground", textSizeClass),
						children: item.description
					})]
				})]
			}),
			/* @__PURE__ */ jsx("div", {
				className: "shrink-0 pt-0.5",
				children: /* @__PURE__ */ jsx(SelectionIndicator, {
					type: "radio",
					checked,
					size,
					color
				})
			})
		]
	});
	if (variant === "payment") return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "payment",
		className: cn("relative flex items-start bg-background rounded-xl cursor-pointer", CARD_TRANSITION, "border box-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2", "dark:bg-card", size === "lg" ? "p-5 gap-4" : "p-4 gap-3", checked ? "border-2 border-primary" : "border border-border", isDisabled && "cursor-not-allowed opacity-50", !isDisabled && !checked && "hover:-translate-y-px hover:shadow-sm"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex gap-3 flex-1 items-start",
				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", textSizeClass),
								children: item.label
							}), item.subtext && /* @__PURE__ */ jsx("span", {
								className: cn("text-muted-foreground", textSizeClass),
								children: item.subtext
							})]
						}),
						item.description && /* @__PURE__ */ jsx("p", {
							className: cn("text-muted-foreground", textSizeClass),
							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: "radio",
					checked,
					size,
					color
				})
			})
		]
	});
	return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		"data-slot": "radio-group-item",
		"data-variant": "default",
		className: cn("group inline-flex items-start gap-3 cursor-pointer transition-colors motion-reduce:transition-none min-h-[44px]", "focus-within:outline-none", isDisabled && "cursor-not-allowed opacity-50"),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				id,
				name,
				value: item.value,
				disabled: isDisabled,
				checked,
				onChange,
				className: "sr-only peer"
			}),
			/* @__PURE__ */ jsx(SelectionIndicator, {
				type: "radio",
				size,
				checked,
				color,
				disabled: isDisabled,
				className: cn(!checked && !isDisabled && "group-hover:border-primary", "group-focus-within:ring-2 group-focus-within:ring-primary/20")
			}),
			/* @__PURE__ */ jsxs("span", {
				className: "flex flex-col gap-0.5",
				children: [/* @__PURE__ */ jsxs("span", {
					className: cn("font-medium text-foreground select-none", textSizeClass),
					children: [item.label, item.subtext && /* @__PURE__ */ jsx("span", {
						className: "text-muted-foreground font-normal ml-1",
						children: item.subtext
					})]
				}), item.description && /* @__PURE__ */ jsx("span", {
					className: cn("text-muted-foreground select-none", textSizeClass),
					children: item.description
				})]
			})
		]
	});
};
RadioGroupItemRenderer.displayName = "RadioGroupItemRenderer";
var RadioGroupControl = React.forwardRef(({ className, items, value, defaultValue, onValueChange, variant = "default", size = "sm", orientation = "horizontal", gap = "md", color = "primary", filled, disabled = false, required, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
	const [selectedValue, setSelectedValue] = useSelectionState({
		value,
		defaultValue,
		onValueChange
	});
	const generatedName = React.useId();
	const groupName = name ?? generatedName;
	const fieldControlProps = useFieldControlProps();
	const effectiveColor = fieldControlProps.state === "destructive" ? "destructive" : color;
	const effectiveOrientation = variant === "stacked" ? "vertical" : orientation;
	return /* @__PURE__ */ jsx("div", {
		ref,
		role: "radiogroup",
		"data-slot": "radio-group",
		"data-variant": variant,
		"aria-label": ariaLabel,
		"aria-labelledby": ariaLabelledBy,
		"aria-invalid": fieldControlProps["aria-invalid"],
		"aria-describedby": fieldControlProps["aria-describedby"],
		"aria-required": required || void 0,
		className: cn(selectionGroupVariants({
			orientation: effectiveOrientation,
			gap
		}), className),
		...props,
		children: items.map((item) => /* @__PURE__ */ jsx(RadioGroupItemRenderer, {
			item,
			name: groupName,
			checked: selectedValue === item.value,
			onChange: () => setSelectedValue(item.value),
			variant,
			size,
			color: effectiveColor,
			filled,
			disabled
		}, item.value))
	});
});
RadioGroupControl.displayName = "RadioGroupControl";
var RadioGroup = React.forwardRef((props, ref) => {
	const [fieldPropsObj, controlProps] = splitFieldProps(props);
	const requiredProp = fieldPropsObj.required;
	if (!hasFieldProps(fieldPropsObj)) return /* @__PURE__ */ jsx(RadioGroupControl, {
		ref,
		required: requiredProp,
		...controlProps
	});
	const { label, description, error, fieldClassName } = fieldPropsObj;
	return /* @__PURE__ */ jsxs(Fieldset, {
		legend: label,
		className: fieldClassName,
		children: [/* @__PURE__ */ jsx(RadioGroupControl, {
			ref,
			required: requiredProp,
			...controlProps
		}), (error || description) && /* @__PURE__ */ jsxs(FieldBottom, { children: [error && /* @__PURE__ */ jsx(FieldError, { children: error }), !error && description && /* @__PURE__ */ jsx(FieldDescription, { children: description })] })]
	});
});
RadioGroup.displayName = "RadioGroup";
//#endregion
export { RadioGroup };

//# sourceMappingURL=index31.js.map