@sincpro/web-ui 0.2.0 → 1.0.0

package/dist/primitives/tag/TagsField.js

@@ -8,9 +8,11 @@ import { useFieldIds } from "../field/context.js";
 import { ReadValue } from "../field/Field.js";
 import { useFormMode } from "../field/mode.js";
 import { Popover } from "../overlay/Popover.js";
+import { MatchedText } from "../picker/MatchedText.js";
 import { tagChoices, withoutTag, withTag, } from "./choices.js";
 import { Tags } from "./Tags.js";
-import { Plus } from "lucide-react";
+import { Avatar } from "../value/Person.js";
+import { Plus, Search } from "lucide-react";
 import { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox, ListBoxItem, useFilter, useLocale, } from "react-aria-components";
 /* ==================================================================== *
@@ -43,6 +45,15 @@ import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox,
  * ==================================================================== */
 /** The key of the «create» row. Not an id: it cannot collide with one. */
 const CREATE = "\u0000create";
+/** The key of the «Buscar más…» row. */
+const BROWSE = "\u0000browse";
+/** What a chip needs to open its record: the press, and the place it opens named as its title. */
+function useChipOpening(onOpen, to = "peek") {
+    const copy = useUiCopy();
+    return (id) => onOpen === undefined
+        ? {}
+        : { onSelect: () => onOpen(id, to), title: copy.picker.openIn[to] };
+}
 /** The chosen tags as chips, in the order of `value`. An id missing from `options` is still
  *  drawn (as itself): hiding it would hide data the record has. */
 function chosenOptions(options, value) {
@@ -56,6 +67,7 @@ function chosenOptions(options, value) {
  * chips, and its hint and error describe the input. In read mode it is `Tags`.
  */
 export function TagsField({ mode, ...props }) {
+    const opening = useChipOpening(props.onOpen, props.openTarget);
     if (useFormMode(mode) === "read") {
         const chosen = chosenOptions(props.options, props.value);
         if (chosen.length === 0)
@@ -64,19 +76,22 @@ export function TagsField({ mode, ...props }) {
                     id: option.value,
                     label: option.label,
                     ...(option.tone === undefined ? {} : { tone: option.tone }),
+                    ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+                    ...opening(option.value),
                 })) }) }));
     }
     /* The filter reads the locale from React Aria's context, so the box that provides it has
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
     const copy = useUiCopy();
+    const opening = useChipOpening(onOpen, openTarget);
     const { contains } = useFilter({ sensitivity: "base" });
     const { locale } = useLocale();
     const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
@@ -89,17 +104,25 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
     const latest = useRef(value);
     latest.current = value;
     const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
-    const listed = create === null
-        ? available
-        : [
-            ...available,
-            { value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) },
-        ];
+    const listed = [
+        ...available,
+        ...(create === null
+            ? []
+            : [{ value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) }]),
+        ...(onBrowseAll === undefined || disabled
+            ? []
+            : [{ value: BROWSE, label: copy.picker.browseAll }]),
+    ];
     const commit = (key) => {
         if (key === null)
             return;
         const chosen = String(key);
+        const typed = text;
         setText("");
+        if (chosen === BROWSE) {
+            onBrowseAll?.(typed);
+            return;
+        }
         if (chosen !== CREATE) {
             onChange?.(withTag(latest.current, chosen));
             return;
@@ -120,6 +143,8 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
         id: option.value,
         label: option.label,
         ...(option.tone === undefined ? {} : { tone: option.tone }),
+        ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+        ...opening(option.value),
         ...(disabled ? {} : { onRemove: () => remove(option.value) }),
     }));
     return (
@@ -149,7 +174,7 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
                                 onChange?.(withoutTag(value, last));
                         }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
                             ? {}
-                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsx("span", { className: "truncate", children: item.label })) })) }) })] })] }));
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, dependencies: [text], className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE || item.value === BROWSE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : item.value === BROWSE ? (_jsxs(_Fragment, { children: [_jsx(Search, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsxs(_Fragment, { children: [item.avatar === undefined ? null : (_jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsx("span", { className: "truncate", children: _jsx(MatchedText, { text: item.label, query: text, locale: copy.locale }) })] })) })) }) })] })] }));
 }
 /** The input after the chips. It reads the combobox's state to know whether the keyboard
  *  marked an option — Enter with nothing marked takes the first match. */

