@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/avatar/Avatar.d.ts

@@ -1,18 +1,60 @@
-export interface AvatarProps {
-    /** Image URL. Falls back to the generated pattern when null or missing. */
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the diameter is the control height of the rung. */
+export declare enum AvatarSize {
+    /** 20px (`size.control.xSmall`); initials `caption`. */
+    X_SMALL = "X_SMALL",
+    /** 24px (`size.control.small`); initials `body_sm`. */
+    SMALL = "SMALL",
+    /** 32px (`size.control.medium`); initials `body_md`. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px (`size.control.large`); initials `body_lg`. */
+    LARGE = "LARGE",
+    /** 40px (`size.control.xLarge`); initials `body_lg`. */
+    X_LARGE = "X_LARGE"
+}
+export interface AvatarProps extends AriaAttributes {
+    /** Name of the person or entity. It gives the initials fallback and the accessible name. */
+    name?: string;
+    /** Image URL. When it is missing, `null`, or fails to load, the fallback shows. */
     img?: string | null;
-    /** Render the shimmer placeholder instead. */
-    isLoading?: boolean;
-    /** Square size in px. @default 16 */
-    size?: number;
-    /** Override the generated pattern's color. */
-    hex?: string;
-    /** Input to the generated pattern — same seed always yields the same avatar. */
+    /** Input to the generated dot pattern: the same seed always draws the same pattern. When set, the fallback is the pattern instead of the initials. */
     seed?: string;
+    /**
+     * Diameter: a control rung (20 / 24 / 32 / 36 / 40px), or a number of px for avatars off the
+     * scale. Prefer the rungs, and use even numbers so contents center on whole pixels.
+     * @default AvatarSize.MEDIUM
+     */
+    size?: AvatarSize | number;
+    /**
+     * Square with `radius.md` corners instead of round. Use it for entities (workspaces, projects, sources), not people.
+     * @default false
+     */
+    isSquare?: boolean;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …) that tints the fallback: the initials
+     * and pattern take `text.<family>`, the surface `background.<family>` with a `border.<family>`
+     * hairline. An image avatar is unaffected. Ignored with `hex`.
+     */
+    color?: PaletteColor;
+    /** Raw color for the fallback (pattern dots and initials). Discouraged: it does not follow the theme. Use it only for data-driven colors. Overrides `color`. */
+    hex?: Hex;
+    /**
+     * Shows a pulsing `Skeleton` in the avatar's exact shape and box instead of the avatar.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Accessible name, when it should differ from `name` (for example "Ada Lovelace, owner"). Without it and without `name`, the avatar is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. Merged after `--gx-avatar-size` / `--gx-avatar-hex`. */
+    style?: CSSProperties;
 }
-/**
- * A user or entity avatar. Falls back to a dot pattern derived from `seed` when
- * there's no image, so the same user is always recognizable without one.
- */
-declare const Avatar: ({ img, isLoading, size, hex, seed }: AvatarProps) => import("react").JSX.Element;
+/** A person or entity: image, initials or generated pattern, round or square. */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/avatar/Avatar.js

