import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { RadioGroup } from '@headlessui/react';
import clsx from 'clsx';
export function SelectStack({ onSelect, selected, options }) {
    return (_jsxs(RadioGroup, { value: selected, onChange: onSelect, children: [_jsx(RadioGroup.Label, { className: "sr-only", children: "Server size" }), _jsx("div", { className: "space-y-4", children: options.map((option) => (_jsx(RadioGroup.Option, { value: option, className: ({ active }) => clsx(active ? 'border-border ring-2 ring-ring' : 'border-border', 'relative block cursor-pointer rounded-lg border bg-accent px-6 py-4 shadow-2xs focus:outline-hidden sm:flex sm:justify-between'), children: ({ active, checked }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex items-center", children: _jsxs("span", { className: "flex flex-col text-sm", children: [_jsx(RadioGroup.Label, { as: "span", className: "font-medium text-text", children: option.label }), option.description &&
                                            _jsx(RadioGroup.Description, { as: "span", className: "text-muted-foreground", children: option.description })] }) }), _jsx("span", { className: clsx(active ? 'border' : 'border-2', checked ? 'border-accent-foreground' : 'border-transparent', 'pointer-events-none absolute -inset-px rounded-lg'), "aria-hidden": "true" })] })) }, option.id))) })] }));
}
//# sourceMappingURL=SelectStack.js.map