@undp/design-system-react
Version:
React based design system for UNDP
201 lines (200 loc) • 7.43 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./dist-jqIPNHDe.js";
import { n as r, t as i } from "./dist-BKfyhBSH.js";
import { t as a } from "./dist-C8FJXTu6.js";
import * as o from "react";
import { jsx as s } from "react/jsx-runtime";
//#region node_modules/@radix-ui/react-avatar/dist/index.mjs
var c = Object.defineProperty, l = (e, t) => c(e, "name", {
value: t,
configurable: !0
}), u = "Avatar", [d, f] = r(u), p = [0, () => void 0], [m, h] = d(u), g = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ l(function(e, t) {
let { __scopeAvatar: r, ...i } = e, [a, c] = o.useState("idle"), [l, u] = C();
return /* @__PURE__ */ s(m, {
scope: r,
imageLoadingStatus: a,
setImageLoadingStatus: c,
imageCount: l,
setImageCount: u,
children: /* @__PURE__ */ s(n.span, {
...i,
ref: t
})
});
}, "Avatar")), _ = "AvatarImage", v = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ l(function(e, t) {
let { __scopeAvatar: r, src: c, onLoadingStatusChange: l, ...u } = e, d = h(_, r);
d.setImageCount;
let f = x(c, {
referrerPolicy: u.referrerPolicy,
crossOrigin: u.crossOrigin,
loadingStatus: d.imageLoadingStatus,
setLoadingStatus: d.setImageLoadingStatus
}), p = a((e) => {
l?.(e);
}), m = o.useRef(f);
return i(() => {
let e = m.current;
m.current = f, f !== e && p(f);
}, [f, p]), f === "loaded" ? /* @__PURE__ */ s(n.img, {
...u,
ref: t,
src: c
}) : null;
}, "AvatarImage")), y = "AvatarFallback", b = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ l(function(e, t) {
let { __scopeAvatar: r, delayMs: i, ...a } = e, c = h(y, r), [l, u] = o.useState(i === void 0);
return o.useEffect(() => {
if (i !== void 0) {
let e = window.setTimeout(() => u(!0), i);
return () => window.clearTimeout(e);
}
}, [i]), l && c.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ s(n.span, {
...a,
ref: t
}) : null;
}, "AvatarFallback"));
function x(e, { loadingStatus: t, setLoadingStatus: n, referrerPolicy: r, crossOrigin: a }) {
return i(() => {
if (!e) {
n("error");
return;
}
let t = new window.Image(), i = /* @__PURE__ */ l((e) => {
let t = e.currentTarget;
n(S(t));
}, "handleLoad"), o = /* @__PURE__ */ l(() => n("error"), "handleError");
return t.addEventListener("load", i), t.addEventListener("error", o), r && (t.referrerPolicy = r), t.crossOrigin = a ?? null, t.src = e, n(S(t)), () => {
t.removeEventListener("load", i), t.removeEventListener("error", o), n("idle");
};
}, [
e,
a,
r,
n
]), t;
}
l(x, "useImageLoadingStatus");
function S(e) {
return e.complete ? e.naturalWidth > 0 ? "loaded" : "error" : "loading";
}
l(S, "getImageLoadingStatus");
function C() {
return p;
}
l(C, "useImageCount");
function w(e) {}
l(w, "useUpdateImageCount");
//#endregion
//#region src/components/ui/avatar.tsx
function T({ className: t, size: n = "default", ...r }) {
return /* @__PURE__ */ s(g, {
"data-slot": "avatar",
"data-size": n,
className: e("group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6", t),
...r
});
}
function E({ className: t, ...n }) {
return /* @__PURE__ */ s(v, {
"data-slot": "avatar-image",
className: e("aspect-square size-full rounded-full object-cover", t),
...n
});
}
var D = t("flex size-full items-center justify-center rounded-full border-0 text-sm group-data-[size=sm]/avatar:text-xs", {
variants: {
color: {
transparent: "bg-transparent text-content-primary border border-stroke",
background: "bg-background text-content-primary border border-stroke",
"background-soft": "bg-background-soft text-content-primary border border-stroke",
foreground: "bg-foreground text-content-reverse",
"foreground-soft": "bg-foreground-soft text-content-reverse",
primary: "bg-primary text-content-reverse",
secondary: "bg-secondary text-content-reverse",
tertiary: "bg-tertiary text-content-reverse",
quaternary: "bg-quaternary text-content-primary",
success: "bg-success text-content-reverse",
warning: "bg-warning text-content-primary",
info: "bg-info text-content-reverse",
error: "bg-error text-content-reverse",
surface: "bg-surface text-content-primary border border-stroke",
"surface-2xs": "bg-surface-2xs text-content-primary",
"surface-xs": "bg-surface-xs text-content-primary",
"surface-sm": "bg-surface-sm text-content-primary",
"surface-md": "bg-surface-md text-content-primary",
"surface-lg": "bg-surface-lg text-content-primary",
"surface-xl": "bg-surface-xl text-content-reverse",
"surface-2xl": "bg-surface-2xl text-content-reverse",
"surface-3xl": "bg-surface-3xl text-content-reverse",
"surface-4xl": "bg-surface-4xl text-content-reverse",
"sgd-1": "bg-sdg-1 text-content-reverse",
"sgd-2": "bg-sdg-2 text-content-reverse",
"sgd-3": "bg-sdg-3 text-content-reverse",
"sgd-4": "bg-sdg-4 text-content-reverse",
"sgd-5": "bg-sdg-5 text-content-reverse",
"sgd-6": "bg-sdg-6 text-content-reverse",
"sgd-7": "bg-sdg-7 text-content-reverse",
"sgd-8": "bg-sdg-8 text-content-reverse",
"sgd-9": "bg-sdg-9 text-content-reverse",
"sgd-10": "bg-sdg-10 text-content-reverse",
"sgd-11": "bg-sdg-11 text-content-reverse",
"sgd-12": "bg-sdg-12 text-content-reverse",
"sgd-13": "bg-sdg-13 text-content-reverse",
"sgd-14": "bg-sdg-14 text-content-reverse",
"sgd-15": "bg-sdg-15 text-content-reverse",
"sgd-16": "bg-sdg-16 text-content-reverse",
"sgd-17": "bg-sdg-17 text-content-reverse"
},
border: {
true: "border border-stroke",
false: ""
}
},
defaultVariants: {
color: "surface",
border: !0
}
});
function O({ className: t, color: n, border: r, ...i }) {
return /* @__PURE__ */ s(b, {
"data-slot": "avatar-fallback",
className: e(D({
color: n,
border: r
}), t),
...i
});
}
var k = t("absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full text-content-reverse group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", {
variants: { status: {
available: "bg-success",
idle: "bg-warning-hover",
offline: "bg-background border-2 border-stroke-hard",
busy: "bg-error"
} },
defaultVariants: { status: "available" }
});
function A({ className: t, status: n, ...r }) {
return /* @__PURE__ */ s("span", {
"data-slot": "avatar-badge",
className: e(k({ status: n }), t),
...r
});
}
function j({ className: t, ...n }) {
return /* @__PURE__ */ s("div", {
"data-slot": "avatar-group",
className: e("group/avatar-group flex -space-x-2", t),
...n
});
}
function M({ className: t, ...n }) {
return /* @__PURE__ */ s("div", {
"data-slot": "avatar-group-count",
className: e("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-surface text-content-secondary text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", t),
...n
});
}
//#endregion
export { M as a, j as i, A as n, E as o, O as r, T as t };
//# sourceMappingURL=avatar-wvZf6_mG.js.map