@crossed/ui/lib/module/feedback/Alert.js

A universal & performant styling library for React Native, Next.js & React

"use client";
import { jsx } from "react/jsx-runtime";
import { withStaticProperties } from "@crossed/core";
import { Text } from "../typography/Text";
import {
  composeStyles,
  createStyles
} from "@crossed/styled";
import { createContext, memo, useContext } from "react";
import { YBox } from "../layout/YBox";
import { match } from "ts-pattern";
import { AlertTriangle, CheckCircle, Info, XCircle } from "@crossed/unicons";
import {
  Button
} from "../buttons/Button";
import { Box } from "../layout/Box";
const alertDescriptionStyles = createStyles(
  ({ components: { Alert: Alert2 } }) => ({
    base: { base: { flexShrink: 1, flexGrow: 1 } },
    error: { base: { color: Alert2.error.text } },
    success: { base: { color: Alert2.success.text } },
    warning: { base: { color: Alert2.warning.text } },
    info: { base: { color: Alert2.info.text } }
  })
);
const alertActionTextStyles = createStyles(
  ({ components: { Alert: Alert2 } }) => ({
    error: {
      "base": { color: Alert2.error.text },
      ":hover": { color: Alert2.error.text },
      ":active": { color: Alert2.error.text }
    },
    success: {
      "base": { color: Alert2.success.text },
      ":hover": { color: Alert2.success.text },
      ":active": { color: Alert2.success.text }
    },
    warning: {
      "base": { color: Alert2.warning.text },
      ":hover": { color: Alert2.warning.text },
      ":active": { color: Alert2.warning.text }
    },
    info: {
      "base": { color: Alert2.info.text },
      ":hover": { color: Alert2.info.text },
      ":active": { color: Alert2.info.text }
    }
  })
);
const alertStyles = createStyles(
  ({ space }) => ({
    containerIcon: {
      base: { alignSelf: "center" },
      media: { md: { alignSelf: "baseline", paddingTop: 3 } }
    },
    container: {
      base: {
        paddingVertical: space.xs,
        paddingHorizontal: space.md,
        padding: space.xs,
        borderRadius: 8,
        borderWidth: 1,
        borderStyle: "solid",
        alignItems: "center",
        gap: space.xs
      },
      variants: {},
      media: {
        md: {
          flexDirection: "row",
          gap: space.md
        }
      }
    },
    group: { base: { flex: 1, flexShrink: 1 } }
  })
);
const actionStyles = createStyles(({ components: { Alert: Alert2 } }) => ({
  base: {
    base: { alignSelf: "center", borderWidth: 0 },
    media: { md: { alignSelf: "baseline" } },
    web: {
      "base": { boxSizing: "border-box" },
      ":focus": {
        outlineWidth: "2px",
        outlineOffset: "2px",
        outlineStyle: "solid"
      }
    }
  },
  error: { web: { ":focus": { outlineColor: Alert2.error.text } } },
  success: {
    web: { ":focus": { outlineColor: Alert2.success.text } }
  },
  warning: {
    web: { ":focus": { outlineColor: Alert2.warning.text } }
  },
  info: {
    web: { ":focus": { outlineColor: Alert2.info.text } }
  }
}));
const containerStyles = createStyles(({ components: { Alert: Alert2 } }) => ({
  error: {
    base: {
      borderColor: Alert2.error.border,
      backgroundColor: Alert2.error.background
    }
  },
  success: {
    base: {
      borderColor: Alert2.success.border,
      backgroundColor: Alert2.success.background
    }
  },
  warning: {
    base: {
      borderColor: Alert2.warning.border,
      backgroundColor: Alert2.warning.background
    }
  },
  info: {
    base: {
      borderColor: Alert2.info.border,
      backgroundColor: Alert2.info.background
    }
  }
}));
const alertContext = createContext({});
const Container = ({
  status = "info",
  children,
  style,
  ...props
}) => {
  return /* @__PURE__ */ jsx(alertContext.Provider, { value: { status }, children: /* @__PURE__ */ jsx(
    YBox,
    {
      space: "xs",
      role: "alert",
      ...props,
      style: composeStyles(
        alertStyles.container,
        containerStyles[status],
        style
      ),
      children
    }
  ) });
};
Container.displayName = "Alert";
const AlertIcon = ({ style }) => {
  const { status } = useContext(alertContext);
  const { color } = composeStyles(
    alertDescriptionStyles.base,
    alertDescriptionStyles[status]
  ).style().style;
  const Comp = match(status).with("error", () => XCircle).with("info", () => Info).with("success", () => CheckCircle).with("warning", () => AlertTriangle).exhaustive();
  return /* @__PURE__ */ jsx(Box, { style: composeStyles(alertStyles.containerIcon, style), children: /* @__PURE__ */ jsx(Comp, { color, size: 16 }) });
};
AlertIcon.displayName = "Alert.Icon";
const AlertDescription = memo((props) => {
  const { status } = useContext(alertContext);
  return /* @__PURE__ */ jsx(
    Text,
    {
      ...props,
      style: composeStyles(
        alertDescriptionStyles.base,
        alertDescriptionStyles[status],
        props.style
      )
    }
  );
});
AlertDescription.displayName = "Alert.Description";
const AlertGroup = ({ style, ...props }) => {
  return /* @__PURE__ */ jsx(
    YBox,
    {
      space: "xs",
      ...props,
      style: composeStyles(alertStyles.group, style)
    }
  );
};
AlertGroup.displayName = "Alert.Group";
const AlertAction = (props) => {
  const { status } = useContext(alertContext);
  return /* @__PURE__ */ jsx(
    Button,
    {
      variant: "tertiary",
      size: false,
      ...props,
      style: composeStyles(actionStyles.base, actionStyles[status])
    }
  );
};
AlertAction.displayName = "Alert.Action";
const ActionText = (props) => {
  const { status } = useContext(alertContext);
  return /* @__PURE__ */ jsx(
    Button.Text,
    {
      ...props,
      style: composeStyles(alertActionTextStyles[status], props.style)
    }
  );
};
ActionText.displayName = "Alert.Action.Text";
const Alert = withStaticProperties(Container, {
  Icon: AlertIcon,
  Description: AlertDescription,
  Action: withStaticProperties(AlertAction, { Text: ActionText }),
  Group: AlertGroup
});
export {
  ActionText,
  Alert,
  AlertDescription,
  AlertGroup,
  AlertIcon,
  alertActionTextStyles,
  alertDescriptionStyles,
  alertStyles
};
//# sourceMappingURL=Alert.js.map