@crewlethq/ui 0.81.2 → 0.83.0

package/dist/{ImageUpload-OWI7CCG7.css → ImageUpload-IFXZROFZ.css}

@@ -44,34 +44,16 @@
   cursor: pointer;
 }
 
-/* The kind modifiers keep the trigger, the overlay and the Avatar outlines in
-   step. A person's picture is a circle. */
-.crewlet-image-upload--human .crewlet-image-upload__trigger,
-.crewlet-image-upload--human .crewlet-image-upload__overlay {
-  border-radius: var(--radius-circle);
-}
-
 /* THE SAME CORNER THE PICTURE INSIDE TAKES, which is why it is a variable
-   rather than a step: Avatar moves an agent badge's corner with its box, so a
-   trigger pinned to one step is rounder or squarer than the badge under it at
-   every size but one, and the badge's corners show through the overlay. */
-.crewlet-image-upload--agent .crewlet-image-upload__trigger,
-.crewlet-image-upload--agent .crewlet-image-upload__overlay {
+   rather than a step: Avatar moves a face's corner with its box, so a trigger
+   pinned to one step is rounder or squarer than the face under it at every
+   size but one, and the face's corners show through the overlay. Every face
+   is one shape, a person's and an agent's alike, so one rule serves both. */
+.crewlet-image-upload__trigger,
+.crewlet-image-upload__overlay {
   border-radius: var(--crewlet-image-upload-corner);
 }
 
-/* AND THE SAME SQUIRCLE, where the browser draws one, for the same reason:
-   Avatar.css states why its squircle is a whole one at the circle token, and
-   this is that rule for the two frames over the picture. The suite holds the
-   two blocks to one declaration list. */
-@supports (corner-shape: squircle) {
-  .crewlet-image-upload--agent .crewlet-image-upload__trigger,
-  .crewlet-image-upload--agent .crewlet-image-upload__overlay {
-    corner-shape: squircle;
-    border-radius: var(--radius-circle);
-  }
-}
-
 .crewlet-image-upload__trigger:disabled {
   cursor: default;
 }
@@ -170,19 +152,6 @@
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/*
- * ON A PERSON'S CIRCLE THE BADGE SITS ON THE EDGE, where the circle crosses
- * its own diagonal: (1 - 1/sqrt(2)) / 2 of the size, 0.1464, in from each
- * side, less half the 24px badge. The six pixels out above are the agent
- * tile's, whose squircle corner reaches that far; a circle turns away sooner,
- * and at the default 80px the badge's middle stood 8px off the picture, so
- * the badge floated beside it rather than being pinned to it.
- */
-.crewlet-image-upload--human .crewlet-image-upload__remove {
-  top: calc(var(--crewlet-image-upload-size) * 0.1464 - 12px);
-  right: calc(var(--crewlet-image-upload-size) * 0.1464 - 12px);
-}
-
 .crewlet-image-upload:hover .crewlet-image-upload__remove,
 .crewlet-image-upload__remove:focus-visible {
   opacity: 1;

package/dist/InlineEditor/index.js

@@ -1,13 +1,13 @@
-export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-YL7AR6PR.js';
-import '../chunk-624X3RVA.js';
-import '../chunk-CYQBDZ6M.js';
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-O7KG4CXB.js';
+import '../chunk-O55JQ7BE.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-ANTAQAR4.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Input/index.js

@@ -1,9 +1,9 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-FB3TCNQP.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../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/Kbd/Kbd.d.ts

@@ -12,6 +12,15 @@ export declare function keyGlyph(key: string, apple: boolean): {
     glyph: string;
     spoken: string;
 };
+/**
+ * A shortcut in the spelling `aria-keyshortcuts` takes: `Control+K`, `H`.
+ *
+ * ONE SPELLING FOR EVERY CONTROL THAT NAMES ITS KEYS, beside the cap that
+ * draws them, so what a screen reader is told and what the tooltip shows are
+ * read off the same list. `Mod` is the platform's command key, as it is in
+ * the cap.
+ */
+export declare function ariaKeyshortcuts(keys: readonly string[], apple: boolean): string;
 export interface KbdProps extends HTMLAttributes<HTMLElement> {
     /** Draws the keycap quieter, for a hint that sits inside a field. */
     subtle?: boolean | undefined;

package/dist/Kbd/index.d.ts

@@ -1,3 +1,3 @@
 import './Kbd.css';
-export { Kbd, isApplePlatform, keyGlyph } from './Kbd.js';
+export { Kbd, ariaKeyshortcuts, isApplePlatform, keyGlyph } from './Kbd.js';
 export type { KbdProps } from './Kbd.js';

package/dist/Kbd/index.js

@@ -1,3 +1,3 @@
-export { Kbd, isApplePlatform, keyGlyph } from '../chunk-ANTAQAR4.js';
+export { Kbd, ariaKeyshortcuts, isApplePlatform, keyGlyph } from '../chunk-CMAZZY2I.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Layer/index.js

@@ -1,4 +1,4 @@
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-OMV5W53A.js';
-export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkCard/LinkCard.d.ts

@@ -0,0 +1,64 @@
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+/** The state a linked object is in, as its bar and its status dot draw it. */
+export type LinkCardTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export interface LinkCardSource {
+    /** The app the object belongs to: "Worklet", "Doclet", "Artifacts", "GitHub". */
+    name: string;
+    /** The app's small mark (a 12px product mark or glyph). Decorative: the name says it. */
+    mark: ReactNode;
+}
+export interface LinkCardOwner {
+    /** A small face (a 16px `Avatar`). Decorative: the name says who. */
+    face: ReactNode;
+    name: string;
+}
+export interface LinkCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'title' | 'children' | 'target' | 'rel'> {
+    /**
+     * Where the preview leads. Only an address `safeHref` allows is followed
+     * (`http:`, `https:`, `mailto:` and the application's own `#/` routes);
+     * anything else, or none, draws the same preview with no link in it.
+     */
+    href?: string | undefined;
+    /**
+     * Leaves the application: opens a new tab, withholds the referrer and the
+     * opener, and says so to a screen reader. An in-app route opens in place.
+     */
+    external?: boolean | undefined;
+    /** Read after the title when `external`. */
+    newTabLabel?: string | undefined;
+    /** The full address, shown on hover over the preview. */
+    address?: string | undefined;
+    source: LinkCardSource;
+    /** The object's own code, before its title: "WRK-41", "#212". */
+    code?: string | undefined;
+    /** The object's title, two lines at most. */
+    title: string;
+    /** A quiet line of details under the title: "Due Friday · 3 subtasks". */
+    meta?: string | undefined;
+    /** The object's state in words: "In progress", "Merged". */
+    status?: string | undefined;
+    /** The state's tone, which colours the bar and the status dot. The words carry the meaning. */
+    statusTone?: LinkCardTone | undefined;
+    /** Who holds the object. */
+    owner?: LinkCardOwner | undefined;
+}
+/**
+ * What a link points at, unfurled under the message that carried it.
+ *
+ * AN UNFURL, NOT A CARD. No box and no fill: a slim bar on the left in the
+ * status's line colour (a quiet grey with none), then a line naming the
+ * source app with its mark, the title, a quiet line of details, and the
+ * status and owner as words, a dot and a small face. It reads as part of the
+ * message rather than a card laid on it, and the same unfurl serves a room's
+ * list of everything shared in it.
+ *
+ * NAMED BY ITS TITLE. The whole preview is one link, so a reader moving
+ * through the links of a room hears "WRK-41 Fix the login redirect" and then
+ * where it is from and what state it is in as its description, rather than
+ * every line run together as one name.
+ *
+ * AN ADDRESS IS FOLLOWED ONLY WHEN IT IS SAFE. The href passes `safeHref`, so
+ * a `javascript:` or a bare relative address in a message never becomes a
+ * link; the preview is still drawn, as words.
+ */
+export declare function LinkCard({ href, external, newTabLabel, address, source, code, title, meta, status, statusTone, owner, className, ...rest }: LinkCardProps): import("react").JSX.Element;

package/dist/LinkCard/index.d.ts

@@ -0,0 +1,5 @@
+import '../ChatMessage/ChatScale.css';
+import '../VisuallyHidden/VisuallyHidden.css';
+import './LinkCard.css';
+export { LinkCard } from './LinkCard.js';
+export type { LinkCardOwner, LinkCardProps, LinkCardSource, LinkCardTone } from './LinkCard.js';

package/dist/LinkCard/index.js

@@ -0,0 +1,5 @@
+export { LinkCard } from '../chunk-O3MYBNRO.js';
+import '../chunk-KOJPDCGQ.js';
+import '../chunk-KBZO4B33.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LinkCard-5I4MYU6I.css

@@ -0,0 +1,155 @@
+/*
+ * LinkCard: what a link points at, unfurled under its message.
+ *
+ * AN UNFURL, NOT A CARD. No box and no fill: a slim bar on the left in the
+ * status's line colour (the medium edge with none), and the lines beside it
+ * in the dashboard's own type (the title in the primary ink, the small meta
+ * under it), so a preview reads as part of its message. One width for every
+ * preview (ChatScale.css), so a stack of them shares both edges.
+ */
+.crewlet-link-card {
+  --crewlet-link-card-bar: 3px;
+  --crewlet-link-card-tone: var(--color-edge-medium);
+  --crewlet-link-card-dot: var(--color-text-tertiary);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: min(100%, var(--crewlet-chat-card));
+  box-sizing: border-box;
+  padding: 2px 0 2px calc(var(--crewlet-link-card-bar) + var(--spacing-3));
+  border-radius: var(--radius-xs);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-decoration: none;
+}
+
+.crewlet-link-card::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: var(--crewlet-link-card-bar);
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-link-card-tone);
+}
+
+/* The bar takes the tone's line colour; the status dot, small enough to
+   carry it, the tone's full colour, so the status reads in both modes. */
+.crewlet-link-card--info {
+  --crewlet-link-card-tone: var(--color-feedback-info-line);
+  --crewlet-link-card-dot: var(--color-feedback-info);
+}
+
+.crewlet-link-card--success {
+  --crewlet-link-card-tone: var(--color-feedback-success-line);
+  --crewlet-link-card-dot: var(--color-feedback-success);
+}
+
+.crewlet-link-card--warning {
+  --crewlet-link-card-tone: var(--color-feedback-warning-line);
+  --crewlet-link-card-dot: var(--color-feedback-warning);
+}
+
+.crewlet-link-card--danger {
+  --crewlet-link-card-tone: var(--color-feedback-danger-line);
+  --crewlet-link-card-dot: var(--color-feedback-danger);
+}
+
+/* No box to ring over: the ring stands off the preview's words. */
+.crewlet-link-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* The app it comes from: its mark and its name, small and quiet. */
+.crewlet-link-card__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-link-card__mark,
+.crewlet-link-card__face {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The title in the primary ink at the regular weight, two lines at most;
+   under the pointer it takes the accent ink and an underline. */
+.crewlet-link-card__title {
+  display: -webkit-box;
+  max-width: 100%;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  overflow-wrap: anywhere;
+}
+
+/* THE TITLE ALONE IS UNDERLINED. The document's base underlines every link
+   under the pointer, and an underline on the link runs through all of its
+   lines (the source, the details, the owner), which no line inside can
+   take off again. */
+a.crewlet-link-card:hover {
+  text-decoration: none;
+}
+
+a.crewlet-link-card:hover .crewlet-link-card__title {
+  color: var(--color-brand-accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-link-card__code {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-link-card__meta {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Status and owner as words on one line: a dot in the status's colour, and
+   a small face with the owner's name. */
+.crewlet-link-card__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  margin-top: 2px;
+}
+
+.crewlet-link-card__status,
+.crewlet-link-card__owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  white-space: nowrap;
+}
+
+.crewlet-link-card__dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: var(--radius-circle);
+  background: var(--crewlet-link-card-dot);
+}
+
+/* FORCED COLORS drops the bar's and the dot's backgrounds; a border is the
+   one edge the mode keeps. */
+@media (forced-colors: active) {
+  .crewlet-link-card::before {
+    border-left: var(--crewlet-link-card-bar) solid CanvasText;
+  }
+
+  .crewlet-link-card__dot {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/LinkInterstitial/index.js

@@ -1,13 +1,14 @@
-export { LinkInterstitial, openExternal } from '../chunk-JD7P2GJP.js';
-import '../chunk-C667GCU7.js';
+export { LinkInterstitial, openExternal } from '../chunk-MYAARF4Z.js';
+import '../chunk-ZXXZESCD.js';
 import '../chunk-PLL7ZJHY.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-L72URIHR.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/ListInput/index.js

@@ -1,15 +1,16 @@
-export { ListInput, withDraft } from '../chunk-45M73G5A.js';
-import '../chunk-MPVMB2DV.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+export { ListInput, withDraft } from '../chunk-GLKQHN7G.js';
+import '../chunk-BVML4UVB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.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-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Listbox/index.js

@@ -1,3 +1,3 @@
-export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-7KHM2FZH.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-YGRTX67J.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';

package/dist/LogoSlot/index.js

@@ -1,8 +1,8 @@
-export { LogoSlot, LogoSlotGroup } from '../chunk-OWHETZIU.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-6SFDL4QH.js';
 import '../chunk-KQWJWTED.js';
-import '../chunk-7PJFUQMY.js';
+import '../chunk-2ZSCHQOA.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-VERJCAJ4.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/MarkdownEditor/format.d.ts

@@ -16,6 +16,14 @@
 /** The formats the bar offers, in the order it draws them. */
 export declare const MARKDOWN_FORMATS: readonly ["heading2", "heading3", "bold", "italic", "code", "bulletList", "numberedList", "checklist", "table"];
 export type MarkdownFormat = (typeof MARKDOWN_FORMATS)[number];
+/**
+ * Formats `formatMarkdown` applies that the editor's own bar does not draw,
+ * for a bar of another surface's own (a conversation's composer): a
+ * strikethrough, a quote and a link. Kept apart from `MarkdownFormat` so a
+ * map from every format the bar draws to its label or glyph stays complete.
+ */
+export declare const MARKDOWN_TEXT_FORMATS: readonly ["strikethrough", "quote", "link"];
+export type MarkdownTextFormat = (typeof MARKDOWN_TEXT_FORMATS)[number];
 /** A selection in the source, as the textarea reports it. `start === end` is a caret. */
 export interface MarkdownSelection {
     start: number;
@@ -29,6 +37,6 @@ export interface MarkdownEdit {
 /** Replaces the selection with `text` and leaves the caret after it. */
 export declare function insertMarkdown(value: string, { start, end }: MarkdownSelection, text: string): MarkdownEdit;
 /** The format applied to the selection, or taken off it when it is already there. */
-export declare function formatMarkdown(value: string, selection: MarkdownSelection, format: MarkdownFormat): MarkdownEdit;
+export declare function formatMarkdown(value: string, selection: MarkdownSelection, format: MarkdownFormat | MarkdownTextFormat): MarkdownEdit;
 /** How many words a body holds, counted the way a writer would. */
 export declare function markdownWords(value: string): number;

package/dist/MarkdownEditor/index.d.ts

@@ -1,5 +1,5 @@
 import './MarkdownEditor.css';
 export { MarkdownEditor } from './MarkdownEditor.js';
 export type { MarkdownEditorApi, MarkdownEditorLabelOverrides, MarkdownEditorLabels, MarkdownEditorMode, MarkdownEditorProps, } from './MarkdownEditor.js';
-export { MARKDOWN_FORMATS, formatMarkdown, insertMarkdown, markdownWords } from './format.js';
-export type { MarkdownEdit, MarkdownFormat, MarkdownSelection } from './format.js';
+export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, formatMarkdown, insertMarkdown, markdownWords } from './format.js';
+export type { MarkdownEdit, MarkdownFormat, MarkdownSelection, MarkdownTextFormat } from './format.js';

package/dist/MarkdownEditor/index.js

@@ -1,18 +1,19 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-7FF6CZW5.js';
-import '../chunk-NR4CPM4T.js';
+export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-TQKQRS2J.js';
+import '../chunk-NXFTCPF6.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.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/MediaMatch/index.d.ts

@@ -1 +1 @@
-export { useMediaMatch } from './useMediaMatch.js';
+export { REDUCED_MOTION_QUERY, prefersReducedMotion, useMediaMatch } from './useMediaMatch.js';

package/dist/MediaMatch/index.js

@@ -1 +1 @@
-export { useMediaMatch } from '../chunk-RTPQDNW3.js';
+export { REDUCED_MOTION_QUERY, prefersReducedMotion, useMediaMatch } from '../chunk-YJQXESOJ.js';

package/dist/MediaMatch/useMediaMatch.d.ts

@@ -17,3 +17,17 @@
  * the wide layout is the one that needs no JavaScript to be usable.
  */
 export declare function useMediaMatch(query: string): boolean;
+/**
+ * The reader's request for less motion: the one spelling of the query every
+ * component asks, through `useMediaMatch` during render and through
+ * `prefersReducedMotion` outside it. A copy of the string is a copy that can
+ * drift, and a query spelt one character off never matches.
+ */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * Whether the reader has asked for less motion, read once, for code outside a
+ * render: a scroll, a timer's length. `view` is the window the element lives
+ * in (`ownerDocument.defaultView`), the page's own by default. False on the
+ * server and wherever `matchMedia` is missing, as `useMediaMatch` answers.
+ */
+export declare function prefersReducedMotion(view?: Window | null): boolean;

package/dist/MentionChip/MentionChip.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Who a mention names. `other`: a person, an agent or a room, in the light
+ * blue of the info tone, apart from a link (the accent). `self`: the reader.
+ * `everyone`: the whole room ("@channel"), which names the reader too. Both
+ * of those take the warning tone the reader looks for.
+ */
+export type MentionChipTone = 'other' | 'self' | 'everyone';
+export interface MentionChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type' | 'onClick'> {
+    /** The words as written in the message: "@Product Manager", "#engineering", "@channel". */
+    children: ReactNode;
+    /** Who it names, `other` by default. */
+    tone?: MentionChipTone | undefined;
+    /** Opens what it names (a profile, a room). Without it the chip is text, as "@channel" is. */
+    onPress?: (() => void) | undefined;
+}
+/**
+ * A person, an agent or a room named in a message's words, drawn as a chip
+ * in the line: a soft fill and the ink of its tone, at the words' own size
+ * and the regular weight. With `onPress` it is a button that opens what it
+ * names; without, it is text.
+ *
+ * A chip that wraps keeps its fill and its corners on every line it spans.
+ */
+export declare function MentionChip({ children, tone, onPress, className, ...rest }: MentionChipProps): import("react").JSX.Element;

package/dist/MentionChip/index.d.ts

@@ -0,0 +1,3 @@
+import './MentionChip.css';
+export { MentionChip } from './MentionChip.js';
+export type { MentionChipProps, MentionChipTone } from './MentionChip.js';

package/dist/MentionChip/index.js

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

package/dist/MentionChip-W7MZZVRZ.css

@@ -0,0 +1,42 @@
+/*
+ * A mention in a message's words: a chip in the line, in the info tone's
+ * light blue, or the warning tone where it names the reader.
+ */
+
+.crewlet-mention-chip {
+  display: inline;
+  padding: 0 2px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+  font: inherit;
+  font-weight: var(--font-weight-regular);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.crewlet-mention-chip--self,
+.crewlet-mention-chip--everyone {
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+button.crewlet-mention-chip {
+  cursor: pointer;
+}
+
+/* Under the pointer the fill takes the tone's next strength, its line step. */
+button.crewlet-mention-chip:hover {
+  background: var(--color-feedback-info-line);
+}
+
+button.crewlet-mention-chip--self:hover,
+button.crewlet-mention-chip--everyone:hover {
+  background: var(--color-feedback-warning-line);
+}
+
+button.crewlet-mention-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}