@crewlethq/ui 0.81.2 → 0.83.0

package/dist/ChatMessage/index.d.ts

@@ -0,0 +1,4 @@
+import './ChatScale.css';
+import './ChatMessage.css';
+export { CHAT_MESSAGE_CLASS, CHAT_MESSAGE_FAILURE_LABELS, ChatMessage, ChatMessageFailure } from './ChatMessage.js';
+export type { ChatMessageActionsPlacement, ChatMessageFailureLabels, ChatMessageFailureProps, ChatMessageHighlight, ChatMessagePending, ChatMessageProps, } from './ChatMessage.js';

package/dist/ChatMessage/index.js

@@ -0,0 +1,5 @@
+export { CHAT_MESSAGE_CLASS, CHAT_MESSAGE_FAILURE_LABELS, ChatMessage, ChatMessageFailure } from '../chunk-IUBOLGHG.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatMessage-FH7VRVCH.css

@@ -0,0 +1,304 @@
+/*
+ * One message in a transcript: a face in a gutter, the head line, the words
+ * and a footer stack. Every size reads the conversation scale
+ * (ChatScale.css); every edge and fill the quiet scale in @crewlethq/tokens.
+ */
+
+.crewlet-chat-message {
+  /* Where the row's first line starts: the toolbar rests on it. */
+  --crewlet-chat-row-top: var(--spacing-2);
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--crewlet-chat-avatar) minmax(0, 1fr);
+  column-gap: var(--crewlet-chat-gap);
+  padding: var(--crewlet-chat-row-top) var(--crewlet-chat-pad-x) var(--spacing-1);
+  font-size: var(--crewlet-chat-text);
+  line-height: var(--crewlet-chat-line);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+  /* A message the reader is taken to stops under the day's pinned pill. */
+  scroll-margin-top: calc(var(--crewlet-chat-day-pin) + var(--crewlet-chat-day-pill) + var(--spacing-2));
+}
+
+.crewlet-chat-message.is-continuation {
+  --crewlet-chat-row-top: 1px;
+  padding-bottom: 1px;
+}
+
+.crewlet-chat-message:hover,
+.crewlet-chat-message:focus-visible,
+.crewlet-chat-message:has(:focus-visible),
+.crewlet-chat-message.is-active {
+  background: var(--color-fill-row);
+}
+
+.crewlet-chat-message:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* A row that names the reader: its wash and the warning bar on its edge. It
+   keeps its wash, and only its wash, under the pointer: the toolbar and the
+   gutter's time say which row is pointed at, and a hover step laid over the
+   wash took the row's quiet text under 4.5:1 on the darker palettes. */
+.crewlet-chat-message.is-mention,
+.crewlet-chat-message.is-mention:hover,
+.crewlet-chat-message.is-mention:focus-visible,
+.crewlet-chat-message.is-mention:has(:focus-visible),
+.crewlet-chat-message.is-mention.is-active {
+  background: var(--crewlet-chat-mention);
+  box-shadow: inset 2px 0 0 var(--color-feedback-warning);
+}
+
+/* The row a link or a search opened at: a wash of the accent that fades back
+   to whatever the row draws of its own (the mention wash included), so there
+   is no last keyframe to name it. */
+.crewlet-chat-message.is-flash {
+  animation: crewlet-chat-message-flash calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out);
+}
+
+@keyframes crewlet-chat-message-flash {
+  0%,
+  40% {
+    background: var(--color-brand-accent-soft-strong);
+  }
+}
+
+.crewlet-chat-message.is-sending .crewlet-chat-message__body {
+  color: var(--color-text-tertiary);
+}
+
+/* The face starts a hairline under the top of the name's line box, so across
+   the name and the first line of words it sits centred on the pair. It keeps
+   its own height: stretched to the row, the face's button (and its focus
+   ring) ran the full height of a long message. */
+.crewlet-chat-message__gutter {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 2px;
+}
+
+/* A face that opens the author's profile: the face is the whole control. */
+.crewlet-chat-message__gutter > button {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+}
+
+.crewlet-chat-message__gutter > button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* A continuation's time sits on the baseline of the first line of its words.
+   The two are in different columns and set at different sizes, so the grid
+   aligns them by baseline rather than by sharing a line height. It ends on
+   the column's edge: a time is wider than a face, and centred it ran into the
+   gap before the words. */
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__gutter {
+  justify-content: flex-end;
+  padding-top: 0;
+}
+
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__gutter,
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__main {
+  align-self: baseline;
+}
+
+.crewlet-chat-message__gutter-time {
+  visibility: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.crewlet-chat-message:hover .crewlet-chat-message__gutter-time,
+.crewlet-chat-message:focus-visible .crewlet-chat-message__gutter-time,
+.crewlet-chat-message:has(:focus-visible) .crewlet-chat-message__gutter-time,
+.crewlet-chat-message.is-active .crewlet-chat-message__gutter-time {
+  visibility: visible;
+}
+
+.crewlet-chat-message__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* THE HEAD IS SET AS TEXT, not as a flex row. Every line of it, the first or
+   one a narrow pane wraps the time onto, is held to one body line by the
+   block's strut, and the smaller meta stands on the name's baseline inside
+   it. As a wrapping flex row the line grew a pixel to fit the time's own
+   line box, and a time wrapped alone got a short line of its own. */
+.crewlet-chat-message__head {
+  min-width: 0;
+  line-height: calc(var(--crewlet-chat-text) * var(--crewlet-chat-line));
+}
+
+/* The gap follows each part, so a part a narrow pane wraps starts flush. */
+.crewlet-chat-message__head > * {
+  white-space: nowrap;
+}
+
+.crewlet-chat-message__head > :not(:last-child) {
+  margin-inline-end: var(--spacing-2);
+}
+
+/* A label beside the name ("Agent") is centred on the lower-case letters, as
+   text sets an inline mark. */
+.crewlet-chat-message__head > .crewlet-tag {
+  vertical-align: middle;
+}
+
+.crewlet-chat-message__author {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A name that opens the author's profile reads as the name, not a button. */
+.crewlet-chat-message__author > button {
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.crewlet-chat-message__author > button:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-chat-message__author > button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* Meta on the head shares the name's baseline. A line height of its own
+   would sit its smaller text lower in a box as tall as the name's and grow
+   the line by a pixel, so it takes none. */
+.crewlet-chat-message__time {
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-chat-message__body {
+  min-width: 0;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+/* Emphasis in a message is the semibold step, as it is everywhere else in
+   the product: the browser's own bold read heavier than the names. */
+.crewlet-chat-message__body :is(b, strong) {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Previews, reactions and the thread line: one stack, one gap. */
+.crewlet-chat-message__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--crewlet-chat-stack);
+  margin-top: var(--crewlet-chat-stack);
+}
+
+/* NO PIECE UNDER A MESSAGE IS WIDER THAN ITS COLUMN. Stacked on the start
+   edge, each piece takes its one-line width, and an agent's working line set
+   it wider than a phone's column: the transcript scrolled sideways. */
+.crewlet-chat-message__footer > * {
+  max-width: 100%;
+}
+
+/* THE TOOLBAR STANDS ON THE ROW'S FIRST LINE, over the row above, and over
+   the day's pinned pill as well as the rows: a toolbar that slid under the
+   pill lost its middle buttons wherever the two crossed. */
+.crewlet-chat-message__actions {
+  position: absolute;
+  top: calc(var(--crewlet-chat-row-top) - var(--crewlet-chat-toolbar));
+  right: var(--crewlet-chat-pad-x);
+  z-index: calc(var(--z-index-sticky) + var(--z-index-raised));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-chat-message:hover > .crewlet-chat-message__actions,
+.crewlet-chat-message:focus-visible > .crewlet-chat-message__actions,
+.crewlet-chat-message:has(:focus-visible) > .crewlet-chat-message__actions,
+.crewlet-chat-message.is-active > .crewlet-chat-message__actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* With no row above to stand over (see ChatMessage.tsx), or when the host
+   asks, it is drawn inside the row's own head. */
+.crewlet-chat-message.has-actions-inside > .crewlet-chat-message__actions {
+  top: var(--spacing-1);
+}
+
+/* A row's quiet controls, the add-reaction pill among them, show while the
+   row is pointed at or holds keyboard focus, and while their picker is open. */
+.crewlet-chat-message .crewlet-reaction--add {
+  opacity: 0;
+}
+
+.crewlet-chat-message:hover .crewlet-reaction--add,
+.crewlet-chat-message:has(:focus-visible) .crewlet-reaction--add,
+.crewlet-chat-message.is-active .crewlet-reaction--add,
+.crewlet-chat-message .crewlet-reaction--add[aria-expanded='true'] {
+  opacity: 1;
+}
+
+/* A TOUCH SCREEN HAS NO HOVER: a tap on the row (which focuses it) shows the
+   toolbar, so replying in a thread, saving and the More menu are reached by
+   touch as well as by pointer and keyboard. The add pill is always shown
+   there, so a reaction is one tap away without finding the toolbar first. */
+@media (hover: none) {
+  .crewlet-chat-message:focus-within > .crewlet-chat-message__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .crewlet-chat-message .crewlet-reaction--add {
+    opacity: 1;
+  }
+}
+
+/* The line under a message that was not sent. */
+.crewlet-chat-message-failure {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--crewlet-chat-meta);
+  line-height: var(--crewlet-chat-line);
+}
+
+.crewlet-chat-message-failure__words {
+  margin-inline-end: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-chat-message {
+    transition: none;
+  }
+
+  .crewlet-chat-message.is-flash {
+    animation: none;
+  }
+
+  .crewlet-chat-message__actions {
+    transition: none;
+  }
+}

package/dist/ChatScale-L4SIHSKL.css

@@ -0,0 +1,42 @@
+/*
+ * ONE SCALE FOR A CONVERSATION. Every part of a transcript reads from these:
+ * the message rows, their toolbar, reactions and thread line, the day's rule
+ * and pill, the New line and the link previews. A name, the words under it
+ * and the box they were typed in are one size, and everything around them
+ * (times, counts, the second lines of previews) is one step down. A surface
+ * that wants a denser or roomier transcript sets them once, on itself.
+ *
+ * A sheet of its own, imported by every part that reads it, so a consumer
+ * that imports one part (`@crewlethq/ui/ChatDay`) still gets the scale.
+ */
+:root {
+  /* The words: names, bodies and the message box, on one line height. */
+  --crewlet-chat-text: var(--font-size-sm);
+  --crewlet-chat-line: var(--font-line-height-normal);
+  /* Times, counts, reactions and second lines: one step down. */
+  --crewlet-chat-meta: var(--font-size-xs);
+  /* The row's side inset, the face column, the gap after it, and the space
+     between the pieces stacked under a message's words. */
+  --crewlet-chat-pad-x: var(--spacing-5);
+  --crewlet-chat-avatar: 36px;
+  --crewlet-chat-gap: var(--spacing-3);
+  --crewlet-chat-stack: 6px;
+  /* One width for every link preview, so a stack of them shares both edges. */
+  --crewlet-chat-card: 440px;
+  /* A day: the pill's height, the room above and below its rule, and how far
+     under the list's top edge the pill pins. A host with a bar floating over
+     the list's top (an unread banner) moves the pin down past it. */
+  --crewlet-chat-day-pill: 24px;
+  --crewlet-chat-day-gap: var(--spacing-5);
+  --crewlet-chat-day-pin: var(--spacing-3);
+  /* The hover toolbar: a medium control, big enough to aim at while the
+     pointer is passing, inside its inset and its hairline, twice. */
+  --crewlet-chat-toolbar-inset: var(--spacing-1);
+  --crewlet-chat-toolbar: calc(var(--size-control-md) + (var(--crewlet-chat-toolbar-inset) + 1px) * 2);
+  /* The ground the transcript is set on. A host that sets it on another fill
+     names that fill here, and everything lifted off the rows (the toolbar,
+     the day's pill, the open thread line) is filled with it. */
+  --crewlet-chat-ground: var(--color-surface-background);
+  /* A row that names the reader: a light wash of the warning hue. */
+  --crewlet-chat-mention: var(--color-feedback-warning-soft);
+}

package/dist/ChatThread/ChatThread.d.ts

@@ -13,12 +13,26 @@ export interface ChatThreadHandle {
     /** Scrolls to the end and follows it again. */
     scrollToLatest: () => void;
     /**
-     * Brings an item that needs a decision into view: the whole of it when it
-     * fits, and otherwise its head at the top of the view, never past it, so
-     * its actions are reached by reading rather than skipped over.
+     * Brings an item into view in the MIDDLE of the log, with what came before
+     * and after it in sight: a message opened from a link, a mention or a
+     * search, or a card that needs a decision. An item taller than the view
+     * lands with its head at the top instead, never past it, so its actions are
+     * reached by reading rather than skipped over. The item's own
+     * `scroll-margin-top` and `scroll-margin-bottom` are kept clear, so an item
+     * that names the height of a pinned day pill stops under it. The Jump to
+     * latest row the move brings in is accounted for: the item is placed in the
+     * view that is left once the row stands under the log.
      */
     reveal: (element: HTMLElement) => void;
+    /**
+     * The scrolling element, for a host that measures or moves what is inside
+     * it (a windowed transcript, or one that keeps its place while an older
+     * page is added above). Null before the log has mounted.
+     */
+    scroller: () => HTMLDivElement | null;
 }
+/** Where a short transcript rests in its view: under the top, or on the foot. */
+export type ChatThreadRest = 'start' | 'end';
 export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
     /** Names the log for a screen reader: "Conversation". */
     label: string;
@@ -29,6 +43,19 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
      * default; `false` never moves the scroll on its own.
      */
     follow?: boolean | undefined;
+    /**
+     * Draws the Jump to latest row under the log while the reader is scrolled
+     * away from the end. `true` by default; `false` for a log that offers its
+     * own way back (a day's Jump to menu), so nothing is added under it.
+     */
+    jump?: boolean | undefined;
+    /**
+     * Where a transcript shorter than the view rests: `start` (the default)
+     * under the top, or `end`, on the foot, against the composer under it, as a
+     * conversation's newest messages always are. The items keep no gap of their
+     * own in `end`, since a conversation's rows set their own spacing.
+     */
+    rest?: ChatThreadRest | undefined;
     /** The thread's blocks, one child per item, oldest first. */
     children?: ReactNode;
     labels?: Partial<ChatThreadLabels> | undefined;
@@ -57,6 +84,8 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  * and growth is followed; the reader's own wheel, touch or key ends it.
  *
  * THE PILL COVERS NOTHING: it sits under the log, in the thread's own column,
- * rather than over the last lines of whatever is being read.
+ * rather than over the last lines of whatever is being read. A log that
+ * offers its own way back (a day's Jump to menu) leaves it out with
+ * `jump={false}`.
  */
 export declare const ChatThread: import("react").ForwardRefExoticComponent<ChatThreadProps & import("react").RefAttributes<ChatThreadHandle>>;

package/dist/ChatThread/index.d.ts

@@ -1,3 +1,3 @@
 import './ChatThread.css';
 export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from './ChatThread.js';
-export type { ChatThreadHandle, ChatThreadLabels, ChatThreadProps } from './ChatThread.js';
+export type { ChatThreadHandle, ChatThreadLabels, ChatThreadProps, ChatThreadRest } from './ChatThread.js';

package/dist/ChatThread/index.js

@@ -1,5 +1,5 @@
-export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-R5OATXWU.js';
-import '../chunk-RTPQDNW3.js';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-VONEKR3J.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{ChatThread-2KO3FZKQ.css → ChatThread-HAECJMP6.css}

@@ -53,6 +53,23 @@
   flex: none;
 }
 
+/*
+ * A SHORT TRANSCRIPT RESTS ON ITS FOOT (`rest="end"`), against the composer
+ * under it, as a conversation's newest messages always are, rather than
+ * under the top with an empty band between it and the box. The scroller is a
+ * column and the items take the room above them; a conversation's rows set
+ * their own spacing, so the items keep no gap.
+ */
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__scroller {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__items {
+  margin-top: auto;
+  gap: 0;
+}
+
 /*
  * The pill, centred in a row of its own under the log. IN FLOW, NOT FLOATING:
  * laid over the scroller it covered the last lines of whatever was being read,

package/dist/CheckGrid/index.js

@@ -1,11 +1,11 @@
-export { CheckGrid } from '../chunk-MGQKF7GK.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+export { CheckGrid } from '../chunk-NN475NAP.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChipField/ChipField.d.ts

@@ -0,0 +1,82 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
+/** One chosen item, drawn as a chip in the field. */
+export interface ChipFieldItem {
+    id: string;
+    /** Its name on the chip, and in the chip's Remove control. */
+    label: string;
+    /** A small face or glyph before the name (an `xs` `Avatar`). Decorative. */
+    leading?: ReactNode;
+}
+/**
+ * How the field is drawn. `boxed` is a field like any other, a box with the
+ * field's ring. `bare` is a full-width row with a rule under it, for the
+ * address line at the top of a view ("To:"), whose focus is a bar along
+ * that rule.
+ */
+export type ChipFieldVariant = 'boxed' | 'bare';
+/** The words the field says, for a host that sets its own. */
+export interface ChipFieldLabels {
+    /** Names a chip's Remove control. */
+    remove: (label: string) => string;
+    /** Said when a chip is removed. */
+    removed: (label: string) => string;
+    /** Names the list of chips. */
+    chosen: string;
+}
+export declare const CHIP_FIELD_LABELS: ChipFieldLabels;
+export interface ChipFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'prefix' | 'children' | 'aria-label' | 'type'> {
+    /** What is chosen, in the order it was chosen. */
+    items: readonly ChipFieldItem[];
+    /** A chip's Remove control, and Backspace in an empty query, which removes the last chip. */
+    onRemove: (id: string) => void;
+    /** The words being typed. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /**
+     * Enter with words typed: the host takes its first match. Enter is taken
+     * from the form round the field only when this is given and there are
+     * words to commit.
+     */
+    onCommit?: (() => void) | undefined;
+    /** The text box's name: "Find people and agents", "Who the message is to". */
+    label: string;
+    /** A leading word inside the row, before the chips: "To:". */
+    prefix?: ReactNode;
+    variant?: ChipFieldVariant | undefined;
+    /** The text box, for a host that moves focus to it. */
+    inputRef?: Ref<HTMLInputElement> | undefined;
+    labels?: Partial<ChipFieldLabels> | undefined;
+    /** Classes on the field's outer box. */
+    className?: string | undefined;
+}
+/**
+ * The chosen items of a picker as chips INSIDE the field, before a bare text
+ * box: the recipients of a new message, the people being added to a room.
+ * The host owns what is offered (a list of `PersonRow`s under the field, or
+ * a listbox the field points at) and what typing finds; the field owns the
+ * chips, the box and the keys.
+ *
+ * NOT `TagsInput`. That field is a form value, its chips above the box so the
+ * box keeps its width and an ordered chain has room for its Move controls.
+ * Here the chips ARE the line being addressed, read left to right with the
+ * caret after the last one, and each carries a face.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - BACKSPACE IN AN EMPTY BOX REMOVES THE LAST CHIP, and says so through the
+ *   shared `Announcer`.
+ * - ENTER WITH WORDS TYPED IS THE HOST'S (`onCommit`): it takes the first
+ *   match. Enter with nothing typed is left to the form round the field.
+ * - FOCUS STAYS IN THE BOX when a chip is removed, by its control or by
+ *   Backspace, so the next name can be typed at once.
+ * - THE HOST'S KEYS COME FIRST. `onKeyDown` runs before the field's own, and
+ *   a key it handles (its default prevented) is left alone: a host that makes
+ *   the box a combobox over `useListbox` takes Enter, the arrows and Escape.
+ *   Every other attribute (`role`, `aria-controls`, `aria-expanded`,
+ *   `aria-activedescendant`) is passed to the box.
+ * - NOTHING IS TAKEN MID-COMPOSITION. While an input method is composing a
+ *   word, Enter and Backspace are its own.
+ * - A PRESS ON THE FIELD'S EMPTY SPACE PUTS THE CARET IN THE BOX, as a press
+ *   anywhere in a text field does.
+ */
+export declare function ChipField({ items, onRemove, query, onQueryChange, onCommit, label, prefix, variant, inputRef, labels: overrides, className, disabled, onKeyDown, ...input }: ChipFieldProps): import("react").JSX.Element;

package/dist/ChipField/index.d.ts

@@ -0,0 +1,4 @@
+import '../Tag/Tag.css';
+import './ChipField.css';
+export { CHIP_FIELD_LABELS, ChipField } from './ChipField.js';
+export type { ChipFieldItem, ChipFieldLabels, ChipFieldProps, ChipFieldVariant } from './ChipField.js';

package/dist/ChipField/index.js

@@ -0,0 +1,9 @@
+export { CHIP_FIELD_LABELS, ChipField } from '../chunk-TRXTO3WC.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';