@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Tag-VNZEYLB6.css

@@ -0,0 +1,406 @@
+/*
+ * The tag: a small pill naming a state, a phase or a value.
+ *
+ * THREE VARIABLES CARRY EVERY VARIANT. A tag is its tone's `soft` tint under
+ * its tone's `ink`, with the `line` step as the boundary it grows when it can
+ * be pressed, so the whole palette is three declarations per variant and the
+ * geometry is written once. 0.2.0 spelled five dark-theme literals instead
+ * (#93c5fd, #86efac, #fde68a, #fca5a5 and the accent as text), which measured
+ * between 1.14:1 and 1.58:1 on a light page.
+ *
+ * A PRESSED TAG DOES NOT REPAINT ITS GROUND. Every deeper fill measured under
+ * 4.5:1 for at least one tone in the light palette (warning reached 4.42:1
+ * over the elevated surface), and the engine's own pressed badge drew the
+ * label in its ink on a background of the same ink, at 1:1. The press is
+ * carried by the boundary instead: transparent at rest, the line step on
+ * hover, the ink step with an inset rule when it is on. The measured
+ * ink-on-soft composite never moves.
+ */
+
+.crewlet-tag {
+  /*
+   * THE ENGINE'S BADGE. Its line box is 11px at the document's 1.5 leading
+   * plus a pixel of padding and a pixel of border on each side, which lands on
+   * 20.5px; the step below is the whole pixel that renders, and it scales with
+   * density the way every size token does.
+   *
+   * The height is a STEP and the floor is separate, because the two answer
+   * different questions. A tag that only labels takes the engine's geometry
+   * exactly. A tag that ACTS is a pointer target, and 20px fails WCAG 2.2, so
+   * it takes the 24px floor as well: the engine draws its actionable badge at
+   * the inert one's height, which is the one place its look and the target
+   * rule disagree. Nothing else about the pill changes, so a row of tags still
+   * reads as one set.
+   */
+  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-floor: 0px;
+  --crewlet-tag-fill: var(--color-surface-inset);
+  --crewlet-tag-ink: var(--color-text-secondary);
+  --crewlet-tag-line: var(--color-border-hover);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: max(var(--crewlet-tag-height), var(--crewlet-tag-floor));
+  padding: 0 var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-tag-fill);
+  color: var(--crewlet-tag-ink);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  /* The engine tracks the badge a hundredth of an em open, which is the
+     normal step at this size: a hundredth of 11px is a tenth of a pixel. */
+  letter-spacing: var(--font-letter-spacing-normal);
+  line-height: 1;
+  /* A tag is an atomic token: its label never breaks across lines inside the
+     pill. A constrained layout truncates it with an ellipsis instead. */
+  white-space: nowrap;
+  max-width: 100%;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.crewlet-tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+/*
+ * INSIDE A PILL THE DOT IS THE PILL'S OWN INK, not the tone's fill step.
+ *
+ * StatusDot paints the fill step, which is measured as a mark against the
+ * OPAQUE surfaces a page is made of. Inside a tag it lands on the tone's soft
+ * tint instead, and that composite is a different number: the accent fell to
+ * 2.65:1 and the danger red to 2.96:1 over their own tints in the dark
+ * palette, both under the 3:1 a mark has to clear. The ink step is the pair
+ * that IS measured on that tint, at 4.5:1, and it is also the colour of the
+ * word beside it, so the shape reads as part of the label rather than as a
+ * second object sitting on it.
+ *
+ * Two classes deep, so it beats StatusDot's own tone rule whichever order the
+ * bundle writes the two files in.
+ */
+.crewlet-tag .crewlet-tag__dot {
+  flex: none;
+  background: currentColor;
+}
+
+/* Tabular figures, so a count that ticks up does not move the label beside
+   it, and the tag's own ink, because the number is part of what it says. */
+.crewlet-tag__count {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  flex: none;
+}
+
+/* ── sizes ─────────────────────────────────────────────────────────────── */
+
+/*
+ * THREE HEIGHTS OF ONE BADGE. The engine draws a single pill and spends its
+ * variation on tone rather than on size, so the steps here differ by how much
+ * room the pill takes and not by what it is: the type, the radius, the weight
+ * and the tracking are the engine's at every one of them.
+ *
+ * xs is an 18px pill and is NON-INTERACTIVE for that reason: it is under the
+ * 24px target floor, and the component refuses a press at this step. It is for
+ * a mark inside a dense row, where the label is still the carrier.
+ *
+ * EVERY STEP SCALES WITH DENSITY, which is not decoration: written as a flat
+ * 18px, this one stayed put while the badge above it came down to
+ * 20 x 0.82 = 16.4px, so the dense mark rendered TALLER than the badge it is
+ * meant to sit inside a row of. A step that does not move with the rest of the
+ * scale is a step that overtakes one of its neighbours at some density.
+ */
+.crewlet-tag--xs {
+  --crewlet-tag-height: calc(18px * var(--density, 1));
+  padding: 0 var(--spacing-1);
+  gap: 3px;
+}
+
+/* The engine's badge, and the default. */
+.crewlet-tag--sm {
+  --crewlet-tag-height: calc(20px * var(--density, 1));
+}
+
+/* The md step is a small control's own height, so a tag and a small button in
+   one toolbar sit on the same baseline. One type step up with it: 11px inside
+   a 28px pill reads as a label that lost its box. */
+.crewlet-tag--md {
+  --crewlet-tag-height: var(--size-control-sm);
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * A TAG THAT ACTS CLEARS 24px, at every density and every step. Last among the
+ * steps so it is the floor whichever one is drawn, and a floor rather than a
+ * height so the md step keeps its 28px.
+ */
+.crewlet-tag--acts {
+  --crewlet-tag-floor: max(24px, calc(24px * var(--density, 1)));
+}
+
+/* One step down from the sans, where there is a step to take: a mono face
+   draws larger than the sans at the same size, and a machine value beside a
+   word has to read as the same line. At the two smaller steps the sans is
+   already at the bottom of the scale and the mono stays beside it. */
+.crewlet-tag--monospace .crewlet-tag__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+}
+
+/* ── variants ──────────────────────────────────────────────────────────── */
+
+.crewlet-tag--info {
+  --crewlet-tag-fill: var(--color-feedback-info-soft);
+  --crewlet-tag-ink: var(--color-feedback-info-ink);
+  --crewlet-tag-line: var(--color-feedback-info-line);
+}
+
+.crewlet-tag--success {
+  --crewlet-tag-fill: var(--color-feedback-success-soft);
+  --crewlet-tag-ink: var(--color-feedback-success-ink);
+  --crewlet-tag-line: var(--color-feedback-success-line);
+}
+
+.crewlet-tag--warning {
+  --crewlet-tag-fill: var(--color-feedback-warning-soft);
+  --crewlet-tag-ink: var(--color-feedback-warning-ink);
+  --crewlet-tag-line: var(--color-feedback-warning-line);
+}
+
+.crewlet-tag--danger {
+  --crewlet-tag-fill: var(--color-feedback-danger-soft);
+  --crewlet-tag-ink: var(--color-feedback-danger-ink);
+  --crewlet-tag-line: var(--color-feedback-danger-line);
+}
+
+.crewlet-tag--brand {
+  --crewlet-tag-fill: var(--color-brand-accent-soft);
+  --crewlet-tag-ink: var(--color-brand-accent-ink);
+  --crewlet-tag-line: var(--color-brand-accent-soft-strong);
+}
+
+/*
+ * The phase family has a soft step and no line step, because nothing else in
+ * the system needed a phase boundary. The ink is the boundary here: it is the
+ * same hue at a strength a 1px rule can be seen at, and a border is not text,
+ * so the rule that an ink step is never a BACKGROUND is untouched.
+ *
+ * A PHASE IS SET IN THE MICRO-LABEL REGISTER, uppercase and tracked open,
+ * where a state is set in the badge's own. Phase is the one categorical
+ * identity the product spends colour on outside a chart, and it is what a
+ * reader follows across four screens; the second register is what separates it
+ * at a glance from the state badge sitting beside it on the same row.
+ */
+.crewlet-tag--phase-onboarding,
+.crewlet-tag--phase-execute,
+.crewlet-tag--phase-review {
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-tag--phase-onboarding {
+  --crewlet-tag-fill: var(--color-phase-onboarding-soft);
+  --crewlet-tag-ink: var(--color-phase-onboarding-ink);
+  --crewlet-tag-line: var(--color-phase-onboarding-ink);
+}
+
+.crewlet-tag--phase-execute {
+  --crewlet-tag-fill: var(--color-phase-execute-soft);
+  --crewlet-tag-ink: var(--color-phase-execute-ink);
+  --crewlet-tag-line: var(--color-phase-execute-ink);
+}
+
+.crewlet-tag--phase-review {
+  --crewlet-tag-fill: var(--color-phase-review-soft);
+  --crewlet-tag-ink: var(--color-phase-review-ink);
+  --crewlet-tag-line: var(--color-phase-review-ink);
+}
+
+/* ── appearance ────────────────────────────────────────────────────────── */
+
+/*
+ * The outline appearance drops the tint and keeps the boundary, for a row
+ * where a tinted pill would be one fill too many: a tag inside a card that is
+ * already tinted, or a list of values where only one of them is a state.
+ */
+.crewlet-tag--outline {
+  background: transparent;
+  border-color: var(--crewlet-tag-line);
+}
+
+/* The neutral outline is the engine's `.badge.outline`: the hairline step as
+   the boundary, and the tertiary ink, which is a quieter register than the
+   tinted outlines keep. It is the appearance for a value that is not a state
+   at all, so it says less than its neighbours on purpose. */
+.crewlet-tag--neutral.crewlet-tag--outline {
+  border-color: var(--color-border-default);
+  --crewlet-tag-ink: var(--color-text-tertiary);
+}
+
+/* ── the interactive form ──────────────────────────────────────────────── */
+
+.crewlet-tag--actionable {
+  cursor: pointer;
+  /* A button inherits none of these. */
+  font-family: inherit;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tag--actionable:hover {
+  border-color: var(--crewlet-tag-line);
+}
+
+.crewlet-tag--actionable[aria-pressed='true'] {
+  border-color: var(--crewlet-tag-ink);
+  box-shadow: inset 0 0 0 1px var(--crewlet-tag-ink);
+}
+
+.crewlet-tag--actionable:focus-visible,
+.crewlet-tag__press:focus-visible,
+.crewlet-tag__remove:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* ── the pill that holds two controls ──────────────────────────────────── */
+
+/*
+ * A tag that both presses and removes is TWO CONTROLS SIDE BY SIDE, because
+ * one of them inside the other is a button inside a button: invalid markup,
+ * and one control whose inner half no keyboard reaches. The pill keeps the
+ * fill, the ink and the boundary; the press takes the left of it and the
+ * remove the right, each the pill's full height, so neither is under 24px.
+ */
+.crewlet-tag--split {
+  padding: 0;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tag--split .crewlet-tag__press {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  gap: inherit;
+  min-width: 0;
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  background: transparent;
+  /* A button inherits none of these. */
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+
+/* The remove has no padding of the pill's to eat back here. */
+.crewlet-tag--split .crewlet-tag__remove {
+  margin-right: 0;
+}
+
+.crewlet-tag--split:hover {
+  border-color: var(--crewlet-tag-line);
+}
+
+/*
+ * The same boundary the single-control form draws, put on the pill: the
+ * press state belongs to the whole tag, and drawing it around the press half
+ * alone would read as a second control beside the remove.
+ */
+.crewlet-tag--split.is-pressed {
+  border-color: var(--crewlet-tag-ink);
+  box-shadow: inset 0 0 0 1px var(--crewlet-tag-ink);
+}
+
+/* ── the remove control ────────────────────────────────────────────────── */
+
+/*
+ * The target is the tag's own height, not the glyph's. A 16px close drawn as a
+ * 16px button is a target under the floor; drawn as a full-height one at the
+ * trailing edge, the glyph stays small and the thing a finger has to hit is
+ * the whole end of the pill.
+ *
+ * ITS OWN HEIGHT MEANS THE PILL'S OUTER BOX, which is what `--crewlet-tag-acts`
+ * floors at 24px. `align-self: stretch` reaches the flex container's CONTENT
+ * box, and the pill's is its 1px boundary shorter on each side, so the control
+ * measured 22px inside a 24px tag: under the floor the class beside it exists
+ * to hold. The block margin pulls it back over that boundary, exactly as the
+ * inline one already pulls it over the pill's trailing pad. The longhands
+ * rather than the `margin-block` shorthand: this is the one declaration that
+ * holds the control at a pointer target, and the suite that measures it reads
+ * a box the cascade decides, where the shorthand expands to nothing.
+ */
+.crewlet-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 24px;
+  margin-block-start: -1px;
+  margin-block-end: -1px;
+  margin-right: calc(var(--spacing-2) * -1);
+  padding: 0 var(--spacing-1);
+  border: 0;
+  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tag__remove:hover {
+  opacity: 1;
+}
+
+/* ── mount ─────────────────────────────────────────────────────────────── */
+
+/*
+ * OPT IN, because tags arrive in their hundreds on a data push and a list that
+ * animates every arrival is one nobody can read while it is arriving. It is
+ * still here for the case it was written for: a chip the reader themselves
+ * just added to a field.
+ */
+.crewlet-tag--animate-in {
+  animation: crewlet-tag-in var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+@keyframes crewlet-tag-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tag--animate-in {
+    animation: none;
+  }
+
+  .crewlet-tag--actionable,
+  .crewlet-tag--split,
+  .crewlet-tag__remove {
+    transition: none;
+  }
+}

package/dist/TagGroup/TagGroup.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+export interface TagGroupProps {
+    /**
+     * What the tags are about, read before them: "what this is about", "Labels",
+     * "Subjects". REQUIRED, because a bare row of handles is a row of words a
+     * screen reader reads with nothing to hang them on.
+     */
+    label: string;
+    /**
+     * How many to show before the rest go behind a count. Six, because six
+     * handles or addresses are legible at a glance on one line of a card and the
+     * seventh is where a row starts wrapping; the measured long case is
+     * thirty-six service accounts.
+     */
+    max?: number | undefined;
+    /** The overflow control's label. */
+    moreLabel?: ((hidden: number) => string) | undefined;
+    /** What is said once the rest are shown. */
+    expandedMessage?: ((total: number) => string) | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * A labelled list of tags, with the tail behind a count.
+ *
+ * IT EXPANDS IN PLACE rather than linking away, because the reason the rest
+ * are folded is WIDTH, not secrecy: the list somebody is working through has
+ * thirty-six things in it and sending them to another screen to read it is the
+ * opposite of helping. It is not a disclosure either. A disclosure whose
+ * summary reads "all 1 agents" is ungrammatical twice and hides, behind a
+ * click, exactly what the sentence above it has already said.
+ *
+ * A LIST, not a row of spans: the count is what a reader is told when they
+ * arrive, and only a list carries one.
+ *
+ * The sentence it says on expanding goes through the shared announcer, so the
+ * application needs one `<Announcer>` mounted in its shell. Without one the
+ * expansion still works and the announcer says loudly that nothing was said,
+ * which is the point of it being one region rather than one per component.
+ */
+export declare function TagGroup({ label, max, moreLabel, expandedMessage, className, children, }: TagGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/TagGroup/index.d.ts

@@ -0,0 +1,3 @@
+import './TagGroup.css';
+export { TagGroup } from './TagGroup.js';
+export type { TagGroupProps } from './TagGroup.js';

package/dist/TagGroup/index.js

@@ -0,0 +1,4 @@
+export { TagGroup } from '../chunk-V2XMNLMS.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TagGroup-APC2EFH4.css

@@ -0,0 +1,75 @@
+/*
+ * A labelled list of tags with the tail behind a count.
+ *
+ * The overflow control is drawn as a tag rather than as a button, because it
+ * stands in the row where the rest of them are: a button styled as a control
+ * would read as a different kind of thing from the six items beside it, which
+ * is exactly what it is not.
+ */
+
+.crewlet-tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+
+/* The list takes focus when the overflow control expands it and takes itself
+   away with it, so the reader has to be able to see where they landed. */
+.crewlet-tag-group:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-tag-group__item {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/*
+ * It wears the tag's own face: the badge radius, the badge type and the badge
+ * weight, so the row reads as one set with a dashed member rather than as six
+ * tags and a control. The height is the 24px target floor rather than the
+ * badge's 20px step, for the same reason a tag that acts takes it.
+ */
+.crewlet-tag-group__more {
+  display: inline-flex;
+  align-items: center;
+  height: max(24px, calc(24px * var(--density, 1)));
+  padding: 0 var(--spacing-2);
+  border: 1px dashed var(--color-border-hover);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tag-group__more:hover {
+  border-color: var(--color-border-strong-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-tag-group__more:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tag-group__more {
+    transition: none;
+  }
+}

package/dist/TagsInput/TagsInput.d.ts

@@ -0,0 +1,112 @@
+import { type TagVariant } from '../Tag/index.js';
+export interface TagsInputOption {
+    /** What is stored when the option is taken. */
+    value: string;
+    /** What is drawn, on the chip and in the list. The value itself when left out. */
+    label?: string | undefined;
+    /** Options sharing a group are listed under its name, in first-seen order. */
+    group?: string | undefined;
+    /** A short second line of identity, such as a handle. */
+    description?: string | undefined;
+}
+export interface TagsInputProps {
+    /** The values held, in the order they were chosen. */
+    value: string[];
+    /** Called with the next list when one is added, removed or moved. */
+    onChange: (next: string[]) => void;
+    /**
+     * What may be chosen. With options the field is a combobox over a
+     * multiselectable listbox; without them it is the free-text chip field it
+     * has always been.
+     */
+    options?: readonly TagsInputOption[] | undefined;
+    /**
+     * Whether a value the options do not offer may be typed in. Default true,
+     * which is what the field did before it had options at all.
+     */
+    allowCustom?: boolean | undefined;
+    /**
+     * Whether the ORDER of the chips is meaning: a provider fallback chain is
+     * read first to last, so it gets Move controls and Alt+Arrow.
+     */
+    ordered?: boolean | undefined;
+    placeholder?: string | undefined;
+    /** Variant applied to each rendered Tag. */
+    tagVariant?: TagVariant | undefined;
+    /** Monospace flag forwarded to each Tag, for machine values such as IP ranges. */
+    monospace?: boolean | undefined;
+    /** Keys that submit the current input as a new value. Defaults to Enter and comma. */
+    submitKeys?: string[] | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    /** id forwarded to the underlying input, for a label or a FormField. */
+    id?: string | undefined;
+    /** Reject duplicate values (case-insensitive). Defaults to true. */
+    dedupe?: boolean | undefined;
+    /** Names the list of chosen values and the listbox. */
+    label?: string | undefined;
+    /**
+     * Names the FIELD, where nothing else does. A field inside a [FormField]
+     * takes its name from that label through `id`; one standing on its own has
+     * none at all without this.
+     */
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Focus the field on mount, for a form opened AT it. The list stays closed. */
+    focusOnMount?: boolean | undefined;
+    /** The line shown when a search matches nothing. */
+    emptyMessage?: ((query: string) => string) | undefined;
+    /** The name of a chip's Remove control. */
+    removeLabel?: ((label: string) => string) | undefined;
+    /** The names of a chip's Move controls, in an `ordered` field. */
+    moveEarlierLabel?: ((label: string) => string) | undefined;
+    moveLaterLabel?: ((label: string) => string) | undefined;
+    /** What is said when a value is added, removed or moved. */
+    addedMessage?: ((label: string) => string) | undefined;
+    /** What is said when a paste adds several at once. */
+    pastedMessage?: ((count: number) => string) | undefined;
+    removedMessage?: ((label: string) => string) | undefined;
+    movedMessage?: ((label: string, position: number, count: number) => string) | undefined;
+    /** Names the chip list. */
+    chosenLabel?: ((label: string) => string) | undefined;
+}
+export interface TagsInputHandle {
+    focus: () => void;
+}
+/**
+ * Several values in one field, as removable chips.
+ *
+ * TWO FIELDS IN ONE, and the difference is what it is offered. With no
+ * `options` it is the free-text chip field: type a value, press Enter or
+ * comma, get a chip. With them it is a searchable multi-select, which is the
+ * one thing a native `<select multiple>` cannot do usefully: that control is
+ * a scrolling box that loses its whole selection to a stray click.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - FOCUS STAYS IN THE FIELD. The highlighted option is pointed at with
+ *   `aria-activedescendant`, and every option says whether it is chosen with
+ *   `aria-selected` inside an `aria-multiselectable` listbox.
+ * - ENTER TOGGLES AND KEEPS THE LIST AND THE QUERY, so several neighbours in
+ *   one filtered list are chosen without retyping. Tab leaves the field, as
+ *   every form control does.
+ * - ESCAPE CLOSES THE LIST AND NOTHING ELSE. A second Escape reaches the
+ *   dialog or sheet around it.
+ * - BACKSPACE IN AN EMPTY QUERY REMOVES THE LAST VALUE, as in every token
+ *   field, and says so.
+ * - A CHOSEN VALUE THE OPTIONS DO NOT OFFER is shown as itself rather than
+ *   dropped: a reference to something since renamed has to stay visible until
+ *   somebody removes it on purpose.
+ * - EVERY ADDITION, REMOVAL AND MOVE IS ANNOUNCED, through the shared
+ *   `Announcer`, because a chip appearing above the box is otherwise silent.
+ * - AFTER A REMOVE, FOCUS GOES TO THE NEXT CHIP, else the previous one, else
+ *   the field. A control that removes itself and drops focus on the page body
+ *   ends a keyboard user's pass through the form.
+ * - NOTHING IS TAKEN MID-COMPOSITION. While an input method is composing a
+ *   word, Enter, comma and Backspace are its own.
+ * - IT DOES NOT COMMIT ON BLUR IN OPTIONS MODE. A query is a search there, not
+ *   a value, so leaving the field with one typed adds nothing.
+ */
+export declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<TagsInputHandle>>;

package/dist/TagsInput/index.d.ts

@@ -0,0 +1,3 @@
+import './TagsInput.css';
+export { TagsInput } from './TagsInput.js';
+export type { TagsInputHandle, TagsInputOption, TagsInputProps } from './TagsInput.js';

package/dist/TagsInput/index.js

@@ -0,0 +1,10 @@
+export { TagsInput } from '../chunk-RDGD7Z7I.js';
+import '../chunk-S2XHHEW4.js';
+import '../chunk-PZSWF74H.js';
+import '../chunk-GTOUGQQK.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';