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:T2ee6,"use client" import * as React from "react" import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconUser } from "@tabler/icons-react" import { cva } from "class-variance-authority" import { cn } from "cn" type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl" type AvatarShape = "circle" | "square" type AvatarStatus = "online" | "away" | "busy" | "offline" type ClassName = string | ((state: State) => string | undefined) | undefined const AvatarGroupContext = React.createContext<{ size?: AvatarSize shape?: AvatarShape } | null>(null) function mergeClassName(base: string, className: ClassName) { return typeof className === "function" ? (state: State) => cn(base, className(state)) : cn(base, className) } const avatarVariants = cva( "group/avatar [container-type:size] relative isolate inline-flex shrink-0 rounded-(--avatar-radius) bg-muted align-middle text-muted-foreground outline-none select-none after:pointer-events-none after:absolute after:inset-0 after:z-2 after:rounded-[inherit] after:inset-ring-(length:--hairline) after:inset-ring-foreground/10 focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden", { variants: { size: { xs: "size-5", sm: "size-6", default: "size-8", lg: "size-10", xl: "size-14", }, shape: { circle: "[--avatar-radius:9999px]", square: "", }, }, compoundVariants: [ { shape: "square", size: "xs", className: "[--avatar-radius:var(--radius-sm)]", }, { shape: "square", size: "sm", className: "[--avatar-radius:var(--radius-md)]", }, { shape: "square", size: ["default", "lg"], className: "[--avatar-radius:var(--radius-lg)]", }, { shape: "square", size: "xl", className: "[--avatar-radius:var(--radius-xl)]", }, ], defaultVariants: { size: "default", shape: "circle", }, } ) type AvatarProps = AvatarPrimitive.Root.Props & { size?: AvatarSize shape?: AvatarShape } function Avatar({ className, size, shape, ...props }: AvatarProps) { const group = React.useContext(AvatarGroupContext) const resolvedSize = size ?? group?.size ?? "default" const resolvedShape = shape ?? group?.shape ?? "circle" return ( ) } function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) { return ( ) } function isEmpty(children: React.ReactNode) { return ( children === undefined || children === null || typeof children === "boolean" || (typeof children === "string" && children.trim() === "") ) } type AvatarFallbackProps = useRender.ComponentProps<"span"> & { delay?: number } function AvatarFallback({ className, children, delay = 0, render, ...props }: AvatarFallbackProps) { const [delayPassed, setDelayPassed] = React.useState(delay <= 0) React.useEffect(() => { if (delay <= 0) { return } const timeout = window.setTimeout(() => setDelayPassed(true), delay) return () => window.clearTimeout(timeout) }, [delay]) const ready = delayPassed || delay <= 0 return useRender({ defaultTagName: "span", render, props: mergeProps<"span">( { className: cn( "absolute inset-0 flex items-center justify-center overflow-hidden rounded-(--avatar-radius) bg-muted text-[max(0.5625rem,38cqmin)] leading-none font-medium whitespace-nowrap text-muted-foreground transition-[opacity,visibility] duration-200 ease-out-quint data-[ready=false]:invisible data-[ready=false]:opacity-0 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[56cqmin] [[data-slot=avatar]:has(>[data-slot=avatar-image]:not([data-loading]):not([data-error]):not([data-ending-style]))>&]:invisible [[data-slot=avatar]:has(>[data-slot=avatar-image]:not([data-loading]):not([data-error]):not([data-ending-style]))>&]:opacity-0", className ), children: isEmpty(children) ? : children, }, props, { "data-slot": "avatar-fallback", "data-ready": String(ready) } as Record< string, string > ), }) } const statusLabels: Record = { online: "Online", away: "Away", busy: "Busy", offline: "Offline", } const avatarBadgeVariants = cva( "absolute end-(--avatar-badge-inset) bottom-(--avatar-badge-inset) z-3 inline-flex size-(--avatar-badge-size) items-center justify-center rounded-full ring-2 ring-background select-none [--avatar-badge-inset:calc(min(var(--avatar-radius),50cqmin)*0.2929-var(--avatar-badge-size)/2)] [--avatar-badge-size:max(0.375rem,min(0.875rem,30cqmin))] [&>svg]:pointer-events-none [&>svg]:size-[calc(var(--avatar-badge-size)*0.75)] group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=xs]/avatar:[&>svg]:hidden", { variants: { status: { none: "bg-primary text-primary-foreground", online: "bg-success", away: "bg-warning", busy: "bg-destructive", offline: "border-[max(1.5px,calc(var(--avatar-badge-size)*0.22))] border-muted-foreground bg-background", }, }, defaultVariants: { status: "none", }, } ) type AvatarBadgeProps = React.ComponentProps<"span"> & { status?: AvatarStatus } function AvatarBadge({ className, status, children, ...props }: AvatarBadgeProps) { const [pulse, setPulse] = React.useState({ status, count: 0 }) if (status !== pulse.status) { setPulse({ status, count: pulse.count + 1 }) } const showPulse = pulse.count > 0 && status && status !== "offline" return ( {showPulse ? ( ) : null} {children} ) } const avatarGroupVariants = cva( "group/avatar-group isolate flex w-fit max-w-full items-center", { variants: { size: { xs: "-space-x-1.5", sm: "-space-x-2", default: "-space-x-2", lg: "-space-x-2.5", xl: "-space-x-3.5", }, }, defaultVariants: { size: "default", }, } ) type AvatarGroupProps = React.ComponentProps<"div"> & { size?: AvatarSize shape?: AvatarShape max?: number } function resolveMax(max: number | undefined) { return max !== undefined && Number.isFinite(max) && max >= 1 ? Math.max(2, Math.floor(max)) : Infinity } function AvatarGroup({ className, size = "default", shape = "circle", max, children, ...props }: AvatarGroupProps) { const context = React.useMemo(() => ({ size, shape }), [size, shape]) const items = React.Children.toArray(children) const limit = resolveMax(max) const overflow = items.length > limit ? items.length - limit + 1 : 0 return (