@@ -1,45 +1,155 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import { getDarkerHexColor, getLighterHexColor, getOpaqueHexColor } from "../utils/colors.js";
-import AvatarShimmer from "./AvatarShimmer.js";
+import Skeleton, { SkeletonVariant } from "../feedback/Skeleton.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { CONTROL_SIZE } from "../theme/tokens/scales.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
-import { useCallback, useMemo, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/avatar/Avatar.tsx
-var _exp2 = () => ({ $size }) => $size;
-var _exp3 = () => ({ theme }) => theme.color.border.primary;
-var _exp4 = () => ({ theme }) => theme.color.background.secondary;
-var AvatarSurface = withTheme(/*#__PURE__*/ styled("div")({
-	name: "AvatarSurface",
-	class: "ave5wdp",
-	propsAsIs: false,
-	vars: {
-		"ave5wdp-0": [_exp2(), "px"],
-		"ave5wdp-1": [_exp3()],
-		"ave5wdp-2": [_exp4()]
-	}
-}));
-var AvatarImage = /*#__PURE__*/ styled("img")({
-	name: "AvatarImage",
-	class: "a3r0r1h",
+/**
+* The small picture that stands for one person or one entity beside its name. It shows `img` when
+* there is one and it loads; otherwise a fallback: the initials of `name`, or the 1.x generated dot
+* pattern derived from `seed`, so the same user or project always looks the same without an image.
+* Round by default (people), square with `isSquare` (entities), with a `Skeleton` stand-in while
+* `isLoading`.
+*
+* Color is CSS, not JS: the pattern's five tones are `currentColor` tones (`color-mix`,
+* `fill-opacity`); a categorical `color` tints the fallback through `AVATAR_COLOR_TO_CSS_MAP`
+* (`--gx-avatar-tint`, the surface fill and hairline) and `hex` is the `--gx-avatar-hex` custom
+* property, so a theme switch needs no re-render and nothing reads the theme at runtime.
+*
+* Not a button (wrap it in one), not a stack (`AvatarGroup`), not a name label (put a `Text`
+* beside it), not a generic image container.
+*/
+/** Canonical rungs; the diameter is the control height of the rung. */
+var AvatarSize = /* @__PURE__ */ function(AvatarSize) {
+	/** 20px (`size.control.xSmall`); initials `caption`. */
+	AvatarSize["X_SMALL"] = "X_SMALL";
+	/** 24px (`size.control.small`); initials `body_sm`. */
+	AvatarSize["SMALL"] = "SMALL";
+	/** 32px (`size.control.medium`); initials `body_md`. The default. */
+	AvatarSize["MEDIUM"] = "MEDIUM";
+	/** 36px (`size.control.large`); initials `body_lg`. */
+	AvatarSize["LARGE"] = "LARGE";
+	/** 40px (`size.control.xLarge`); initials `body_lg`. */
+	AvatarSize["X_LARGE"] = "X_LARGE";
+	return AvatarSize;
+}({});
+/**
+* The avatar's box. Phrasing content, so it is valid inside `Text`, a `<button>` or a `<label>`.
+* It does not clip; `Surface` clips.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Avatar-rve5wdp",
 	propsAsIs: false
 });
-var _exp6 = () => ({ $dotSize }) => $dotSize;
-var _exp7 = () => ({ $color }) => $color;
-var _exp8 = () => ({ $x }) => $x;
-var _exp9 = () => ({ $y }) => $y;
-var Dot = /*#__PURE__*/ styled("div")({
-	name: "Dot",
-	class: "d1n32hoy",
-	propsAsIs: false,
-	vars: {
-		"d1n32hoy-0": [_exp6(), "px"],
-		"d1n32hoy-1": [_exp7()],
-		"d1n32hoy-2": [_exp8(), "px"],
-		"d1n32hoy-3": [_exp9(), "px"]
-	}
+/** The neutral disc (or square) holding exactly one of the image, the initials or the pattern. */
+var Surface = /*#__PURE__*/ styled("span")({
+	name: "Surface",
+	class: "gx-Avatar-Surface-s3r0r1h",
+	propsAsIs: false
 });
-var seededRandom = (seed) => {
+var Image = /*#__PURE__*/ styled("img")({
+	name: "Image",
+	class: "gx-Avatar-Image-i1n32hoy",
+	propsAsIs: false
+});
+/** The generated pattern: one `viewBox` grid that scales to any diameter. Tinted by `hex` or `color`. */
+var Pattern = /*#__PURE__*/ styled("svg")({
+	name: "Pattern",
+	class: "gx-Avatar-Pattern-p94shpk",
+	propsAsIs: false
+});
+/** Diameter per rung. */
+var AVATAR_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Avatar-X_SMALL-xblj6sc",
+	["SMALL"]: "gx-Avatar-SMALL-s116bpx4",
+	["MEDIUM"]: "gx-Avatar-MEDIUM-m1ykihtn",
+	["LARGE"]: "gx-Avatar-LARGE-l1vt38m2",
+	["X_LARGE"]: "gx-Avatar-X_LARGE-xjtmhfq"
+};
+/** A px diameter, set as `--gx-avatar-size` in `style` (a continuous value). */
+var PX_SIZE_CSS = "gx-Avatar-PX_SIZE_CSS-ptukwhw";
+/** `isSquare`: control-radius corners at every size. */
+var SQUARE_CSS = "gx-Avatar-SQUARE_CSS-sdv3w7l";
+/** The initials' color, which the `INHERIT` text takes. Tinted by `hex` or `color`. */
+var INITIALS_CSS = "gx-Avatar-INITIALS_CSS-i1c3dn12";
+/** Categorical `color` on the fallback surface: the tint the initials and pattern read, the family's fill and hairline. */
+var AVATAR_COLOR_TO_CSS_MAP = {
+	red: "gx-Avatar-red-r63z1lx",
+	orange: "gx-Avatar-orange-o1x7b2uf",
+	amber: "gx-Avatar-amber-az59h18",
+	yellow: "gx-Avatar-yellow-y1y5rsmb",
+	lime: "gx-Avatar-lime-lzxsfel",
+	green: "gx-Avatar-green-g414m3u",
+	emerald: "gx-Avatar-emerald-e1uew7pg",
+	teal: "gx-Avatar-teal-t6z9q1b",
+	cyan: "gx-Avatar-cyan-chef53l",
+	sky: "gx-Avatar-sky-s1o5jkv9",
+	blue: "gx-Avatar-blue-be52zro",
+	indigo: "gx-Avatar-indigo-i9qjv1q",
+	violet: "gx-Avatar-violet-v6zn1e0",
+	purple: "gx-Avatar-purple-pc3yopb",
+	fuchsia: "gx-Avatar-fuchsia-fzee674",
+	pink: "gx-Avatar-pink-p1f7v2mb",
+	rose: "gx-Avatar-rose-r87xw4u"
+};
+/**
+* The pattern's five tones of `currentColor`, indexed by the PRNG (a palette index, not an enum
+* axis). They replace the 1.x JS color math: base, lighter, darker, 30% and 15% opaque.
+*/
+var PATTERN_TONE_CSS = [
+	"gx-Avatar-PATTERN_TONE_CSS-p17r187b",
+	"gx-Avatar-PATTERN_TONE_CSS-p9ksu8k",
+	"gx-Avatar-PATTERN_TONE_CSS-p1ql1bax",
+	"gx-Avatar-PATTERN_TONE_CSS-p12sxa1c",
+	"gx-Avatar-PATTERN_TONE_CSS-pq3238h"
+];
+/** Initials text per rung (Constitution III-A.4): lines 12 / 16 / 16 / 20 / 20px, so whole-pixel offsets. */
+var AVATAR_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** Rung diameters in px for JS logic, resolved from `CONTROL_SIZE` (the token source). */
+var AVATAR_SIZE_TO_DIAMETER_PX_MAP = {
+	["X_SMALL"]: Number.parseFloat(CONTROL_SIZE.xSmall),
+	["SMALL"]: Number.parseFloat(CONTROL_SIZE.small),
+	["MEDIUM"]: Number.parseFloat(CONTROL_SIZE.medium),
+	["LARGE"]: Number.parseFloat(CONTROL_SIZE.large),
+	["X_LARGE"]: Number.parseFloat(CONTROL_SIZE.xLarge)
+};
+/** Px diameter → initials text step: the largest step whose minimum is ≤ the diameter. */
+var AVATAR_PX_TO_TEXT_SIZE_STEPS = [
+	[80, TextSize.HEADING_LG],
+	[64, TextSize.HEADING_MD],
+	[48, TextSize.HEADING_SM],
+	[36, TextSize.BODY_LG],
+	[32, TextSize.BODY_MD],
+	[24, TextSize.BODY_SM],
+	[0, TextSize.CAPTION]
+];
+/** Diameter → pattern grid (the 1.x thresholds): ≤ 24px → 5, ≤ 48px → 7, larger → 9. */
+var PATTERN_GRID_STEPS = [[24, 5], [48, 7]];
+var PATTERN_GRID_MAX = 9;
+/** Pattern dot radius in grid cells (dot = 0.6 of a cell, as in 1.x). */
+var PATTERN_DOT_RADIUS = .3;
+/** Number of pattern tones (`PATTERN_TONE_CSS`). */
+var PATTERN_TONE_COUNT = 5;
+/** The initials text step for a px diameter. */
+function getTextSizeForPx(px) {
+	return AVATAR_PX_TO_TEXT_SIZE_STEPS.find(([min]) => min <= px)?.[1] ?? TextSize.CAPTION;
+}
+/** The pattern grid for a diameter. */
+function getPatternGrid(px) {
+	return PATTERN_GRID_STEPS.find(([max]) => px <= max)?.[1] ?? PATTERN_GRID_MAX;
+}
+/** The 1.x seeded PRNG, verbatim: a 32-bit string hash feeding an LCG. */
+function seededRandom(seed) {
 	let hash = 0;
 	for (let i = 0; i < seed.length; i++) {
 		const char = seed.charCodeAt(i);
@@ -50,71 +160,115 @@ var seededRandom = (seed) => {
 		hash = hash * 1103515245 + 12345 & 2147483647;
 		return hash / 2147483647;
 	};
-};
+}
+/** The 1.x pattern: tones for the left half, row by row, mirrored onto the right half. */
+function getPatternCells(seedValue, grid) {
+	const random = seededRandom(seedValue);
+	const halfCols = Math.ceil(grid / 2);
+	const cells = [];
+	for (let row = 0; row < grid; row++) {
+		const tones = [];
+		for (let col = 0; col < halfCols; col++) tones.push(Math.floor(random() * PATTERN_TONE_COUNT));
+		for (let col = 0; col < grid; col++) {
+			const tone = col < halfCols ? tones[col] : tones[grid - 1 - col];
+			cells.push({
+				key: `${row}-${col}`,
+				row,
+				col,
+				tone: tone ?? 0
+			});
+		}
+	}
+	return cells;
+}
 /**
-* A user or entity avatar. Falls back to a dot pattern derived from `seed` when
-* there's no image, so the same user is always recognizable without one.
+* Initials from `name`: one part keeps one or two characters whole, otherwise its first; two or
+* more parts give the first character of the first and of the last part. Code points, upper-cased.
 */
-var Avatar = ({ img, isLoading, size = 16, hex, seed }) => {
-	const { theme } = useGalaxyTheme();
+function getInitials(name) {
+	if (name === void 0) return "";
+	const parts = name.trim().split(/\s+/).filter((part) => part.length > 0);
+	const first = parts[0];
+	if (first === void 0) return "";
+	const firstChars = Array.from(first);
+	if (parts.length === 1) return (firstChars.length <= 2 ? first : firstChars[0] ?? "").toLocaleUpperCase();
+	const last = parts[parts.length - 1] ?? "";
+	return `${firstChars[0] ?? ""}${Array.from(last)[0] ?? ""}`.toLocaleUpperCase();
+}
+/** A person or entity: image, initials or generated pattern, round or square. */
+var Avatar = forwardRef(function Avatar({ name, img, seed, size = "MEDIUM", isSquare = false, color, hex, isLoading = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const imageRef = useRef(null);
 	const [failedSrc, setFailedSrc] = useState(null);
-	const handleError = useCallback(() => {
-		setFailedSrc(img ?? null);
+	useEffect(() => {
+		const image = imageRef.current;
+		if (image?.complete && image.naturalWidth === 0 && img) setFailedSrc(img);
 	}, [img]);
-	const dots = useMemo(() => {
-		const baseHex = hex ?? theme.color.text.tertiary;
-		const colors = [
-			baseHex,
-			getLighterHexColor(baseHex, 30),
-			getDarkerHexColor(baseHex, 25),
-			getOpaqueHexColor(baseHex, .3),
-			getOpaqueHexColor(baseHex, .15)
-		];
-		const gridSize = size <= 24 ? 5 : size <= 48 ? 7 : 9;
-		const step = size / gridSize;
-		const dotSize = Math.round(step * .6);
-		const random = seededRandom(seed ?? hex ?? "default");
-		const halfCols = Math.ceil(gridSize / 2);
-		const pattern = [];
-		for (let row = 0; row < gridSize; row++) {
-			pattern[row] = [];
-			for (let col = 0; col < halfCols; col++) pattern[row][col] = { colorIndex: Math.floor(random() * colors.length) };
-			for (let col = halfCols; col < gridSize; col++) pattern[row][col] = pattern[row][gridSize - 1 - col];
-		}
-		const dotPositions = [];
-		for (let row = 0; row < gridSize; row++) for (let col = 0; col < gridSize; col++) {
-			const x = col * step + (step - dotSize) / 2;
-			const y = row * step + (step - dotSize) / 2;
-			dotPositions.push({
-				x,
-				y,
-				color: colors[pattern[row][col].colorIndex],
-				key: `${row}-${col}`
-			});
-		}
-		return {
-			dotSize,
-			dotPositions
-		};
-	}, [
-		size,
-		hex,
-		seed,
-		theme
-	]);
-	return /* @__PURE__ */ jsx(AvatarSurface, {
-		$size: size,
-		children: isLoading ? /* @__PURE__ */ jsx(AvatarShimmer, { size }) : Boolean(img) && failedSrc !== img ? /* @__PURE__ */ jsx(AvatarImage, {
-			src: img,
-			alt: "Avatar",
-			onError: handleError
-		}) : dots.dotPositions.map(({ x, y, color, key }) => /* @__PURE__ */ jsx(Dot, {
-			$dotSize: dots.dotSize,
-			$x: x,
-			$y: y,
-			$color: color
+	const isPx = typeof size === "number";
+	const diameter = isPx ? size : AVATAR_SIZE_TO_DIAMETER_PX_MAP[size];
+	const textSize = isPx ? getTextSizeForPx(size) : AVATAR_SIZE_TO_TEXT_SIZE_MAP[size];
+	const imageSrc = typeof img === "string" && img.length > 0 && img !== failedSrc ? img : void 0;
+	const hasImage = imageSrc !== void 0;
+	const initials = getInitials(name);
+	const isInitials = !hasImage && seed === void 0 && initials.length > 0;
+	const tintCss = color !== void 0 && hex === void 0 && !hasImage ? AVATAR_COLOR_TO_CSS_MAP[color] : void 0;
+	const seedValue = seed ?? hex ?? "default";
+	const grid = getPatternGrid(diameter);
+	const cells = useMemo(() => getPatternCells(seedValue, grid), [seedValue, grid]);
+	const accessibleName = ariaLabel ?? name;
+	const accessibility = accessibleName !== void 0 && accessibleName.length > 0 ? {
+		role: "img",
+		"aria-label": accessibleName
+	} : { "aria-hidden": true };
+	const variables = {};
+	if (isPx) variables["--gx-avatar-size"] = `${size}px`;
+	if (hex !== void 0) variables["--gx-avatar-hex"] = hex;
+	let content;
+	if (imageSrc !== void 0) content = /* @__PURE__ */ jsx(Image, {
+		ref: imageRef,
+		src: imageSrc,
+		alt: "",
+		onError: () => setFailedSrc(imageSrc)
+	});
+	else if (isInitials) content = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: textSize,
+		weight: TextWeight.MEDIUM,
+		variant: TextVariant.INHERIT,
+		children: initials
+	});
+	else content = /* @__PURE__ */ jsx(Pattern, {
+		viewBox: `0 0 ${grid} ${grid}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		children: cells.map(({ key, row, col, tone }) => /* @__PURE__ */ jsx("circle", {
+			cx: col + .5,
+			cy: row + .5,
+			r: PATTERN_DOT_RADIUS,
+			className: PATTERN_TONE_CSS[tone]
 		}, key))
 	});
-};
+	const root = /* @__PURE__ */ jsx(Root, {
+		...accessibility,
+		...rest,
+		ref,
+		id,
+		className: cx(isPx ? PX_SIZE_CSS : AVATAR_SIZE_TO_CSS_MAP[size], isSquare && SQUARE_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(Surface, {
+			className: cx(tintCss, isInitials && INITIALS_CSS),
+			children: content
+		})
+	});
+	if (!isLoading) return root;
+	return /* @__PURE__ */ jsx(Skeleton, {
+		variant: isSquare ? SkeletonVariant.RECT : SkeletonVariant.CIRCLE,
+		isLoading: true,
+		children: root
+	});
+});
+Avatar.displayName = "Avatar";
 //#endregion
-export { Avatar as default };
+export { AvatarSize, Avatar as default };

package/dist/avatar/AvatarGroup.d.ts

@@ -0,0 +1,43 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Canonical rungs; the diameter of every avatar in the group is the rung's control height. */
+export declare enum AvatarGroupSize {
+    /** 20px avatars, 4px overlap (16px step). */
+    X_SMALL = "X_SMALL",
+    /** 24px avatars, 8px overlap (16px step). */
+    SMALL = "SMALL",
+    /** 32px avatars, 8px overlap (24px step). The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px avatars, 12px overlap (24px step). */
+    LARGE = "LARGE",
+    /** 40px avatars, 12px overlap (28px step). */
+    X_LARGE = "X_LARGE"
+}
+export interface AvatarGroupProps extends AriaAttributes {
+    /** The `Avatar` elements, in display order. Each one's `size` and `isSquare` are replaced by the group's. Non-element children are ignored. */
+    children?: ReactNode;
+    /** Most avatars to show. When there are more, the first `max` show and a `+N` tile stands for the rest. Floored; values below 1 show 1. Unset shows all. */
+    max?: number;
+    /**
+     * Rung of every avatar and of the `+N` tile (20 / 24 / 32 / 36 / 40px). It also sets the overlap.
+     * @default AvatarGroupSize.MEDIUM
+     */
+    size?: AvatarGroupSize;
+    /**
+     * Square avatars and `+N` tile (`radius.md`), for groups of entities.
+     * @default false
+     */
+    isSquare?: boolean;
+    /** Accessible name of the group (for example "Workspace members"). */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A row of overlapping avatars, at most `max` of them, ending in a `+N` tile for the rest. */
+declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default AvatarGroup;

package/dist/avatar/AvatarGroup.js

@@ -0,0 +1,153 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { AvatarSize } from "./Avatar.js";
+import Tooltip from "../tooltip/Tooltip.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/avatar/AvatarGroup.tsx
+/**
+* A set of people or entities as one compact, overlapping row of `Avatar`s (a facepile). Every
+* avatar takes the group's `size` and `isSquare`, they overlap by a fixed step per rung, at most
+* `max` show, and a `+N` tile stands for the rest. Hovering a named avatar shows its name; the `+N`
+* tile lists the hidden names in a tooltip and is a tab stop when it has names to show.
+*
+* The overlap is layout, not margins or transforms: each item is `diameter − overlap` wide and the
+* last one is `auto`, so every avatar overflows into the next item, later items paint over earlier
+* ones in DOM order, and the root's box is exactly the visible row.
+*
+* Not a member list ("show all" belongs to the host or a Popover), not interactive beyond the `+N`
+* tile's tooltip, and it does not fetch or sort members.
+*/
+/** Canonical rungs; the diameter of every avatar in the group is the rung's control height. */
+var AvatarGroupSize = /* @__PURE__ */ function(AvatarGroupSize) {
+	/** 20px avatars, 4px overlap (16px step). */
+	AvatarGroupSize["X_SMALL"] = "X_SMALL";
+	/** 24px avatars, 8px overlap (16px step). */
+	AvatarGroupSize["SMALL"] = "SMALL";
+	/** 32px avatars, 8px overlap (24px step). The default. */
+	AvatarGroupSize["MEDIUM"] = "MEDIUM";
+	/** 36px avatars, 12px overlap (24px step). */
+	AvatarGroupSize["LARGE"] = "LARGE";
+	/** 40px avatars, 12px overlap (28px step). */
+	AvatarGroupSize["X_LARGE"] = "X_LARGE";
+	return AvatarGroupSize;
+}({});
+/** The row. Phrasing content, so a group is valid inside a `<button>` or inline in a cell. */
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-AvatarGroup-razfxgq",
+	propsAsIs: false
+});
+/**
+* One shown avatar (or the `+N` tile), one step wide so its content overflows into the next item.
+* `position: relative` puts every item in the positioned paint layer, so later items paint over
+* earlier ones in DOM order whatever they hold (an avatar, a loading Skeleton, the tile).
+*/
+var Item = /*#__PURE__*/ styled("span")({
+	name: "Item",
+	class: "gx-AvatarGroup-Item-iva7ybl",
+	propsAsIs: false
+});
+/** The `+N` tile, styled as an initials avatar; a long count widens it into a pill. */
+var Overflow = /*#__PURE__*/ styled("span")({
+	name: "Overflow",
+	class: "gx-AvatarGroup-Overflow-oie8ywq",
+	propsAsIs: false
+});
+/** `isSquare`: the tile's corners match a square avatar. */
+var SQUARE_CSS = "gx-AvatarGroup-SQUARE_CSS-sebt40z";
+/** Diameter and step (diameter − overlap) per rung; every step is a whole number of pixels. */
+var AVATAR_GROUP_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-AvatarGroup-X_SMALL-x164dxk",
+	["SMALL"]: "gx-AvatarGroup-SMALL-surveac",
+	["MEDIUM"]: "gx-AvatarGroup-MEDIUM-m1wq31ro",
+	["LARGE"]: "gx-AvatarGroup-LARGE-lslwrbi",
+	["X_LARGE"]: "gx-AvatarGroup-X_LARGE-xdshhax"
+};
+/** Every avatar takes the group's rung. */
+var AVATAR_GROUP_SIZE_TO_AVATAR_SIZE_MAP = {
+	["X_SMALL"]: AvatarSize.X_SMALL,
+	["SMALL"]: AvatarSize.SMALL,
+	["MEDIUM"]: AvatarSize.MEDIUM,
+	["LARGE"]: AvatarSize.LARGE,
+	["X_LARGE"]: AvatarSize.X_LARGE
+};
+/** The `+N` label: the same rung text as an Avatar's initials. */
+var AVATAR_GROUP_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** Names shown in the `+N` tooltip before it ends with "…" (the `aria-label` lists all). */
+var OVERFLOW_TOOLTIP_NAME_LIMIT = 10;
+/** A child's non-empty string `name`, or `undefined`. */
+function getName(child) {
+	const { name } = child.props;
+	return typeof name === "string" && name.length > 0 ? name : void 0;
+}
+/** `max` normalized: floored, at least 1; unset or non-finite shows all. */
+function toShownCount(max, total) {
+	if (max === void 0 || !Number.isFinite(max)) return total;
+	return Math.min(total, Math.max(1, Math.floor(max)));
+}
+/** A row of overlapping avatars, at most `max` of them, ending in a `+N` tile for the rest. */
+var AvatarGroup = forwardRef(function AvatarGroup({ children, max, size = "MEDIUM", isSquare = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const items = Children.toArray(children).filter(isValidElement);
+	const shownCount = toShownCount(max, items.length);
+	const shown = items.slice(0, shownCount);
+	const hidden = items.slice(shownCount);
+	const hiddenNames = hidden.map(getName).filter((name) => name !== void 0);
+	const avatarSize = AVATAR_GROUP_SIZE_TO_AVATAR_SIZE_MAP[size];
+	const groupAccessibility = { role: "group" };
+	if (ariaLabel !== void 0) groupAccessibility["aria-label"] = ariaLabel;
+	let overflow = null;
+	if (hidden.length > 0) {
+		const hasTooltip = hiddenNames.length > 0;
+		const tile = /* @__PURE__ */ jsx(Overflow, {
+			role: "img",
+			"aria-label": hasTooltip ? `+${hidden.length}: ${hiddenNames.join(", ")}` : `+${hidden.length}`,
+			...hasTooltip ? { tabIndex: 0 } : {},
+			className: cx(isSquare && SQUARE_CSS),
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: AVATAR_GROUP_SIZE_TO_TEXT_SIZE_MAP[size],
+				weight: TextWeight.MEDIUM,
+				variant: TextVariant.SECONDARY,
+				children: `+${hidden.length}`
+			})
+		});
+		const summary = hiddenNames.slice(0, OVERFLOW_TOOLTIP_NAME_LIMIT).join(", ") + (hiddenNames.length > OVERFLOW_TOOLTIP_NAME_LIMIT ? ", …" : "");
+		overflow = /* @__PURE__ */ jsx(Item, { children: hasTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			body: summary,
+			"aria-hidden": true,
+			children: tile
+		}) : tile });
+	}
+	return /* @__PURE__ */ jsxs(Root, {
+		...groupAccessibility,
+		...rest,
+		ref,
+		id,
+		className: cx(AVATAR_GROUP_SIZE_TO_CSS_MAP[size], className),
+		style,
+		children: [shown.map((child, index) => {
+			const clone = cloneElement(child, {
+				size: avatarSize,
+				isSquare
+			});
+			const name = getName(child);
+			return /* @__PURE__ */ jsx(Item, { children: name === void 0 ? clone : /* @__PURE__ */ jsx(Tooltip, {
+				body: name,
+				"aria-hidden": true,
+				children: clone
+			}) }, child.key ?? index);
+		}), overflow]
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+export { AvatarGroupSize, AvatarGroup as default };