@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
379 lines (378 loc) • 8.47 kB
JavaScript
'use client';
import { jsx as n, jsxs as b } from "react/jsx-runtime";
import "@emotion/styled";
import { Spinner as E } from "../../ui/spinner/spinner.js";
import { motion as m } from "framer-motion";
import h from "react";
import { useConfig as y } from "../../../hooks/use-config.js";
import { useTheme as P } from "../../../hooks/use-theme.js";
const _ = ({
size: e,
color: s,
duration: t = 1
}) => /* @__PURE__ */ n(
m.div,
{
className: `border-2 border-transparent border-t-current border-r-current rounded-full ${e}`,
animate: { rotate: 360 },
transition: { duration: t, repeat: Number.POSITIVE_INFINITY, ease: "linear" },
style: { color: `var(--${s})` }
}
), Y = ({
size: e,
color: s,
duration: t = 1.4
}) => {
const r = {
"w-2 h-2": "w-2 h-2",
"w-3 h-3": "w-3 h-3",
"w-4 h-4": "w-4 h-4",
"w-6 h-6": "w-6 h-6"
}[e] || "w-3 h-3";
return /* @__PURE__ */ n("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ n(
m.div,
{
className: `${r} rounded-full bg-current`,
style: { color: `var(--${s})` },
animate: { scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] },
transition: {
duration: t,
repeat: Number.POSITIVE_INFINITY,
delay: i * 0.2,
ease: "easeInOut"
}
},
i
)) });
}, k = ({
size: e,
color: s,
duration: t = 1.5
}) => /* @__PURE__ */ n(
m.div,
{
className: `rounded-full bg-current ${e}`,
style: { color: `var(--${s})` },
animate: { scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] },
transition: {
duration: t,
repeat: Number.POSITIVE_INFINITY,
ease: "easeInOut"
}
}
), B = ({
size: e,
color: s,
duration: t = 1.2
}) => {
const r = {
"w-2 h-2": "w-1 h-4",
"w-3 h-3": "w-1 h-6",
"w-4 h-4": "w-1 h-8",
"w-6 h-6": "w-2 h-12"
}[e] || "w-1 h-6";
return /* @__PURE__ */ n("div", { className: "flex items-end gap-1", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ n(
m.div,
{
className: `${r} bg-current rounded-sm`,
style: { color: `var(--${s})` },
animate: { scaleY: [1, 2, 1] },
transition: {
duration: t,
repeat: Number.POSITIVE_INFINITY,
delay: i * 0.1,
ease: "easeInOut"
}
},
i
)) });
};
function v({
variant: e = "spinner",
size: s = "md",
color: t = "primary",
text: a = "Loading...",
showText: r = !1,
textPosition: i = "bottom",
centered: o = !1,
overlay: c = !1,
className: g = "",
children: p,
duration: l = 1,
backdrop: f = !1,
backdropOpacity: x = 0.5
}) {
const { getColorValue: N } = P(), { components: S } = y(), w = S.LoadingSpinner;
if (w)
return /* @__PURE__ */ n(
w,
{
variant: e,
size: s,
color: t,
text: a,
showText: r,
textPosition: i,
centered: o,
overlay: c,
className: g,
children: p,
duration: l,
backdrop: f,
backdropOpacity: x
}
);
const L = {
sm: "w-4 h-4",
md: "w-6 h-6",
lg: "w-8 h-8",
xl: "w-12 h-12"
}, C = {
sm: "text-xs",
md: "text-sm",
lg: "text-base",
xl: "text-lg"
};
N(t);
const z = () => {
const d = L[s], u = `text-${t}-600 dark:text-${t}-400`;
switch (e) {
case "dots":
return /* @__PURE__ */ n(
Y,
{
size: d,
color: u,
duration: l
}
);
case "pulse":
return /* @__PURE__ */ n(
k,
{
size: d,
color: u,
duration: l
}
);
case "bars":
return /* @__PURE__ */ n(
B,
{
size: d,
color: u,
duration: l
}
);
case "custom":
return p || /* @__PURE__ */ n(
_,
{
size: d,
color: u,
duration: l
}
);
case "spinner":
default:
return /* @__PURE__ */ n(E, { size: s, color: t });
}
}, T = () => !r || !a ? null : /* @__PURE__ */ n(
"span",
{
className: `${C[s]} text-${t}-600 dark:text-${t}-400 font-medium`,
children: a
}
), V = () => {
const d = z(), u = T();
if (!r)
return d;
const O = {
top: "flex-col-reverse",
bottom: "flex-col",
left: "flex-row-reverse",
right: "flex-row"
}, j = {
top: "gap-2",
bottom: "gap-2",
left: "gap-3",
right: "gap-3"
};
return /* @__PURE__ */ b(
"div",
{
className: `flex items-center justify-center ${O[i]} ${j[i]}`,
children: [
d,
u
]
}
);
}, $ = /* @__PURE__ */ n(
"div",
{
className: `
${o ? "flex items-center justify-center" : ""}
${g}
`,
children: V()
}
);
return c ? /* @__PURE__ */ b("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
f && /* @__PURE__ */ n(
m.div,
{
initial: { opacity: 0 },
animate: { opacity: x },
exit: { opacity: 0 },
className: "absolute inset-0 bg-background/80 backdrop-blur-sm"
}
),
/* @__PURE__ */ n(
m.div,
{
initial: { opacity: 0, scale: 0.8 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.8 },
className: "relative z-10",
children: $
}
)
] }) : $;
}
function G({
isLoading: e = !1,
loadingText: s = "Loading...",
spinnerProps: t = {},
variant: a = "solid",
color: r = "primary",
size: i = "md",
children: o,
disabled: c,
className: g = "",
...p
}) {
const { components: l } = y(), f = l.LoadingButton;
if (f)
return /* @__PURE__ */ n(
f,
{
isLoading: e,
loadingText: s,
spinnerProps: t,
variant: a,
color: r,
size: i,
children: o,
disabled: c,
className: g,
...p
}
);
const x = {
sm: "sm",
md: "sm",
lg: "md"
};
return /* @__PURE__ */ b(
"button",
{
...p,
disabled: c || e,
className: `
relative inline-flex items-center justify-center gap-2 px-4 py-2
text-sm font-medium rounded-md transition-colors
${a === "solid" ? `bg-${r}-600 text-white hover:bg-${r}-700` : ""}
${a === "bordered" ? `border border-${r}-600 text-${r}-600 hover:bg-${r}-50` : ""}
${a === "light" ? `text-${r}-600 hover:bg-${r}-50` : ""}
disabled:opacity-50 disabled:cursor-not-allowed
${g}
`,
children: [
e && /* @__PURE__ */ n(
v,
{
variant: "spinner",
size: x[i],
color: a === "solid" ? "default" : r,
...t
}
),
/* @__PURE__ */ n("span", { className: e ? "opacity-70" : "", children: e ? s : o })
]
}
);
}
const J = {
signIn: {
text: "Signing in...",
variant: "spinner"
},
signUp: {
text: "Creating account...",
variant: "spinner"
},
signOut: {
text: "Signing out...",
variant: "dots"
},
verifying: {
text: "Verifying...",
variant: "pulse"
},
processing: {
text: "Processing...",
variant: "bars"
},
loading: {
text: "Loading...",
variant: "spinner"
},
sending: {
text: "Sending...",
variant: "dots"
},
redirecting: {
text: "Redirecting...",
variant: "pulse"
}
}, I = h.createContext(null);
function K({ children: e }) {
const [s, t] = h.useState(!1), [a, r] = h.useState("Loading..."), i = h.useCallback(
(o, c = "Loading...") => {
t(o), r(c);
},
[]
);
return /* @__PURE__ */ b(I.Provider, { value: { isLoading: s, loadingText: a, setLoading: i }, children: [
e,
s && /* @__PURE__ */ n(
v,
{
overlay: !0,
backdrop: !0,
showText: !0,
text: a,
variant: "spinner",
size: "lg",
color: "primary"
}
)
] });
}
function M() {
const e = h.useContext(I);
if (!e)
throw new Error("useLoading must be used within a LoadingProvider");
return e;
}
var Q = v;
export {
G as LoadingButton,
K as LoadingProvider,
v as LoadingSpinner,
J as LoadingStates,
Q as default,
M as useLoading
};
//# sourceMappingURL=loading-spinner.js.map