import { Check } from "@truststack/icons-ui";
import { Stack, ThemeableStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon } from "./Icon.native.js";
import { Spinner } from "./Spinner.native.js";
import { Label } from "./typography.native.js";
var Frame = styled(ThemeableStack, {
    name: "MenuFrame",
    shadowColor: "$shadow_opacity",
    shadowRadius: "$shadow.2",
    borderRadius: "$shape.corner_xs",
    "$platform-native": {
      backgroundColor: "transparent"
    },
    "$platform-web": {
      backgroundColor: "$surfaceContainerLowest"
    },
    minWidth: 112,
    flexDirection: "column",
    cursor: "pointer",
    variants: {
      fluid: {
        true: {},
        false: {
          maxWidth: 280
        }
      }
    }
  }),
  ItemContext = createStyledContext({
    selected: !1,
    variant: void 0,
    loading: !1
  }),
  ItemFrame = styled(Stack, {
    context: ItemContext,
    name: "MenuItem",
    height: 48,
    width: "100%",
    minWidth: 112,
    flexDirection: "row",
    alignItems: "center",
    cursor: "pointer",
    "$platform-native": {
      backgroundColor: "transparent"
    },
    "$platform-web": {
      backgroundColor: "$surfaceContainerLowest"
    },
    hoverStyle: {
      backgroundColor: "$primaryContainer"
    },
    pos: "relative",
    variants: {
      selected: {
        true: {
          backgroundColor: "$secondaryContainer"
        }
      },
      variant: {
        "filled-tonal": {
          backgroundColor: "$secondaryContainer"
        },
        "filled-error": {
          backgroundColor: "$errorContainer",
          "$platform-web": {
            backgroundColor: "$errorContainer"
          }
        },
        "tonal-success": {
          bg: "$successContainer"
        }
      },
      loading: {
        true: {},
        false: {}
      }
    }
  }),
  MenuLabel = styled(Label, {
    size: "large",
    context: ItemContext,
    col: "$onSurface",
    px: 12,
    hoverStyle: {
      col: "$onSurface"
    },
    $compact: {
      size: "large"
    },
    variants: {
      selected: {
        true: {
          col: "$onSecondaryContainer"
        }
      },
      variant: {
        "filled-tonal": {
          col: "$onSecondaryContainer"
        },
        "filled-error": {
          col: "$onErrorContainer"
        },
        "tonal-success": {
          col: "$onSuccessContainer"
        }
      }
    }
  }),
  Selected = styled(Icon, {
    name: "MenuSelected",
    context: ItemContext,
    Icon: Check,
    ContainerProps: {
      display: "none",
      col: "$onSecondaryContainer",
      width: 24,
      height: 24,
      top: 48 / 2 - 12,
      right: 8,
      pos: "absolute"
    },
    variants: {
      selected: {
        true: {
          ContainerProps: {
            display: "block",
            col: "$onSecondaryContainer",
            width: 24,
            height: 24,
            top: 48 / 2 - 12,
            right: 8,
            pos: "absolute"
          }
        }
      }
    }
  }),
  MenuLeadingIcon = styled(Icon, {
    name: "MenuIcon",
    context: ItemContext,
    size: 20,
    col: "$onSurfaceVariant",
    ContainerProps: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      marginLeft: 12,
      marginRight: 6
    },
    variants: {
      variant: {
        "filled-tonal": {
          col: "$onSecondaryContainer"
        },
        "filled-error": {
          col: "$onErrorContainer"
        },
        "tonal-success": {
          col: "$onSuccessContainer"
        }
      }
    }
  }),
  MenuSpinner = styled(Spinner, {
    name: "MenuSpinner",
    context: ItemContext,
    marginRight: 12,
    variants: {
      loading: {
        false: {
          display: "none"
        }
      },
      variant: {
        filled: {
          col: "$onPrimary"
        },
        "filled-error": {
          col: "$onError"
        }
      }
    }
  }),
  MenuItem = withStaticProperties(ItemFrame, {
    Props: ItemContext.Provider,
    Label: MenuLabel,
    LeadingIcon: MenuLeadingIcon,
    Selected,
    Spinner: MenuSpinner
  }),
  Menu = withStaticProperties(Frame, {});
export { Menu, MenuItem };
//# sourceMappingURL=Menu.native.js.map
