import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Circle, CircleDot } from "@truststack/icons-ui";
import { Pressable } from "react-native";
import { ThemeableStack, XStack, YStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon as TPIcon } from "./Icon.native.js";
import { Body } from "./typography.native.js";
var RadioContext = createStyledContext({
    selected: !1
  }),
  Frame = styled(ThemeableStack, {
    name: "Radio",
    context: RadioContext,
    justifyContent: "center",
    alignItems: "center",
    width: 40,
    height: 40,
    borderRadius: "$shape.corner_full",
    cursor: "pointer",
    animateOnly: ["backgroundColor"],
    animation: "100ms",
    hoverStyle: {
      backgroundColor: "$onSurfaceOpacity"
    },
    variants: {
      selected: {
        true: {},
        false: {}
      }
    }
  }),
  Icon = styled(TPIcon, {
    name: "RadioIcon",
    context: RadioContext,
    size: 20,
    disabledStyle: {
      col: "$onSurface",
      opacity: 0.38
    },
    variants: {
      selected: {
        true: {
          col: "$primary",
          Icon: CircleDot
        },
        false: {
          col: "$onSurfaceVariant",
          Icon: Circle
        }
      }
    }
  }),
  RadioComposed = withStaticProperties(Frame, {
    Props: RadioContext.Provider,
    Icon
  }),
  Radio = RadioComposed.styleable(function (props, ref) {
    return /* @__PURE__ */_jsx(RadioComposed, {
      ...props,
      ref,
      children: /* @__PURE__ */_jsx(RadioComposed.Icon, {})
    });
  });
function RadioGroup(param) {
  var {
    items = [],
    value,
    onChange,
    ...props
  } = param;
  return /* @__PURE__ */_jsx(YStack, {
    ...props,
    children: items?.map(function (item, index) {
      return /* @__PURE__ */_jsx(Pressable, {
        style: {
          width: "100%"
        },
        onPress: function () {
          return onChange(item.value);
        },
        children: /* @__PURE__ */_jsxs(XStack, {
          alignItems: "center",
          gap: 20,
          children: [/* @__PURE__ */_jsx(Radio, {
            selected: item.value == value
          }), /* @__PURE__ */_jsx(Body, {
            size: "large",
            children: item.label
          })]
        })
      }, `radio-item-${index}`);
    })
  });
}
export { Radio, RadioGroup };
//# sourceMappingURL=Radio.native.js.map
