@crewlethq/ui 0.11.0 → 0.13.0

package/dist/ChoiceList/index.d.ts

@@ -0,0 +1,3 @@
+import './ChoiceList.css';
+export { ChoiceList } from './ChoiceList.js';
+export type { ChoiceListOption, ChoiceListProps } from './ChoiceList.js';

package/dist/ChoiceList/index.js

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

package/dist/ChoiceList-2PQJS4DX.css

@@ -0,0 +1,109 @@
+/*
+ * A short list of answers in one bordered box: a radio, the label with a line
+ * of detail under it, and a tag at the row's end. The selected row takes the
+ * accent's soft fill, so the answer reads at a glance without the radio.
+ */
+.crewlet-choice-list {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-list.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-choice-list__group {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.crewlet-choice-list__item {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+/* The "Something else" a list ends with, set apart by a dashed rule. */
+.crewlet-choice-list__item.is-separated {
+  padding-top: var(--spacing-1);
+  border-top: 1px dashed var(--color-border-strong);
+}
+
+.crewlet-choice-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-choice-list__row.is-checked {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+  cursor: not-allowed;
+}
+
+.crewlet-choice-list__radio {
+  margin: 3px 0 0;
+  accent-color: var(--color-brand-accent);
+  cursor: inherit;
+}
+
+/* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
+.crewlet-choice-list__radio:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-choice-list__text {
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-choice-list__label {
+  font-size: var(--font-size-compact);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__tag {
+  padding-top: 2px;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent-ink);
+  white-space: nowrap;
+}
+
+.crewlet-choice-list__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-list__row {
+    transition: none;
+  }
+}

package/dist/Combobox/index.js

@@ -1,6 +1,6 @@
-export { Combobox } from '../chunk-ELZKOVEC.js';
+export { Combobox } from '../chunk-4Y7WKXAW.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-R25RGPUB.js';

package/dist/CommandPalette/CommandPalette.d.ts

@@ -17,7 +17,12 @@ export interface CommandPaletteItem {
      * the palette's `onKeyDown`, like the chord that opens it.
      */
     meta?: ReactNode;
-    onSelect: () => void;
+    /**
+     * Taking the row. The surface closes after it, which is what a launcher's
+     * row means; a row that leads somewhere INSIDE the surface (into a step) or
+     * waits on an answer the reader is owed returns `false` to keep it open.
+     */
+    onSelect: () => boolean | void;
 }
 export interface CommandPaletteGroup {
     id: string;
@@ -25,6 +30,28 @@ export interface CommandPaletteGroup {
     label: string;
     items: CommandPaletteItem[];
 }
+/**
+ * A STEP the palette has gone into: a second list in place of the results,
+ * for a choice the first one led to (which project to file into, which theme
+ * to use). The caller hands over the step's own rows as `groups` and its own
+ * query; this draws where the reader is and the way back.
+ */
+export interface CommandPaletteStep {
+    /** What the step chooses, on the chip at the field's start: "Change theme". */
+    label: string;
+    /**
+     * Back to where the step was opened from: the chip, Escape, and Backspace in
+     * an empty field. The palette stays open; closing is the veil's and the
+     * caller's chord.
+     */
+    onBack: () => void;
+    /**
+     * The id of the row the step's list opens on: the choice already in effect,
+     * so a step that previews its rows opens on what is on screen rather than
+     * previewing its first row. The first row without it.
+     */
+    startAt?: string | undefined;
+}
 /** One scope the search can be narrowed to: a tab over the results. */
 export interface CommandPaletteScope {
     /** Stable identity: the value `scope`, `onScopeChange` and `groupsScope` carry. */
@@ -105,6 +132,19 @@ export type CommandPaletteProps = Omit<HTMLAttributes<HTMLElement>, 'children' |
     pendingMessage?: string | undefined;
     /** Names the result list itself. */
     resultsLabel?: string | undefined;
+    /**
+     * The step the palette is in, or none. In a step the field starts with a
+     * chip naming it, which goes back on a press, and Escape and Backspace in
+     * an empty field go back rather than closing the surface.
+     */
+    step?: CommandPaletteStep | undefined;
+    /**
+     * Told where the highlight COMES TO REST, and `null` when the list empties,
+     * the pointer leaves it or the surface closes: at once for a key, and once
+     * the pointer has rested on a row for `HIGHLIGHT_REST_MS`. What a step that
+     * previews its rows listens to.
+     */
+    onHighlight?: ((item: CommandPaletteItem | null) => void) | undefined;
 };
 /**
  * One search surface for a whole product: screens, records, and any id pasted
@@ -158,6 +198,13 @@ export type CommandPaletteProps = Omit<HTMLAttributes<HTMLElement>, 'children' |
  * prevented, so it does not move focus off the field: a combobox that loses its
  * input names no highlight, and typing reaches nothing.
  *
+ * A STEP IS A SECOND LIST, NOT A SECOND SURFACE (`step`). The field stays
+ * where it is, so focus and the reader's place survive going in and coming
+ * back; its search glyph gives way to a chip naming the step, and the keys
+ * that would close the surface go back instead: Escape, and Backspace in an
+ * empty field, which is where a reader who has erased their query is asking to
+ * go. The veil still closes it, as does the caller's own chord.
+ *
  * THE CHORD THAT OPENS IT IS THE APPLICATION'S, not this component's. Pass an
  * `onKeyDown`: it reaches the frame, which is every key pressed inside the
  * surface, and closing from there is one line the caller already has the

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-6SDGRKQ7.js';
+export { CommandPalette } from '../chunk-HKGS67VG.js';
+import '../chunk-CF6DTETT.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-TEEJSTFG.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{CommandPalette-C5AMKGN2.css → CommandPalette-HBTNKHZQ.css}

@@ -56,17 +56,70 @@
  * glyph stood 24px in and the keycap 28px from the edge; at 12px they stand
  * 20px and 16px in, where the approved palette draws them, and the query still
  * starts on the line the design's does.
+ *
+ * The band is the BAR around the field, so a step's chip shares it: the field
+ * itself draws no box and fills what the chip leaves.
  */
-.crewlet-input.crewlet-palette__field {
+.crewlet-palette__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
   flex-shrink: 0;
   min-height: var(--size-row-lg);
   padding-inline: var(--spacing-3);
-  border: none;
   border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-input.crewlet-palette__field {
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+  padding-inline: 0;
+  border: none;
   border-radius: 0;
   background: transparent;
 }
 
+/*
+ * THE STEP'S CHIP: where the reader is, and the way back. It wears the
+ * accent's soft tint and ink, the kit's mark for "this is on", because a step
+ * is a narrowing the reader chose, as a filter that is on is; it is a control,
+ * so it takes the pointer and draws its own ring.
+ */
+.crewlet-palette__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  min-height: var(--size-target-min);
+  padding: 0 var(--spacing-2) 0 var(--spacing-1);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Under the pointer it draws the line the soft tint is paired with, rather
+   than a stronger fill its ink was never measured on. */
+.crewlet-palette__step:hover {
+  box-shadow: inset 0 0 0 1px var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-palette__step:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+/* In a step the query starts a gap after the chip, not a text inset after it. */
+.crewlet-palette__bar.is-step .crewlet-input__control {
+  padding-left: 0;
+}
+
 .crewlet-input.crewlet-palette__field .crewlet-input__control {
   font-size: var(--font-size-md);
 }

package/dist/Composer/Composer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+/** The share of `maxLength` at which the counter appears. */
+export declare const COMPOSER_COUNTER_AT = 0.8;
+export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onSubmit' | 'children'> {
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Called on Command+Enter (Control+Enter elsewhere). With it, the footer
+     * carries the shortcut's hint.
+     */
+    onSubmit?: (() => void) | undefined;
+    /** Names the field for a screen reader, since it carries no visible label. */
+    label: string;
+    /** The footer's controls, at its end: Cancel and Submit. */
+    actions?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * A message written in place: a borderless field that grows with its text,
+ * and a footer strip holding the send shortcut, a counter and the actions, in
+ * one box that takes the focus ring as a whole.
+ *
+ * THE COUNTER IS DRAWN ONLY NEAR THE LIMIT, from [COMPOSER_COUNTER_AT] of
+ * `maxLength`: a count under every short reply is noise, and a field that
+ * stops taking text with no warning reads as a broken keyboard.
+ */
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Composer/index.d.ts

@@ -0,0 +1,3 @@
+import './Composer.css';
+export { COMPOSER_COUNTER_AT, Composer } from './Composer.js';
+export type { ComposerProps } from './Composer.js';

package/dist/Composer/index.js

@@ -0,0 +1,7 @@
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-QSLIN64M.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Composer-ABGJIAIR.css

@@ -0,0 +1,88 @@
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring, an accent border and a 2px soft halo, so the
+ * field inside draws no border or outline of its own and the footer reads as
+ * part of what is being written.
+ */
+.crewlet-composer {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-composer:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  min-height: 68px;
+  max-height: 220px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  resize: none;
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-composer .crewlet-composer__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+/* Past its cap the field scrolls rather than pushing the page. */
+.crewlet-composer .crewlet-composer__field.is-auto-resize {
+  overflow-y: auto;
+}
+
+.crewlet-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-composer__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-composer__counter {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-composer__spacer {
+  flex: 1;
+}
+
+@media (width < 640px) {
+  .crewlet-composer__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}

package/dist/DataTable/index.js

@@ -1,11 +1,11 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-R4ZJB5YX.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WY2NLRZN.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-TEEJSTFG.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-CF6DTETT.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-YCTMKKRA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';

package/dist/DataView/index.js

@@ -1,23 +1,23 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CIOKUMVC.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-3CZ7XAVY.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-UZPHPW3Z.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-JCNUQ3US.js';
-import '../chunk-SMBKXWML.js';
-import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-R4ZJB5YX.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-WY2NLRZN.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-TEEJSTFG.js';
+import '../chunk-JDPAA2JU.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-CF6DTETT.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-YCTMKKRA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/DateTimePicker/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JDPAA2JU.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Document/Document.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes } from 'react';
+export type DocumentSize = 
+/**
+ * A page read on its own: the small step at the relaxed leading, sections at
+ * the ramp's xl and lg. THE DEFAULT, because a knowledge page, a runbook and
+ * a design are what this is for.
+ */
+'md'
+/**
+ * A document read beside other things: a comment, a preview in a side
+ * pane, a result's peek. The body's own size, sections a step over it.
+ */
+ | 'sm';
+export type DocumentElement = 'div' | 'article' | 'section';
+export interface DocumentProps extends HTMLAttributes<HTMLElement> {
+    /** The element to draw. A `div` by default; an `article` for a page that stands alone. */
+    as?: DocumentElement | undefined;
+    size?: DocumentSize | undefined;
+    /** Bounds the line length at the measure token. On by default; a measure is the point. */
+    measure?: 'normal' | 'none' | undefined;
+}
+/**
+ * Rendered markdown, set as a document: headings, paragraphs, lists and task
+ * lists, quotes, code, tables, rules, links and images.
+ *
+ * A STYLESHEET OVER ELEMENTS, NOT A RENDERER. What a body may contain (which
+ * link schemes are safe, whether raw HTML is text) is a decision about the
+ * application's own content, so the parser stays with the application and
+ * emits plain semantic elements, and this draws them. Any renderer that emits
+ * `h2`, `ul`, `table` and the rest works unchanged, and nothing here reads a
+ * class name a renderer would have to know about.
+ *
+ * WHAT IT RECOGNISES BY SHAPE. A task item is a list item whose first child is
+ * a checkbox; a table that may be wider than the column sits in an element of
+ * its own, and that element scrolls. Both are read off the structure, so a
+ * renderer gets them by emitting the markup it would emit anyway. A renderer
+ * gives that element `tabIndex={0}`, a `region` role and a name, because a
+ * scroller no keyboard can reach is a table no keyboard can read to its end.
+ *
+ * THE TITLE IS NOT PART OF IT. A page's title is its address and its `h1`, set
+ * above the body by `DocumentTitle`, so a renderer draws the body's own
+ * headings from `h2` down and the outline of the page starts there.
+ */
+export declare function Document({ as: Tag, size, measure, className, children, ...rest }: DocumentProps): import("react").JSX.Element;
+export interface DocumentTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The heading level. An `h1` by default: on a page of its own, the title is the page's. */
+    as?: 'h1' | 'h2' | undefined;
+}
+/**
+ * A document's title: the largest step a reading screen spends, at the tight
+ * tracking every title on the ramp takes.
+ *
+ * A component rather than a class, so a screen does not set a page's title in
+ * a size of its own beside the body it heads.
+ */
+export declare function DocumentTitle({ as: Tag, className, children, ...rest }: DocumentTitleProps): import("react").JSX.Element;

package/dist/Document/index.d.ts

@@ -0,0 +1,3 @@
+import './Document.css';
+export { Document, DocumentTitle } from './Document.js';
+export type { DocumentElement, DocumentProps, DocumentSize, DocumentTitleProps } from './Document.js';

package/dist/Document/index.js

@@ -0,0 +1,2 @@
+export { Document, DocumentTitle } from '../chunk-WI6K5M5X.js';
+import '../chunk-ODEQTPFM.js';