{overflow ? items.slice(0, limit - 1) : items} {overflow ? : null}

) } function formatCount(count: number) { return count > 99 ? "99+" : `+${count}` } type AvatarGroupCountProps = React.ComponentProps<"span"> & { count?: number size?: AvatarSize shape?: AvatarShape } function AvatarGroupCount({ className, count, size, shape, children, ...props }: AvatarGroupCountProps) { const group = React.useContext(AvatarGroupContext) const resolvedSize = size ?? group?.size ?? "default" const resolvedShape = shape ?? group?.shape ?? "circle" const value = count !== undefined && Number.isFinite(count) ? Math.max(0, Math.floor(count)) : undefined return ( {value !== undefined && children === undefined ? ( <> {formatCount(value)} {`${value} more`} ) : ( children )} ) } const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null const visible = /[\p{L}\p{N}\p{Extended_Pictographic}]/u const markless = /^[\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}]/u function graphemes(word: string) { return segmenter ? Array.from(segmenter.segment(word), (part) => part.segment) : Array.from(word) } function firstGrapheme(word: string) { const grapheme = graphemes(word.slice(0, 64)).find((part) => visible.test(part) ) if (!grapheme) { return "" } return markless.test(grapheme) ? grapheme.replace(/\p{M}+/gu, "") : grapheme } function getInitials(name: string | null | undefined, max = 2) { if (typeof name !== "string") { return "" } const limit = Number.isFinite(max) ? Math.max(1, Math.floor(max)) : 2 const source = name.trim() const at = source.indexOf("@") const words = at > 0 ? source .slice(0, at) .split("+")[0] .split(/[._-]+/u) : source.split(/\s+/u) const letters: string[] = [] for (const word of words) { const letter = firstGrapheme(word) if (letter) { letters.push(letter) } } const picked = letters.length <= limit ? letters : limit === 1 ? letters.slice(0, 1) : [...letters.slice(0, limit - 1), letters[letters.length - 1]] return picked.join("").toLocaleUpperCase() } export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, avatarVariants, avatarBadgeVariants, getInitials, type AvatarProps, type AvatarFallbackProps, type AvatarBadgeProps, type AvatarGroupProps, type AvatarGroupCountProps, type AvatarSize, type AvatarShape, type AvatarStatus, } 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@^1.8.0",{"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@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/avatar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]