import {
  View,
  createStyledContext,
  styled,
  withStaticProperties
} from "tamagui";
import { Icon } from "./Icon";
import { Spinner } from "./Spinner";
const IconButtonContext = createStyledContext({
  variant: "",
  loading: !1,
  disabled: !1,
  density: "0"
}), IconButtonFrame = styled(View, {
  name: "IconButton",
  context: IconButtonContext,
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "column",
  width: 40,
  height: 40,
  borderRadius: 100,
  hoverStyle: {
    cur: "pointer",
    bc: "$primaryContainer"
  },
  disabledStyle: {
    o: 0.4,
    pointerEvents: "none",
    cursor: "none"
  },
  variants: {
    variant: {
      filled: {
        backgroundColor: "$primary"
      },
      elevated: {
        backgroundColor: "$surfaceContainerLow"
      },
      "filled-tonal": {
        bg: "$secondaryContainer"
      },
      "filled-success": {
        bg: "$successContainer"
      },
      "filled-tertiary": {
        bg: "$tertiaryContainer"
      },
      "filled-error": {
        bg: "$errorContainer"
      },
      "tonal-warning": {
        bg: "$warningContainer"
      },
      outlined: {
        bc: "transparent",
        brc: "$outline",
        btc: "$outline",
        bbc: "$outline",
        blc: "$outline",
        bw: 1.5,
        borderBlockColor: "$outline",
        borderBlockStartColor: "$outline"
      },
      standard: {
        bg: "transparent"
      }
    },
    density: {
      0: {},
      "-1": {
        width: 36,
        height: 36
      },
      "-2": {
        width: 32,
        height: 32
      },
      "-3": {
        width: 28,
        height: 28
      }
    },
    disabled: {
      true: {
        pointerEvents: "none",
        cursor: "none"
      }
    },
    loading: {
      true: {},
      false: {}
    }
  },
  defaultVariants: {
    variant: "filled",
    disabled: !1,
    density: "0"
  }
}), IconButtonSpinner = styled(Spinner, {
  name: "ButtonSpinner",
  context: IconButtonContext,
  col: "$onPrimary",
  variants: {
    loading: {
      false: {
        display: "none"
      }
    },
    variant: {
      filled: {
        col: "$onPrimary"
      },
      elevated: {
        col: "$primary"
      },
      "filled-tonal": {
        col: "$onSecondaryContainer"
      },
      "filled-tertiary": {
        col: "$onTertiaryContainer"
      },
      "filled-success": {
        col: "$onSuccessContainer"
      },
      "filled-error": {
        col: "$onErrorContainer"
      },
      "tonal-warning": {
        col: "$onWarningContainer"
      }
    }
  }
}), IconButtonIcon = styled(Icon, {
  name: "IconButtonIcon",
  context: IconButtonContext,
  size: 24,
  variants: {
    variant: {
      filled: {
        col: "$onPrimary"
      },
      "filled-tonal": {
        col: "$onSecondaryContainer"
      },
      "filled-tertiary": {
        col: "$onTertiaryContainer"
      },
      tonal: {
        col: "$onSecondaryContainer"
      },
      "tonal-success": {
        col: "$onSuccessContainer"
      },
      "tonal-warning": {
        col: "$onWarningContainer"
      },
      elevated: {
        col: "$primary"
      }
    },
    density: {
      0: {},
      "-1": {
        // @ts-ignore
        size: 20
      },
      "-2": {
        // @ts-ignore
        size: 16
      },
      "-3": {
        // @ts-ignore
        size: 16
      }
    },
    loading: {
      true: {
        display: "none"
      }
    }
  }
}), IconButton = withStaticProperties(IconButtonFrame, {
  Props: IconButtonContext.Provider,
  Icon: IconButtonIcon,
  Spinner: IconButtonSpinner
});
export {
  IconButton
};
//# sourceMappingURL=IconButton.js.map
