import { AlertCircle, AlertTriangle, Check, XSquare } from "@truststack/icons-ui";
import { View, XStack, YStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon } from "./Icon.mjs";
import { Body, Title } from "./typography.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
const AlertContext = createStyledContext({
    severity: void 0,
    hidden: !1
  }),
  AlertFrame = styled(XStack, {
    name: "Alert",
    context: AlertContext,
    padding: 12,
    flexDirection: "row",
    flexShrink: 1,
    gap: 12,
    variants: {
      // Border width is 0 by default,
      // set attributed `outlined` as true AFTER the severity to apply border
      // e.g. <Alert severity="info" outlined />
      severity: {
        info: {
          bg: "$infoContainer",
          borderColor: "$info",
          borderWidth: 0
        },
        success: {
          bg: "$successContainer",
          borderColor: "$success",
          borderWidth: 0
        },
        error: {
          bg: "$errorContainer",
          borderColor: "$error",
          borderWidth: 0
        },
        warning: {
          bg: "$warningContainer",
          borderColor: "$warning",
          borderWidth: 0
        }
      },
      outlined: {
        true: {
          borderWidth: "$border.outline"
        }
      },
      hidden: {
        true: {
          display: "none"
        }
      },
      shape: {
        none: {
          borderRadius: 0
        },
        xs: {
          borderRadius: "$shape.corner_xs"
        },
        sm: {
          borderRadius: "$shape.corner_sm"
        },
        m: {
          borderRadius: "$shape.corner_m"
        },
        l: {
          borderRadius: "$shape.corner_l"
        },
        xl: {
          borderRadius: "$shape.corner_xl"
        }
      }
    },
    defaultVariants: {
      severity: "info",
      shape: "xs"
    }
  }),
  AlertIcon = styled(Icon, {
    context: AlertContext,
    variants: {
      severity: {
        success: {
          Icon: Check,
          col: "$onSuccessContainer"
        },
        warning: {
          Icon: AlertTriangle,
          col: "$onWarningContainer"
        },
        error: {
          Icon: XSquare,
          col: "$onErrorContainer"
        },
        info: {
          Icon: AlertCircle,
          col: "$onInfoContainer"
        }
      }
    }
  }),
  variants = {
    severity: {
      info: {
        col: "$onInfoContainer"
      },
      success: {
        col: "$onSuccessContainer"
      },
      error: {
        col: "$onErrorContainer"
      },
      warning: {
        col: "$onWarningContainer"
      }
    }
  },
  AlertHeading = styled(Title, {
    name: "AlertHeading",
    context: AlertContext,
    variants: {
      ...variants
    }
  }),
  AlertText = styled(Body, {
    name: "AlertText",
    context: AlertContext,
    variants: {
      ...variants
    }
  }),
  AlertLiDot = styled(View, {
    name: "AlertLiDot",
    context: AlertContext,
    width: 6,
    height: 6,
    borderRadius: 100,
    variants: {
      severity: {
        info: {
          backgroundColor: "$onInfoContainer"
        },
        success: {
          backgroundColor: "$onSuccessContainer"
        },
        error: {
          backgroundColor: "$onErrorContainer"
        },
        warning: {
          backgroundColor: "$onWarningContainer"
        }
      }
    }
  }),
  AlertLi = AlertText.styleable((props, ref) => /* @__PURE__ */jsxs(XStack, {
    gap: 12,
    children: [/* @__PURE__ */jsx(View, {
      marginTop: 8,
      children: /* @__PURE__ */jsx(AlertLiDot, {})
    }), /* @__PURE__ */jsx(AlertText, {
      ref,
      ...props
    })]
  })),
  Container = styled(YStack, {
    name: "AlertContainer",
    minWidth: 0,
    flex: 1
  }),
  Actions = styled(XStack, {
    name: "AlertActions",
    justifyContent: "flex-end",
    marginTop: 12
  }),
  Alert = withStaticProperties(AlertFrame, {
    Props: AlertContext.Provider,
    Heading: AlertHeading,
    Container,
    Text: AlertText,
    Icon: AlertIcon,
    Li: AlertLi,
    Actions
  });
export { Alert };
//# sourceMappingURL=Alert.mjs.map
