@grafana/ui/dist/cjs/components/Forms/RadioButtonList/RadioButtonDot.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../../themes/ThemeContext.cjs');

"use strict";
const RadioButtonDot = ({
  id,
  name,
  label,
  checked,
  value,
  disabled,
  description,
  onChange,
  ...props
}) => {
  const styles = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs("label", { title: description, className: styles.label, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      "input",
      {
        ...props,
        id,
        name,
        type: "radio",
        checked,
        value,
        disabled,
        className: styles.input,
        onChange: () => onChange && onChange(id)
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
      label,
      description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.description, children: description })
    ] })
  ] });
};
const getStyles = (theme) => ({
  input: css.css({
    position: "relative",
    appearance: "none",
    outline: "none",
    backgroundColor: theme.colors.background.canvas,
    width: `${theme.spacing(2)} !important`,
    height: theme.spacing(2),
    border: `1px solid ${theme.colors.border.medium}`,
    borderRadius: theme.shape.radius.circle,
    cursor: "pointer",
    margin: "3px 0",
    ":checked": {
      backgroundColor: theme.colors.accent.contrastText,
      border: `5px solid ${theme.colors.accent.main}`
    },
    ":disabled": {
      backgroundColor: `${theme.colors.action.disabledBackground} !important`,
      borderColor: theme.colors.border.weak
    },
    ":disabled:checked": {
      border: `1px solid ${theme.colors.border.weak}`
    },
    ":disabled:checked::after": {
      content: '""',
      width: "6px",
      height: "6px",
      backgroundColor: theme.colors.text.disabled,
      borderRadius: theme.shape.radius.circle,
      display: "inline-block",
      position: "absolute",
      top: "4px",
      left: "4px"
    },
    ":focus": {
      outline: "none !important",
      boxShadow: `0 0 0 1px ${theme.colors.background.canvas}, 0 0 0 3px ${theme.colors.accent.main}`
    }
  }),
  label: css.css({
    fontSize: theme.typography.fontSize,
    lineHeight: "22px",
    display: "grid",
    gridTemplateColumns: `${theme.spacing(2)} auto`,
    gap: theme.spacing(1),
    cursor: "pointer"
  }),
  description: css.css({
    fontSize: theme.typography.size.sm,
    color: theme.colors.text.secondary
  })
});

exports.RadioButtonDot = RadioButtonDot;
//# sourceMappingURL=RadioButtonDot.cjs.map