@crossed/ui/lib/commonjs/feedback/Banner.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 Banner_exports = {};
__export(Banner_exports, {
  Banner: () => Banner,
  BannerAction: () => BannerAction,
  BannerActionText: () => BannerActionText,
  BannerDescription: () => BannerDescription,
  BannerIcon: () => BannerIcon,
  BannerTitle: () => BannerTitle,
  bannerContext: () => bannerContext
});
module.exports = __toCommonJS(Banner_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_Text = require("../typography/Text");
var import_Button = require("../buttons/Button");
var import_styled = require("@crossed/styled");
var import_react = require("react");
var import_unicons = require("@crossed/unicons");
var import_Box = require("../layout/Box");
var import_YBox = require("../layout/YBox");
var import_ts_pattern = require("ts-pattern");
var import_useMedia = require("../useMedia");
const titleStyle = (0, import_styled.createStyles)((t) => ({
  default: { base: { fontWeight: "600" } },
  error: { base: { color: t.components.Banner.error.title } },
  success: { base: { color: t.components.Banner.success.title } },
  warning: { base: { color: t.components.Banner.warning.title } },
  info: { base: { color: t.components.Banner.info.title } }
}));
const descriptionStyle = (0, import_styled.createStyles)((t) => ({
  default: { base: { flex: 1 } },
  error: { base: { color: t.components.Banner.error.subtitle } },
  success: { base: { color: t.components.Banner.success.subtitle } },
  warning: { base: { color: t.components.Banner.warning.subtitle } },
  info: { base: { color: t.components.Banner.info.subtitle } }
}));
const bannerStyles = (0, import_styled.createStyles)(
  (t) => ({
    icon: {
      base: { fontWeight: "600" },
      variants: {
        status: {
          error: { base: { color: t.components.Banner.error.icon } },
          success: { base: { color: t.components.Banner.success.icon } },
          warning: { base: { color: t.components.Banner.warning.icon } },
          info: { base: { color: t.components.Banner.info.icon } }
        }
      }
    },
    containerTitle: {
      base: { flexDirection: "row", alignItems: "center" }
    },
    containerIcon: {
      base: { borderRadius: 32, width: 32, height: 32 },
      variants: {}
    },
    action: {
      media: { xs: { alignSelf: "flex-end" }, md: { alignSelf: "auto" } }
    },
    container: {
      base: {
        paddingLeft: t.space.xl,
        paddingRight: t.space.xl,
        paddingTop: t.space.xl,
        paddingBottom: t.space.xl,
        borderRadius: 8,
        borderWidth: 1,
        borderStyle: "solid"
      },
      variants: {},
      media: {
        xs: {
          paddingVertical: t.space.md,
          paddingHorizontal: t.space.xl
        },
        md: {
          flexDirection: "row",
          alignItems: "center",
          paddingVertical: t.space.xl,
          paddingHorizontal: t.space["3xl"]
        }
      }
    }
  })
);
const containerStyles = (0, import_styled.createStyles)((t) => ({
  error: {
    base: {
      borderColor: t.components.Banner.error.border,
      backgroundColor: t.components.Banner.error.background
    }
  },
  success: {
    base: {
      borderColor: t.components.Banner.success.border,
      backgroundColor: t.components.Banner.success.background
    }
  },
  warning: {
    base: {
      borderColor: t.components.Banner.warning.border,
      backgroundColor: t.components.Banner.warning.background
    }
  },
  info: {
    base: {
      borderColor: t.components.Banner.info.border,
      backgroundColor: t.components.Banner.info.background
    }
  }
}));
const containerIconStyles = (0, import_styled.createStyles)((t) => ({
  error: {
    base: {
      backgroundColor: t.components.Banner.error.backgroundIcon
    }
  },
  success: {
    base: {
      backgroundColor: t.components.Banner.success.backgroundIcon
    }
  },
  warning: {
    base: {
      backgroundColor: t.components.Banner.warning.backgroundIcon
    }
  },
  info: {
    base: {
      backgroundColor: t.components.Banner.info.backgroundIcon
    }
  }
}));
const bannerContext = (0, import_react.createContext)({});
const Container = ({
  status = "info",
  children,
  style,
  ...props
}) => {
  const { md } = (0, import_useMedia.useMedia)();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(bannerContext.Provider, { value: { status }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_YBox.YBox,
    {
      space: !md ? "md" : "xs",
      role: "banner",
      ...props,
      style: (0, import_styled.composeStyles)(
        bannerStyles.container,
        containerStyles[status],
        style
      ),
      children
    }
  ) });
};
Container.displayName = "Banner";
const BannerIcon = ({
  style
}) => {
  const { status } = (0, import_react.useContext)(bannerContext);
  const theme = (0, import_styled.useTheme)();
  const color = theme.components.Banner[status].icon;
  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,
    {
      center: true,
      style: (0, import_styled.composeStyles)(
        bannerStyles.containerIcon,
        containerIconStyles[status],
        style
      ),
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { color, size: 16 })
    }
  );
};
BannerIcon.displayName = "Banner.Icon";
const BannerTitle = ({ style, ...props }) => {
  const { status } = (0, import_react.useContext)(bannerContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Text.Text,
    {
      weight: "lg",
      ...props,
      style: (0, import_styled.composeStyles)(titleStyle.default, titleStyle[status], style)
    }
  );
};
BannerTitle.displayName = "Banner.Title";
const BannerDescription = (props) => {
  const { status } = (0, import_react.useContext)(bannerContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Text.Text,
    {
      ...props,
      style: (0, import_styled.composeStyles)(
        descriptionStyle.default,
        descriptionStyle[status],
        props.style
      )
    }
  );
};
BannerDescription.displayName = "Banner.Description";
const BannerAction = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Button.Button,
    {
      variant: "tertiary",
      size: false,
      ...props,
      style: bannerStyles.action
    }
  );
};
BannerAction.displayName = "Banner.Action";
const BannerActionText = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Text, { ...props });
BannerAction.displayName = "Banner.Action.Text";
const Banner = (0, import_core.withStaticProperties)(Container, {
  Icon: BannerIcon,
  Title: BannerTitle,
  Description: BannerDescription,
  Action: (0, import_core.withStaticProperties)(BannerAction, { Text: BannerActionText })
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Banner,
  BannerAction,
  BannerActionText,
  BannerDescription,
  BannerIcon,
  BannerTitle,
  bannerContext
});
//# sourceMappingURL=Banner.js.map