@crewlethq/ui 0.11.0 → 0.13.0

package/dist/Document-PQGXJHB7.css

@@ -0,0 +1,288 @@
+/*
+ * Rendered markdown, set as a document (Document.tsx).
+ *
+ * Every size here is a step on the type ramp and every gap a spacing step,
+ * because a reading column set in sizes of its own (32, 20, 18, 15 and 14.5px
+ * were measured on one) is a column that drifts from every other surface.
+ */
+
+.crewlet-document {
+  /* The two rhythms a size sets: between blocks, and above a section. */
+  --crewlet-document-gap: var(--spacing-4);
+  --crewlet-document-section-gap: var(--spacing-6);
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+  /* The renderer decides what a break is, so the whitespace rule is normal. */
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+.crewlet-document--sm {
+  --crewlet-document-gap: var(--spacing-3);
+  --crewlet-document-section-gap: var(--spacing-5);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-document--measure {
+  max-width: var(--size-measure);
+}
+
+/*
+ * EVERY BLOCK'S OWN MARGIN IS ZEROED FIRST, and the rhythm is one rule over
+ * siblings. The other way round, a margin reset per element after the sibling
+ * rule, is how a rhythm dies: the shorthand resets the top margin too, at the
+ * same specificity and later in the file, and every block runs into the next.
+ */
+.crewlet-document :where(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, figure) {
+  margin: 0;
+}
+
+.crewlet-document > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}
+
+.crewlet-document :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  color: var(--color-text-primary);
+  /* An outline that scrolls a heading into view leaves it a little air. */
+  scroll-margin-block-start: var(--spacing-6);
+}
+
+/* A heading opens a section, so it gets more air above it than a paragraph. */
+.crewlet-document > * + :where(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--crewlet-document-section-gap);
+}
+
+.crewlet-document h1 {
+  font-size: var(--font-size-2xl);
+}
+
+.crewlet-document h2 {
+  font-size: var(--font-size-xl);
+}
+
+.crewlet-document h3 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document :where(h4, h5, h6) {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h1 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document--sm h2 {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h3 {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-document--sm :where(h4, h5, h6) {
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A HEADING AN OUTLINE MOVED TO takes focus, so a keyboard carries on from it.
+ * A press draws no ring (`:focus-visible` does not match one); a keyboard's is
+ * drawn off the text, because the heading is not a control.
+ */
+.crewlet-document :where(h1, h2, h3, h4, h5, h6):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--spacing-1);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document :where(strong, b) {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-document :where(ul, ol) {
+  padding-inline-start: var(--spacing-5);
+}
+
+.crewlet-document li + li,
+.crewlet-document li > :where(ul, ol) {
+  margin-block-start: var(--spacing-1);
+}
+
+.crewlet-document li::marker {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * A TASK LIST keeps its box on the line rather than in the marker's place: the
+ * marker is what says "list", and the box is what says "done". The item's
+ * content is ONE column beside the box, never a second cell of the row, so a
+ * sublist hangs under the line it belongs to.
+ */
+.crewlet-document ul:has(> li > input[type='checkbox']) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.crewlet-document li:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-document li:has(> input[type='checkbox']) > :not(input) {
+  flex: 1;
+  min-width: 0;
+}
+
+.crewlet-document li > input[type='checkbox'] {
+  flex: none;
+  margin: 0;
+  /* On the first line's centre rather than on the top of its box. */
+  margin-block-start: 0.35em;
+  accent-color: var(--color-brand-accent);
+}
+
+/*
+ * A FENCED BLOCK WRAPS RATHER THAN SCROLLING. One long line of JSON in a body
+ * otherwise pushes the whole page sideways, and a block that scrolled instead
+ * would owe a tab stop, since a scroller no keyboard reaches is content no
+ * keyboard reads. `anywhere` because these lines have no spaces to break at.
+ */
+.crewlet-document pre {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document pre code {
+  padding: 0;
+  background: none;
+  font: inherit;
+}
+
+.crewlet-document :not(pre) > code {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document blockquote {
+  padding-inline-start: var(--spacing-3);
+  border-inline-start: 2px solid var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-document hr {
+  margin-block: var(--crewlet-document-section-gap);
+  border: 0;
+  border-block-start: 1px solid var(--color-border-default);
+}
+
+/*
+ * A link in running prose keeps a permanent underline, through hover too:
+ * colour alone is not what says "link" (WCAG 1.4.1). The pointer is answered
+ * by the ink moving to the primary step.
+ */
+.crewlet-document a,
+.crewlet-document a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-document a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-document a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-document a:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+}
+
+/*
+ * A TABLE WRITTEN FOR A DOCUMENT can be wider than the column it lands in, so
+ * the element a renderer wraps it in scrolls rather than the page. The table
+ * itself keeps its display, because a table set `display: block` loses its
+ * table semantics to more than one screen reader.
+ */
+.crewlet-document :where(div):has(> table) {
+  overflow-x: auto;
+}
+
+/* The scroller is a tab stop (see Document.tsx), so it draws the ring inside
+   its own box, where the table's edge would otherwise clip an outset one. */
+.crewlet-document :where(div):has(> table):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-document--sm table {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-document :where(th, td) {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-block-end: 1px solid var(--color-border-default);
+  text-align: start;
+  vertical-align: top;
+}
+
+.crewlet-document th {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/*
+ * The title above a body. The largest step a reading screen spends, at the
+ * tight tracking every title on the ramp takes, and it wraps anywhere because
+ * a title is an address somebody typed and may hold no space at all.
+ */
+.crewlet-document-title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}

package/dist/EntityChip/index.js

@@ -1,4 +1,4 @@
 export { EntityChip } from '../chunk-DDTDN5L2.js';
-import '../chunk-3UK4VFSK.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Highlight/Highlight.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes } from 'react';
+/** One marked stretch of a text, as `[start, end)` offsets into it. */
+export type HighlightRange = readonly [start: number, end: number];
+/**
+ * The words of a query a reader typed, as the terms a match is made of:
+ * folded to lower case, each one once, the longest first, and none shorter than
+ * two characters.
+ *
+ * A ONE LETTER TERM MARKS NOTHING. "a plan for q3" would otherwise mark every
+ * `a` in a snippet, and a page of yellow is a page with nothing marked.
+ *
+ * THE LONGEST FIRST, so where two terms start at the same place the mark covers
+ * the longer one: "settle" and "settlement" in one query mark "settlement"
+ * whole rather than its first six letters.
+ */
+export declare function highlightTerms(query: string): string[];
+/**
+ * Where `terms` start a word of `text`, as ranges in reading order.
+ *
+ * A TERM MATCHES THE START OF A WORD, never its middle: "cent" marks "cents"
+ * and "centre" but not "percent", because a search engine matches words, and a
+ * mark inside a word points at a match the engine never made.
+ *
+ * THE OFFSETS ARE THE TEXT'S OWN. The match is made by one case-insensitive
+ * Unicode pattern over the original string rather than over a lower-cased copy,
+ * because lower-casing can change a string's length ("İ" becomes two code
+ * units) and every offset after it would point one character off.
+ */
+export declare function highlightRanges(text: string, terms: readonly string[]): HighlightRange[];
+export interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The text to draw. */
+    text: string;
+    /** What to mark, usually `highlightTerms(query)`. */
+    terms: readonly string[];
+}
+/**
+ * A line of text with the words a search matched marked in it: a result's
+ * title, its snippet, a passage of a page opened from a search.
+ *
+ * A `mark` ELEMENT, because a match is part of what the text says to a reader
+ * who came looking for it, and the element is what tells assistive technology
+ * so. The ink stays the text's own and the mark is a ground behind it, so a
+ * marked word reads at the same contrast as the words beside it.
+ */
+export declare function Highlight({ text, terms, className, ...rest }: HighlightProps): import("react").JSX.Element;

package/dist/Highlight/index.d.ts

@@ -0,0 +1,3 @@
+import './Highlight.css';
+export { Highlight, highlightRanges, highlightTerms } from './Highlight.js';
+export type { HighlightProps, HighlightRange } from './Highlight.js';

package/dist/Highlight/index.js

@@ -0,0 +1,2 @@
+export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Highlight-DXLV2R6L.css

@@ -0,0 +1,29 @@
+/*
+ * Words a search matched (Highlight.tsx).
+ */
+
+/*
+ * A GROUND, NEVER AN INK. The marked word keeps the ink of the text around it,
+ * so it reads at the contrast that text was measured at, and the accent's soft
+ * step behind it says "this is what you searched for" without making the word
+ * louder than its sentence. The accent is the one colour that means "where the
+ * reader is", and a match is exactly that: the reader's own question, found.
+ */
+.crewlet-highlight__match {
+  border-radius: var(--radius-xs);
+  background: var(--color-brand-accent-soft-strong);
+  color: inherit;
+}
+
+/*
+ * Forced colours replaces every author ground with the canvas, which would
+ * leave a match drawn exactly like the words beside it. The system's own pair
+ * for a mark is what that mode reserves for this job.
+ */
+@media (forced-colors: active) {
+  .crewlet-highlight__match {
+    forced-color-adjust: none;
+    background: Mark;
+    color: MarkText;
+  }
+}

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-K5Q2DK3P.js';
+export { HuePicker } from '../chunk-NXDEPUVG.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ImageUpload/index.js

@@ -1,4 +1,4 @@
-export { ImageUpload } from '../chunk-LAQK4V3Z.js';
-import '../chunk-3UK4VFSK.js';
+export { ImageUpload } from '../chunk-DJMLHCLD.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ImageUpload-L2GE4JUM.css → ImageUpload-NVGMN7DP.css}

@@ -1,10 +1,13 @@
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
- * WHITE ON THE SCRIM, from tokens, in both palettes. The overlay used to spell
+ * WHITE ON THE SCRIM, from tokens, in every theme. The overlay used to spell
  * its own rgba(0, 0, 0, 0.5) and three shades of white; the scrim and the
- * on-accent step are the two values the palette already measures for exactly
- * this, which is a label drawn on something dark whatever is behind it.
+ * on-scrim step are the two values the palette measures for exactly this,
+ * which is a label drawn on something dark whatever is behind it. The
+ * on-accent step is not: a theme whose accent is light labels it dark. The
+ * remove button is the danger fill, and takes the on-danger step for the
+ * same reason.
  *
  * NO LITERAL FALLBACKS INSIDE var(). A fallback is what renders whenever the
  * token name is misspelt, so it hides the very failure it looks like
@@ -91,7 +94,7 @@
   justify-content: center;
   gap: 2px;
   background: var(--color-surface-scrim);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-scrim);
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-easing-default);
   pointer-events: none;
@@ -136,7 +139,7 @@
   height: calc(var(--crewlet-image-upload-size) * 0.3);
   border-radius: var(--radius-circle);
   border: 2px solid var(--color-surface-scrim);
-  border-top-color: var(--color-text-on-accent);
+  border-top-color: var(--color-text-on-scrim);
   animation: crewlet-image-upload-spin calc(var(--motion-duration-slow) * 2.5) linear infinite;
 }
 
@@ -166,7 +169,7 @@
   border-radius: var(--radius-circle);
   background: var(--color-feedback-danger);
   border: 2px solid var(--color-surface-background);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-danger);
   cursor: pointer;
   opacity: 0;
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);

package/dist/InboxList/InboxList.d.ts

@@ -0,0 +1,116 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type LiHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export interface InboxListProps extends HTMLAttributes<HTMLElement> {
+    /** Names the list as a landmark: "Inbox". */
+    label: string;
+}
+/**
+ * The column of an inbox: what reached a person, grouped, one row each, read
+ * in full in a pane beside it.
+ *
+ * A NAVIGATION, NOT A TABLE. Every row opens something, and a reader moves
+ * between them to read one at a time. It promises no columns, so it draws
+ * none, and its rows are as tall as their words rather than one fixed height.
+ */
+export declare function InboxList({ label, className, children, ...rest }: InboxListProps): import("react").JSX.Element;
+export declare namespace InboxList {
+    var Group: typeof InboxGroup;
+    var Row: typeof InboxRow;
+    var More: typeof InboxMore;
+    var Toggle: typeof InboxToggle;
+}
+export interface InboxGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The group's name: "Needs you", "Updates". */
+    label: ReactNode;
+    /**
+     * Names the group for a screen reader only. For rows a control above them
+     * already introduces, such as the snoozed ones under their own toggle.
+     */
+    hideLabel?: boolean | undefined;
+    /** Overrides the level the label is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+}
+/**
+ * A labelled run of rows. The label is a heading set in the micro-label
+ * register, so a reader navigating by heading lands on each group and a
+ * reader scanning sees where one ends.
+ */
+export declare function InboxGroup({ label, hideLabel, headingLevel, className, children, ...rest }: InboxGroupProps): import("react").JSX.Element;
+export type InboxRowTone = 'default' | 'danger';
+export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick' | 'title'> {
+    /** Who the row is from: a seat's or a person's name. */
+    title: ReactNode;
+    /** A word after the name where the row is not a plain question or update: "coding run", "stopped". */
+    qualifier?: ReactNode;
+    /** `danger` sets the qualifier in the danger ink, for a seat that has stopped. */
+    qualifierTone?: InboxRowTone | undefined;
+    /** At the end of the first line: when it arrived. */
+    meta?: ReactNode;
+    /** Before the words: an avatar, drawn at the target size. */
+    leading?: ReactNode;
+    /** What the row says, in up to three lines. */
+    children?: ReactNode;
+    /** Drawn after the words in the quiet ink, inside the same three lines: a comment's own text. */
+    excerpt?: ReactNode;
+    /**
+     * Under the row and OUTSIDE its control, so it can be a control of its own:
+     * the task the row is about, as a link.
+     */
+    aside?: ReactNode;
+    /** This row is the one open beside the list. */
+    selected?: boolean | undefined;
+    /** Not read yet: the name is heavier, the words take the primary ink, and the state is read out. */
+    unread?: boolean | undefined;
+    /** Read after the row's words when `unread`. */
+    unreadLabel?: string | undefined;
+    /** It waits on the reader: the words take the primary ink. */
+    actionable?: boolean | undefined;
+    /** Settled: the words are struck through in the quiet ink, and the state is read out. */
+    done?: boolean | undefined;
+    /** Read after the row's words when `done`: "Answered", "Resolved". */
+    doneLabel?: string | undefined;
+    /** Opens the row as a link. */
+    href?: string | undefined;
+    /**
+     * Opens the row as a button, or, beside `href`, takes the press first: a
+     * router calls `preventDefault` on a plain click and lets a modified one
+     * open the link in a tab.
+     */
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+}
+/**
+ * One row: WHO, then WHAT in up to three lines, then the task it is about.
+ *
+ * THE ROW IS ONE CONTROL and the task is another. A link nested inside a
+ * button is invalid and unreachable by keyboard, so the task sits under the
+ * control, in the same item, and lines up with the words above it. The item
+ * takes the hover and the selected fill as a whole, so the two read as one row.
+ *
+ * THE SELECTED FILL IS NEUTRAL. An inbox is read one row after another, and an
+ * accent tint on the open row made the column read as a column of alerts; the
+ * pressed fill says "here" without saying "look". The control carries
+ * `aria-current`, so the row is announced as the open one where focus is.
+ *
+ * NOTHING IS CUT AT THE EDGE. The name ellipsizes, the time never wraps, and
+ * the words take up to three lines before they stop, so a row says what it is
+ * rather than its first few words.
+ */
+export declare function InboxRow({ title, qualifier, qualifierTone, meta, leading, excerpt, aside, selected, unread, unreadLabel, actionable, done, doneLabel, href, onClick, className, children, ...rest }: InboxRowProps): import("react").JSX.Element;
+export type InboxMoreProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The end of the list: the quiet toggles that open what is not in it by
+ * default, the snoozed rows and the earlier ones. Two words at the bottom
+ * rather than a filter bar at the top, because a reader opens them rarely
+ * and a filter bar is read every time.
+ */
+export declare function InboxMore({ className, children, ...rest }: InboxMoreProps): import("react").JSX.Element;
+export interface InboxToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Whether the rows it opens are shown. */
+    expanded: boolean;
+}
+/**
+ * One of those toggles: a word in the quiet ink that opens rows under it.
+ * Its own `aria-expanded` says whether they are open, and the ink steps up to
+ * the primary while they are.
+ */
+export declare function InboxToggle({ expanded, className, children, ...rest }: InboxToggleProps): import("react").JSX.Element;

package/dist/InboxList/index.d.ts

@@ -0,0 +1,3 @@
+import './InboxList.css';
+export { InboxList, InboxGroup, InboxRow, InboxMore, InboxToggle } from './InboxList.js';
+export type { InboxListProps, InboxGroupProps, InboxRowProps, InboxRowTone, InboxMoreProps, InboxToggleProps, } from './InboxList.js';

package/dist/InboxList/index.js

@@ -0,0 +1,5 @@
+export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-XYCADWZN.js';
+import '../chunk-RK4XPHVG.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';