package/dist/primitives/tag/choices.d.ts

@@ -11,6 +11,8 @@ export interface TagOption {
     label: string;
     /** Neutral by default: «mayorista» classifies, it does not warn. */
     tone?: Tone;
+    /** A person: its face on the chip and in the list — `true` for initials, a URL for a photo. */
+    avatar?: true | string;
 }
 /** How the typed text is compared — the locale's, handed in by the component. */
 export type TagMatch = {

package/dist/primitives/value/Avatar.d.ts

@@ -0,0 +1,16 @@
+export declare const SIZE: {
+    readonly sm: "size-5 text-micro";
+    readonly md: "size-6 text-micro";
+    readonly lg: "size-8 text-meta";
+    readonly xl: "size-12 text-body";
+};
+export declare const OVERLAP: Record<AvatarSize, string>;
+export type AvatarSize = keyof typeof SIZE;
+export declare function Avatar({ name, size, 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }: {
+    name: string;
+    size?: AvatarSize;
+    src?: string;
+}): import("react").JSX.Element;

package/dist/primitives/value/Avatar.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSurface } from "../../foundations/surface.js";
+/* ==================================================================== *
+ *  WHO — the person as a datum, not as a string of text.
+ *
+ *  «andres.g@sincpro.com.bo» in a cell is a correct and unreadable datum: twelve
+ *  rows of emails get read letter by letter. An initial in a circle is
+ *  recognized without reading, which is what is needed when the question is «who
+ *  does this belong to?» and not «what is their email?».
+ *
+ *  ── The color comes out of the name and nobody picks it ──────────────
+ *
+ *  A hash of the name against the tone palette. It is deterministic —the same
+ *  person always has the same color, on every screen— and that is why the color
+ *  gets to mean something. If the consumer picked it, the same person would be
+ *  green in one list and blue in another, and recognition without reading is lost
+ *  entirely.
+ *
+ *  The color here is NOT a state: it is identity. That is why it uses the tone
+ *  palette but never `bad` nor `warn` — a person is not «in error».
+ * ==================================================================== */
+const PALETTE = [
+    "bg-info/15 text-info",
+    "bg-good/15 text-good",
+    "bg-accent/25 text-ink",
+    "bg-primary/12 text-primary",
+    "bg-ink/10 text-ink",
+];
+/** The initials: two, and from the first two WORDS. «Ana María Gutiérrez» gives
+ *  `AG` and not `AM` — the surname distinguishes more than the middle name. */
+function initials(name) {
+    const parts = name
+        .trim()
+        .split(/\s+/)
+        .filter((p) => p.length > 0);
+    const first = parts[0]?.[0] ?? "?";
+    const last = parts.length > 1 ? parts[parts.length - 1]?.[0] : undefined;
+    return `${first}${last ?? ""}`.toUpperCase();
+}
+/* The same five identities on the dark chrome. The canvas palette there composed its tints
+   over the navy and left ink letters on a dark disc — 1.61:1, unreadable (measured on the
+   application bar). Same index, so a person keeps their color across the two surfaces. */
+const CHROME_PALETTE = [
+    "bg-chrome-link/20 text-chrome-link",
+    "bg-chrome-good/20 text-chrome-good",
+    "bg-chrome-accent/12 text-chrome-accent",
+    "bg-chrome-link/14 text-chrome-ink",
+    "bg-chrome-ink/14 text-chrome-ink",
+];
+function toneOf(name, surface = "canvas") {
+    let h = 0;
+    for (const ch of name)
+        h = (h * 31 + ch.codePointAt(0)) % 100000;
+    const palette = surface === "chrome" ? CHROME_PALETTE : PALETTE;
+    return palette[h % palette.length];
+}
+/* The text doesn't go below `micro`: two initials at 10 px can't be read, and an
+   unreadable initial is a colored circle — which is exactly what we don't want.
+   What changes between sizes is the circle. */
+export const SIZE = {
+    sm: "size-5 text-micro",
+    md: "size-6 text-micro",
+    lg: "size-8 text-meta",
+    /* The head of a contact card: the face is what the card is about. */
+    xl: "size-12 text-body",
+};
+/* Two initials, so the overlap stays short of the second letter. The ring is
+   1px: a 2px ring of the surface color reads as a gap between people, which
+   is the thing a stack is not. */
+export const OVERLAP = {
+    sm: "-ml-1.5",
+    md: "-ml-2",
+    lg: "-ml-2.5",
+    xl: "-ml-3.5",
+};
+export function Avatar({ name, size = "md", 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }) {
+    const surface = useSurface();
+    if (src !== undefined) {
+        return (
+        /* The photo lies over the initials, drawn invisible: an image has no text baseline, so
+           a chip with a photo sat on the image's bottom edge in a row aligned by baseline (a
+           `DataField`), higher than the label next to it. The hidden initials give the photo
+           the same baseline the initials disc has. */
+        _jsxs("span", { title: name, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill ${SIZE[size]}`, children: [_jsx("span", { "aria-hidden": true, className: "invisible", children: initials(name) }), _jsx("img", { src: src, alt: name, className: "absolute inset-0 size-full object-cover" })] }));
+    }
+    return (_jsx("span", { title: name, "aria-hidden": true, className: `inline-flex shrink-0 items-center justify-center rounded-pill font-medium select-none ${SIZE[size]} ${toneOf(name, surface)}`, children: initials(name) }));
+}

package/dist/primitives/value/Person.d.ts

@@ -1,52 +1,8 @@
+import { type AvatarSize } from "./Avatar.js";
+import type { PersonContact } from "./contact.js";
 import type { ReactNode } from "react";
-declare const SIZE: {
-    readonly sm: "size-5 text-micro";
-    readonly md: "size-6 text-micro";
-    readonly lg: "size-8 text-meta";
-    readonly xl: "size-12 text-body";
-};
-export type AvatarSize = keyof typeof SIZE;
-export declare function Avatar({ name, size, 
-/** The photo, if there is one. Without it the initials go, which is the normal
- *  case here. */
-src, }: {
-    name: string;
-    size?: AvatarSize;
-    src?: string;
-}): import("react").JSX.Element;
-/** The ways to reach a person. Each one that is present becomes a row of the contact card. */
-export type PersonContact = {
-    email?: string;
-    /** As people write it — «+591 7 123-4567». The `tel:` link keeps only the digits and `+`. */
-    phone?: string;
-    /** The WhatsApp number with its country code, written any way; `wa.me` gets the digits. */
-    whatsapp?: string;
-};
-export type ContactCardProps = {
-    name: string;
-    /** The photo. Without it, the initials — in the same color the person has everywhere. */
-    src?: string;
-    /** What the person is here: «Vendedora · Sucursal La Paz». */
-    role?: string;
-    contact?: PersonContact;
-    /** Go to the person's own record — «Ver ficha». Without it the card only reaches them. */
-    onOpen?: () => void;
-};
-/**
- * Who a person is and how to reach them: the face, the name, the role, and one row per way
- * of contact — write, call, WhatsApp — then their record.
- *
- * Context: in an ERP the question after «who is the salesperson of this invoice?» is almost
- * always «how do I reach her?». Copying an email out of another screen to paste it into the
- * mail client is the detour this card removes. Each way of contact is a ROW and not a bare
- * icon: the address and the number are drawn, because often what the person wants is to read
- * the number aloud, not to dial it from the browser. Every row is a real link (`mailto:`,
- * `tel:`, `wa.me`), so middle-click, «copy address» and the phone's own dialer work.
- *
- * It is what opens from a `UserChip` with `contact`, and it is exported on its own for the
- * side panel of a record, where the same person is shown without a chip to open.
- */
-export declare function ContactCard({ name, src, role, contact, onOpen }: ContactCardProps): import("react").JSX.Element;
+export { Avatar, type AvatarSize } from "./Avatar.js";
+export type { PersonContact } from "./contact.js";
 export type UserChipProps = {
     name: string;
     size?: AvatarSize;
@@ -57,7 +13,7 @@ export type UserChipProps = {
     role?: string;
     /** The ways to reach them. Present = the chip opens a contact card. */
     contact?: PersonContact;
-    /** Go to the person's record. Present = the chip opens a card with «Ver ficha». */
+    /** Go to the person's record. Present = the chip opens its card with «Abrir». */
     onOpen?: () => void;
 };
 /**
@@ -65,7 +21,7 @@ export type UserChipProps = {
  * a fact of a record.
  *
  * Context: a chip is a button ONLY when it has somewhere to go. With `contact` or `onOpen` it
- * opens the `ContactCard` (press, Enter or Space — React Aria's `DialogTrigger` through
+ * opens the person's `RelationCard` (press, Enter or Space — React Aria's `DialogTrigger` through
  * `PopoverTrigger`: focus goes into the card, Escape and a click outside close it, and focus
  * comes back to the chip). Without them it stays text: a button that does nothing is a lie a
  * keyboard user pays for with one more Tab stop on every row.
@@ -87,4 +43,3 @@ export declare function UserStack({ names, max, size, }: {
     max?: number;
     size?: AvatarSize;
 }): import("react").JSX.Element;
-export {};

package/dist/primitives/value/Person.js

@@ -1,154 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useSurface } from "../../foundations/surface.js";
-import { Button } from "../button/Button.js";
 import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
-import { ArrowRight, Mail, MessageCircle, Phone } from "lucide-react";
+import { Avatar, OVERLAP, SIZE, } from "./Avatar.js";
+import { RelationCard } from "./Relation.js";
 /* ==================================================================== *
- *  WHO — the person as a datum, not as a string of text.
- *
- *  «andres.g@sincpro.com.bo» in a cell is a correct and unreadable datum: twelve
- *  rows of emails get read letter by letter. An initial in a circle is
- *  recognized without reading, which is what is needed when the question is «who
- *  does this belong to?» and not «what is their email?».
- *
- *  ── The color comes out of the name and nobody picks it ──────────────
- *
- *  A hash of the name against the tone palette. It is deterministic —the same
- *  person always has the same color, on every screen— and that is why the color
- *  gets to mean something. If the consumer picked it, the same person would be
- *  green in one list and blue in another, and recognition without reading is lost
- *  entirely.
- *
- *  The color here is NOT a state: it is identity. That is why it uses the tone
- *  palette but never `bad` nor `warn` — a person is not «in error».
+ *  WHO — a person as a chip and as a stack. The face itself is `Avatar`; what a person's
+ *  card says (the face, the role, the ways to reach them, «Abrir») is the `RelationCard` of
+ *  that person: a person IS a related record, and one card answers for all of them.
  * ==================================================================== */
-const PALETTE = [
-    "bg-info/15 text-info",
-    "bg-good/15 text-good",
-    "bg-accent/25 text-ink",
-    "bg-primary/12 text-primary",
-    "bg-ink/10 text-ink",
-];
-/** The initials: two, and from the first two WORDS. «Ana María Gutiérrez» gives
- *  `AG` and not `AM` — the surname distinguishes more than the middle name. */
-function initials(name) {
-    const parts = name
-        .trim()
-        .split(/\s+/)
-        .filter((p) => p.length > 0);
-    const first = parts[0]?.[0] ?? "?";
-    const last = parts.length > 1 ? parts[parts.length - 1]?.[0] : undefined;
-    return `${first}${last ?? ""}`.toUpperCase();
-}
-/* The same five identities on the dark chrome. The canvas palette there composed its tints
-   over the navy and left ink letters on a dark disc — 1.61:1, unreadable (measured on the
-   application bar). Same index, so a person keeps their color across the two surfaces. */
-const CHROME_PALETTE = [
-    "bg-chrome-link/20 text-chrome-link",
-    "bg-chrome-good/20 text-chrome-good",
-    "bg-chrome-accent/12 text-chrome-accent",
-    "bg-chrome-link/14 text-chrome-ink",
-    "bg-chrome-ink/14 text-chrome-ink",
-];
-function toneOf(name, surface = "canvas") {
-    let h = 0;
-    for (const ch of name)
-        h = (h * 31 + ch.codePointAt(0)) % 100000;
-    const palette = surface === "chrome" ? CHROME_PALETTE : PALETTE;
-    return palette[h % palette.length];
-}
-/* The text doesn't go below `micro`: two initials at 10 px can't be read, and an
-   unreadable initial is a colored circle — which is exactly what we don't want.
-   What changes between sizes is the circle. */
-const SIZE = {
-    sm: "size-5 text-micro",
-    md: "size-6 text-micro",
-    lg: "size-8 text-meta",
-    /* The head of a contact card: the face is what the card is about. */
-    xl: "size-12 text-body",
-};
-/* Two initials, so the overlap stays short of the second letter. The ring is
-   1px: a 2px ring of the surface color reads as a gap between people, which
-   is the thing a stack is not. */
-const OVERLAP = {
-    sm: "-ml-1.5",
-    md: "-ml-2",
-    lg: "-ml-2.5",
-    xl: "-ml-3.5",
-};
-export function Avatar({ name, size = "md", 
-/** The photo, if there is one. Without it the initials go, which is the normal
- *  case here. */
-src, }) {
-    const surface = useSurface();
-    if (src !== undefined) {
-        return (
-        /* The photo lies over the initials, drawn invisible: an image has no text baseline, so
-           a chip with a photo sat on the image's bottom edge in a row aligned by baseline (a
-           `DataField`), higher than the label next to it. The hidden initials give the photo
-           the same baseline the initials disc has. */
-        _jsxs("span", { title: name, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill ${SIZE[size]}`, children: [_jsx("span", { "aria-hidden": true, className: "invisible", children: initials(name) }), _jsx("img", { src: src, alt: name, className: "absolute inset-0 size-full object-cover" })] }));
-    }
-    return (_jsx("span", { title: name, "aria-hidden": true, className: `inline-flex shrink-0 items-center justify-center rounded-pill font-medium select-none ${SIZE[size]} ${toneOf(name, surface)}`, children: initials(name) }));
-}
-/** The three contact links, built from what people type. `wa.me` takes digits only — a `+`,
- *  a space or a dash breaks it — and `tel:` takes digits and the leading `+`. */
-function contactRows(contact, copy) {
-    const rows = [];
-    if (contact.email !== undefined && contact.email !== "") {
-        rows.push({
-            key: "email",
-            icon: Mail,
-            label: copy.email,
-            value: contact.email,
-            href: `mailto:${contact.email}`,
-        });
-    }
-    if (contact.phone !== undefined && contact.phone !== "") {
-        rows.push({
-            key: "call",
-            icon: Phone,
-            label: copy.call,
-            value: contact.phone,
-            href: `tel:${contact.phone.replace(/[^\d+]/g, "")}`,
-        });
-    }
-    if (contact.whatsapp !== undefined && contact.whatsapp !== "") {
-        rows.push({
-            key: "whatsapp",
-            icon: MessageCircle,
-            label: copy.whatsapp,
-            value: contact.whatsapp,
-            href: `https://wa.me/${contact.whatsapp.replace(/\D/g, "")}`,
-        });
-    }
-    return rows;
-}
-/**
- * Who a person is and how to reach them: the face, the name, the role, and one row per way
- * of contact — write, call, WhatsApp — then their record.
- *
- * Context: in an ERP the question after «who is the salesperson of this invoice?» is almost
- * always «how do I reach her?». Copying an email out of another screen to paste it into the
- * mail client is the detour this card removes. Each way of contact is a ROW and not a bare
- * icon: the address and the number are drawn, because often what the person wants is to read
- * the number aloud, not to dial it from the browser. Every row is a real link (`mailto:`,
- * `tel:`, `wa.me`), so middle-click, «copy address» and the phone's own dialer work.
- *
- * It is what opens from a `UserChip` with `contact`, and it is exported on its own for the
- * side panel of a record, where the same person is shown without a chip to open.
- */
-export function ContactCard({ name, src, role, contact = {}, onOpen }) {
-    const copy = useUiCopy().person;
-    const rows = contactRows(contact, copy);
-    return (
-    /* React events bubble through the popover's portal to the React parents of the chip —
-       a table row that opens on click among them. A click inside the card is not a click
-       on the row. */
-    _jsxs("div", { className: "flex w-64 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: "xl", ...(src === undefined ? {} : { src }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-lead font-semibold text-ink", title: name, children: name }), role === undefined ? null : (_jsx("span", { className: "line-clamp-2 text-meta text-muted", title: role, children: role }))] })] }), rows.length === 0 ? null : (_jsx("ul", { className: "-mx-1 flex flex-col", children: rows.map(({ key, icon: Icon, label, value, href }) => (_jsx("li", { children: _jsxs("a", { href: href, "data-contact": key, ...(key === "whatsapp" ? { target: "_blank", rel: "noreferrer" } : {}), className: "flex min-w-0 items-center gap-2.5 rounded-control px-1 py-1.5 no-underline outline-primary outline-offset-2 hover:bg-ink/6 focus-visible:outline-2 forced-colors:outline-[Highlight]", children: [_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-md) shrink-0 text-primary", strokeWidth: 2 }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-meta font-medium text-ink", children: label }), _jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: value })] })] }) }, key))) })), onOpen === undefined ? null : (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(Button, { role: "ghost", size: "sm", icon: ArrowRight, onClick: onOpen, children: copy.open }) }))] }));
-}
+export { Avatar } from "./Avatar.js";
 /** The chip as the opener of its card. A native button that takes what `PopoverTrigger`
  *  hands its trigger — `ref`, the press handlers, `expanded` and `haspopup` — the same
  *  contract the system's buttons keep. */
