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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as u, jsx as c } from "react/jsx-runtime";
import { useTheme as w } from "../../../theme/context.js";
import { getColorVariant as a } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import g from "@emotion/styled";
import k from "react";
const v = (e) => {
  const { theme: r, variant: s = "solid", color: t = "primary", isDisabled: i } = e, n = a(r, t, 500), d = a(r, t, 50), l = a(r, t, 700);
  if (i)
    return o`
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    `;
  switch (s) {
    case "solid":
      return o`
        background-color: ${n};
        color: ${r.colors.text.inverse};
        border: 1px solid transparent;
      `;
    case "bordered":
      return o`
        background-color: transparent;
        color: ${n};
        border: 1px solid ${n};
      `;
    case "light":
      return o`
        background-color: ${d};
        color: ${l};
        border: 1px solid transparent;
      `;
    case "flat":
      return o`
        background-color: ${a(r, t, 100)};
        color: ${n};
        border: 1px solid transparent;
      `;
    case "faded":
      return o`
        background-color: ${r.colors.neutral[100]};
        color: ${n};
        border: 1px solid ${r.colors.neutral[200]};
      `;
    case "shadow":
      return o`
        background-color: ${n};
        color: ${r.colors.text.inverse};
        border: 1px solid transparent;
        box-shadow: ${r.shadows.md};
      `;
    case "dot":
      return o`
        background-color: ${r.colors.background.secondary};
        color: ${r.colors.text.primary};
        border: 1px solid ${r.colors.border.primary};
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 8px;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: ${n};
        }
      `;
    default:
      return o``;
  }
}, R = (e) => {
  const { theme: r, size: s = "md", variant: t } = e, i = t === "dot" ? r.spacing[5] : r.spacing[3];
  switch (s) {
    case "sm":
      return o`
        height: ${r.spacing[6]};
        padding: 0 ${t === "dot" ? r.spacing[4] : r.spacing[2]};
        padding-left: ${t === "dot" ? r.spacing[4] : r.spacing[2]};
        font-size: ${r.fontSizes.xs};
        gap: ${r.spacing[1]};
      `;
    case "md":
      return o`
        height: ${r.spacing[8]};
        padding: 0 ${t === "dot" ? i : r.spacing[3]};
        padding-left: ${t === "dot" ? i : r.spacing[3]};
        font-size: ${r.fontSizes.sm};
        gap: ${r.spacing[2]};
      `;
    case "lg":
      return o`
        height: ${r.spacing[10]};
        padding: 0 ${t === "dot" ? r.spacing[6] : r.spacing[4]};
        padding-left: ${t === "dot" ? r.spacing[6] : r.spacing[4]};
        font-size: ${r.fontSizes.base};
        gap: ${r.spacing[2]};
      `;
    default:
      return o``;
  }
}, S = (e) => {
  const { theme: r, radius: s = "full" } = e;
  switch (s) {
    case "none":
      return o`border-radius: ${r.borderRadius.none};`;
    case "sm":
      return o`border-radius: ${r.borderRadius.sm};`;
    case "md":
      return o`border-radius: ${r.borderRadius.md};`;
    case "lg":
      return o`border-radius: ${r.borderRadius.lg};`;
    case "full":
      return o`border-radius: ${r.borderRadius.full};`;
    default:
      return o`border-radius: ${r.borderRadius.full};`;
  }
}, z = g.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: ${(e) => e.theme.fontWeights.medium};
  line-height: ${(e) => e.theme.lineHeights.tight};
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: all ${(e) => e.theme.transitions.normal};

  ${v}
  ${R}
  ${S}

  /* Custom CSS prop */
  ${(e) => e.css}
`, j = g.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
  opacity: 0.7;
  transition: opacity ${(e) => e.theme.transitions.fast};
  width: ${(e) => {
  switch (e.size) {
    case "sm":
      return "14px";
    case "lg":
      return "18px";
    default:
      return "16px";
  }
}};
  height: ${(e) => {
  switch (e.size) {
    case "sm":
      return "14px";
    case "lg":
      return "18px";
    default:
      return "16px";
  }
}};

  &:hover {
    opacity: 1;
  }

  &:focus {
    outline: none;
  }
`, P = ({ size: e }) => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ u(
    "svg",
    {
      width: "100%",
      height: "100%",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      children: [
        /* @__PURE__ */ c("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
        /* @__PURE__ */ c("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
      ]
    }
  )
), B = k.forwardRef(
  ({
    children: e,
    variant: r = "solid",
    color: s = "primary",
    size: t = "md",
    radius: i = "full",
    isDisabled: n = !1,
    isClosable: d = !1,
    onClose: l,
    startContent: h,
    endContent: $,
    className: m,
    css: f,
    ...b
  }, x) => {
    const { theme: p } = w(), y = {
      ...b,
      variant: r,
      color: s,
      size: t,
      radius: i,
      isDisabled: n,
      className: m,
      css: f
    };
    return /* @__PURE__ */ u(z, { theme: p, ref: x, ...y, children: [
      h,
      e,
      $,
      d && !n && /* @__PURE__ */ c(
        j,
        {
          theme: p,
          size: t,
          onClick: (C) => {
            C.stopPropagation(), l?.();
          },
          "aria-label": "Remove",
          children: /* @__PURE__ */ c(P, { size: t })
        }
      )
    ] });
  }
);
B.displayName = "Chip";
export {
  B as Chip
};
//# sourceMappingURL=chip.js.map