import { Circle, CircleDot } from "@truststack/icons-ui";
import { Pressable } from "react-native-web";
import {
  ThemeableStack,
  XStack,
  YStack,
  createStyledContext,
  styled,
  withStaticProperties
} from "tamagui";
import { Icon as TPIcon } from "./Icon";
import { Body } from "./typography";
import { jsx, jsxs } from "react/jsx-runtime";
const 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((props, ref) => /* @__PURE__ */ jsx(RadioComposed, { ...props, ref, children: /* @__PURE__ */ jsx(RadioComposed.Icon, {}) }));
function RadioGroup({
  items = [],
  value,
  onChange,
  ...props
}) {
  return /* @__PURE__ */ jsx(YStack, { ...props, children: items?.map((item, index) => /* @__PURE__ */ jsx(
    Pressable,
    {
      style: { width: "100%" },
      onPress: () => 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.js.map
