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

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Box = require('../../../Box/Box.js');
var _VisuallyHidden = require('../../../_VisuallyHidden.js');
var CheckboxOrRadioGroupContext = require('./CheckboxOrRadioGroupContext.js');
var FeatureFlag = require('./FeatureFlag.js');
require('../../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../../FeatureFlags/useFeatureFlag.js');
require('../../../FeatureFlags/DefaultFeatureFlags.js');
var CheckboxOrRadioGroup_module = require('./CheckboxOrRadioGroup.module.css.js');
var index = require('../../../Stack/index.js');
var clsx = require('clsx');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const CheckboxOrRadioGroupLabel = ({
  children,
  className,
  visuallyHidden = false,
  sx
}) => {
  const {
    required,
    disabled
  } = React__default.default.useContext(CheckboxOrRadioGroupContext);
  const enabled = useFeatureFlag.useFeatureFlag(FeatureFlag.CSS_MODULES_FLAG);
  if (enabled) {
    if (sx) {
      return /*#__PURE__*/React__default.default.createElement(_VisuallyHidden, {
        className: clsx.clsx(className, CheckboxOrRadioGroup_module.RadioGroupLabel),
        isVisible: !visuallyHidden,
        title: required ? 'required field' : undefined,
        "data-label-disabled": disabled ? '' : undefined,
        sx: sx
      }, required ? /*#__PURE__*/React__default.default.createElement(index.Stack, {
        direction: "horizontal",
        gap: "none"
      }, /*#__PURE__*/React__default.default.createElement("div", {
        className: CheckboxOrRadioGroup_module.GroupLabelChildren
      }, children), /*#__PURE__*/React__default.default.createElement("span", null, "*")) : children);
    }
    return /*#__PURE__*/React__default.default.createElement(_VisuallyHidden, {
      className: clsx.clsx(className, CheckboxOrRadioGroup_module.RadioGroupLabel),
      isVisible: !visuallyHidden,
      title: required ? 'required field' : undefined,
      "data-label-disabled": disabled ? '' : undefined
    }, required ? /*#__PURE__*/React__default.default.createElement(index.Stack, {
      direction: "horizontal",
      gap: "none"
    }, /*#__PURE__*/React__default.default.createElement("div", {
      className: CheckboxOrRadioGroup_module.GroupLabelChildren
    }, children), /*#__PURE__*/React__default.default.createElement("span", null, "*")) : children);
  }
  return /*#__PURE__*/React__default.default.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__default.default.createElement(Box, {
    display: "flex",
    as: "span"
  }, /*#__PURE__*/React__default.default.createElement(Box, {
    mr: 1
  }, children), /*#__PURE__*/React__default.default.createElement("span", null, "*")) : children);
};
CheckboxOrRadioGroupLabel.displayName = "CheckboxOrRadioGroupLabel";

module.exports = CheckboxOrRadioGroupLabel;