4f: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"] 50: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"] 51:Taf5,"use client"; import { Avatar as Base } from "@base-ui/react/avatar"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; const rootVariants = cva( "relative inline-flex shrink-0 select-none items-center justify-center rounded-full ring-1 ring-inset ring-border", { variants: { size: { sm: "h-8 w-8", md: "h-10 w-10", lg: "h-14 w-14", }, }, defaultVariants: { size: "md" }, }, ); const fallbackVariants = cva( "flex h-full w-full items-center justify-center font-semibold", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, tone: { solid: "bg-accent-2 text-on-accent", accent: "bg-accent-tint font-bold text-on-tint", neutral: "bg-surface-2 text-muted", }, }, defaultVariants: { size: "md", tone: "solid" }, }, ); export type AvatarTone = "solid" | "accent" | "neutral"; const dotVariants = cva( "absolute right-0 bottom-0 rounded-full ring-2 ring-surface", { variants: { size: { sm: "h-2 w-2", md: "h-2.5 w-2.5", lg: "h-3.5 w-3.5", }, status: { online: "bg-live animate-live-pulse", away: "bg-warning", busy: "bg-danger", offline: "bg-border-strong", }, }, defaultVariants: { size: "md", status: "offline" }, }, ); export type AvatarStatus = "online" | "away" | "busy" | "offline"; export interface AvatarProps extends Omit< React.ComponentPropsWithoutRef, "render" | "className" >, VariantProps { className?: string; src?: string; alt: string; fallback?: string; status?: AvatarStatus; /** Fallback fill: solid accent (default), tinted accent, or neutral. */ tone?: AvatarTone; } export const Avatar = React.forwardRef( ({ className, src, alt, fallback, size, status, tone, ...props }, ref) => { return ( {src ? ( ) : null} {fallback} {status ? ( ); }, ); Avatar.displayName = "Avatar"; 52:T985,import * as React from "react"; import { cn } from "@/lib/utils"; export type AvatarGroupSize = "sm" | "md" | "lg"; export type AvatarGroupTone = "solid" | "accent" | "neutral"; export interface AvatarGroupProps extends React.HTMLAttributes { /** Cap the visible avatars; the rest collapse into a "+N" chip. */ max?: number; size?: AvatarGroupSize; /** Caption after the stack, e.g. "25+ active users". */ label?: React.ReactNode; /** Colors the overflow chip to match a tinted cluster. Defaults to neutral. */ tone?: AvatarGroupTone; } const overlap: Record = { sm: "-ml-1.5", md: "-ml-2", lg: "-ml-2.5", }; const overflowChip: Record = { sm: "size-8 text-[0.7rem]", md: "size-10 text-xs", lg: "size-14 text-sm", }; const chipTone: Record = { solid: "bg-accent-2 text-on-accent", accent: "bg-accent-tint text-on-tint", neutral: "bg-surface-2 text-muted", }; export const AvatarGroup = React.forwardRef( ( { className, max, size = "md", label, tone = "neutral", children, ...props }, ref, ) => { const all = React.Children.toArray(children); const shown = max != null ? all.slice(0, max) : all; const overflow = all.length - shown.length; return (

{shown.map((child, i) => ( 0 && overlap[size], )} > {child} ))} {overflow > 0 && ( +{overflow} )}

{label != null && ( {label} )}

); }, ); AvatarGroup.displayName = "AvatarGroup"; 4e:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"avatar.tsx","content":"$51","type":"registry:ui","target":"components/ui/avatar.tsx"},{"path":"avatar-group.tsx","content":"$52","type":"registry:ui","target":"components/ui/avatar-group.tsx"}],"className":"h-[70svh] min-h-80"}]]}]