@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
300 lines (292 loc) • 7.27 kB
JavaScript
'use client';
import { jsxs as z, jsx as s } from "react/jsx-runtime";
import { useTheme as I } from "../../../theme/context.js";
import { getColorVariant as $ } from "../../../theme/styled.js";
import { css as r } from "@emotion/react";
import a from "@emotion/styled";
import h, { useState as S, useEffect as W } from "react";
const D = (t) => {
const { theme: e, size: o = "md" } = t;
switch (o) {
case "xs":
return r`
width: ${e.spacing[6]};
height: ${e.spacing[6]};
font-size: ${e.fontSizes.xs};
`;
case "sm":
return r`
width: ${e.spacing[8]};
height: ${e.spacing[8]};
font-size: ${e.fontSizes.sm};
`;
case "md":
return r`
width: ${e.spacing[10]};
height: ${e.spacing[10]};
font-size: ${e.fontSizes.base};
`;
case "lg":
return r`
width: ${e.spacing[12]};
height: ${e.spacing[12]};
font-size: ${e.fontSizes.lg};
`;
case "xl":
return r`
width: ${e.spacing[16]};
height: ${e.spacing[16]};
font-size: ${e.fontSizes.xl};
`;
default:
return r``;
}
}, k = (t) => {
const { theme: e, radius: o = "full" } = t;
switch (o) {
case "none":
return r`border-radius: ${e.borderRadius.none};`;
case "sm":
return r`border-radius: ${e.borderRadius.sm};`;
case "md":
return r`border-radius: ${e.borderRadius.md};`;
case "lg":
return r`border-radius: ${e.borderRadius.lg};`;
case "full":
return r`border-radius: ${e.borderRadius.full};`;
default:
return r`border-radius: ${e.borderRadius.full};`;
}
}, F = (t) => {
const { theme: e, color: o = "primary", isDisabled: i } = t;
$(e, o, 500);
const c = $(e, o, 100), l = $(e, o, 700);
return i ? r`
opacity: 0.5;
cursor: not-allowed;
` : r`
background-color: ${c};
color: ${l};
`;
}, E = a.div`
position: relative;
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};
user-select: none;
overflow: hidden;
flex-shrink: 0;
transition: all ${(t) => t.theme.transitions.normal};
${D}
${k}
${F}
${(t) => t.isBordered && r`
border: 2px solid ${t.theme.colors.border.primary};
`}
/* Custom CSS prop */
${(t) => t.css}
`, N = a.img`
width: 100%;
height: 100%;
object-fit: cover;
${k}
`, V = a.span`
font-weight: ${(t) => t.theme.fontWeights.semibold};
text-transform: uppercase;
`, B = a.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: ${(t) => t.theme.colors.text.tertiary};
`, H = a.div`
position: absolute;
border: 2px solid ${(t) => t.theme.colors.background.primary};
border-radius: ${(t) => t.theme.borderRadius.full};
background-color: ${(t) => {
const e = t.statusColor || "success";
return $(t.theme, e, 500);
}};
${(t) => {
const o = {
xs: "8px",
sm: "10px",
md: "12px",
lg: "14px",
xl: "16px"
}[t.size] || "12px";
return r`
width: ${o};
height: ${o};
`;
}}
${(t) => {
switch (t.statusPlacement) {
case "top-right":
return r`
top: 0;
right: 0;
transform: translate(25%, -25%);
`;
case "top-left":
return r`
top: 0;
left: 0;
transform: translate(-25%, -25%);
`;
case "bottom-right":
return r`
bottom: 0;
right: 0;
transform: translate(25%, 25%);
`;
case "bottom-left":
return r`
bottom: 0;
left: 0;
transform: translate(-25%, 25%);
`;
default:
return r`
bottom: 0;
right: 0;
transform: translate(25%, 25%);
`;
}
}}
`, T = () => /* @__PURE__ */ s("svg", { width: "60%", height: "60%", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ s("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }), U = (t) => t.split(" ").map((e) => e.charAt(0)).join("").slice(0, 2).toUpperCase(), q = h.forwardRef(
({
src: t,
alt: e,
name: o,
size: i = "md",
color: c = "primary",
radius: l = "full",
isBordered: b = !1,
isDisabled: v = !1,
fallback: x,
showStatus: y = !1,
statusColor: m = "success",
statusPlacement: u = "bottom-right",
className: f,
css: g,
onError: w,
...d
}, p) => {
const { theme: n } = I(), [j, A] = S(!1), [G, C] = S(!1);
W(() => {
A(!1), C(!1);
}, [t]);
const L = () => {
A(!0), w?.();
}, M = () => {
C(!0);
}, P = {
...d,
size: i,
color: c,
radius: l,
isBordered: b,
isDisabled: v,
className: f,
css: g
};
return /* @__PURE__ */ z(E, { theme: n, ref: p, ...P, children: [
t && !j ? /* @__PURE__ */ s(
N,
{
theme: n,
src: t,
alt: e || o,
radius: l,
onError: L,
onLoad: M,
style: {
opacity: G ? 1 : 0,
transition: n.transitions.normal
}
}
) : o ? /* @__PURE__ */ s(V, { theme: n, children: U(o) }) : /* @__PURE__ */ s(B, { theme: n, children: x || /* @__PURE__ */ s(T, {}) }),
y && /* @__PURE__ */ s(
H,
{
theme: n,
statusColor: m,
statusPlacement: u,
size: i
}
)
] });
}
);
q.displayName = "Avatar";
const J = a.div`
display: flex;
align-items: center;
${(t) => t.css}
`, R = a.div`
position: relative;
margin-left: ${(t) => t.index > 0 ? `${t.spacing}px` : "0"};
&:hover {
z-index: 1;
}
`, K = a(E)`
background-color: ${(t) => t.theme.colors.neutral[200]};
color: ${(t) => t.theme.colors.text.secondary};
font-weight: ${(t) => t.theme.fontWeights.semibold};
`, O = h.forwardRef(
({
children: t,
max: e = 5,
size: o = "md",
spacing: i = -8,
isBordered: c = !1,
radius: l = "full",
className: b,
css: v,
...x
}, y) => {
const { theme: m } = I(), u = h.Children.toArray(t), f = u.slice(0, e), g = Math.max(0, u.length - e), w = {
...x,
className: b,
css: v
};
return /* @__PURE__ */ z(J, { theme: m, ref: y, ...w, children: [
f.map((d, p) => {
if (h.isValidElement(d)) {
const n = {
size: o,
isBordered: c,
radius: l,
...d.props
};
return /* @__PURE__ */ s(R, { spacing: i, index: p, children: h.cloneElement(d, n) }, p);
}
return d;
}),
g > 0 && /* @__PURE__ */ s(R, { spacing: i, index: f.length, children: /* @__PURE__ */ z(
K,
{
theme: m,
size: o,
radius: l,
isBordered: c,
children: [
"+",
g
]
}
) })
] });
}
);
O.displayName = "AvatarGroup";
export {
q as Avatar,
O as AvatarGroup
};
//# sourceMappingURL=avatar.js.map