@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
88 lines (87 loc) • 2.25 kB
JavaScript
import { jsxs as d, jsx as l } from "react/jsx-runtime";
import { c as x } from "./index-DG4iIeSU.mjs";
import { useState as f } from "react";
import { c as m } from "./index-2NvaPZWc.mjs";
import { i as b } from "./misc-CHmrAmhc.mjs";
const z = (e) => {
const a = e.trim().split(" ");
if (b(a)) return "";
if (a.length === 1)
return a.at(0)?.substring(0, 2).toLocaleUpperCase() ?? "";
const s = a.at(0)?.at(0) ?? "", t = a.at(-1)?.at(0) ?? "";
return `${s}${t}`.toLocaleUpperCase();
}, h = {
/**
* Affects width, height, and font size.
* - `sm`: 32px with smaller text.
* - `default`: 48px with base text.
* - `lg`: 64px with larger text.
*
* @default "default"
*/
size: {
sm: "size-8 text-xs",
default: "size-12",
lg: "size-16 text-xl"
}
}, L = x("relative flex shrink-0", {
variants: h,
defaultVariants: {
size: "default"
}
}), S = ({
className: e,
src: a,
fallback: s,
size: t = "default",
name: r,
overlay: o,
objectFit: u = "cover",
...v
}) => {
const [i, n] = f(!1), [p, g] = f(a);
a !== p && (g(a), n(!1));
const c = i ? null : r ? z(r) : s;
return /* @__PURE__ */ d(
"div",
{
"data-slot": "avatar",
"data-size": t,
className: m(L({ size: t }), e),
...v,
children: [
/* @__PURE__ */ d("div", { className: "size-full overflow-hidden rounded-full", children: [
a && /* @__PURE__ */ l(
"img",
{
"data-slot": "avatar-image",
className: m(
"aspect-square size-full",
u === "cover" ? "object-cover" : "object-contain",
!i && "opacity-0"
),
src: a,
onLoad: () => n(!0),
alt: [r, "avatar"].filter(Boolean).join(" ")
}
),
c && /* @__PURE__ */ l(
"div",
{
"data-slot": "avatar-fallback",
className: "flex-center bg-muted size-full rounded-full",
children: c
}
)
] }),
o && /* @__PURE__ */ l("div", { className: "absolute inset-0", children: o })
]
}
);
};
export {
S as A,
L as a,
h as b,
z as g
};