'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');
var useAttachedStyle = require('../../../utils/useAttachedStyle.cjs');

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
function RadioCard(props) {
  const _a = props, { size = "md", isAttached, direction } = _a, radioProps = __objRest(_a, ["size", "isAttached", "direction"]);
  const { getInputProps, getRadioProps } = react.useRadio(radioProps);
  const input = getInputProps();
  const radio = getRadioProps();
  const focusChecked = radio["data-checked"] === "" && radio["data-focus"] === "";
  const invalidStyle = {
    textColor: "red.500",
    borderColor: "red.500"
  };
  const checkedStyle = __spreadValues({
    position: "relative",
    outline: "1px solid"
  }, react.useColorModeValue(
    {
      bg: "transparent",
      borderColor: "darkblue.800 !important",
      outlineColor: "darkblue.800",
      boxShadow: !isAttached && `4px 4px 0px 0px var(--chakra-colors-blackAlpha-300)`
    },
    {
      bg: "transparent",
      borderColor: "white !important",
      outlineColor: "white",
      boxShadow: !isAttached && `4px 4px 0px 0px var(--chakra-colors-whiteAlpha-300)`
    }
  ));
  const hoverStyle = react.useColorModeValue(
    {
      borderColor: "blackAlpha.500"
    },
    {
      borderColor: "whiteAlpha.500"
    }
  );
  const attachedStyle = useAttachedStyle("> div", true, void 0, direction);
  const sizes = {
    sm: { px: 4, py: 1, fontSize: "sm" },
    md: { px: 5, py: 2 },
    lg: { px: 6, py: 3, fontSize: "lg" }
  }[size];
  return /* @__PURE__ */ jsxRuntime.jsxs(
    react.Box,
    {
      as: "label",
      __css: isAttached ? attachedStyle : void 0,
      "data-testid": `${props.value}_field`,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("input", __spreadValues({}, input)),
        /* @__PURE__ */ jsxRuntime.jsx(
          react.Box,
          __spreadProps(__spreadValues({}, radio), {
            cursor: "pointer",
            borderWidth: "1px",
            borderRadius: "md",
            transition: "100ms all ease-in-out",
            _invalid: invalidStyle,
            _checked: checkedStyle,
            _hover: hoverStyle,
            _focus: focusChecked ? {
              boxShadow: "outline"
            } : void 0,
            _disabled: {
              cursor: "not-allowed",
              opacity: 0.5
            },
            px: sizes.px,
            py: sizes.py,
            fontSize: sizes.fontSize,
            children: props.children
          })
        )
      ]
    }
  );
}

module.exports = RadioCard;
//# sourceMappingURL=RadioCard.cjs.map
