import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../scalars/lib/utils.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/form-label.js';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import React, { useId } from 'react';
const Radio = React.forwardRef(({ className, description, disabled = false, hasError = false, id: propId, label, value, ...props }, ref) => {
    const prefix = useId();
    const id = propId ?? `${prefix}-radio`;
    return (_jsxs(_Fragment, { children: [_jsx(RadioGroupPrimitive.Item, { "aria-disabled": disabled, "aria-invalid": hasError, className: cn('group peer', 'aspect-square size-4 rounded-full border border-gray-800 dark:border-gray-400', 'hover:border-gray-900 dark:hover:border-gray-50', disabled && [
                    'cursor-not-allowed border-gray-600 hover:border-gray-600',
                    'dark:border-gray-600 dark:hover:border-gray-600',
                ], hasError && ['border-red-700 hover:border-red-900', 'dark:border-red-700 dark:hover:border-red-900'], className), disabled: disabled, id: id, value: value, ...props, ref: ref, children: _jsx(RadioGroupPrimitive.Indicator, { className: cn('relative flex size-full items-center justify-center', 'after:absolute after:left-1/2 after:top-1/2 after:size-2.5', 'after:-translate-x-1/2 after:-translate-y-1/2', "after:rounded-full after:bg-gray-800 after:content-['']", 'dark:after:bg-gray-400', !disabled && ['group-hover:after:bg-gray-900', 'dark:group-hover:after:bg-gray-50'], disabled && ['after:bg-gray-600', 'dark:after:bg-gray-600']) }) }), _jsx(FormLabel, { className: cn(!disabled && !hasError && ['cursor-pointer', 'peer-hover:text-gray-900 dark:peer-hover:text-gray-50']), description: description, disabled: disabled, hasError: hasError, htmlFor: id, required: props.required, inline: true, children: label })] }));
});
Radio.displayName = 'Radio';
export { Radio };
//# sourceMappingURL=radio.js.map