import { Pressable } from "react-native-web";
import { ThemeableStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { jsx } from "react/jsx-runtime";
const SwitchContext = createStyledContext({
    active: !1
  }),
  SwitchFrame = styled(ThemeableStack, {
    name: "Switch",
    context: SwitchContext,
    justifyContent: "center",
    alignItems: "center",
    width: 52,
    height: 32,
    borderRadius: "$shape.corner_full",
    cursor: "pointer",
    animateOnly: ["borderColor", "borderWidth"],
    animation: "100ms",
    variants: {
      active: {
        true: {
          backgroundColor: "$primary"
        },
        false: {
          backgroundColor: "$surfaceContainerHighest",
          borderColor: "$outline",
          borderWidth: "$border.outline"
        }
      }
    }
  }),
  SwitchThumb = styled(ThemeableStack, {
    name: "SwitchThumb",
    context: SwitchContext,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: "$shape.corner_full",
    animateOnly: ["width", "height", "left"],
    position: "absolute",
    animation: "100ms",
    variants: {
      active: {
        true: {
          left: 24,
          // Position when active
          width: 24,
          height: 24,
          backgroundColor: "$onPrimary"
        },
        false: {
          width: 16,
          height: 16,
          left: 2,
          // Position when inactive
          backgroundColor: "$outline"
          //
        }
      }
    }
  }),
  SwitchComposed = withStaticProperties(SwitchFrame, {
    Props: SwitchContext.Provider,
    Thumb: SwitchThumb
  });
function Switch({
  active,
  onChange
}) {
  return /* @__PURE__ */jsx(Pressable, {
    onPress: () => onChange(!active),
    children: /* @__PURE__ */jsx(SwitchComposed, {
      active,
      children: /* @__PURE__ */jsx(SwitchComposed.Thumb, {})
    })
  });
}
export { Switch };
//# sourceMappingURL=Switch.mjs.map
