@frank-auth/react/dist/esm/components/ui/badge/badge.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as B, jsxs as k } from "react/jsx-runtime";
import { useTheme as v } from "../../../theme/context.js";
import { getColorVariant as d } from "../../../theme/styled.js";
import { css as e } from "@emotion/react";
import p from "@emotion/styled";
import C from "react";
const R = (t) => {
  const { theme: r, variant: i = "solid", color: o = "primary", isDisabled: a } = t, s = d(r, o, 500);
  if (d(r, o, 50), d(r, o, 700), a)
    return e`
      opacity: 0.5;
      cursor: not-allowed;
    `;
  switch (i) {
    case "solid":
      return e`
        background-color: ${s};
        color: ${r.colors.text.inverse};
        border: 1px solid transparent;
      `;
    case "flat":
      return e`
        background-color: ${d(r, o, 100)};
        color: ${s};
        border: 1px solid transparent;
      `;
    case "bordered":
      return e`
        background-color: ${r.colors.background.primary};
        color: ${s};
        border: 1px solid ${s};
      `;
    case "shadow":
      return e`
        background-color: ${s};
        color: ${r.colors.text.inverse};
        border: 1px solid transparent;
        box-shadow: ${r.shadows.sm};
      `;
    case "dot":
      return e`
        background-color: ${s};
        border: 2px solid ${r.colors.background.primary};
        width: 8px;
        height: 8px;
        padding: 0;
        min-width: 8px;
      `;
    default:
      return e``;
  }
}, j = (t) => {
  const { theme: r, size: i = "md", variant: o, shape: a = "rectangle" } = t;
  if (o === "dot")
    switch (i) {
      case "sm":
        return e`
          width: 6px;
          height: 6px;
          min-width: 6px;
        `;
      case "md":
        return e`
          width: 8px;
          height: 8px;
          min-width: 8px;
        `;
      case "lg":
        return e`
          width: 10px;
          height: 10px;
          min-width: 10px;
        `;
    }
  const s = a === "circle";
  switch (i) {
    case "sm":
      return e`
        min-width: ${r.spacing[4]};
        height: ${r.spacing[4]};
        padding: ${s ? "0" : `0 ${r.spacing[1]}`};
        font-size: ${r.fontSizes.xs};
      `;
    case "md":
      return e`
        min-width: ${r.spacing[5]};
        height: ${r.spacing[5]};
        padding: ${s ? "0" : `0 ${r.spacing[2]}`};
        font-size: ${r.fontSizes.xs};
      `;
    case "lg":
      return e`
        min-width: ${r.spacing[6]};
        height: ${r.spacing[6]};
        padding: ${s ? "0" : `0 ${r.spacing[2]}`};
        font-size: ${r.fontSizes.sm};
      `;
    default:
      return e``;
  }
}, V = (t) => {
  const { theme: r, shape: i = "rectangle", variant: o } = t;
  if (o === "dot")
    return e`border-radius: ${r.borderRadius.full};`;
  switch (i) {
    case "circle":
      return e`border-radius: ${r.borderRadius.full};`;
    case "rectangle":
      return e`border-radius: ${r.borderRadius.sm};`;
    default:
      return e`border-radius: ${r.borderRadius.sm};`;
  }
}, g = p.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: ${(t) => t.theme.fontWeights.medium};
  line-height: ${(t) => t.theme.lineHeights.tight};
  white-space: nowrap;
  user-select: none;
  transition: all ${(t) => t.theme.transitions.normal};
  box-sizing: border-box;

  ${R}
  ${j}
  ${V}

    /* Custom CSS prop */
  ${(t) => t.css}
`, W = p.span`
  position: relative;
  display: inline-flex;

  ${g} {
    position: absolute;
    z-index: ${(t) => t.theme.zIndex.docked};

    ${(t) => {
  switch (t.placement) {
    case "top-right":
      return e`
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          `;
    case "top-left":
      return e`
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
          `;
    case "bottom-right":
      return e`
            bottom: 0;
            right: 0;
            transform: translate(50%, 50%);
          `;
    case "bottom-left":
      return e`
            bottom: 0;
            left: 0;
            transform: translate(-50%, 50%);
          `;
    default:
      return e`
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          `;
  }
}}
  }
`, E = C.forwardRef(
  ({
    children: t,
    content: r,
    variant: i = "solid",
    color: o = "primary",
    size: a = "md",
    max: s = 99,
    isDot: n = !1,
    showZero: u = !1,
    placement: h = "top-right",
    isDisabled: m = !1,
    shape: f = "rectangle",
    className: $,
    css: b,
    ...x
  }, w) => {
    const { theme: l } = v(), y = () => n ? !0 : r === 0 || r === "0" ? u : r != null && r !== "", S = () => n || i === "dot" ? null : typeof r == "number" ? r > s ? `${s}+` : r.toString() : r, z = {
      ...x,
      variant: n ? "dot" : i,
      color: o,
      size: a,
      shape: n ? "circle" : f,
      isDisabled: m,
      className: $,
      css: b
    }, c = y() ? /* @__PURE__ */ B(g, { theme: l, ref: w, ...z, children: S() }) : null;
    return t ? /* @__PURE__ */ k(W, { theme: l, placement: h, children: [
      t,
      c
    ] }) : c;
  }
);
E.displayName = "Badge";
export {
  E as Badge
};
//# sourceMappingURL=badge.js.map