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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as d, jsxs as x } from "react/jsx-runtime";
import { useTheme as g } from "../../../theme/context.js";
import { getColorVariant as a } from "../../../theme/styled.js";
import { css as t, keyframes as b } from "@emotion/react";
import c from "@emotion/styled";
import l from "react";
const w = b`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`, S = (e) => {
  const { theme: r, color: o = "primary" } = e;
  if (o === "current")
    return t`
      border-color: currentColor;
      border-top-color: transparent;
    `;
  const n = a(r, o, 500), i = a(r, o, 200);
  return t`
    border-color: ${i};
    border-top-color: ${n};
  `;
}, $ = (e) => {
  const { size: r = "md" } = e;
  if (typeof r == "number")
    return t`
      width: ${r}px;
      height: ${r}px;
      border-width: ${Math.max(2, r / 8)}px;
    `;
  switch (r) {
    case "sm":
      return t`
        width: 16px;
        height: 16px;
        border-width: 2px;
      `;
    case "md":
      return t`
        width: 24px;
        height: 24px;
        border-width: 2px;
      `;
    case "lg":
      return t`
        width: 32px;
        height: 32px;
        border-width: 3px;
      `;
    default:
      return t`
        width: 24px;
        height: 24px;
        border-width: 2px;
      `;
  }
}, y = c.div`
  border-style: solid;
  border-radius: 50%;
  animation: ${w} 1s linear infinite;

  ${S}
  ${$}

  /* Custom CSS prop */
  ${(e) => e.css}
`, z = c.div`
  display: inline-flex;
  align-items: center;
  gap: ${(e) => e.theme.spacing[2]};

  ${(e) => {
  switch (e.labelPlacement) {
    case "top":
      return t`
          flex-direction: column-reverse;
        `;
    case "bottom":
      return t`
          flex-direction: column;
        `;
    case "start":
      return t`
          flex-direction: row-reverse;
        `;
    default:
      return t`
          flex-direction: row;
        `;
  }
}}
`, C = c.span`
  color: ${(e) => e.theme.colors.text.secondary};
  font-size: ${(e) => {
  if (typeof e.size == "number")
    return `${Math.max(12, e.size * 0.6)}px`;
  switch (e.size) {
    case "sm":
      return e.theme.fontSizes.sm;
    case "lg":
      return e.theme.fontSizes.lg;
    default:
      return e.theme.fontSizes.base;
  }
}};
  font-weight: ${(e) => e.theme.fontWeights.medium};
`, v = l.forwardRef(
  ({
    color: e = "primary",
    size: r = "md",
    label: o,
    labelPlacement: n = "end",
    className: i,
    css: h,
    ...p
  }, f) => {
    const { theme: s } = g(), u = {
      ...p,
      color: e,
      size: r,
      className: i,
      css: h
    }, m = /* @__PURE__ */ d(y, { theme: s, ...u });
    return o ? /* @__PURE__ */ x(z, { theme: s, labelPlacement: n, children: [
      m,
      /* @__PURE__ */ d(C, { theme: s, size: r, children: o })
    ] }) : l.cloneElement(m, { ref: f });
  }
);
v.displayName = "Spinner";
export {
  v as Spinner
};
//# sourceMappingURL=spinner.js.map