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:T2ae7,"use client"; import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps } from "react"; import type { Sx } from "@/lib/constella/styles"; import { avatarVars, badgeVars, colors, durations, easings, fontSizes, fontWeights, lineHeights, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const avatarSizes = ["sm", "default", "lg"] as const; const avatarCorners = ["pill", "rounded"] as const; type AvatarSize = (typeof avatarSizes)[number]; type AvatarCorners = (typeof avatarCorners)[number]; type Styled = Omit & { sx?: Sx; }; type AvatarProps = Styled & { /** `rounded` for a logo; a group's cut-outs assume a pill. */ corners?: AvatarCorners; size?: AvatarSize; }; const avatarPresences = ["online", "away", "busy", "offline"] as const; type AvatarPresence = (typeof avatarPresences)[number]; type AvatarBadgeProps = Styled> & { presence?: AvatarPresence; }; const inGroup = ":is([data-slot='avatar-group'] > *)"; const groupOf = (size: AvatarSize) => `:is([data-slot='avatar-group']:has(> [data-size='${size}']) > *)`; // Leading a badge, it takes the size the badge sets for it. const inBadge = (size: string) => ({ default: size, ":is([data-slot='badge'] > :first-child)": badgeVars.avatar, }); const gap = `calc(2 * ${strokes.border})`; const overlap = space.xs; // A hole one gap wider than a circle of `size` centered at `x y`, so whatever surface is // behind shows through. Chromium rejects a radius mixing `%` and `px`, so all are lengths. const hole = (size: string, x: string, y: string) => `radial-gradient(circle calc(${size} / 2 + ${gap}) at ${x} ${y}, transparent calc(100% - 0.5px), black calc(100% + 0.5px))`; // Each avatar but the last is cut where the next one overlaps it. const overlapped = `${inGroup}:not(:last-child)`; const hasBadge = ":has(> [data-slot='avatar-badge'])"; // Not `:dir(rtl)`: Lightning CSS lowers it to a `:lang()` list that ignores `dir`. const rtl = ":is([dir='rtl'], [dir='rtl'] *)"; const styles = stylex.create({ avatar: { // The fallback leaves as the photo arrives, so the photo fades in over its fill. backgroundColor: colors.fillOpaque, borderStartStartRadius: avatarVars.corner, borderStartEndRadius: avatarVars.corner, borderEndStartRadius: avatarVars.corner, borderEndEndRadius: avatarVars.corner, display: "flex", flexShrink: 0, height: avatarVars.size, marginInlineStart: { default: null, [`${inGroup}:not(:first-child)`]: `calc(-1 * ${overlap})`, }, maskImage: { default: null, [overlapped]: { default: hole( avatarVars.size, `calc(${avatarVars.size} * 1.5 - ${overlap})`, `calc(${avatarVars.size} / 2)` ), [rtl]: hole( avatarVars.size, `calc(${overlap} - ${avatarVars.size} / 2)`, `calc(${avatarVars.size} / 2)` ), }, }, position: "relative", // The photo, fallback and edge read this; the badge itself stays whole. [avatarVars.badgeCut]: { default: null, [hasBadge]: { default: hole( avatarVars.badge, `calc(${avatarVars.size} - ${avatarVars.badge} / 2)`, `calc(${avatarVars.size} - ${avatarVars.badge} / 2)` ), [rtl]: hole( avatarVars.badge, `calc(${avatarVars.badge} / 2)`, `calc(${avatarVars.size} - ${avatarVars.badge} / 2)` ), }, }, userSelect: "none", width: avatarVars.size, // A photo's edge is drawn inside it, so a light or dark image keeps its shape. "::after": { borderBlockColor: colors.border, borderInlineColor: colors.border, borderStartStartRadius: avatarVars.corner, borderStartEndRadius: avatarVars.corner, borderEndStartRadius: avatarVars.corner, borderEndEndRadius: avatarVars.corner, borderBlockStyle: "solid", borderInlineStyle: "solid", borderBlockWidth: strokes.border, borderInlineWidth: strokes.border, content: "''", insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, maskImage: avatarVars.badgeCut, pointerEvents: "none", position: "absolute", }, }, sm: { [avatarVars.size]: inBadge(sizes.controlXs), [avatarVars.badge]: space.xs, }, default: { [avatarVars.size]: inBadge(sizes.controlMd), [avatarVars.badge]: `calc(${space.xs} + ${space.xxxs})`, }, lg: { [avatarVars.size]: inBadge(sizes.controlLg), [avatarVars.badge]: space.sm, }, // A ladder step under the badge's or a control's corner, so a logo tile reads as one. rounded: { [avatarVars.corner]: { default: radii.sm, ":is([data-size='sm'])": radii.xs, ":is([data-slot='badge'] > :first-child)": radii.xs, }, }, image: { aspectRatio: "1", borderStartStartRadius: avatarVars.corner, borderStartEndRadius: avatarVars.corner, borderEndStartRadius: avatarVars.corner, borderEndEndRadius: avatarVars.corner, height: "100%", maskImage: avatarVars.badgeCut, objectFit: "cover", opacity: { default: 1, ":is([data-starting-style])": 0 }, transitionDuration: durations.crossfade, transitionProperty: "opacity", transitionTimingFunction: easings.crossfade, width: "100%", }, fallback: { alignItems: "center", backgroundColor: colors.fillOpaque, borderStartStartRadius: avatarVars.corner, borderStartEndRadius: avatarVars.corner, borderEndStartRadius: avatarVars.corner, borderEndEndRadius: avatarVars.corner, color: colors.textSecondary, display: "flex", fontSize: { default: fontSizes.textSm, ":is([data-size='sm'] *)": fontSizes.captionLg, ":is([data-slot='badge'] > :first-child > *)": fontSizes.captionLg, }, lineHeight: { default: lineHeights.textSm, ":is([data-size='sm'] *)": lineHeights.captionLg, ":is([data-slot='badge'] > :first-child > *)": lineHeights.captionLg, }, fontWeight: fontWeights.medium, height: "100%", justifyContent: "center", maskImage: avatarVars.badgeCut, width: "100%", }, badge: { alignItems: "center", backgroundColor: colors.accentSolid, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, color: colors.accentOnSolid, display: "inline-flex", height: avatarVars.badge, insetBlockEnd: 0, insetInlineEnd: 0, justifyContent: "center", position: "absolute", transitionDuration: durations.hover, transitionProperty: "background-color", transitionTimingFunction: "ease", width: avatarVars.badge, zIndex: 1, }, online: { backgroundColor: colors.successSolid }, away: { backgroundColor: colors.warningSolid }, busy: { backgroundColor: colors.dangerSolid }, offline: { backgroundColor: colors.textMuted }, group: { display: "flex", }, count: { alignItems: "center", backgroundColor: colors.fillOpaque, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, color: colors.textSecondary, display: "flex", flexShrink: 0, fontSize: { default: fontSizes.textSm, [groupOf("sm")]: fontSizes.captionLg, }, fontWeight: fontWeights.medium, height: { default: sizes.controlMd, [groupOf("sm")]: sizes.controlXs, [groupOf("lg")]: sizes.controlLg, }, justifyContent: "center", marginInlineStart: `calc(-1 * ${space.xs})`, position: "relative", width: { default: sizes.controlMd, [groupOf("sm")]: sizes.controlXs, [groupOf("lg")]: sizes.controlLg, }, // The avatars' edge, so the count reads as one of them. "::after": { borderBlockColor: colors.border, borderInlineColor: colors.border, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, borderBlockStyle: "solid", borderInlineStyle: "solid", borderBlockWidth: strokes.border, borderInlineWidth: strokes.border, content: "''", insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, pointerEvents: "none", position: "absolute", }, }, }); const sizeStyles = { default: styles.default, lg: styles.lg, sm: styles.sm, } satisfies Record; function Avatar({ corners = "pill", size = "default", sx, ...props }: AvatarProps) { return ( ); } function AvatarImage({ sx, ...props }: Styled) { return ( ); } function AvatarFallback({ sx, ...props }: Styled) { return ( ); } const presenceStyles = { away: styles.away, busy: styles.busy, offline: styles.offline, online: styles.online, } satisfies Record; const presenceLabels = { away: "Away", busy: "Busy", offline: "Offline", online: "Online", } satisfies Record; function AvatarBadge({ presence, sx, ...props }: AvatarBadgeProps) { return ( ); } function AvatarGroup({ sx, ...props }: Styled>) { return (

); } function AvatarGroupCount({ sx, ...props }: Styled>) { return (

); } export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, avatarCorners, avatarSizes, avatarPresences, }; export type { AvatarBadgeProps, AvatarProps, AvatarCorners, AvatarSize, AvatarPresence, }; 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","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/avatar.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]