@crossed/ui/lib/module/display/Badge.js

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

import { jsx } from "react/jsx-runtime";
import { memo } from "react";
import { Text } from "../typography/Text";
import { Box } from "../layout/Box";
import { composeStyles, createStyles } from "@crossed/styled";
import { createScope, withStaticProperties } from "@crossed/core";
const badgeStyles = createStyles(({ space, colors }) => ({
  default: {
    base: {
      paddingLeft: space.md,
      paddingRight: space.md,
      paddingTop: space.md,
      paddingBottom: space.md,
      marginTop: 0,
      borderRadius: 4,
      backgroundColor: colors.background.primary
    }
  },
  success: { base: { backgroundColor: colors.success.light } },
  warning: { base: { backgroundColor: colors.warning.light } },
  error: { base: { backgroundColor: colors.error.low } },
  info: { base: { backgroundColor: colors.info.light } }
}));
const badgeTextStyles = createStyles(({ colors }) => ({
  success: { base: { color: colors.success.primary } },
  warning: { base: { color: colors.warning.primary } },
  error: { base: { color: colors.error.primary } },
  info: { base: { color: colors.info.primary } }
}));
const [Provider, useContext] = createScope({});
const BadgeText = memo(({ style, ...props }) => {
  const { variant } = useContext();
  return /* @__PURE__ */ jsx(
    Text,
    {
      style: composeStyles(variant && badgeTextStyles[variant], style),
      weight: "lg",
      ...props
    }
  );
});
const BadgeRoot = memo(({ children, style, variant, ...props }) => {
  return /* @__PURE__ */ jsx(Provider, { variant, children: /* @__PURE__ */ jsx(
    Box,
    {
      ...props,
      style: composeStyles(
        badgeStyles.default,
        variant && badgeStyles[variant],
        style
      ),
      children
    }
  ) });
});
const Badge = withStaticProperties(BadgeRoot, { Text: BadgeText });
export {
  Badge
};
//# sourceMappingURL=Badge.js.map