@crewlethq/ui 0.11.0 → 0.13.0

package/dist/ReadingPane-5UOLPWY5.css

@@ -0,0 +1,194 @@
+/*
+ * One item read in full, in one column.
+ *
+ * The pane is its own container, so the column narrows its margins when the
+ * PANE is narrow (beside a list on a small laptop, or alone on a phone)
+ * rather than when the window is.
+ */
+
+.crewlet-reading-pane {
+  container: crewlet-reading-pane / inline-size;
+  min-width: 0;
+}
+
+.crewlet-reading-pane__column {
+  /* A question and its answers read best at about seventy characters a line. */
+  --crewlet-reading-pane-measure: 640px;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  max-width: var(--crewlet-reading-pane-measure);
+  margin: 0 auto;
+  padding: calc(var(--spacing-6) + var(--spacing-1)) calc(var(--spacing-6) + var(--spacing-1)) var(--spacing-8);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-primary);
+}
+
+@container crewlet-reading-pane (width < 640px) {
+  .crewlet-reading-pane__column {
+    padding-inline: var(--spacing-4);
+  }
+}
+
+/* ---- The byline -------------------------------------------------------- */
+
+.crewlet-reading-pane__byline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reading-pane__start,
+.crewlet-reading-pane__leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-reading-pane__by {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__by strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__note {
+  color: var(--color-text-tertiary);
+}
+
+/* ---- The title and what it needs -------------------------------------- */
+
+.crewlet-reading-pane__title {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__lead {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__lead > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__quote > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote--verbatim {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-left: 2px solid var(--color-border-strong);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  white-space: pre-wrap;
+}
+
+/* ---- The reasoning ----------------------------------------------------- */
+
+.crewlet-reading-pane__reasoning {
+  display: grid;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-reading-pane__reasoning-title {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reading-pane__reasoning-title strong {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__reasoning-body {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__reasoning-body > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__reasoning-footer {
+  margin-top: calc(var(--spacing-1) / 2);
+}
+
+/* ---- What the reader did ----------------------------------------------- */
+
+.crewlet-reading-pane__outcome {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-reading-pane__outcome-mark {
+  flex: none;
+}
+
+.crewlet-reading-pane__outcome strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+/* ---- A section after the answer ---------------------------------------- */
+
+.crewlet-reading-pane__section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-3);
+  padding-top: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* The heading's own line box is the label's, so the label sits where it is drawn. */
+.crewlet-reading-pane__section-label {
+  margin: 0;
+  font: inherit;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -45,6 +45,14 @@ interface SegmentedShared<T extends string> {
      * caret moves inside it as it does in any field.
      */
     trailing?: ReactNode | undefined;
+    /**
+     * Every option takes an equal share of the row, and the row fills the
+     * width it is given. Two settings drawn one above the other (Mode over
+     * Density) then draw one box, whatever their options say: a row sized to
+     * its own options draws a glyph row and a letter row at two widths, which
+     * reads as two kinds of control. Pill rows only.
+     */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 /**
@@ -115,5 +123,5 @@ export type SegmentedControlProps<T extends string = string> = SegmentedShared<T
  * look like two different controls depending on which component a screen
  * reached for.
  */
-export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, layout, trailing, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, layout, trailing, fill, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export {};

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-UAQIUSSK.js';
-export { SegmentedControl } from '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-VYY56AMX.js';
+export { SegmentedControl } from '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SegmentedControl-76HODRBT.css → SegmentedControl-PKBLJVSA.css}

@@ -158,3 +158,21 @@
 .crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
   color: var(--color-brand-accent-ink);
 }
+
+/*
+ * EQUAL SHARES. The row fills the width it is given and every option takes
+ * an equal column of it, so two settings stacked in one panel draw one box.
+ * Two classes, for the reason the card row gives: the pill's own rules size
+ * the row to its content.
+ */
+.crewlet-tabs.crewlet-segmented--fill {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  width: 100%;
+}
+
+.crewlet-segmented--fill .crewlet-segmented__option {
+  justify-content: center;
+  min-width: 0;
+}

package/dist/Select/Select.d.ts

@@ -42,6 +42,19 @@ export interface SelectOption {
     label: ReactNode;
     /** A second line under the label: a handle, a path, what the choice means. */
     description?: ReactNode;
+    /**
+     * Drawn before the label, in the list and on the trigger while the option is
+     * the one chosen: a swatch, an avatar, a glyph. Decorative, so it is hidden
+     * from assistive technology: the label carries the words. Listbox mode only;
+     * a native option draws text alone.
+     */
+    leading?: ReactNode;
+    /**
+     * A quieter word on the label's own line, at the row's end: a tag, a count,
+     * the one fact that tells two options apart at a glance. Read with the
+     * label. Listbox mode only.
+     */
+    hint?: ReactNode;
     disabled?: boolean;
     /** Options sharing a group are listed under its name, in first-seen order. */
     group?: string;
@@ -126,6 +139,15 @@ export interface SelectProps extends NativePassthrough {
     renderMultiLabel?: (selected: SelectOption[]) => ReactNode;
     /** The line shown when a search matches nothing. */
     emptyMessage?: string;
+    /**
+     * Told where the highlight COMES TO REST while the list is open, and `null`
+     * when it closes or the pointer leaves it: at once for a key, and once the
+     * pointer has rested on a row for `HIGHLIGHT_REST_MS`. What a list that
+     * previews its options listens to, so a pointer crossing the list does not
+     * preview every row it passed. Told the chosen row as the list opens.
+     * Listbox mode only.
+     */
+    onHighlight?: ((option: SelectOption | null) => void) | undefined;
 }
 /**
  * A picker over a known set of values.

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-SEFMO2EV.js';
-import '../chunk-6MU7HNB4.js';
+export { Select } from '../chunk-XFE5W2I4.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-4ANVLHUY.css → Select-XMZ44RWY.css}

@@ -297,6 +297,30 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/*
+ * WHAT AN OPTION DRAWS BEFORE ITS LABEL (a swatch, an avatar, a glyph),
+ * centred on the label's first line rather than on the row, so a row with a
+ * second line keeps its mark beside the words it belongs to. The same slot on
+ * the trigger, while that option is the one chosen, sits on the value's line.
+ */
+.crewlet-select__option-leading,
+.crewlet-select__leading {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+.crewlet-select__option-leading {
+  min-height: calc(var(--font-line-height-normal) * 1em);
+}
+
+/* A hint ends the row's FIRST line, on the label's baseline, rather than
+   sitting on the row's top edge at its own smaller size. */
+.crewlet-select__option:has(> .crewlet-listbox__hint) .crewlet-select__option-body,
+.crewlet-select__option > .crewlet-listbox__hint {
+  align-self: baseline;
+}
+
 /*
  * ONE LINE, WHICH IS WHAT THE ELLIPSIS BELOW WAS ALWAYS FOR. `overflow:
  * hidden` clips what leaves the box and `text-overflow` replaces what a LINE

package/dist/SidebarNav/index.js

@@ -1,3 +1,4 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-IVFJD7WY.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-UCCC7YVZ.js';
+import '../chunk-FYTIJM2T.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SidebarNav-X5NLZNWA.css → SidebarNav-KF66MLOM.css}

@@ -263,26 +263,11 @@
 
 /*
  * A PROJECT'S KEY, as a chip in the glyph's place: the prefix every item in
- * the project is filed under, in mono so ENG and PROD line up by letter. It
- * is the raised rung inside the plain hairline, in the secondary ink, which
- * the palette suite measures on every ground a row can have; on the reader's
- * own row, which is raised too, the hairline is what draws it.
+ * the project is filed under, in mono so ENG and PROD line up by letter. The
+ * chip is the kit's `KeyChip` (KeyChip.css); the suite below measures its ink
+ * on every ground a row can have, and on the reader's own row, which is raised
+ * too, its hairline is what draws it.
  */
-.crewlet-nav-item__lead {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  padding: 0 calc(var(--spacing-1) + 1px);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-xs);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-normal);
-  line-height: var(--font-line-height-body);
-}
 
 /*
  * THE COUNT: how many of something the destination holds, as a quiet figure

package/dist/Switcher/Switcher.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Moving a page to another subject of the same kind: one project for another,
+ * or for all of them.
+ *
+ * # One panel, three places
+ *
+ * ANCHORED under its button where the page names its subject, which is a
+ * breadcrumb's heading (`Breadcrumb`'s `current`): the reader changes the
+ * subject where the subject is named. CENTRED over the page when it is opened
+ * by a key from a page with no such button, and nothing behind it moves until
+ * a row is chosen. A SHEET from the bottom edge below the phone breakpoint,
+ * whichever of the two it would otherwise be, because a thumb reaches the
+ * bottom of a phone and a panel hung from a heading at the top of one leaves
+ * no room for the keyboard.
+ *
+ * # It is a combobox in a dialog
+ *
+ * Focus stays in the search field and the arrows move a highlight through the
+ * rows, which the field names with `aria-activedescendant`, so a screen reader
+ * hears each row as it is reached. The rows are options in ONE listbox: the
+ * pinned row, the rows a message offers, the groups, and the footer's actions,
+ * which sit in their own band below the scrolling list and are owned by the
+ * listbox (`aria-owns`) so the arrows walk into them without a second list.
+ *
+ * # Every row that goes somewhere is a link
+ *
+ * A row with an `href` is an anchor, so a middle click and a Command or Control
+ * click open it in a new tab as every link does, and Command or Control with
+ * Enter does the same from the keyboard. The panel stays open for all three:
+ * the reader asked for another tab, not to leave this one.
+ *
+ * # A held row stays, with its reason
+ *
+ * A row the reader cannot take right now (New project, for a viewer without
+ * the credential) is drawn with the reason at its end and passed over by the
+ * arrows. A row that vanished would be one the reader could not know exists.
+ *
+ * # Leaving it
+ *
+ * Escape closes it and puts focus back on its button. Tab from the anchored
+ * panel closes it and carries on to whatever follows the button, which is
+ * what Tab from the button would have reached; a centred panel or a sheet is a
+ * modal surface and keeps Tab inside. Taking a row puts focus back on the
+ * button, which is the page's heading, so the reader stays on the name of the
+ * place they just moved to.
+ *
+ * IT KNOWS NOTHING ABOUT PROJECTS. The caller searches, ranks and groups, and
+ * hands over rows and the words around them; this owns the surface, the keys,
+ * and how a screen reader hears it.
+ */
+import { type ReactNode } from 'react';
+/** Where the panel opens. Derived, never asked for: see the component doc. */
+export type SwitcherPlacement = 'anchored' | 'centered' | 'sheet';
+export interface SwitcherOption {
+    /** Stable across a re-query: it keys the row and names its option element. */
+    id: string;
+    /** The row's words. Plain text, so a search's letters can be drawn bold in it. */
+    label: string;
+    /** A project's key, drawn as a `KeyChip` in the lead column. */
+    keyChip?: string | undefined;
+    /** A glyph in the lead column, for a row that is not a project. Decorative. */
+    icon?: ReactNode;
+    /** A short figure at the row's end, in the quiet ink: a project's open count. */
+    meta?: ReactNode;
+    /**
+     * What a screen reader calls the row where its words alone do not say it:
+     * "Product and Engineering, FAIR, 4 open" rather than a name followed by a
+     * bare figure.
+     */
+    accessibleLabel?: string | undefined;
+    /**
+     * Where the row goes. A row with one is a link: a middle click, a Command or
+     * Control click, and Command or Control with Enter open it in a new tab.
+     */
+    href?: string | undefined;
+    /** The subject the page is on now: outlined in the accent, and `aria-current="page"`. */
+    current?: boolean | undefined;
+    /** Why the row cannot be taken right now. Drawn at its end; the arrows pass over it. */
+    held?: string | undefined;
+    /** Taking the row. Without one, a row with an `href` follows it. */
+    onSelect?: (() => void) | undefined;
+    /**
+     * Taking the row leaves the panel open: an action on the list itself, such
+     * as asking for it again after it did not load, where closing would take
+     * the answer away from the reader who asked for it.
+     */
+    keepsOpen?: boolean | undefined;
+}
+export interface SwitcherGroup {
+    id: string;
+    /** The heading over the group, and the name a screen reader gives it. */
+    label: string;
+    /** A figure at the heading's end: how many rows the group holds. */
+    count?: number | undefined;
+    options: SwitcherOption[];
+}
+/**
+ * A state the list is in, said in the panel: nothing matches, nothing loaded,
+ * nothing exists yet. Its actions are rows, where the arrows reach them.
+ */
+export interface SwitcherMessage {
+    title: string;
+    body?: string | undefined;
+    actions?: SwitcherOption[] | undefined;
+}
+/** The button the panel opens from, drawn as the page's own name. */
+export interface SwitcherTrigger {
+    /** The subject's name. */
+    label: string;
+    /** Its key, drawn as a `KeyChip` before the name. */
+    keyChip?: string | undefined;
+    /** Drawn after the name: a `Tag` saying the subject is archived. */
+    tag?: ReactNode;
+    /** The name in the mono face: an identifier still waiting for its name. */
+    mono?: boolean | undefined;
+    /** The tooltip: what the button does and the key that does it from anywhere. */
+    title?: string | undefined;
+}
+export interface SwitcherProps {
+    /** Names the panel, "Switch project"; a sheet draws it as its title. */
+    label: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The button the panel hangs from, drawn where the switcher is rendered.
+     * Without one the panel opens centred over the page.
+     */
+    trigger?: SwitcherTrigger | undefined;
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** The field's placeholder, and its name: "Find a project". */
+    placeholder?: string | undefined;
+    /** Names the list of rows: "Projects". */
+    listLabel?: string | undefined;
+    /** The row that is always first and never matched: "All projects". */
+    pinned?: SwitcherOption | undefined;
+    /** A line about the list itself, under the pinned row: "200 of 340 listed." */
+    note?: string | undefined;
+    message?: SwitcherMessage | undefined;
+    groups?: SwitcherGroup[] | undefined;
+    /** Actions in a band under the list that does not scroll: "Browse all projects". */
+    footer?: SwitcherOption[] | undefined;
+    /** Placeholder rows in place of the groups, while the rows are on their way. */
+    loading?: boolean | undefined;
+    /** What a screen reader is told while loading: "Loading projects". */
+    loadingLabel?: string | undefined;
+    /** Said politely whenever it changes: "3 projects". */
+    announcement?: string | undefined;
+    className?: string | undefined;
+}
+export declare function Switcher({ label, open, onOpenChange, trigger, className, ...panel }: SwitcherProps): import("react").JSX.Element;

package/dist/Switcher/index.d.ts

@@ -0,0 +1,3 @@
+import './Switcher.css';
+export { Switcher } from './Switcher.js';
+export type { SwitcherGroup, SwitcherMessage, SwitcherOption, SwitcherPlacement, SwitcherProps, SwitcherTrigger, } from './Switcher.js';

package/dist/Switcher/index.js

@@ -0,0 +1,16 @@
+export { Switcher } from '../chunk-S3IENQ3E.js';
+import '../chunk-W5J7R5EB.js';
+import '../chunk-CF6DTETT.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-FYTIJM2T.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-IG75YMUN.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-O2ZDZZS7.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';