import { jsx as _jsx } from "react/jsx-runtime";
import { Dimensions, Pressable } from "react-native";
import { Dialog as TDialog, ThemeableStack, View, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Divider as TDivider } from "./Divider.native.js";
import { Icon as TIcon } from "./Icon.native.js";
import { Label as TLabel, Title } from "./typography.native.js";
import { rgbToRgba } from "./utils";
var NavDrawerContext = createStyledContext({
    variant: "standard"
  }),
  Frame = styled(View, {
    name: "NavDrawerFrame",
    context: NavDrawerContext,
    height: "100%",
    backgroundColor: "$surfaceContainerLow",
    borderTopRightRadius: "$shape.corner_l",
    borderBottomRightRadius: "$shape.corner_l",
    minWidth: 240,
    maxWidth: 360,
    paddingLeft: 12,
    paddingRight: 12,
    variants: {
      variant: {
        standard: {
          backgroundColor: "transparent"
        },
        outlined: {
          backgroundColor: "$surfaceContainerLowest",
          borderRightColor: "$outlineVariant",
          borderRightWidth: "$border.outline"
        }
      },
      shape: {
        none: {
          borderRadius: 0
        }
      }
    }
  }),
  Content = styled(ThemeableStack, {
    name: "NavDrawerContent",
    context: NavDrawerContext,
    minWidth: 240,
    maxWidth: 360,
    height: "100%"
  }),
  Headline = styled(Title, {
    name: "NavDrawerHeadline",
    size: "small",
    context: NavDrawerContext,
    height: 56,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 16
  }),
  Divider = styled(TDivider, {
    name: "NavDrawerDivider",
    context: NavDrawerContext,
    mt: 16,
    mb: 16
  }),
  NavDrawerItemContext = createStyledContext({
    active: !1
  }),
  NavDrawerItemFrame = styled(ThemeableStack, {
    name: "NavDrawerItem",
    context: NavDrawerItemContext,
    flexDirection: "row",
    alignItems: "center",
    height: 56,
    width: "100%",
    paddingLeft: 16,
    borderRadius: "$shape.corner_xl",
    cursor: "pointer",
    variants: {
      active: {
        true: {
          backgroundColor: "$secondaryContainer"
        },
        false: {
          hoverStyle: {
            backgroundColor: rgbToRgba("$onSecondaryContainer", 0.08)
          }
        }
      }
    },
    defaultVariants: {
      active: !1
    }
  }),
  NavItemFramePressable = NavDrawerItemFrame.styleable(function (param, ref) {
    var {
      onPress,
      ...props
    } = param;
    return /* @__PURE__ */_jsx(Pressable, {
      disabled: props.disabled,
      onPress,
      children: /* @__PURE__ */_jsx(NavDrawerItemFrame, {
        ...props,
        ref
      })
    });
  }),
  Icon = styled(TIcon, {
    name: "NavItemIcon",
    context: NavDrawerItemContext,
    size: 24,
    marginRight: 12,
    variants: {
      active: {
        true: {
          col: "$onSecondaryContainer"
        },
        false: {
          col: "$onSurfaceVariant"
        }
      }
    }
  }),
  Label = styled(TLabel, {
    name: "NavDrawerLabel",
    context: NavDrawerItemContext,
    size: "large",
    col: "$onSurfaceVariant",
    variants: {
      active: {
        true: {
          col: "$onSecondaryContainer"
        }
      },
      trailing: {
        true: {
          marginLeft: "auto",
          marginRight: 24
        }
      }
    }
  }),
  Spacer = styled(View, {
    name: "NavDrawerSpacer",
    height: 56
  }),
  NavDrawerItem = withStaticProperties(NavItemFramePressable, {
    Props: NavDrawerItemContext.Provider,
    Label,
    Icon
  }),
  NavDrawer = withStaticProperties(Frame, {
    Props: NavDrawerContext.Provider,
    Content,
    Headline,
    Divider,
    Spacer
  }),
  {
    height: HEIGHT
  } = Dimensions.get("window"),
  ModelContent = styled(TDialog.Content, {
    name: "NavDrawerModelContent",
    elevate: !0,
    height: HEIGHT,
    maxHeight: HEIGHT,
    animation: "medium",
    overflow: "hidden",
    enterStyle: {
      y: 0,
      opacity: 0
    },
    exitStyle: {
      y: 0,
      opacity: 0
    },
    padding: 0,
    borderRadius: 0
  }),
  NavDrawerModel = withStaticProperties(TDialog, {
    Overlay: TDialog.Overlay,
    Portal: TDialog.Portal,
    Content: ModelContent
  });
export { NavDrawer, NavDrawerItem, NavDrawerModel };
//# sourceMappingURL=NavDrawer.native.js.map
