import { Check } from "@truststack/icons-ui";
import { Pressable } from "react-native-web";
import {
  Checkbox as TCheckbox,
  View,
  XStack,
  createStyledContext,
  styled,
  withStaticProperties
} from "tamagui";
import { Icon } from "./Icon";
import { Body } from "./typography";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
const CheckboxContext = createStyledContext({ checked: !1 }), CheckboxFrame = styled(View, {
  name: "Checkbox",
  context: CheckboxContext,
  width: 40,
  height: 40,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "$shape.corner_full",
  disabledStyle: {
    o: 0.4,
    pe: "none"
  }
}), CheckboxContainer = styled(View, {
  name: "CheckboxContainer",
  context: CheckboxContext,
  width: 18,
  height: 18,
  disabledStyle: {
    o: 0.4,
    pe: "none"
  },
  borderColor: "$onSurfaceVariant",
  backgroundColor: "transparent",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: 2,
  borderWidth: 2,
  variants: {
    checked: {
      true: {
        backgroundColor: "$primary",
        borderColor: "$primary"
      }
    }
  }
}), C = withStaticProperties(CheckboxFrame, {
  Props: CheckboxContext.Provider,
  Indicator: TCheckbox.Indicator,
  Container: CheckboxContainer
});
function Checkbox({ checked, onChange }) {
  return /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange && onChange(!checked), children: /* @__PURE__ */ jsx(C, { checked, children: /* @__PURE__ */ jsx(C.Container, { children: checked ? /* @__PURE__ */ jsx(Icon, { size: 18, col: "$onPrimary", Icon: Check }) : /* @__PURE__ */ jsx(Fragment, {}) }) }) });
}
function CheckboxLabel({
  checked,
  onChange,
  label
}) {
  return /* @__PURE__ */ jsx(
    Pressable,
    {
      onPress: () => onChange && onChange(!checked),
      style: { width: "100%" },
      children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 20, children: [
        /* @__PURE__ */ jsx(C, { checked, children: /* @__PURE__ */ jsx(C.Container, { borderRadius: 10, children: checked ? /* @__PURE__ */ jsx(Icon, { size: 15, col: "$onPrimary", Icon: Check }) : /* @__PURE__ */ jsx(Fragment, {}) }) }),
        /* @__PURE__ */ jsx(Body, { size: "large", children: label })
      ] })
    }
  );
}
export {
  Checkbox,
  CheckboxLabel
};
//# sourceMappingURL=Checkbox.js.map
