@primer/react/lib-esm/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import Box from '../../../Box/Box.js';
import VisuallyHidden from '../../../_VisuallyHidden.js';
import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext.js';
import { CSS_MODULES_FLAG } from './FeatureFlag.js';
import '../../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../../FeatureFlags/useFeatureFlag.js';
import '../../../FeatureFlags/DefaultFeatureFlags.js';
import classes from './CheckboxOrRadioGroup.module.css.js';
import { Stack } from '../../../Stack/index.js';
import { clsx } from 'clsx';

const CheckboxOrRadioGroupLabel = ({
  children,
  className,
  visuallyHidden = false,
  sx
}) => {
  const {
    required,
    disabled
  } = React.useContext(CheckboxOrRadioGroupContext);
  const enabled = useFeatureFlag(CSS_MODULES_FLAG);
  if (enabled) {
    if (sx) {
      return /*#__PURE__*/React.createElement(VisuallyHidden, {
        className: clsx(className, classes.RadioGroupLabel),
        isVisible: !visuallyHidden,
        title: required ? 'required field' : undefined,
        "data-label-disabled": disabled ? '' : undefined,
        sx: sx
      }, required ? /*#__PURE__*/React.createElement(Stack, {
        direction: "horizontal",
        gap: "none"
      }, /*#__PURE__*/React.createElement("div", {
        className: classes.GroupLabelChildren
      }, children), /*#__PURE__*/React.createElement("span", null, "*")) : children);
    }
    return /*#__PURE__*/React.createElement(VisuallyHidden, {
      className: clsx(className, classes.RadioGroupLabel),
      isVisible: !visuallyHidden,
      title: required ? 'required field' : undefined,
      "data-label-disabled": disabled ? '' : undefined
    }, required ? /*#__PURE__*/React.createElement(Stack, {
      direction: "horizontal",
      gap: "none"
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.GroupLabelChildren
    }, children), /*#__PURE__*/React.createElement("span", null, "*")) : children);
  }
  return /*#__PURE__*/React.createElement(VisuallyHidden, {
    className: className,
    isVisible: !visuallyHidden,
    title: required ? 'required field' : undefined,
    sx: {
      display: 'block',
      color: disabled ? 'fg.muted' : undefined,
      fontSize: 1,
      fontWeight: 'bold',
      ...sx
    }
  }, required ? /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    as: "span"
  }, /*#__PURE__*/React.createElement(Box, {
    mr: 1
  }, children), /*#__PURE__*/React.createElement("span", null, "*")) : children);
};
CheckboxOrRadioGroupLabel.displayName = "CheckboxOrRadioGroupLabel";

export { CheckboxOrRadioGroupLabel as default };