50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2842,"use client"; import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"; import { motion } from "motion/react"; import { forwardRef, type HTMLAttributes, useEffect, useState } from "react"; import { cn } from "@/lib/utils"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; const AVATAR_SIZE = 44; const WHITESPACE_REGEX = /\s+/g; const FALLBACK_SPLIT_REGEX = /[\s_-]+/; const NON_ALPHANUMERIC_REGEX = /[^\p{L}\p{N}]+/gu; const enterEase = [0.16, 1, 0.3, 1] as const; type DivHTMLAttributesForMotion = Omit< HTMLAttributes, | "children" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" >; export interface AvatarProps extends DivHTMLAttributesForMotion { alt?: string; className?: string; fallback?: string; loading?: "eager" | "lazy"; name?: string; src?: string; } type ImageStatus = "idle" | "loaded" | "error"; function normalizeText(value?: string) { return value?.trim().replace(WHITESPACE_REGEX, " ") ?? ""; } function firstCharacter(value: string) { return Array.from(value)[0] ?? ""; } function getFallbackLabel(fallback?: string, name?: string, alt?: string) { const normalized = [fallback, name, alt].map(normalizeText).find(Boolean); if (!normalized) { return "?"; } const words = normalized .split(FALLBACK_SPLIT_REGEX) .map((word) => word.replace(NON_ALPHANUMERIC_REGEX, "")) .filter(Boolean); if (words.length >= 2) { return `${firstCharacter(words[0])}${firstCharacter(words[1])}`.toUpperCase(); } const compact = Array.from( words[0] ?? normalized.replace(WHITESPACE_REGEX, "") ) .slice(0, 2) .join(""); return compact.toUpperCase() || "?"; } function getAltText(alt?: string, name?: string) { if (alt !== undefined) { return normalizeText(alt); } const normalizedName = normalizeText(name); return normalizedName || "Avatar"; } function resolveImageStatus(status: string): ImageStatus { if (status === "loaded") { return "loaded"; } if (status === "error") { return "error"; } return "idle"; } const rootTransition = { type: "spring" as const, stiffness: 340, damping: 26, mass: 0.88, }; const imageTransition = { type: "spring" as const, stiffness: 300, damping: 24, mass: 0.82, }; const accentTransition = { duration: 0.3, ease: enterEase }; const hoverLift = { scale: 1.02, y: -1, transition: rootTransition }; const pressMotion = { scale: 0.995, y: 0, transition: { duration: 0.1 } }; function getAccentAnimate(imageStatus: ImageStatus) { return { opacity: imageStatus === "loaded" ? 0.18 : 0.34, scale: imageStatus === "loaded" ? 1.02 : 1, x: imageStatus === "loaded" ? 2 : 0, y: imageStatus === "loaded" ? -2 : 0, }; } const accentHover = { opacity: 0.28, scale: 1.03, x: 1, y: -1 }; function getFallbackAnimate(imageStatus: ImageStatus) { if (imageStatus !== "loaded") { return { opacity: 1, scale: 1 }; } return { opacity: 0, scale: 0.94 }; } function getFallbackHover(imageStatus: ImageStatus) { if (imageStatus === "loaded") { return undefined; } return { scale: 1.02 }; } function getImageAnimate(imageStatus: ImageStatus) { if (imageStatus === "loaded") { return { opacity: 1, scale: 1 }; } return { opacity: 0, scale: 1.04 }; } function getImageHover(imageStatus: ImageStatus) { return imageStatus === "loaded" ? { scale: 1.03 } : { scale: 1.015 }; } function getRingAnimate(imageStatus: ImageStatus) { return { opacity: imageStatus === "loaded" ? 1 : 0.85, scale: imageStatus === "loaded" ? 1 : 0.985, }; } const ringHover = { opacity: 0.92, scale: 1.015 }; const Avatar = forwardRef( ( { src, fallback = "?", alt, name, loading = "eager", className, ...props }, ref ) => { const fallbackLabel = getFallbackLabel(fallback, name, alt); const altText = getAltText(alt, name); const [imageStatus, setImageStatus] = useState( src ? "idle" : "error" ); useEffect(() => { if (!src) { setImageStatus("error"); return; } let active = true; const image = new window.Image(); const commitStatus = (status: ImageStatus) => { if (active) { setImageStatus(status); } }; setImageStatus("idle"); image.onload = () => commitStatus("loaded"); image.onerror = () => commitStatus("error"); image.src = src; if (image.complete) { commitStatus(image.naturalWidth > 0 ? "loaded" : "error"); } return () => { active = false; image.onload = null; image.onerror = null; }; }, [src]); return ( {fallbackLabel} {src ? ( { setImageStatus(resolveImageStatus(status)); }} src={src} width={AVATAR_SIZE} /> ) : null} ); } ); Avatar.displayName = "Avatar"; export { Avatar as avatar }; export { Avatar }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"b-avatar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]