@crewlethq/ui 0.81.1 → 0.82.0

package/dist/MentionMenu/MentionMenu.d.ts

@@ -0,0 +1,82 @@
+import type { ReactNode, Ref } from 'react';
+/** One thing a composer can mention: a person, an agent, a room, or everyone. */
+export interface MentionOption {
+    id: string;
+    /** What is inserted when it is taken: "@pm", "#engineering". */
+    insert: string;
+    /** Its name in the list. */
+    label: string;
+    /** A second piece of identity after the name: a title, a handle, a room's topic. */
+    detail?: string | undefined;
+    /** A face (an `Avatar` with its status) or a glyph (a room's, `@channel`'s). */
+    mark?: ReactNode;
+    /** A trailing word: "Working", "Needs you", "Not in this room". */
+    note?: ReactNode;
+}
+/** The words the menu draws, for a host that sets its own. */
+export interface MentionMenuLabels {
+    /** The keyboard hints at the foot. A touch screen has no keys, so the foot is hidden there. */
+    hints: readonly string[];
+}
+export declare const MENTION_MENU_LABELS: MentionMenuLabels;
+export interface MentionMenuProps {
+    /**
+     * The listbox's id. Each option's id is `${id}-${index}`, which is what the
+     * field points at with `aria-activedescendant`. With `useListbox`, pass the
+     * hook's `listId`, and its `optionId(index)` names the same rows.
+     */
+    id: string;
+    /** What the list offers, as its heading and its name: "People and agents", "Rooms". */
+    label: string;
+    options: readonly MentionOption[];
+    /** The highlighted option's index. */
+    active: number;
+    /** Taking an option, on a press (the press's default is prevented, so the field keeps focus). */
+    onPick: (option: MentionOption, index: number) => void;
+    /** The pointer moved onto an option. */
+    onHover: (index: number) => void;
+    /**
+     * The list element: `useListbox`'s `listRef`, so the highlighted row is kept
+     * in view as the arrows move and a press outside the list closes it.
+     */
+    listRef?: Ref<HTMLUListElement> | undefined;
+    /** The foot. Left out, it carries the keyboard hints; `null` draws none. */
+    footer?: ReactNode;
+    labels?: Partial<MentionMenuLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The suggestions a composer opens on "@" or "#": people and agents with
+ * their faces and what they are doing, rooms with their glyphs, and everyone
+ * in the room.
+ *
+ * A LISTBOX THE FIELD OWNS. Focus stays in the message box, which points at
+ * the highlighted row with `aria-activedescendant`, so typing goes on while
+ * the list narrows. `useListbox` gives the keys (the arrows wrap, Enter and
+ * Tab take the row, Escape closes the list and nothing else); the host spreads
+ * `role="combobox"`, `aria-controls`, `aria-expanded` and
+ * `aria-activedescendant` on its field, and finds the word being typed with
+ * `mentionQuery`.
+ *
+ * DRAWN ABOVE THE COMPOSER, never over what is being typed: it is placed
+ * against the nearest positioned box round the field, as wide as the field
+ * and no wider than a list is read (`--crewlet-mention-menu-width`).
+ *
+ * ITS ROWS ARE `PersonRow`s, so a face, a name and its detail sit where every
+ * other list of people in the product puts them.
+ */
+export declare function MentionMenu({ id, label, options, active, onPick, onHover, listRef, footer, labels: overrides, className }: MentionMenuProps): import("react").JSX.Element;
+/** The mention being typed at the caret. */
+export interface MentionQuery {
+    trigger: '@' | '#';
+    /** The words typed after the trigger, possibly none. */
+    query: string;
+    /** Where the trigger stands in the text, which is where a taken option is inserted from. */
+    start: number;
+}
+/**
+ * The "@word" or "#word" that ends at the caret, if the caret is in one. A
+ * trigger counts at the start of the text or after whitespace, so an address
+ * ("ada@crewlet.com") or a heading mark inside a word opens nothing.
+ */
+export declare function mentionQuery(text: string, caret: number): MentionQuery | null;

package/dist/MentionMenu/index.d.ts

@@ -0,0 +1,4 @@
+import '../PersonRow/PersonRow.css';
+import './MentionMenu.css';
+export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from './MentionMenu.js';
+export type { MentionMenuLabels, MentionMenuProps, MentionOption, MentionQuery } from './MentionMenu.js';

package/dist/MentionMenu/index.js

@@ -0,0 +1,3 @@
+export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from '../chunk-3BRXEMYT.js';
+import '../chunk-EALRMP7N.js';
+import '../chunk-ODEQTPFM.js';

package/dist/MentionMenu-4NAQ45S4.css

@@ -0,0 +1,65 @@
+/*
+ * MentionMenu: the suggestions a composer opens on "@" or "#".
+ *
+ * The popover surface (the fill, hairline, corner and shadow of the emoji
+ * picker that opens from the same composer), as wide as the field but no
+ * wider than a list a reader scans: on a wide room the trailing word
+ * ("Working") stood a screen's width from the name it belongs to; a host
+ * moves that cap with `--crewlet-mention-menu-width` on any box round it.
+ * It is placed against the nearest positioned box round the field, above
+ * it, so it never covers what is being typed.
+ */
+.crewlet-mention-menu {
+  position: absolute;
+  bottom: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  box-sizing: border-box;
+  width: min(100%, var(--crewlet-mention-menu-width, 560px));
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xl);
+}
+
+.crewlet-mention-menu__label {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-mention-menu__list {
+  max-height: 264px;
+  margin: 0;
+  padding: 0 var(--spacing-1) var(--spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+/* The panel's corner less its inset, so each row's curve runs parallel. */
+.crewlet-mention-menu__list > .crewlet-person-row {
+  --crewlet-person-row-radius: calc(var(--radius-lg) - var(--spacing-1));
+}
+
+.crewlet-mention-menu__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* The foot names keys, and a touch screen has none to press. */
+@media (hover: none) {
+  .crewlet-mention-menu__footer {
+    display: none;
+  }
+}

package/dist/Menu/index.js

@@ -1,9 +1,9 @@
-export { Menu } from '../chunk-OQG4P5KU.js';
+export { Menu } from '../chunk-YOJAGKTS.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MergeConflicts/index.js

@@ -1,17 +1,17 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-2FMBZCFR.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-OAHRMR4U.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-GZVAZ3LL.js';
+import '../chunk-HCUECVZ3.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-YOJAGKTS.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MessageActions/MessageActions.d.ts

@@ -0,0 +1,58 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface MessageActionsProps {
+    /** Names the toolbar: "Message actions" by default. */
+    label?: string | undefined;
+    className?: string | undefined;
+    /** Quick reactions, `MessageAction`s, a `Menu` and `ActionDivider`s. */
+    children: ReactNode;
+}
+/**
+ * The toolbar a message shows on hover, keyboard focus or a tap: a few quick
+ * reactions, add reaction, reply in a thread, save, and More. Pass it to
+ * `ChatMessage`'s `actions`, which places it on the row's first line.
+ *
+ * A SOFT TRAY OF TOOLS, NOT A FRAMED BAR: the transcript's own ground ringed
+ * with the hairline and a small shadow, with the large corner, and 30px tools
+ * inside a 4px inset. It is a `Toolbar`, so it is one tab stop that the
+ * arrow keys walk.
+ */
+export declare function MessageActions({ label, className, children }: MessageActionsProps): import("react").JSX.Element;
+export interface MessageActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> {
+    /** What it does, in words: the button's name and its hint. */
+    label: string;
+    /** The glyph, at the medium step. */
+    icon: ReactNode;
+    /** A toggle that is on (Saved): `aria-pressed`. */
+    pressed?: boolean | undefined;
+    /**
+     * Why the reader cannot use it here ("Join the room to react."): the tool
+     * is marked unavailable, does nothing when pressed, and adds the reason to
+     * its hint.
+     */
+    disabledReason?: string | undefined;
+}
+/**
+ * One tool in the tray: a 30px ghost icon button named by `label`, with the
+ * same words as its hint. It spreads what it is given on the button, so it
+ * can be a `Menu`'s own trigger (`renderTrigger`), and its hint steps aside
+ * while the menu it opens is open.
+ */
+export declare const MessageAction: import("react").ForwardRefExoticComponent<MessageActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface QuickReactionProps {
+    emoji: string;
+    /** The emoji's name, for its button and its hint: "eyes". Read from the picker's names by default. */
+    name?: string | undefined;
+    onPick: () => void;
+    /** The words, given the name: "React with eyes" by default. */
+    label?: ((name: string) => string) | undefined;
+    /**
+     * Why the reader cannot react here ("Join the room to react."), as
+     * `ReactionBar` takes it: the emoji is marked unavailable, does not react
+     * when pressed, and adds the reason to its hint.
+     */
+    disabledReason?: string | undefined;
+}
+/** A quick reaction in the tray: the emoji itself is the button. */
+export declare function QuickReaction({ emoji, name, onPick, label, disabledReason }: QuickReactionProps): import("react").JSX.Element;
+/** A hairline between groups of tools, said by nothing. */
+export declare function ActionDivider(): import("react").JSX.Element;

package/dist/MessageActions/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './MessageActions.css';
+export { ActionDivider, MessageAction, MessageActions, QuickReaction } from './MessageActions.js';
+export type { MessageActionProps, MessageActionsProps, QuickReactionProps } from './MessageActions.js';

package/dist/MessageActions/index.js

@@ -0,0 +1,16 @@
+export { ActionDivider, MessageAction, MessageActions, QuickReaction } from '../chunk-2TOGGCDM.js';
+import '../chunk-TDFLCUBE.js';
+import '../chunk-MPYRC3GO.js';
+import '../chunk-NXFTCPF6.js';
+import '../chunk-SM4P2SHB.js';
+import '../chunk-3QQIGMY3.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/MessageActions-Q4F5UH3S.css

@@ -0,0 +1,73 @@
+/*
+ * The tray a message shows on hover: the transcript's own ground ringed with
+ * the hairline and a small shadow, the large corner, and 30px tools inside
+ * the inset, so it reads as a soft tray of tools rather than a framed bar.
+ * Two classes, so the tray's own rules hold over Toolbar's in any bundle
+ * order.
+ */
+.crewlet-toolbar.crewlet-message-actions {
+  flex-wrap: nowrap;
+  gap: var(--crewlet-chat-toolbar-inset);
+  height: var(--crewlet-chat-toolbar);
+  box-sizing: border-box;
+  padding: var(--crewlet-chat-toolbar-inset);
+  border: 1px solid var(--color-edge-hairline);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-chat-ground);
+  box-shadow: var(--shadow-xs);
+}
+
+/* A tool whose menu or picker is open reads as held down, which is not the
+   accent fill a toggle that is on (Saved) draws. */
+.crewlet-message-actions .crewlet-icon-btn[aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+.crewlet-message-actions__emoji {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-size: var(--font-size-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.crewlet-message-actions__emoji:hover {
+  background: var(--color-fill-soft);
+}
+
+.crewlet-message-actions__emoji:active {
+  background: var(--color-surface-pressed);
+}
+
+/* Held, as the tray's icon tools are: faded, no fill under the pointer, and
+   the reason in its hint. */
+.crewlet-message-actions__emoji[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-message-actions__emoji[aria-disabled='true']:is(:hover, :active) {
+  background: transparent;
+}
+
+.crewlet-message-actions__emoji:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-message-actions__divider {
+  flex: none;
+  width: 1px;
+  height: var(--spacing-4);
+  margin: 0 var(--spacing-1);
+  background: var(--color-border-default);
+}

package/dist/Modal/Modal.d.ts

@@ -10,6 +10,16 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
  * A centred dialog grown to hold that covers the very card it is editing.
  */
 export type ModalVariant = 'dialog' | 'sheet';
+/**
+ * Which edge a SHEET is pinned to, in the page's own direction.
+ *
+ * `end` is the default and every editor: a sheet about something on the page
+ * stands beside it, at the end, where a reader's eye finishes a row. `start`
+ * is a navigation panel (a list of rooms, a list of places), which belongs
+ * where the navigation it stands for is drawn: it slides in from the start
+ * edge, its edge and its shadow on its inline end. A dialog has no side.
+ */
+export type ModalSide = 'start' | 'end';
 /**
  * Where a dialog sits in the window.
  *
@@ -100,6 +110,8 @@ export interface ModalProps extends FrameAttributes {
     children?: ReactNode;
     size?: ModalSize | undefined;
     variant?: ModalVariant | undefined;
+    /** The edge a sheet is pinned to (`end` by default). Read on the sheet variant only. */
+    side?: ModalSide | undefined;
     shape?: ModalShape | undefined;
     placement?: ModalPlacement | undefined;
     /**

package/dist/Modal/index.js

@@ -1,10 +1,10 @@
-export { ConfirmModal, Modal } from '../chunk-C667GCU7.js';
-import '../chunk-PQADV6P6.js';
+export { ConfirmModal, Modal } from '../chunk-XXDB6KPV.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-FYQYEI3N.css → Modal-GKUOO7PZ.css}

@@ -285,13 +285,32 @@
   animation: crewlet-modal-sheet-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/*
+ * A SHEET FROM THE START EDGE (`side="start"`): a navigation panel, pinned to
+ * the inline start and arriving from past it, with its edge and its shadow on
+ * its inline end, into the page it covers. The shadow is the sheet's own,
+ * mirrored by the token build, so a palette's sheet shadow reads the same way
+ * round on either side.
+ */
+.crewlet-modal-overlay--sheet.crewlet-modal-overlay--start {
+  justify-content: flex-start;
+}
+
+.crewlet-modal--sheet.crewlet-modal--start {
+  --crewlet-modal-sheet-from: -100%;
+  border-inline-start: none;
+  border-inline-end: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-sheet-start);
+}
+
 /*
  * The shell's one breakpoint, strictly under it as the shell switches. Below
  * it there is no content beside a sheet to keep in view, so the sheet takes
  * the whole width and its edge goes with it.
  */
 @media (width < 1024px) {
-  .crewlet-modal--sheet {
+  .crewlet-modal--sheet,
+  .crewlet-modal--sheet.crewlet-modal--start {
     width: 100%;
     border-inline: none;
   }
@@ -314,6 +333,11 @@
   --crewlet-modal-glyph-inset: calc((var(--size-control-md) - var(--font-size-sm)) / 2);
 
   display: flex;
+  /* The head and the foot keep their height and the body gives way: in the
+     frame's column a head that could shrink was squeezed under a long body
+     to the bar's height, and a wrapped title and subtitle ran over its
+     edges. */
+  flex-shrink: 0;
   align-items: center;
   gap: var(--spacing-3);
   padding: var(--spacing-4);
@@ -534,6 +558,7 @@
  */
 .crewlet-modal__footer {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-2);

package/dist/OpenInAppCard/index.js

@@ -1,16 +1,16 @@
-export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-JMTBK55P.js';
+export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-FVZPSTL2.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-3LI4TRUR.js';
 import '../chunk-KBZO4B33.js';
 import '../chunk-ZWCK4N4L.js';
-import '../chunk-RTMNULTL.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-4AUTALJA.js';
+import '../chunk-FLW5U7YS.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-LM6VYJTV.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+export { OrgLabel } from '../chunk-5YXMKZUA.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-OZAZHM55.js';
-import '../chunk-LM6VYJTV.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-NKBKHOMU.js';
+import '../chunk-5YXMKZUA.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,14 +1,14 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-MUFBHVCT.js';
-import '../chunk-IL3XLDW7.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-DWQYV5AV.js';
+import '../chunk-ZDWAIVWL.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-LM6VYJTV.js';
+import '../chunk-5YXMKZUA.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-CVKANYHD.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PeekRail/index.js

@@ -1,8 +1,8 @@
 export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep } from '../chunk-CDNZTCP2.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PeopleRail/index.js

@@ -1,12 +1,12 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-ZWXHTXZO.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-QGEDXYLB.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PersonRow/PersonRow.d.ts

@@ -0,0 +1,70 @@
+import { type ButtonHTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react';
+/**
+ * How tall a row stands. `default` is a list's row: a 32px face beside the
+ * name over a second line. `compact` is one line, the name with its detail
+ * after it, for a list that opens under a caret and has to stay short.
+ */
+export type PersonRowDensity = 'default' | 'compact';
+/**
+ * What the row ends with. `toggle` is the mark of a row that adds and takes
+ * away: a plus, or a check on the accent once it is chosen. `none` ends the
+ * row on its words, for a row that opens something.
+ */
+export type PersonRowMark = 'toggle' | 'none';
+/** What every row draws, whichever element it is. */
+export interface PersonRowLook {
+    /** The face: an `Avatar` with its status, or a glyph for something that is not a person (a room, `@channel`). */
+    avatar: ReactNode;
+    /** The person's or agent's name. */
+    name: ReactNode;
+    /** A small label after the name, such as an "Agent" `Tag`. */
+    tag?: ReactNode;
+    /** What they are doing now, or their title. One line, cut with an ellipsis. */
+    detail?: ReactNode;
+    /** Words at the row's end: "Working", "Not in this room". */
+    meta?: ReactNode;
+    mark?: PersonRowMark | undefined;
+    density?: PersonRowDensity | undefined;
+}
+export interface PersonRowButtonProps extends PersonRowLook, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'name' | 'onSelect'> {
+    as?: 'button' | undefined;
+    /**
+     * Whether the row is chosen, for a row that toggles: it is announced as a
+     * pressed button and filled with the accent's soft tint. Left out, the row
+     * is a plain button that opens something.
+     */
+    selected?: boolean | undefined;
+    /** Pressing the row. */
+    onSelect?: (() => void) | undefined;
+}
+export interface PersonRowOptionProps extends PersonRowLook, Omit<LiHTMLAttributes<HTMLLIElement>, 'children'> {
+    /**
+     * An option in a listbox a text field owns (`useListbox`): focus stays in
+     * the field, which points at the row with `aria-activedescendant`, so the
+     * row is never a tab stop of its own. Spread the hook's `optionHandlers`
+     * and give it the hook's `optionId`.
+     */
+    as: 'option';
+    /** `aria-selected`: the highlighted row of a single-choice list, or a chosen row of a multiselectable one. */
+    selected?: boolean | undefined;
+    /** The row the arrows are on, drawn with a bar on its start edge. */
+    highlighted?: boolean | undefined;
+    /** An option that cannot be taken. It stays in the list and says so. */
+    disabled?: boolean | undefined;
+}
+export type PersonRowProps = PersonRowButtonProps | PersonRowOptionProps;
+/**
+ * A person or an agent as one row of a list: their face with its status,
+ * their name (and an Agent label), what they are doing now or their title,
+ * and, for a row that adds and takes away, a plus that turns into a check.
+ *
+ * ONE DESIGN FOR EVERY LIST OF PEOPLE. A picker's suggestions, a member list,
+ * a search's people and a composer's @ list are the same row, so a face, a
+ * name and a second line sit in the same places in all of them. It is a
+ * button by default, and an option (`as="option"`) inside a listbox a text
+ * field owns, where focus stays in the field.
+ *
+ * A ROW THAT TOGGLES SAYS SO: `selected` makes it a pressed button, and its
+ * mark changes from a plus to a check, so the state is never colour alone.
+ */
+export declare const PersonRow: import("react").ForwardRefExoticComponent<PersonRowProps & import("react").RefAttributes<HTMLButtonElement | HTMLLIElement>>;

package/dist/PersonRow/index.d.ts

@@ -0,0 +1,3 @@
+import './PersonRow.css';
+export { PersonRow } from './PersonRow.js';
+export type { PersonRowButtonProps, PersonRowDensity, PersonRowLook, PersonRowMark, PersonRowOptionProps, PersonRowProps, } from './PersonRow.js';

package/dist/PersonRow/index.js

@@ -0,0 +1,2 @@
+export { PersonRow } from '../chunk-EALRMP7N.js';
+import '../chunk-ODEQTPFM.js';