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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as h, jsx as p } 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 m from "@emotion/styled";
import z from "react";
const S = (e) => {
  const { theme: t, color: r = "primary", variant: l = "solid", isDisabled: d } = e;
  if (d)
    return o`
      color: ${t.colors.text.tertiary};
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.5;
    `;
  if (r === "foreground")
    return o`
      color: ${t.colors.text.primary};

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.6;
      }
    `;
  const i = a(t, r, 500), n = a(t, r, 600), c = a(t, r, 700), u = a(t, r, 50);
  switch (l) {
    case "solid":
      return o`
        color: ${i};

        &:hover {
          color: ${n};
        }

        &:active {
          color: ${c};
        }
      `;
    case "underlined":
      return o`
        color: ${i};
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          color: ${n};
        }

        &:active {
          color: ${c};
        }
      `;
    case "light":
      return o`
        color: ${i};
        background-color: transparent;
        padding: ${t.spacing[1]} ${t.spacing[2]};
        border-radius: ${t.borderRadius.sm};

        &:hover {
          background-color: ${u};
        }

        &:active {
          background-color: ${a(t, r, 100)};
        }
      `;
    default:
      return o``;
  }
}, C = (e) => {
  const { theme: t, size: r = "md" } = e;
  switch (r) {
    case "sm":
      return o`
        font-size: ${t.fontSizes.sm};
      `;
    case "md":
      return o`
        font-size: ${t.fontSizes.base};
      `;
    case "lg":
      return o`
        font-size: ${t.fontSizes.lg};
      `;
    default:
      return o`
        font-size: ${t.fontSizes.base};
      `;
  }
}, L = (e) => {
  const { underline: t = "hover" } = e;
  switch (t) {
    case "none":
      return o`
        text-decoration: none;

        &:hover {
          text-decoration: none;
        }
      `;
    case "hover":
      return o`
        text-decoration: none;

        &:hover {
          text-decoration: underline;
          text-underline-offset: 2px;
        }
      `;
    case "always":
      return o`
        text-decoration: underline;
        text-underline-offset: 2px;
      `;
    case "active":
      return o`
        text-decoration: none;

        &:active {
          text-decoration: underline;
          text-underline-offset: 2px;
        }
      `;
    case "focus":
      return o`
        text-decoration: none;

        &:focus {
          text-decoration: underline;
          text-underline-offset: 2px;
        }
      `;
    default:
      return o``;
  }
}, W = m.a`
  display: ${(e) => e.isBlock ? "block" : "inline-flex"};
  align-items: center;
  gap: ${(e) => e.theme.spacing[1]};
  font-family: inherit;
  font-weight: ${(e) => e.theme.fontWeights.medium};
  line-height: ${(e) => e.theme.lineHeights.normal};
  cursor: pointer;
  transition: all ${(e) => e.theme.transitions.fast};
  position: relative;
  outline: none;

  &:focus-visible {
    outline: 2px solid ${(e) => e.theme.colors.border.focus};
    outline-offset: 2px;
    border-radius: ${(e) => e.theme.borderRadius.sm};
  }

  ${S}
  ${C}
  ${L}

  /* Custom CSS prop */
  ${(e) => e.css}
`, R = m.svg`
  width: ${(e) => {
  switch (e.size) {
    case "sm":
      return "12px";
    case "lg":
      return "18px";
    default:
      return "14px";
  }
}};
  height: ${(e) => {
  switch (e.size) {
    case "sm":
      return "12px";
    case "lg":
      return "18px";
    default:
      return "14px";
  }
}};
  opacity: 0.7;
`, j = z.forwardRef(
  ({
    children: e,
    color: t = "primary",
    size: r = "md",
    underline: l = "hover",
    variant: d = "solid",
    isExternal: i = !1,
    isDisabled: n = !1,
    isBlock: c = !1,
    className: u,
    css: x,
    href: s,
    target: $,
    rel: g,
    ...v
  }, y) => {
    const { theme: k } = w(), f = i || s && (s.startsWith("http") || s.startsWith("mailto:") || s.startsWith("tel:")), b = {
      ...v,
      color: t,
      size: r,
      underline: l,
      variant: d,
      isDisabled: n,
      isBlock: c,
      className: u,
      css: x,
      href: n ? void 0 : s,
      target: f ? "_blank" : $,
      rel: f ? "noopener noreferrer" : g
    };
    return /* @__PURE__ */ h(W, { theme: k, ref: y, ...b, children: [
      e,
      f && !n && /* @__PURE__ */ h(
        R,
        {
          size: r,
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          strokeWidth: "2",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          children: [
            /* @__PURE__ */ p("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
            /* @__PURE__ */ p("polyline", { points: "15,3 21,3 21,9" }),
            /* @__PURE__ */ p("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
          ]
        }
      )
    ] });
  }
);
j.displayName = "Link";
export {
  j as Link
};
//# sourceMappingURL=link.js.map