@octopusdeploy/design-system-components/dist/src/components/Form/Primitives/RadioInput.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.radioButtonSize = void 0;
exports.RadioInput = RadioInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * Internal radio input primitive. Split out from RadioButtonNew so other
 * design-system components (e.g. selectable cards) can build on the styled
 * radio input directly.
 *
 * This component is Intentionally not exported from the design system.
 * Consumers outside the design system should use RadioButtonNew (or other wrappers),
 * so that radios are never rendered without a proper label association.
 */
function RadioInput({ id, name, value, checked, onChange, disabled, autoFocus }) {
    return (0, jsx_runtime_1.jsx)("input", { type: "radio", id: id, name: name, value: value, checked: checked, onChange: onChange, disabled: disabled, autoFocus: autoFocus, className: radioInputStyles });
}
exports.radioButtonSize = "1.25rem";
const radioInputStyles = (0, css_1.css)({
    margin: 0,
    appearance: "none",
    backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
    font: "inherit",
    color: "currentcolor",
    width: `${exports.radioButtonSize}`,
    height: `${exports.radioButtonSize}`,
    border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.bold}`,
    borderRadius: design_system_tokens_1.borderRadius.circle,
    display: "grid",
    placeContent: "center",
    cursor: "pointer",
    "&:disabled": {
        backgroundColor: design_system_tokens_1.themeTokens.color.background.disabled,
        cursor: "not-allowed",
    },
    "&::before": {
        content: `""`,
        width: `calc(${exports.radioButtonSize} / 2)`,
        height: `calc(${exports.radioButtonSize} / 2)`,
        borderRadius: design_system_tokens_1.borderRadius.circle,
        transform: "scale(0)",
        transition: "100ms transform ease-out",
        boxShadow: `inset ${exports.radioButtonSize} ${exports.radioButtonSize} ${design_system_tokens_1.themeTokens.color.background.primary.default}`,
        // For windows high contrast mode
        backgroundColor: "CanvasText",
    },
    "&:checked:disabled": {
        backgroundColor: design_system_tokens_1.themeTokens.color.border.disabled,
        borderColor: design_system_tokens_1.themeTokens.color.border.tertiary,
    },
    "&:disabled:checked::before": {
        backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
        width: `calc(${exports.radioButtonSize} / 2)`,
        height: `calc(${exports.radioButtonSize} / 2)`,
    },
    "&:checked": {
        backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
        borderColor: design_system_tokens_1.themeTokens.color.border.selected,
    },
    "&:checked::before": {
        transform: "scale(1)",
    },
    "&:focus": {
        outline: `max(2px, 0.15em) solid ${design_system_tokens_1.themeTokens.color.border.selected}`,
        outlineOffset: `max(2px, 0.15em)`,
    },
});