import { YStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon } from "./Icon.native.js";
import { Label } from "./typography.native.js";
var NavItemContext = createStyledContext({
    active: !1
  }),
  NavItemFrame = styled(YStack, {
    name: "NavItem",
    context: NavItemContext,
    fd: "column",
    ai: "center",
    jc: "center",
    gap: 4,
    cur: "pointer",
    variants: {
      active: {
        true: {},
        false: {}
      }
    }
  }),
  NavLabel = styled(Label, {
    name: "NavLabel",
    context: NavItemContext,
    size: "medium",
    numberOfLines: 1,
    adjustsFontSizeToFit: !0,
    hoverStyle: {
      col: "$onSurface"
    },
    variants: {
      active: {
        true: {
          col: "$onSurface"
        },
        false: {
          col: "$onSurfaceVariant"
        }
      }
    }
  }),
  NavIcon = styled(Icon, {
    name: "NavIcon",
    context: NavItemContext,
    width: 24,
    height: 24,
    col: "$onSurfaceVariant",
    hoverStyle: {
      col: "$onSurface"
    },
    ContainerProps: {
      borderRadius: "$shape.corner_full",
      height: 32,
      width: 56,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      hoverStyle: {
        backgroundColor: "$onSurfaceOpacity"
      }
    },
    variants: {
      active: {
        true: {
          col: "$onSecondaryContainer",
          ContainerProps: {
            borderRadius: "$shape.corner_full",
            height: 32,
            width: 56,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "$secondaryContainer"
          }
        },
        false: {
          col: "$onSurface"
        }
      }
    }
  }),
  NavItem = withStaticProperties(NavItemFrame, {
    Props: NavItemContext.Provider,
    Label: NavLabel,
    Icon: NavIcon
  });
export { NavItem };
//# sourceMappingURL=NavItem.native.js.map
