fannypack-v5/es/Radio/Radio.js

An accessible, composable, and friendly React UI Kit

import { createElement as createElement$1, Fragment } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import { useUniqueId } from '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../utils/getHiddenInputStyles.js';
import { Box } from 'reakit';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Label/styles-d69a783d.js';
import { Label } from '../Label/Label.js';
import { R as Radio$1, a as RadioIcon, H as HiddenRadio, b as RadioLabel } from './styles-ffff3b7e.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var autoFocus = props.autoFocus,
      checked = props.checked,
      defaultChecked = props.defaultChecked,
      disabled = props.disabled,
      isRequired = props.isRequired,
      label = props.label,
      name = props.name,
      onBlur = props.onBlur,
      onChange = props.onChange,
      onFocus = props.onFocus,
      overrides = props.overrides,
      radioProps = props.radioProps,
      state = props.state,
      value = props.value,
      restProps = _objectWithoutPropertiesLoose(props, ["autoFocus", "checked", "defaultChecked", "disabled", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "overrides", "radioProps", "state", "value"]);

  var boxProps = Box$1.useProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
    overrides: overrides
  }));
  var className = useClassName({
    style: Radio$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var radioIconClassName = useClassName({
    style: RadioIcon,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Icon'
  });
  var hiddenRadioClassName = useClassName({
    style: HiddenRadio,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'HiddenInput'
  });
  var radioLabelClassName = useClassName({
    style: RadioLabel,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Label'
  });
  var labelId = useUniqueId('label');
  var radioId = useUniqueId('radio');
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    'aria-describedby': labelId,
    'aria-invalid': state === 'danger',
    'aria-required': isRequired,
    className: className,
    children: /*#__PURE__*/createElement$1(Fragment, null, /*#__PURE__*/createElement$1(Box$1, _extends({
      use: "input",
      className: hiddenRadioClassName // @ts-ignore
      ,
      autoFocus: autoFocus,
      checked: checked,
      defaultChecked: defaultChecked,
      disabled: disabled,
      id: radioId,
      onBlur: onBlur,
      onChange: onChange,
      onFocus: onFocus,
      name: name,
      type: "radio" // @ts-ignore
      ,
      value: value,
      overrides: overrides
    }, radioProps)), /*#__PURE__*/createElement$1(Box$1, {
      className: radioIconClassName,
      overrides: overrides
    }), label && /*#__PURE__*/createElement$1(Label, {
      use: "span",
      id: labelId,
      className: radioLabelClassName,
      htmlFor: radioId,
      overrides: overrides,
      marginLeft: "minor-2"
    }, label))
  });
}, {
  themeKey: 'Radio'
});
var Radio = createComponent(function (props) {
  var textProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: textProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Radio'
  },
  defaultProps: {
    use: Label
  },
  themeKey: 'Radio'
});

export { Radio };