4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T1118,import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; import { avatarStyleKeys, shouldShowAvatarFallback } from '../lib/core'; import type { AvatarImageStatus } from '../lib/core'; import type { AvatarBaseProps, AvatarImageBaseProps } from '../lib/core'; import styles from './avatar.module.scss'; interface AvatarContextValue { status: AvatarImageStatus; setStatus: (status: AvatarImageStatus) => void; hasImage: boolean; setHasImage: (has: boolean) => void; } const AvatarContext = createContext(null); function useAvatarContext(): AvatarContextValue { const context = useContext(AvatarContext); if (!context) { throw new Error('Avatar sub-components must be used within .'); } return context; } export interface AvatarProps extends React.HTMLAttributes, AvatarBaseProps {} const Avatar = React.forwardRef(({ className = '', size = 'default', children, ...props }, ref) => { const [status, setStatus] = useState('loading'); const [hasImage, setHasImage] = useState(false); return ( {children} ); }); Avatar.displayName = 'Avatar'; export interface AvatarImageProps extends React.ImgHTMLAttributes, AvatarImageBaseProps {} const AvatarImage = React.forwardRef(({ className = '', onLoad, onError, ...props }, ref) => { const context = useAvatarContext(); const imgRef = useRef(null); useEffect(() => { context.setHasImage(true); const img = imgRef.current; if (img && img.complete) { context.setStatus(img.naturalWidth > 0 ? 'loaded' : 'error'); } }, [context]); function setRef(element: HTMLImageElement | null) { imgRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleLoad(event: React.SyntheticEvent) { context.setStatus('loaded'); onLoad?.(event); } function handleError(event: React.SyntheticEvent) { context.setStatus('error'); onError?.(event); } return ; }); AvatarImage.displayName = 'AvatarImage'; export interface AvatarFallbackProps extends React.HTMLAttributes {} const AvatarFallback = React.forwardRef(({ className = '', children, ...props }, ref) => { const context = useAvatarContext(); if (!shouldShowAvatarFallback(context.status, context.hasImage)) { return null; } return ( {children} ); }); AvatarFallback.displayName = 'AvatarFallback'; export interface AvatarBadgeProps extends React.HTMLAttributes {} const AvatarBadge = React.forwardRef(({ className = '', children, ...props }, ref) => { return ( {children} ); }); AvatarBadge.displayName = 'AvatarBadge'; export interface AvatarGroupProps extends React.HTMLAttributes {} const AvatarGroup = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); AvatarGroup.displayName = 'AvatarGroup'; export interface AvatarGroupCountProps extends React.HTMLAttributes {} const AvatarGroupCount = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); AvatarGroupCount.displayName = 'AvatarGroupCount'; export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount }; export default Avatar; 4e:T70c,@use '../../../styles/variables/colors' as *; .root { position: relative; display: inline-flex; flex-shrink: 0; width: 2rem; height: 2rem; overflow: hidden; border-radius: $radius-full; user-select: none; &[data-size='sm'] { width: 1.5rem; height: 1.5rem; } &[data-size='lg'] { width: 2.5rem; height: 2.5rem; } } .image { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: $radius-full; background-color: $muted; color: $muted-foreground; font-size: $text-sm; &[hidden] { display: none; } [data-size='sm'] & { font-size: $text-xs; } } .badge { position: absolute; right: 0; bottom: 0; z-index: 10; display: inline-flex; align-items: center; justify-content: center; border-radius: $radius-full; background-color: $primary; color: $primary-foreground; box-shadow: 0 0 0 2px $background; user-select: none; [data-size='sm'] & { width: 0.5rem; height: 0.5rem; svg { display: none; } } [data-size='default'] & { width: 0.625rem; height: 0.625rem; svg { width: 0.5rem; height: 0.5rem; } } [data-size='lg'] & { width: 0.75rem; height: 0.75rem; svg { width: 0.5rem; height: 0.5rem; } } } .group { display: flex; > .root { margin-left: -0.5rem; box-shadow: 0 0 0 2px $background; &:first-child { margin-left: 0; } } } .groupCount { position: relative; display: flex; flex-shrink: 0; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: $radius-full; background-color: $muted; color: $muted-foreground; font-size: $text-sm; box-shadow: 0 0 0 2px $background; svg { width: 1rem; height: 1rem; } } 4a:["$","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":[null,["$","$L4b",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"packages/react/src/components/avatar/avatar.tsx","content":"$4d","type":"registry:ui","target":"components/ui/avatar/avatar.tsx"},{"path":"packages/styles/scss/components/avatar.module.scss","content":"$4e","type":"registry:file","target":"components/ui/avatar/avatar.module.scss"},{"path":"packages/react/src/components/avatar/index.ts","content":"export {\n\tAvatar,\n\tAvatarImage,\n\tAvatarFallback,\n\tAvatarBadge,\n\tAvatarGroup,\n\tAvatarGroupCount,\n\ttype AvatarProps,\n\ttype AvatarImageProps,\n\ttype AvatarFallbackProps,\n\ttype AvatarBadgeProps,\n\ttype AvatarGroupProps,\n\ttype AvatarGroupCountProps,\n} from './avatar';\n","type":"registry:ui","target":"components/ui/avatar/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]