@@ -164,7 +25,7 @@ function ChipButton({ expanded, haspopup, children, ref, ...native }) {
  * a fact of a record.
  *
  * Context: a chip is a button ONLY when it has somewhere to go. With `contact` or `onOpen` it
- * opens the `ContactCard` (press, Enter or Space — React Aria's `DialogTrigger` through
+ * opens the person's `RelationCard` (press, Enter or Space — React Aria's `DialogTrigger` through
  * `PopoverTrigger`: focus goes into the card, Escape and a click outside close it, and focus
  * comes back to the chip). Without them it stays text: a button that does nothing is a lie a
  * keyboard user pays for with one more Tab stop on every row.
@@ -180,7 +41,7 @@ export function UserChip({ name, size = "md", src, detail, role, contact, onOpen
     if (!reachable) {
         return _jsx("span", { className: "inline-flex min-w-0 items-center gap-2", children: face });
     }
-    return (_jsx(PopoverTrigger, { label: name, trigger: _jsx(ChipButton, { children: face }), children: (close) => (_jsx(ContactCard, { name: name, ...(src === undefined ? {} : { src }), ...(role === undefined ? {} : { role }), ...(contact === undefined ? {} : { contact }), ...(onOpen === undefined
+    return (_jsx(PopoverTrigger, { label: name, trigger: _jsx(ChipButton, { children: face }), children: (close) => (_jsx(RelationCard, { name: name, media: { person: true, ...(src === undefined ? {} : { src }) }, ...(role === undefined ? {} : { secondary: role }), ...(contact === undefined ? {} : { contact }), ...(onOpen === undefined
                 ? {}
                 : {
                     onOpen: () => {

package/dist/primitives/value/Relation.d.ts

@@ -1,5 +1,6 @@
-import type { Tone } from "../../foundations/types.js";
+import type { OpenTarget, Tone } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
+import { type PersonContact } from "./contact.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
 /** What the floating summary of the related record says. */
@@ -18,16 +19,22 @@ export type RelationSummary = {
         value: ReactNode;
     }[];
 };
+/** The picture of the related record: a photo or an icon on a square tile — or, for a person
+ *  (`person`), the round face: the photo, or the initials in the color that person has
+ *  everywhere. */
 type RelationMedia = {
     src?: string;
     alt?: string;
     icon?: LucideIcon;
+    person?: true;
 };
 export type RelationCardProps = {
     name: string;
     secondary?: ReactNode;
     media?: RelationMedia;
     summary?: RelationSummary;
+    /** How to reach it — a person, a company: one row per way (write, call, WhatsApp). */
+    contact?: PersonContact;
     /** «Abrir»: go to the related record. */
     onOpen?: () => void;
     /** The record's address, when it has one: «Abrir» becomes a real link. */
@@ -39,9 +46,10 @@ export type RelationCardProps = {
  * Context: it answers the question a person has about the customer of an invoice without
  * leaving the invoice — «does it owe us?», «what is its NIT?» — and, when the answer is
  * «I need more», one press takes them to the record. It is what floats from a
- * `RelationValue`, and it is exported on its own for a side panel.
+ * `RelationValue` and what opens from a `UserChip` (a person is a related record too: round
+ * face, role, the ways to reach them), and it is exported on its own for a side panel.
  */
-export declare function RelationCard({ name, secondary, media, summary, onOpen, href, }: RelationCardProps): import("react").JSX.Element;
+export declare function RelationCard({ name, secondary, media, summary, contact, onOpen, href, }: RelationCardProps): import("react").JSX.Element;
 export type RelationValueProps = {
     /** The related record's name. Empty, `null` or absent = no record: said, in muted. */
     name?: string | null;
@@ -51,14 +59,18 @@ export type RelationValueProps = {
     media?: RelationMedia;
     /** Go to the related record. The name becomes a link. */
     onOpen?: () => void;
+    /** Go to it in the place the person chose (`OpenTarget`): the name opens in the first of
+     *  `openTargets` — a modal by default, the form stays behind — and «Abrir en…» beside it offers
+     *  the rest. Takes over from `onOpen`. */
+    onOpenIn?: (to: OpenTarget) => void;
+    openTargets?: readonly OpenTarget[];
     /** The related record's address: the name becomes a real `<a>` (middle-click, copy). */
     href?: string;
-    /** Present = an info button next to the name opens the `RelationCard`. */
+    /** The facts of the related record. Present = its `RelationCard` floats from the name
+     *  (hover, focus, long press); from an info button when the name is not a link. */
     summary?: RelationSummary;
-    /** Floats the summary from the NAME on hover, focus or long press, instead of from the
-     *  info button. `true` = the `RelationCard` (with `summary` when given); a node = that
-     *  content instead — the product of a line, a consumer's own card. Needs the name to be a
-     *  link (`href` or `onOpen`); without one the content opens from the info button. */
+    /** What floats instead of the `RelationCard` — the product of a line, a consumer's own
+     *  card. `true` floats the card even without `summary`; `false` floats nothing. */
     preview?: boolean | ReactNode;
     /** The control that EDITS this relation — a `Picker` — drawn instead in edit mode. */
     editor?: ReactNode;
@@ -70,5 +82,5 @@ export type RelationValueProps = {
  * picture, and its summary one press away. Works in a table cell, a list row, a `Record.Facts`
  * value and a form field (read mode; pass the `Picker` as `editor` for edit mode).
  */
-export declare function RelationValue({ name, secondary, media, onOpen, href, summary, preview, editor, mode, }: RelationValueProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare function RelationValue({ name, secondary, media, onOpen: onOpenOwn, onOpenIn, openTargets, href, summary, preview, editor, mode, }: RelationValueProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 export {};