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

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

"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Alert_exports = {};
__export(Alert_exports, {
  ActionText: () => ActionText,
  Alert: () => Alert,
  AlertDescription: () => AlertDescription,
  AlertGroup: () => AlertGroup,
  AlertIcon: () => AlertIcon,
  alertActionTextStyles: () => alertActionTextStyles,
  alertDescriptionStyles: () => alertDescriptionStyles,
  alertStyles: () => alertStyles
});
module.exports = __toCommonJS(Alert_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_Text = require("../typography/Text");
var import_styled = require("@crossed/styled");
var import_react = require("react");
var import_YBox = require("../layout/YBox");
var import_ts_pattern = require("ts-pattern");
var import_unicons = require("@crossed/unicons");
var import_Button = require("../buttons/Button");
var import_Box = require("../layout/Box");
const alertDescriptionStyles = (0, import_styled.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 = (0, import_styled.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 = (0, import_styled.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 = (0, import_styled.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 = (0, import_styled.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 = (0, import_react.createContext)({});
const Container = ({
  status = "info",
  children,
  style,
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(alertContext.Provider, { value: { status }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_YBox.YBox,
    {
      space: "xs",
      role: "alert",
      ...props,
      style: (0, import_styled.composeStyles)(
        alertStyles.container,
        containerStyles[status],
        style
      ),
      children
    }
  ) });
};
Container.displayName = "Alert";
const AlertIcon = ({ style }) => {
  const { status } = (0, import_react.useContext)(alertContext);
  const { color } = (0, import_styled.composeStyles)(
    alertDescriptionStyles.base,
    alertDescriptionStyles[status]
  ).style().style;
  const Comp = (0, import_ts_pattern.match)(status).with("error", () => import_unicons.XCircle).with("info", () => import_unicons.Info).with("success", () => import_unicons.CheckCircle).with("warning", () => import_unicons.AlertTriangle).exhaustive();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.Box, { style: (0, import_styled.composeStyles)(alertStyles.containerIcon, style), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { color, size: 16 }) });
};
AlertIcon.displayName = "Alert.Icon";
const AlertDescription = (0, import_react.memo)((props) => {
  const { status } = (0, import_react.useContext)(alertContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Text.Text,
    {
      ...props,
      style: (0, import_styled.composeStyles)(
        alertDescriptionStyles.base,
        alertDescriptionStyles[status],
        props.style
      )
    }
  );
});
AlertDescription.displayName = "Alert.Description";
const AlertGroup = ({ style, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_YBox.YBox,
    {
      space: "xs",
      ...props,
      style: (0, import_styled.composeStyles)(alertStyles.group, style)
    }
  );
};
AlertGroup.displayName = "Alert.Group";
const AlertAction = (props) => {
  const { status } = (0, import_react.useContext)(alertContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Button.Button,
    {
      variant: "tertiary",
      size: false,
      ...props,
      style: (0, import_styled.composeStyles)(actionStyles.base, actionStyles[status])
    }
  );
};
AlertAction.displayName = "Alert.Action";
const ActionText = (props) => {
  const { status } = (0, import_react.useContext)(alertContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Button.Button.Text,
    {
      ...props,
      style: (0, import_styled.composeStyles)(alertActionTextStyles[status], props.style)
    }
  );
};
ActionText.displayName = "Alert.Action.Text";
const Alert = (0, import_core.withStaticProperties)(Container, {
  Icon: AlertIcon,
  Description: AlertDescription,
  Action: (0, import_core.withStaticProperties)(AlertAction, { Text: ActionText }),
  Group: AlertGroup
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ActionText,
  Alert,
  AlertDescription,
  AlertGroup,
  AlertIcon,
  alertActionTextStyles,
  alertDescriptionStyles,
  alertStyles
});
//# sourceMappingURL=Alert.js.map