@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/assignee-picker/assignee-picker-spring.js

@@ -0,0 +1,21 @@
+//#region src/components/assignee-picker/assignee-picker-spring.ts
+function springEasing(bounce, samples = 48) {
+	const zeta = 1 - Math.min(Math.max(bounce, 0), 1) * .7;
+	const omega = Math.log(1e3) / zeta;
+	const points = [];
+	for (let i = 0; i <= samples; i += 1) {
+		const t = i / samples;
+		let x;
+		if (zeta >= .999) x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+		else {
+			const wd = omega * Math.sqrt(1 - zeta * zeta);
+			x = 1 - Math.exp(-zeta * omega * t) * (Math.cos(wd * t) + zeta * omega / wd * Math.sin(wd * t));
+		}
+		points.push(i === samples ? "1" : String(Math.round(x * 1e3) / 1e3));
+	}
+	return `linear(${points.join(", ")})`;
+}
+//#endregion
+export { springEasing };
+
+//# sourceMappingURL=assignee-picker-spring.js.map

package/dist/components/assignee-picker/assignee-picker-spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignee-picker-spring.js","names":[],"sources":["../../../src/components/assignee-picker/assignee-picker-spring.ts"],"sourcesContent":["/*\n * A damped spring expressed as a CSS `linear()` easing, so a state-driven\n * spring (overshoot, settle) runs as a plain CSS transition: no animation\n * library, and the global reduced-motion rule and --motion-scale still apply.\n *\n * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).\n * Returns the easing string. Pair it with a duration from the caller.\n * Browsers without linear() drop the declaration, so set it through a CSS\n * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`\n * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.\n */\nexport function springEasing(bounce: number, samples = 48): string {\n  const b = Math.min(Math.max(bounce, 0), 1);\n  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3\n  // Choose ω so the envelope has decayed to ~0.1% at t = 1.\n  const omega = Math.log(1000) / zeta;\n  const points: string[] = [];\n  for (let i = 0; i <= samples; i += 1) {\n    const t = i / samples;\n    let x: number;\n    if (zeta >= 0.999) {\n      x = 1 - Math.exp(-omega * t) * (1 + omega * t);\n    } else {\n      const wd = omega * Math.sqrt(1 - zeta * zeta);\n      x =\n        1 -\n        Math.exp(-zeta * omega * t) *\n          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));\n    }\n    points.push(i === samples ? \"1\" : String(Math.round(x * 1000) / 1000));\n  }\n  return `linear(${points.join(\", \")})`;\n}\n"],"mappings":";AAWA,SAAgB,aAAa,QAAgB,UAAU,IAAY;CAEjE,MAAM,OAAO,IADH,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CACvB,IAAI;CAErB,MAAM,QAAQ,KAAK,IAAI,GAAI,IAAI;CAC/B,MAAM,SAAmB,CAAC;CAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,KAAK,GAAG;EACpC,MAAM,IAAI,IAAI;EACd,IAAI;EACJ,IAAI,QAAQ,MACV,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;OACvC;GACL,MAAM,KAAK,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;GAC5C,IACE,IACA,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KACvB,KAAK,IAAI,KAAK,CAAC,IAAM,OAAO,QAAS,KAAM,KAAK,IAAI,KAAK,CAAC;EACjE;EACA,OAAO,KAAK,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI,CAAC;CACvE;CACA,OAAO,UAAU,OAAO,KAAK,IAAI,EAAE;AACrC"}

package/dist/components/assignee-picker/assignee-picker.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/assignee-picker/assignee-picker.d.ts
+/** The pill and card surfaces. `inverted` is the workbench's dark fill. */
+declare const assigneePickerVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AssigneePickerPerson {
+  id: string;
+  name: string;
+  /** Secondary line, such as a role or team. */
+  description?: string;
+  /** Image URL. Initials are shown while it loads and if it fails. */
+  avatar?: string;
+}
+interface AssigneePickerProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof assigneePickerVariants> {
+  people: AssigneePickerPerson[];
+  /** Controlled selection, as person ids in the order they were assigned. */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Names the listbox and prefixes the trigger's name ("Assignees: Adam Marsh"). */
+  label?: string;
+  /** Shown in the pill, and in its name, when nobody is assigned. */
+  placeholder?: string;
+  /** Pixels each face overlaps the previous one in a `row` stack (0–22). */
+  overlap?: number;
+  /** Radius of the pill and card in pixels. Rows take a concentric radius. */
+  corner?: number;
+  /** `row` overlaps the faces; `grid` packs up to four into a 2×2 square. */
+  stack?: "row" | "grid";
+  /** Most slots in the stack; beyond it the last slot becomes "+N". */
+  maxFaces?: number;
+  /** Width of the card. Numbers are pixels. */
+  contentWidth?: number | string;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+/** A pill of overlapping faces that opens a multi-select list of people. */
+declare function AssigneePicker({ className, style, people, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, label, placeholder, overlap, corner, stack, maxFaces, contentWidth, tone, stroke, triggerClassName, contentClassName, ...props }: AssigneePickerProps): import("react").JSX.Element;
+//#endregion
+export { AssigneePicker, AssigneePickerPerson, AssigneePickerProps, assigneePickerVariants };
+//# sourceMappingURL=assignee-picker.d.ts.map

package/dist/components/assignee-picker/assignee-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignee-picker.d.ts","names":[],"sources":["../../../src/components/assignee-picker/assignee-picker.tsx"],"mappings":";;;;cAsFM,yBAAsB;;;6CAiB1B;UAEe;EACf;EACA;;EAEA;;EAEA;;UAGe,4BAEb,KAAK,yEACL,oBAAoB;EACtB,QAAQ;;EAER;EACA;EACA,iBAAiB;EACjB;EACA;EACA,gBAAgB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA;EACA;;;iBAiFc,iBACd,WACA,OACA,QACA,OAAO,WACP,cACA,eACA,MAAM,UACN,aACA,cACA,OACA,aACA,SACA,QACA,OACA,UACA,cACA,MACA,QACA,kBACA,qBACG,SACF,sCAAmB,IAAA"}

package/dist/components/assignee-picker/assignee-picker.js

@@ -0,0 +1,370 @@
+"use client";
+import { focusRing, focusRingInset } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { springEasing } from "./assignee-picker-spring.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/assignee-picker/assignee-picker.tsx
+const FACE = 28;
+const LEAVE_MS = 200;
+const STYLES = `
+@keyframes dowel-assignee-picker-open {
+  0% { opacity: 0; transform: translateY(-10px) scale(.86, .72); }
+  30% { opacity: 1; }
+  53% { transform: translateY(1.1px) scale(1, 1.03); }
+  100% { opacity: 1; transform: none; }
+}
+@keyframes dowel-assignee-picker-close {
+  to { opacity: 0; transform: translateY(-9px) scale(.91, .85); }
+}
+@keyframes dowel-assignee-picker-row {
+  from { opacity: 0; transform: translateY(-8px); }
+}
+@keyframes dowel-assignee-picker-face-in {
+  0% { opacity: 0; transform: translateY(-10px) scale(.2) rotate(-22deg); }
+  45% { opacity: 1; }
+  65% { transform: scale(1.02) rotate(3.8deg); }
+  100% { opacity: 1; transform: none; }
+}
+@keyframes dowel-assignee-picker-face-out {
+  to { opacity: 0; transform: translateY(-6px) scale(.2) rotate(-22deg); }
+}
+[data-slot="assignee-picker-content"][data-state="open"] {
+  animation: dowel-assignee-picker-open calc(340ms * var(--motion-scale)) var(--ease-out-quint) both;
+}
+[data-slot="assignee-picker-content"][data-state="closed"] {
+  animation: dowel-assignee-picker-close calc(120ms * var(--motion-scale)) var(--ease-in-quint) both;
+}
+[data-slot="assignee-picker-content"][data-state="open"] [data-slot="assignee-picker-option"] {
+  animation: dowel-assignee-picker-row calc(150ms * var(--motion-scale)) var(--ease-out-quint)
+    calc((50ms + var(--assignee-picker-i, 0) * 33ms) * var(--motion-scale)) both;
+}
+[data-slot="assignee-picker-face"][data-state="enter"] {
+  animation: dowel-assignee-picker-face-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;
+}
+[data-slot="assignee-picker-face"][data-state="leave"] {
+  animation: dowel-assignee-picker-face-out calc(${String(LEAVE_MS)}ms * var(--motion-scale)) var(--ease-in-quint) both;
+}
+@supports (transition-timing-function: linear(0, 1)) {
+  [data-slot="assignee-picker-tick"] { transition-timing-function: var(--assignee-picker-spring); }
+}
+`;
+/** The pill and card surfaces. `inverted` is the workbench's dark fill. */
+const assigneePickerVariants = cva("", {
+	variants: {
+		tone: {
+			default: "bg-card text-card-foreground [--assignee-picker-surface:var(--color-card)]",
+			inverted: "bg-foreground text-background [--assignee-picker-surface:var(--color-foreground)]"
+		},
+		/** A 1px inset hairline around both surfaces. */
+		stroke: {
+			true: "ring-1 ring-border ring-inset",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		stroke: false
+	}
+});
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word.charAt(0)).join("").toUpperCase();
+}
+/**
+* Tracks which faces are arriving and which are leaving, so a new face can fly
+* in and a removed one can stay mounted for its exit. Runs in a layout effect
+* so the arriving face is never painted at rest before its keyframe starts.
+*/
+function useFacePresence(ids) {
+	const [entering, setEntering] = useState(() => /* @__PURE__ */ new Set());
+	const [leaving, setLeaving] = useState([]);
+	const previous = useRef(ids);
+	const timers = useRef(/* @__PURE__ */ new Set());
+	const key = JSON.stringify(ids);
+	useLayoutEffect(() => {
+		const before = previous.current;
+		previous.current = ids;
+		const added = ids.filter((id) => !before.includes(id));
+		const removed = before.map((id, index) => ({
+			id,
+			index
+		})).filter((face) => !ids.includes(face.id));
+		if (added.length > 0) setEntering((set) => /* @__PURE__ */ new Set([...set, ...added]));
+		if (removed.length === 0) return;
+		setLeaving((list) => [...list.filter((face) => !ids.includes(face.id)), ...removed]);
+		const timer = setTimeout(() => {
+			timers.current.delete(timer);
+			setLeaving((list) => list.filter((face) => !removed.some((gone) => gone.id === face.id)));
+		}, LEAVE_MS);
+		timers.current.add(timer);
+	}, [key]);
+	useEffect(() => {
+		const pending = timers.current;
+		return () => {
+			for (const timer of pending) clearTimeout(timer);
+		};
+	}, []);
+	return {
+		entering,
+		leaving: leaving.filter((face) => !ids.includes(face.id))
+	};
+}
+function Face({ person, className, style, state }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		"data-slot": "assignee-picker-face",
+		"data-state": state,
+		className: cn("absolute top-0 ring-(--assignee-picker-surface)", className),
+		style,
+		children: [person.avatar ? /* @__PURE__ */ jsx(AvatarImage, {
+			src: person.avatar,
+			alt: ""
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "bg-muted text-[0.5625rem]",
+			children: initials(person.name)
+		})]
+	});
+}
+/** A pill of overlapping faces that opens a multi-select list of people. */
+function AssigneePicker({ className, style, people, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, label = "Assignees", placeholder = "Unassigned", overlap = 10, corner = 22, stack = "row", maxFaces, contentWidth = 264, tone, stroke, triggerClassName, contentClassName, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? []);
+	const value = valueProp ?? uncontrolledValue;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = openProp ?? uncontrolledOpen;
+	const [active, setActive] = useState(() => Math.max(0, people.findIndex((person) => value.includes(person.id))));
+	const options = useRef([]);
+	const baseId = useId();
+	const byId = new Map(people.map((person) => [person.id, person]));
+	const assigned = value.filter((id) => byId.has(id));
+	const { entering, leaving } = useFacePresence(assigned);
+	const setValue = (next) => {
+		if (valueProp === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
+	};
+	const setOpen = (next) => {
+		if (next) setActive(Math.max(0, people.findIndex((person) => value.includes(person.id))));
+		if (openProp === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	};
+	const toggle = (id) => {
+		setValue(value.includes(id) ? value.filter((v) => v !== id) : [...value, id]);
+	};
+	const focusOption = (index) => {
+		setActive(index);
+		options.current[index]?.focus();
+	};
+	function handleKeyDown(event) {
+		const last = people.length - 1;
+		const current = Math.min(active, last);
+		const target = {
+			ArrowDown: current >= last ? 0 : current + 1,
+			ArrowUp: current <= 0 ? last : current - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (target !== void 0) {
+			event.preventDefault();
+			focusOption(target);
+			return;
+		}
+		const person = people[current];
+		if ((event.key === " " || event.key === "Enter") && person) {
+			event.preventDefault();
+			toggle(person.id);
+		} else if (event.key === "Tab") {
+			event.preventDefault();
+			setOpen(false);
+		}
+	}
+	const grid = stack === "grid";
+	const limit = Math.max(1, grid ? Math.min(maxFaces ?? 4, 4) : maxFaces ?? Infinity);
+	const overflow = assigned.length > limit ? assigned.length - limit + 1 : 0;
+	const shown = overflow > 0 ? assigned.slice(0, limit - 1) : assigned;
+	const slots = shown.length + (overflow > 0 ? 1 : 0);
+	const step = FACE - Math.min(Math.max(overlap, 0), FACE);
+	const packed = grid && slots > 1;
+	const railWidth = slots === 0 ? 0 : grid ? FACE : FACE + (slots - 1) * step;
+	const place = (index) => {
+		if (packed) {
+			const cell = 13;
+			return {
+				width: cell,
+				height: cell,
+				insetInlineStart: index % 2 * 15,
+				top: Math.floor(index / 2) * 15,
+				zIndex: slots - index
+			};
+		}
+		return {
+			width: FACE,
+			height: FACE,
+			insetInlineStart: index * step,
+			zIndex: slots - index
+		};
+	};
+	const faceRing = packed ? "ring-1" : "ring-2";
+	const names = assigned.map((id) => byId.get(id)?.name).join(", ");
+	const surfaces = assigneePickerVariants({
+		tone,
+		stroke
+	});
+	const rowRadius = Math.max(0, corner - 6);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "assignee-picker",
+		className: cn("relative inline-flex", className),
+		style: {
+			"--assignee-picker-spring": springEasing(.55),
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "dowel-assignee-picker",
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-slot": "assignee-picker-trigger",
+					"aria-haspopup": "listbox",
+					"aria-label": `${label}: ${names || placeholder}`,
+					className: cn("group/trigger inline-flex h-11 items-center gap-2.5 ps-2 pe-3 text-sm font-medium select-none", surfaces, focusRing, triggerClassName),
+					style: { borderRadius: corner },
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							"data-slot": "assignee-picker-rail",
+							"aria-hidden": "true",
+							className: "relative h-7 shrink-0 transition-[width] duration-[calc(300ms*var(--motion-scale))] ease-[cubic-bezier(.33,.55,.2,1)]",
+							style: { width: railWidth },
+							children: [
+								shown.map((id, index) => /* @__PURE__ */ jsx(Face, {
+									person: byId.get(id),
+									state: entering.has(id) ? "enter" : "idle",
+									className: cn(faceRing, "transition-[inset-inline-start,top,width,height] duration-[calc(300ms*var(--motion-scale))] ease-[cubic-bezier(.33,.55,.2,1)]"),
+									style: place(index)
+								}, id)),
+								leaving.map((face) => {
+									const person = byId.get(face.id);
+									return person ? /* @__PURE__ */ jsx(Face, {
+										person,
+										state: "leave",
+										className: faceRing,
+										style: place(Math.min(face.index, Math.max(slots - 1, 0)))
+									}, face.id) : null;
+								}),
+								overflow > 0 ? /* @__PURE__ */ jsxs("span", {
+									"data-slot": "assignee-picker-overflow",
+									className: cn("absolute top-0 flex items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground ring-(--assignee-picker-surface)", faceRing),
+									style: place(slots - 1),
+									children: ["+", overflow]
+								}) : null
+							]
+						}),
+						assigned.length === 0 ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "assignee-picker-placeholder",
+							className: "-ms-1.5",
+							children: placeholder
+						}) : null,
+						/* @__PURE__ */ jsx("svg", {
+							"data-slot": "assignee-picker-chevron",
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							className: cn("size-4 shrink-0 opacity-40 transition-[rotate,opacity] duration-[calc(240ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", "group-hover/trigger:opacity-75 group-data-[state=open]/trigger:rotate-180"),
+							children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-label": label,
+				side: "bottom",
+				align: "start",
+				sideOffset: 10,
+				"data-slot": "assignee-picker-content",
+				className: cn("w-auto border-0 p-1.5 shadow-lg", surfaces, contentClassName),
+				style: {
+					width: contentWidth,
+					borderRadius: corner
+				},
+				children: people.map((person, index) => {
+					const selected = value.includes(person.id);
+					return /* @__PURE__ */ jsxs("div", {
+						ref: (node) => {
+							options.current[index] = node;
+						},
+						role: "option",
+						"aria-selected": selected,
+						"aria-labelledby": `${baseId}-${String(index)}-name`,
+						"aria-describedby": person.description ? `${baseId}-${String(index)}-description` : void 0,
+						tabIndex: index === Math.min(active, people.length - 1) ? 0 : -1,
+						"data-slot": "assignee-picker-option",
+						className: cn("group/option flex h-12 cursor-pointer items-center gap-2.5 px-2 select-none", "transition-[background-color] duration-[var(--duration-fast)] hover:bg-current/5 focus-visible:bg-current/7", focusRingInset),
+						style: {
+							borderRadius: rowRadius,
+							"--assignee-picker-i": index
+						},
+						onClick: () => {
+							setActive(index);
+							toggle(person.id);
+						},
+						onFocus: () => setActive(index),
+						onKeyDown: handleKeyDown,
+						children: [
+							/* @__PURE__ */ jsxs(Avatar, {
+								size: "sm",
+								"aria-hidden": "true",
+								children: [person.avatar ? /* @__PURE__ */ jsx(AvatarImage, {
+									src: person.avatar,
+									alt: ""
+								}) : null, /* @__PURE__ */ jsx(AvatarFallback, { children: initials(person.name) })]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									id: `${baseId}-${String(index)}-name`,
+									className: "truncate text-[0.8125rem] font-medium",
+									children: person.name
+								}), person.description ? /* @__PURE__ */ jsx("span", {
+									id: `${baseId}-${String(index)}-description`,
+									className: "truncate text-[0.71875rem] text-current/45",
+									children: person.description
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"data-slot": "assignee-picker-mark",
+								"aria-hidden": "true",
+								className: cn("flex size-4.5 shrink-0 items-center justify-center rounded-[5.5px]", "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)]", "transition-[background-color,box-shadow] duration-[calc(160ms*var(--motion-scale))]", "group-aria-selected/option:bg-current group-aria-selected/option:shadow-none"),
+								children: /* @__PURE__ */ jsx("svg", {
+									"data-slot": "assignee-picker-tick",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 3,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									className: cn("size-3 scale-40 text-(--assignee-picker-surface) opacity-0", "transition-[scale,opacity] duration-[calc(160ms*var(--motion-scale))] ease-[var(--ease-overshoot)]", "group-aria-selected/option:scale-100 group-aria-selected/option:opacity-100"),
+									children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+								})
+							})
+						]
+					}, person.id);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { AssigneePicker, assigneePickerVariants };
+
+//# sourceMappingURL=assignee-picker.js.map

package/dist/components/assignee-picker/assignee-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignee-picker.js","names":[],"sources":["../../../src/components/assignee-picker/assignee-picker.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Assignees (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { focusRing, focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { springEasing } from \"./assignee-picker-spring\";\n\n/*\n * A pill showing who is assigned, as an overlapping stack of faces, that opens\n * a multi-select list of people.\n *\n * Dowel's Popover (Radix) owns the portal, placement, outside click, Escape\n * and focus return. The content itself is the `role=\"listbox\"`: the trigger\n * says `aria-haspopup=\"listbox\"`, focus moves onto the first selected option\n * when it opens, and the options rove with the arrow keys.\n *\n * Every movement is CSS. The card and the rows run keyframes from the hoisted\n * stylesheet on Radix's data-state (Presence waits for the close keyframe\n * before unmounting). A face that joins the stack flies in with a keyframe; one\n * that leaves is kept mounted for its exit keyframe, then dropped. The tick is\n * a transition on a spring expressed as `linear()`. Under reduced motion every\n * duration collapses through --motion-scale and each state simply appears.\n */\n\nconst FACE = 28;\nconst LEAVE_MS = 200;\n\nconst STYLES = `\n@keyframes dowel-assignee-picker-open {\n  0% { opacity: 0; transform: translateY(-10px) scale(.86, .72); }\n  30% { opacity: 1; }\n  53% { transform: translateY(1.1px) scale(1, 1.03); }\n  100% { opacity: 1; transform: none; }\n}\n@keyframes dowel-assignee-picker-close {\n  to { opacity: 0; transform: translateY(-9px) scale(.91, .85); }\n}\n@keyframes dowel-assignee-picker-row {\n  from { opacity: 0; transform: translateY(-8px); }\n}\n@keyframes dowel-assignee-picker-face-in {\n  0% { opacity: 0; transform: translateY(-10px) scale(.2) rotate(-22deg); }\n  45% { opacity: 1; }\n  65% { transform: scale(1.02) rotate(3.8deg); }\n  100% { opacity: 1; transform: none; }\n}\n@keyframes dowel-assignee-picker-face-out {\n  to { opacity: 0; transform: translateY(-6px) scale(.2) rotate(-22deg); }\n}\n[data-slot=\"assignee-picker-content\"][data-state=\"open\"] {\n  animation: dowel-assignee-picker-open calc(340ms * var(--motion-scale)) var(--ease-out-quint) both;\n}\n[data-slot=\"assignee-picker-content\"][data-state=\"closed\"] {\n  animation: dowel-assignee-picker-close calc(120ms * var(--motion-scale)) var(--ease-in-quint) both;\n}\n[data-slot=\"assignee-picker-content\"][data-state=\"open\"] [data-slot=\"assignee-picker-option\"] {\n  animation: dowel-assignee-picker-row calc(150ms * var(--motion-scale)) var(--ease-out-quint)\n    calc((50ms + var(--assignee-picker-i, 0) * 33ms) * var(--motion-scale)) both;\n}\n[data-slot=\"assignee-picker-face\"][data-state=\"enter\"] {\n  animation: dowel-assignee-picker-face-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;\n}\n[data-slot=\"assignee-picker-face\"][data-state=\"leave\"] {\n  animation: dowel-assignee-picker-face-out calc(${String(LEAVE_MS)}ms * var(--motion-scale)) var(--ease-in-quint) both;\n}\n@supports (transition-timing-function: linear(0, 1)) {\n  [data-slot=\"assignee-picker-tick\"] { transition-timing-function: var(--assignee-picker-spring); }\n}\n`;\n\n/** The pill and card surfaces. `inverted` is the workbench's dark fill. */\nconst assigneePickerVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default: \"bg-card text-card-foreground [--assignee-picker-surface:var(--color-card)]\",\n      inverted:\n        \"bg-foreground text-background [--assignee-picker-surface:var(--color-foreground)]\",\n    },\n    /** A 1px inset hairline around both surfaces. */\n    stroke: {\n      true: \"ring-1 ring-border ring-inset\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    tone: \"default\",\n    stroke: false,\n  },\n});\n\nexport interface AssigneePickerPerson {\n  id: string;\n  name: string;\n  /** Secondary line, such as a role or team. */\n  description?: string;\n  /** Image URL. Initials are shown while it loads and if it fails. */\n  avatar?: string;\n}\n\nexport interface AssigneePickerProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof assigneePickerVariants> {\n  people: AssigneePickerPerson[];\n  /** Controlled selection, as person ids in the order they were assigned. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Names the listbox and prefixes the trigger's name (\"Assignees: Adam Marsh\"). */\n  label?: string;\n  /** Shown in the pill, and in its name, when nobody is assigned. */\n  placeholder?: string;\n  /** Pixels each face overlaps the previous one in a `row` stack (0–22). */\n  overlap?: number;\n  /** Radius of the pill and card in pixels. Rows take a concentric radius. */\n  corner?: number;\n  /** `row` overlaps the faces; `grid` packs up to four into a 2×2 square. */\n  stack?: \"row\" | \"grid\";\n  /** Most slots in the stack; beyond it the last slot becomes \"+N\". */\n  maxFaces?: number;\n  /** Width of the card. Numbers are pixels. */\n  contentWidth?: number | string;\n  triggerClassName?: string;\n  contentClassName?: string;\n}\n\nfunction initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word.charAt(0))\n    .join(\"\")\n    .toUpperCase();\n}\n\n/**\n * Tracks which faces are arriving and which are leaving, so a new face can fly\n * in and a removed one can stay mounted for its exit. Runs in a layout effect\n * so the arriving face is never painted at rest before its keyframe starts.\n */\nfunction useFacePresence(ids: string[]) {\n  const [entering, setEntering] = useState<ReadonlySet<string>>(() => new Set());\n  const [leaving, setLeaving] = useState<{ id: string; index: number }[]>([]);\n  const previous = useRef(ids);\n  const timers = useRef(new Set<ReturnType<typeof setTimeout>>());\n  const key = JSON.stringify(ids);\n\n  useLayoutEffect(() => {\n    const before = previous.current;\n    previous.current = ids;\n    const added = ids.filter((id) => !before.includes(id));\n    const removed = before\n      .map((id, index) => ({ id, index }))\n      .filter((face) => !ids.includes(face.id));\n    if (added.length > 0) setEntering((set) => new Set([...set, ...added]));\n    if (removed.length === 0) return;\n    setLeaving((list) => [...list.filter((face) => !ids.includes(face.id)), ...removed]);\n    const timer = setTimeout(() => {\n      timers.current.delete(timer);\n      setLeaving((list) => list.filter((face) => !removed.some((gone) => gone.id === face.id)));\n    }, LEAVE_MS);\n    timers.current.add(timer);\n    // `key` stands for `ids`: a new array with the same people is no change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key]);\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      for (const timer of pending) clearTimeout(timer);\n    };\n  }, []);\n\n  return { entering, leaving: leaving.filter((face) => !ids.includes(face.id)) };\n}\n\nfunction Face({\n  person,\n  className,\n  style,\n  state,\n}: {\n  person: AssigneePickerPerson;\n  className?: string;\n  style: CSSProperties;\n  state: \"idle\" | \"enter\" | \"leave\";\n}) {\n  return (\n    <Avatar\n      data-slot=\"assignee-picker-face\"\n      data-state={state}\n      className={cn(\"absolute top-0 ring-(--assignee-picker-surface)\", className)}\n      style={style}\n    >\n      {person.avatar ? <AvatarImage src={person.avatar} alt=\"\" /> : null}\n      <AvatarFallback className=\"bg-muted text-[0.5625rem]\">\n        {initials(person.name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\n/** A pill of overlapping faces that opens a multi-select list of people. */\nexport function AssigneePicker({\n  className,\n  style,\n  people,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  label = \"Assignees\",\n  placeholder = \"Unassigned\",\n  overlap = 10,\n  corner = 22,\n  stack = \"row\",\n  maxFaces,\n  contentWidth = 264,\n  tone,\n  stroke,\n  triggerClassName,\n  contentClassName,\n  ...props\n}: AssigneePickerProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? []);\n  const value = valueProp ?? uncontrolledValue;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp ?? uncontrolledOpen;\n  const [active, setActive] = useState(() =>\n    Math.max(\n      0,\n      people.findIndex((person) => value.includes(person.id)),\n    ),\n  );\n  const options = useRef<(HTMLDivElement | null)[]>([]);\n  const baseId = useId();\n\n  const byId = new Map(people.map((person) => [person.id, person]));\n  const assigned = value.filter((id) => byId.has(id));\n  const { entering, leaving } = useFacePresence(assigned);\n\n  const setValue = (next: string[]) => {\n    if (valueProp === undefined) setUncontrolledValue(next);\n    onValueChange?.(next);\n  };\n\n  const setOpen = (next: boolean) => {\n    if (next) {\n      // Open on the first assigned person, or the top of the list.\n      setActive(\n        Math.max(\n          0,\n          people.findIndex((person) => value.includes(person.id)),\n        ),\n      );\n    }\n    if (openProp === undefined) setUncontrolledOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const toggle = (id: string) => {\n    setValue(value.includes(id) ? value.filter((v) => v !== id) : [...value, id]);\n  };\n\n  const focusOption = (index: number) => {\n    setActive(index);\n    options.current[index]?.focus();\n  };\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const last = people.length - 1;\n    const current = Math.min(active, last);\n    const moves: Record<string, number> = {\n      ArrowDown: current >= last ? 0 : current + 1,\n      ArrowUp: current <= 0 ? last : current - 1,\n      Home: 0,\n      End: last,\n    };\n    const target = moves[event.key];\n    if (target !== undefined) {\n      event.preventDefault();\n      focusOption(target);\n      return;\n    }\n    const person = people[current];\n    if ((event.key === \" \" || event.key === \"Enter\") && person) {\n      event.preventDefault();\n      toggle(person.id);\n    } else if (event.key === \"Tab\") {\n      // A listbox popup is one stop: Tab closes it and focus goes home.\n      event.preventDefault();\n      setOpen(false);\n    }\n  }\n\n  // The stack: assigned faces, with the last slot as \"+N\" past `maxFaces`.\n  const grid = stack === \"grid\";\n  const limit = Math.max(1, grid ? Math.min(maxFaces ?? 4, 4) : (maxFaces ?? Infinity));\n  const overflow = assigned.length > limit ? assigned.length - limit + 1 : 0;\n  const shown = overflow > 0 ? assigned.slice(0, limit - 1) : assigned;\n  const slots = shown.length + (overflow > 0 ? 1 : 0);\n  const step = FACE - Math.min(Math.max(overlap, 0), FACE);\n  const packed = grid && slots > 1;\n  const railWidth = slots === 0 ? 0 : grid ? FACE : FACE + (slots - 1) * step;\n\n  const place = (index: number): CSSProperties => {\n    if (packed) {\n      const cell = (FACE - 2) / 2;\n      return {\n        width: cell,\n        height: cell,\n        insetInlineStart: (index % 2) * (cell + 2),\n        top: Math.floor(index / 2) * (cell + 2),\n        zIndex: slots - index,\n      };\n    }\n    return { width: FACE, height: FACE, insetInlineStart: index * step, zIndex: slots - index };\n  };\n\n  const faceRing = packed ? \"ring-1\" : \"ring-2\";\n  const names = assigned.map((id) => byId.get(id)?.name).join(\", \");\n  const surfaces = assigneePickerVariants({ tone, stroke });\n  const rowRadius = Math.max(0, corner - 6);\n\n  return (\n    <div\n      data-slot=\"assignee-picker\"\n      className={cn(\"relative inline-flex\", className)}\n      style={{ \"--assignee-picker-spring\": springEasing(0.55), ...style } as CSSProperties}\n      {...props}\n    >\n      <style href=\"dowel-assignee-picker\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"assignee-picker-trigger\"\n            aria-haspopup=\"listbox\"\n            aria-label={`${label}: ${names || placeholder}`}\n            className={cn(\n              \"group/trigger inline-flex h-11 items-center gap-2.5 ps-2 pe-3 text-sm font-medium select-none\",\n              surfaces,\n              focusRing,\n              triggerClassName,\n            )}\n            style={{ borderRadius: corner }}\n          >\n            <span\n              data-slot=\"assignee-picker-rail\"\n              aria-hidden=\"true\"\n              className=\"relative h-7 shrink-0 transition-[width] duration-[calc(300ms*var(--motion-scale))] ease-[cubic-bezier(.33,.55,.2,1)]\"\n              style={{ width: railWidth }}\n            >\n              {shown.map((id, index) => (\n                <Face\n                  key={id}\n                  person={byId.get(id) as AssigneePickerPerson}\n                  state={entering.has(id) ? \"enter\" : \"idle\"}\n                  className={cn(\n                    faceRing,\n                    \"transition-[inset-inline-start,top,width,height] duration-[calc(300ms*var(--motion-scale))] ease-[cubic-bezier(.33,.55,.2,1)]\",\n                  )}\n                  style={place(index)}\n                />\n              ))}\n              {leaving.map((face) => {\n                const person = byId.get(face.id);\n                return person ? (\n                  <Face\n                    key={face.id}\n                    person={person}\n                    state=\"leave\"\n                    className={faceRing}\n                    style={place(Math.min(face.index, Math.max(slots - 1, 0)))}\n                  />\n                ) : null;\n              })}\n              {overflow > 0 ? (\n                <span\n                  data-slot=\"assignee-picker-overflow\"\n                  className={cn(\n                    \"absolute top-0 flex items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground ring-(--assignee-picker-surface)\",\n                    faceRing,\n                  )}\n                  style={place(slots - 1)}\n                >\n                  +{overflow}\n                </span>\n              ) : null}\n            </span>\n            {assigned.length === 0 ? (\n              <span data-slot=\"assignee-picker-placeholder\" className=\"-ms-1.5\">\n                {placeholder}\n              </span>\n            ) : null}\n            <svg\n              data-slot=\"assignee-picker-chevron\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className={cn(\n                \"size-4 shrink-0 opacity-40 transition-[rotate,opacity] duration-[calc(240ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n                \"group-hover/trigger:opacity-75 group-data-[state=open]/trigger:rotate-180\",\n              )}\n            >\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-label={label}\n          side=\"bottom\"\n          align=\"start\"\n          sideOffset={10}\n          data-slot=\"assignee-picker-content\"\n          className={cn(\"w-auto border-0 p-1.5 shadow-lg\", surfaces, contentClassName)}\n          style={{ width: contentWidth, borderRadius: corner }}\n        >\n          {people.map((person, index) => {\n            const selected = value.includes(person.id);\n            return (\n              <div\n                key={person.id}\n                ref={(node) => {\n                  options.current[index] = node;\n                }}\n                role=\"option\"\n                aria-selected={selected}\n                aria-labelledby={`${baseId}-${String(index)}-name`}\n                aria-describedby={\n                  person.description ? `${baseId}-${String(index)}-description` : undefined\n                }\n                tabIndex={index === Math.min(active, people.length - 1) ? 0 : -1}\n                data-slot=\"assignee-picker-option\"\n                className={cn(\n                  \"group/option flex h-12 cursor-pointer items-center gap-2.5 px-2 select-none\",\n                  \"transition-[background-color] duration-[var(--duration-fast)] hover:bg-current/5 focus-visible:bg-current/7\",\n                  focusRingInset,\n                )}\n                style={\n                  { borderRadius: rowRadius, \"--assignee-picker-i\": index } as CSSProperties\n                }\n                onClick={() => {\n                  setActive(index);\n                  toggle(person.id);\n                }}\n                onFocus={() => setActive(index)}\n                onKeyDown={handleKeyDown}\n              >\n                <Avatar size=\"sm\" aria-hidden=\"true\">\n                  {person.avatar ? <AvatarImage src={person.avatar} alt=\"\" /> : null}\n                  <AvatarFallback>{initials(person.name)}</AvatarFallback>\n                </Avatar>\n                <span className=\"flex min-w-0 flex-1 flex-col\">\n                  <span\n                    id={`${baseId}-${String(index)}-name`}\n                    className=\"truncate text-[0.8125rem] font-medium\"\n                  >\n                    {person.name}\n                  </span>\n                  {person.description ? (\n                    <span\n                      id={`${baseId}-${String(index)}-description`}\n                      className=\"truncate text-[0.71875rem] text-current/45\"\n                    >\n                      {person.description}\n                    </span>\n                  ) : null}\n                </span>\n                <span\n                  data-slot=\"assignee-picker-mark\"\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"flex size-4.5 shrink-0 items-center justify-center rounded-[5.5px]\",\n                    \"shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)]\",\n                    \"transition-[background-color,box-shadow] duration-[calc(160ms*var(--motion-scale))]\",\n                    \"group-aria-selected/option:bg-current group-aria-selected/option:shadow-none\",\n                  )}\n                >\n                  <svg\n                    data-slot=\"assignee-picker-tick\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={3}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className={cn(\n                      \"size-3 scale-40 text-(--assignee-picker-surface) opacity-0\",\n                      \"transition-[scale,opacity] duration-[calc(160ms*var(--motion-scale))] ease-[var(--ease-overshoot)]\",\n                      \"group-aria-selected/option:scale-100 group-aria-selected/option:opacity-100\",\n                    )}\n                  >\n                    <path d=\"M20 6 9 17l-5-5\" />\n                  </svg>\n                </span>\n              </div>\n            );\n          })}\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nexport { assigneePickerVariants };\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,OAAO;AACb,MAAM,WAAW;AAEjB,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAoCoC,OAAO,QAAQ,EAAE;;;;;;;AAQpE,MAAM,yBAAyB,IAAI,IAAI;CACrC,UAAU;EACR,MAAM;GACJ,SAAS;GACT,UACE;EACJ;;EAEA,QAAQ;GACN,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;AACF,CAAC;AAyCD,SAAS,SAAS,MAAsB;CACtC,OAAO,KACJ,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAC7B,KAAK,EAAE,CAAC,CACR,YAAY;AACjB;;;;;;AAOA,SAAS,gBAAgB,KAAe;CACtC,MAAM,CAAC,UAAU,eAAe,+BAAoC,IAAI,IAAI,CAAC;CAC7E,MAAM,CAAC,SAAS,cAAc,SAA0C,CAAC,CAAC;CAC1E,MAAM,WAAW,OAAO,GAAG;CAC3B,MAAM,SAAS,uBAAO,IAAI,IAAmC,CAAC;CAC9D,MAAM,MAAM,KAAK,UAAU,GAAG;CAE9B,sBAAsB;EACpB,MAAM,SAAS,SAAS;EACxB,SAAS,UAAU;EACnB,MAAM,QAAQ,IAAI,QAAQ,OAAO,CAAC,OAAO,SAAS,EAAE,CAAC;EACrD,MAAM,UAAU,OACb,KAAK,IAAI,WAAW;GAAE;GAAI;EAAM,EAAE,CAAC,CACnC,QAAQ,SAAS,CAAC,IAAI,SAAS,KAAK,EAAE,CAAC;EAC1C,IAAI,MAAM,SAAS,GAAG,aAAa,wBAAQ,IAAI,IAAI,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;EACtE,IAAI,QAAQ,WAAW,GAAG;EAC1B,YAAY,SAAS,CAAC,GAAG,KAAK,QAAQ,SAAS,CAAC,IAAI,SAAS,KAAK,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC;EACnF,MAAM,QAAQ,iBAAiB;GAC7B,OAAO,QAAQ,OAAO,KAAK;GAC3B,YAAY,SAAS,KAAK,QAAQ,SAAS,CAAC,QAAQ,MAAM,SAAS,KAAK,OAAO,KAAK,EAAE,CAAC,CAAC;EAC1F,GAAG,QAAQ;EACX,OAAO,QAAQ,IAAI,KAAK;CAG1B,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,MAAM,UAAU,OAAO;EACvB,aAAa;GACX,KAAK,MAAM,SAAS,SAAS,aAAa,KAAK;EACjD;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EAAE;EAAU,SAAS,QAAQ,QAAQ,SAAS,CAAC,IAAI,SAAS,KAAK,EAAE,CAAC;CAAE;AAC/E;AAEA,SAAS,KAAK,EACZ,QACA,WACA,OACA,SAMC;CACD,OACE,qBAAC,QAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,mDAAmD,SAAS;EACnE;EAJT,UAAA,CAMG,OAAO,SAAS,oBAAC,aAAD;GAAa,KAAK,OAAO;GAAQ,KAAI;EAAI,CAAA,IAAI,MAC9D,oBAAC,gBAAD;GAAgB,WAAU;GACvB,UAAA,SAAS,OAAO,IAAI;EACP,CAAA,CACV;;AAEZ;;AAGA,SAAgB,eAAe,EAC7B,WACA,OACA,QACA,OAAO,WACP,cACA,eACA,MAAM,UACN,cAAc,OACd,cACA,QAAQ,aACR,cAAc,cACd,UAAU,IACV,SAAS,IACT,QAAQ,OACR,UACA,eAAe,KACf,MACA,QACA,kBACA,kBACA,GAAG,SACmB;CACtB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,gBAAgB,CAAC,CAAC;CAC7E,MAAM,QAAQ,aAAa;CAC3B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,OAAO,YAAY;CACzB,MAAM,CAAC,QAAQ,aAAa,eAC1B,KAAK,IACH,GACA,OAAO,WAAW,WAAW,MAAM,SAAS,OAAO,EAAE,CAAC,CACxD,CACF;CACA,MAAM,UAAU,OAAkC,CAAC,CAAC;CACpD,MAAM,SAAS,MAAM;CAErB,MAAM,OAAO,IAAI,IAAI,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;CAChE,MAAM,WAAW,MAAM,QAAQ,OAAO,KAAK,IAAI,EAAE,CAAC;CAClD,MAAM,EAAE,UAAU,YAAY,gBAAgB,QAAQ;CAEtD,MAAM,YAAY,SAAmB;EACnC,IAAI,cAAc,KAAA,GAAW,qBAAqB,IAAI;EACtD,gBAAgB,IAAI;CACtB;CAEA,MAAM,WAAW,SAAkB;EACjC,IAAI,MAEF,UACE,KAAK,IACH,GACA,OAAO,WAAW,WAAW,MAAM,SAAS,OAAO,EAAE,CAAC,CACxD,CACF;EAEF,IAAI,aAAa,KAAA,GAAW,oBAAoB,IAAI;EACpD,eAAe,IAAI;CACrB;CAEA,MAAM,UAAU,OAAe;EAC7B,SAAS,MAAM,SAAS,EAAE,IAAI,MAAM,QAAQ,MAAM,MAAM,EAAE,IAAI,CAAC,GAAG,OAAO,EAAE,CAAC;CAC9E;CAEA,MAAM,eAAe,UAAkB;EACrC,UAAU,KAAK;EACf,QAAQ,QAAQ,MAAM,EAAE,MAAM;CAChC;CAEA,SAAS,cAAc,OAAsC;EAC3D,MAAM,OAAO,OAAO,SAAS;EAC7B,MAAM,UAAU,KAAK,IAAI,QAAQ,IAAI;EAOrC,MAAM,SAAS;GALb,WAAW,WAAW,OAAO,IAAI,UAAU;GAC3C,SAAS,WAAW,IAAI,OAAO,UAAU;GACzC,MAAM;GACN,KAAK;EAEY,EAAE,MAAM;EAC3B,IAAI,WAAW,KAAA,GAAW;GACxB,MAAM,eAAe;GACrB,YAAY,MAAM;GAClB;EACF;EACA,MAAM,SAAS,OAAO;EACtB,KAAK,MAAM,QAAQ,OAAO,MAAM,QAAQ,YAAY,QAAQ;GAC1D,MAAM,eAAe;GACrB,OAAO,OAAO,EAAE;EAClB,OAAO,IAAI,MAAM,QAAQ,OAAO;GAE9B,MAAM,eAAe;GACrB,QAAQ,KAAK;EACf;CACF;CAGA,MAAM,OAAO,UAAU;CACvB,MAAM,QAAQ,KAAK,IAAI,GAAG,OAAO,KAAK,IAAI,YAAY,GAAG,CAAC,IAAK,YAAY,QAAS;CACpF,MAAM,WAAW,SAAS,SAAS,QAAQ,SAAS,SAAS,QAAQ,IAAI;CACzE,MAAM,QAAQ,WAAW,IAAI,SAAS,MAAM,GAAG,QAAQ,CAAC,IAAI;CAC5D,MAAM,QAAQ,MAAM,UAAU,WAAW,IAAI,IAAI;CACjD,MAAM,OAAO,OAAO,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,IAAI;CACvD,MAAM,SAAS,QAAQ,QAAQ;CAC/B,MAAM,YAAY,UAAU,IAAI,IAAI,OAAO,OAAO,QAAQ,QAAQ,KAAK;CAEvE,MAAM,SAAS,UAAiC;EAC9C,IAAI,QAAQ;GACV,MAAM,OAAO;GACb,OAAO;IACL,OAAO;IACP,QAAQ;IACR,kBAAmB,QAAQ,IAAM;IACjC,KAAK,KAAK,MAAM,QAAQ,CAAC,IAAK;IAC9B,QAAQ,QAAQ;GAClB;EACF;EACA,OAAO;GAAE,OAAO;GAAM,QAAQ;GAAM,kBAAkB,QAAQ;GAAM,QAAQ,QAAQ;EAAM;CAC5F;CAEA,MAAM,WAAW,SAAS,WAAW;CACrC,MAAM,QAAQ,SAAS,KAAK,OAAO,KAAK,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI;CAChE,MAAM,WAAW,uBAAuB;EAAE;EAAM;CAAO,CAAC;CACxD,MAAM,YAAY,KAAK,IAAI,GAAG,SAAS,CAAC;CAExC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,OAAO;GAAE,4BAA4B,aAAa,GAAI;GAAG,GAAG;EAAM;EAClE,GAAI;EAJN,UAAA,CAME,oBAAC,SAAD;GAAO,MAAK;GAAwB,YAAW;GAC5C,UAAA;EACI,CAAA,GACP,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,qBAAC,UAAD;KACE,MAAK;KACL,aAAU;KACV,iBAAc;KACd,cAAY,GAAG,MAAM,IAAI,SAAS;KAClC,WAAW,GACT,iGACA,UACA,WACA,gBACF;KACA,OAAO,EAAE,cAAc,OAAO;KAXhC,UAAA;MAaE,qBAAC,QAAD;OACE,aAAU;OACV,eAAY;OACZ,WAAU;OACV,OAAO,EAAE,OAAO,UAAU;OAJ5B,UAAA;QAMG,MAAM,KAAK,IAAI,UACd,oBAAC,MAAD;SAEE,QAAQ,KAAK,IAAI,EAAE;SACnB,OAAO,SAAS,IAAI,EAAE,IAAI,UAAU;SACpC,WAAW,GACT,UACA,+HACF;SACA,OAAO,MAAM,KAAK;QACnB,GARM,EAQN,CACF;QACA,QAAQ,KAAK,SAAS;SACrB,MAAM,SAAS,KAAK,IAAI,KAAK,EAAE;SAC/B,OAAO,SACL,oBAAC,MAAD;UAEU;UACR,OAAM;UACN,WAAW;UACX,OAAO,MAAM,KAAK,IAAI,KAAK,OAAO,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC1D,GALM,KAAK,EAKX,IACC;QACN,CAAC;QACA,WAAW,IACV,qBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,8JACA,QACF;SACA,OAAO,MAAM,QAAQ,CAAC;SANxB,UAAA,CAOC,KACG,QACE;QACJ,CAAA,IAAA;OACA;;MACL,SAAS,WAAW,IACnB,oBAAC,QAAD;OAAM,aAAU;OAA8B,WAAU;OACrD,UAAA;MACG,CAAA,IACJ;MACJ,oBAAC,OAAD;OACE,aAAU;OACV,eAAY;OACZ,SAAQ;OACR,MAAK;OACL,QAAO;OACP,aAAa;OACb,eAAc;OACd,gBAAe;OACf,WAAW,GACT,kIACA,2EACF;OAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;MACrB,CAAA;KACC;;GACM,CAAA,GAChB,oBAAC,gBAAD;IACE,MAAK;IACL,wBAAqB;IACrB,cAAY;IACZ,MAAK;IACL,OAAM;IACN,YAAY;IACZ,aAAU;IACV,WAAW,GAAG,mCAAmC,UAAU,gBAAgB;IAC3E,OAAO;KAAE,OAAO;KAAc,cAAc;IAAO;IAElD,UAAA,OAAO,KAAK,QAAQ,UAAU;KAC7B,MAAM,WAAW,MAAM,SAAS,OAAO,EAAE;KACzC,OACE,qBAAC,OAAD;MAEE,MAAM,SAAS;OACb,QAAQ,QAAQ,SAAS;MAC3B;MACA,MAAK;MACL,iBAAe;MACf,mBAAiB,GAAG,OAAO,GAAG,OAAO,KAAK,EAAE;MAC5C,oBACE,OAAO,cAAc,GAAG,OAAO,GAAG,OAAO,KAAK,EAAE,gBAAgB,KAAA;MAElE,UAAU,UAAU,KAAK,IAAI,QAAQ,OAAO,SAAS,CAAC,IAAI,IAAI;MAC9D,aAAU;MACV,WAAW,GACT,+EACA,+GACA,cACF;MACA,OACE;OAAE,cAAc;OAAW,uBAAuB;MAAM;MAE1D,eAAe;OACb,UAAU,KAAK;OACf,OAAO,OAAO,EAAE;MAClB;MACA,eAAe,UAAU,KAAK;MAC9B,WAAW;MA1Bb,UAAA;OA4BE,qBAAC,QAAD;QAAQ,MAAK;QAAK,eAAY;QAA9B,UAAA,CACG,OAAO,SAAS,oBAAC,aAAD;SAAa,KAAK,OAAO;SAAQ,KAAI;QAAI,CAAA,IAAI,MAC9D,oBAAC,gBAAD,EAAA,UAAiB,SAAS,OAAO,IAAI,EAAkB,CAAA,CACjD;;OACR,qBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CACE,oBAAC,QAAD;SACE,IAAI,GAAG,OAAO,GAAG,OAAO,KAAK,EAAE;SAC/B,WAAU;SAET,UAAA,OAAO;QACJ,CAAA,GACL,OAAO,cACN,oBAAC,QAAD;SACE,IAAI,GAAG,OAAO,GAAG,OAAO,KAAK,EAAE;SAC/B,WAAU;SAET,UAAA,OAAO;QACJ,CAAA,IACJ,IACA;;OACN,oBAAC,QAAD;QACE,aAAU;QACV,eAAY;QACZ,WAAW,GACT,sEACA,+EACA,uFACA,8EACF;QAEA,UAAA,oBAAC,OAAD;SACE,aAAU;SACV,SAAQ;SACR,MAAK;SACL,QAAO;SACP,aAAa;SACb,eAAc;SACd,gBAAe;SACf,WAAW,GACT,8DACA,sGACA,6EACF;SAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;QACxB,CAAA;OACD,CAAA;MACH;KA1EE,GAAA,OAAO,EA0ET;IAET,CAAC;GACa,CAAA,CACT;EACN,CAAA,CAAA;;AAET"}

package/dist/components/assignee-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { AssigneePicker, AssigneePickerPerson, AssigneePickerProps, assigneePickerVariants } from "./assignee-picker.js";
+export { AssigneePicker, type AssigneePickerPerson, type AssigneePickerProps, assigneePickerVariants };

package/dist/components/assignee-picker/index.js

@@ -0,0 +1,2 @@
+import { AssigneePicker, assigneePickerVariants } from "./assignee-picker.js";
+export { AssigneePicker, assigneePickerVariants };

package/dist/components/assignee-picker/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/assignee-picker/meta.ts
+const meta = defineMeta({
+	name: "assignee-picker",
+	title: "Assignee Picker",
+	description: "A pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar", "popover"],
+	files: ["assignee-picker.tsx", "assignee-picker-spring.ts"],
+	a11y: "The trigger exposes aria-haspopup=\"listbox\" and aria-expanded, and is named by `label` plus who is assigned (\"Assignees: Adam Marsh, Priya Raman\", or the placeholder when nobody is). The popup is a role=\"listbox\" aria-multiselectable=\"true\" named by `label`, with role=\"option\" rows carrying aria-selected. Opening moves focus onto the first assigned person (or the first row); ArrowUp/ArrowDown rove with wrap-around, Home/End jump, Space/Enter toggle, and Escape or Tab close it and return focus to the trigger. Faces, avatars and the check marks are aria-hidden: the option text and aria-selected carry the meaning. Under reduced motion the card, rows and faces appear in place."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/assignee-picker/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/assignee-picker/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"assignee-picker\",\n  title: \"Assignee Picker\",\n  description:\n    \"A pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar\", \"popover\"],\n  files: [\"assignee-picker.tsx\", \"assignee-picker-spring.ts\"],\n  a11y:\n    'The trigger exposes aria-haspopup=\"listbox\" and aria-expanded, and is named by `label` plus who is ' +\n    'assigned (\"Assignees: Adam Marsh, Priya Raman\", or the placeholder when nobody is). The popup is a ' +\n    'role=\"listbox\" aria-multiselectable=\"true\" named by `label`, with role=\"option\" rows carrying aria-selected. ' +\n    \"Opening moves focus onto the first assigned person (or the first row); ArrowUp/ArrowDown rove with wrap-around, \" +\n    \"Home/End jump, Space/Enter toggle, and Escape or Tab close it and return focus to the trigger. Faces, avatars \" +\n    \"and the check marks are aria-hidden: the option text and aria-selected carry the meaning. Under reduced \" +\n    \"motion the card, rows and faces appear in place.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU,SAAS;CAC1C,OAAO,CAAC,uBAAuB,2BAA2B;CAC1D,MACE;AAOJ,CAAC"}

package/dist/components/avatar/avatar.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/avatar/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AvatarProps extends ComponentPropsWithRef<typeof Avatar.Root>, VariantProps<typeof avatarVariants> {}
 /** Image representation of a user or entity, with a text fallback. */

package/dist/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/avatar-group/avatar-group.d.ts
+/** Avatar edge length per size, mirroring `avatarVariants`. */
+declare const SIZE_REM: {
+  readonly xs: 1.5;
+  readonly sm: 2;
+  readonly md: 2.5;
+  readonly lg: 3;
+  readonly xl: 4;
+};
+declare const avatarGroupVariants: (props?: ({
+  expand?: "none" | "hover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AvatarGroupItem {
+  /** The person's name: the image's alt text and the fallback's accessible name. */
+  name: string;
+  /** Image URL. Without it (or while it loads, or if it fails) the fallback shows. */
+  src?: string;
+  /** Makes the avatar a link, e.g. to a profile. */
+  href?: string;
+  /** Shown when there is no image. Defaults to the name's initials. */
+  fallback?: ReactNode;
+}
+interface AvatarGroupProps extends Omit<ComponentPropsWithRef<"ul">, "children">, VariantProps<typeof avatarGroupVariants> {
+  /** The people to show, in order. The first is drawn on top. */
+  avatars: AvatarGroupItem[];
+  /** How many avatars to show before collapsing the rest into "+N". */
+  max?: number;
+  /** Avatar size, as `Avatar`'s `size`. */
+  size?: keyof typeof SIZE_REM;
+  /** How much each avatar overlaps the previous one, as a fraction of its width. */
+  overlap?: number;
+  /** Screen-reader text for the overflow count. */
+  overflowLabel?: (hidden: number) => string;
+}
+/** Overlapping avatars that spread apart on hover or keyboard focus, with a "+N" overflow. */
+declare function AvatarGroup({ className, style, avatars, max, size, overlap, expand, overflowLabel, ...props }: AvatarGroupProps): import("react").JSX.Element;
+//#endregion
+export { AvatarGroup, AvatarGroupItem, AvatarGroupProps, avatarGroupVariants };
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar-group/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","names":[],"sources":["../../../src/components/avatar-group/avatar-group.tsx"],"mappings":";;;;cAqBM;;;;;;;cAEA,sBAAmB;;6CAkBxB;UAWgB;;EAEf;;EAEA;;EAEA;;EAEA,WAAW;;UAGI,yBAEb,KAAK,0CACL,oBAAoB;;EAEtB,SAAS;;EAET;;EAEA,oBAAoB;;EAEpB;;EAEA,iBAAiB;;;iBAkCH,cACd,WACA,OACA,SACA,KACA,MACA,SACA,QACA,kBACG,SACF,mCAAgB,IAAA"}