/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/forms/RadioGroup/RadioGroup.tsx
/**
* RadioGroup component for selecting a single option from a list
*
* @example
* ```tsx
* <RadioGroup
*   name="shipping"
*   value={selectedShipping}
*   onChange={setSelectedShipping}
*   options={[
*     { value: 'standard', label: 'Standard Shipping', price: '59 kr' },
*     { value: 'express', label: 'Express Shipping', price: '99 kr' },
*     { value: 'pickup', label: 'Store Pickup', price: 'Free' },
*   ]}
* />
* ```
*/
function RadioGroup({ name, value, onChange, options, label, error, className = "", disabled = false }) {
	return /* @__PURE__ */ jsxs("div", {
		className,
		children: [
			label && /* @__PURE__ */ jsx("label", {
				className: "block text-sm font-medium text-(--text) mb-3",
				children: label
			}),
			/* @__PURE__ */ jsx("div", {
				className: "space-y-3",
				children: options.map((option) => {
					const isSelected = value === option.value;
					const isDisabled = disabled || option.disabled;
					return /* @__PURE__ */ jsxs("label", {
						className: `flex items-center justify-between p-4 rounded-lg border-2 cursor-pointer transition-colors ${isSelected ? "border-(--primary) bg-(--primary) text-(--text-on-primary)" : "border-border-1 hover:border-border-2 hover:bg-card-hover"} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
						children: [/* @__PURE__ */ jsxs("div", {
							className: "flex-1 flex items-start gap-3",
							children: [/* @__PURE__ */ jsx("input", {
								type: "radio",
								name,
								value: option.value,
								checked: isSelected,
								onChange: (e) => !isDisabled && onChange(e.target.value),
								disabled: isDisabled,
								className: "mt-0.5 h-4 w-4 text-(--primary) focus:ring-2 focus:ring-(--focus-ring)"
							}), /* @__PURE__ */ jsxs("div", {
								className: "flex-1",
								children: [/* @__PURE__ */ jsx("span", {
									className: `block text-sm font-medium ${isSelected ? "text-(--text-on-primary)" : "text-(--text)"}`,
									children: option.label
								}), option.description && /* @__PURE__ */ jsx("span", {
									className: `block text-xs mt-1 ${isSelected ? "text-(--text-on-primary) opacity-80" : "text-(--text-subtle)"}`,
									children: option.description
								})]
							})]
						}), option.price && /* @__PURE__ */ jsx("span", {
							className: `text-sm font-semibold ml-3 ${isSelected ? "text-(--text-on-primary)" : "text-(--text)"}`,
							children: option.price
						})]
					}, option.value);
				})
			}),
			error && /* @__PURE__ */ jsx("p", {
				className: "mt-2 text-sm text-error-text",
				children: error
			})
		]
	});
}
//#endregion
export { RadioGroup };

//# sourceMappingURL=RadioGroup.js.map