@crewlethq/ui 0.2.0 → 0.4.0

package/dist/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,77 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface CommandPaletteItem {
+    /** Stable across a re-query: it keys the row and names its option element. */
+    id: string;
+    /** A glyph, drawn beside the label. Decorative: the label carries the words. */
+    icon?: ReactNode;
+    label: ReactNode;
+    /** What the row is, at its end: a path, a kind, a state. */
+    hint?: ReactNode;
+    onSelect: () => void;
+}
+export interface CommandPaletteGroup {
+    id: string;
+    /** The heading over the group, and the name a screen reader gives it. */
+    label: string;
+    items: CommandPaletteItem[];
+}
+/**
+ * Rest props reach the Modal's frame, which is what lets an application put
+ * its own chord on the surface (see the component doc).
+ *
+ * `role` and `onSubmit` are not among them: the surface is a dialog, and a
+ * palette announced as anything else is one a screen reader cannot get out of;
+ * a palette takes an answer from its list, not from a form submission. Nor are
+ * the three ARIA relationships, which the Modal decides: `label` names this
+ * surface and its field together.
+ */
+export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'onSubmit' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> {
+    open: boolean;
+    onClose: () => void;
+    /** Names the surface and its field. */
+    label?: string | undefined;
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** What is offered right now. The caller does the searching and the ranking. */
+    groups: CommandPaletteGroup[];
+    placeholder?: string | undefined;
+    /** The hints under the results, usually `Kbd` keycaps. */
+    footer?: ReactNode;
+    /** Said when the query matches nothing. Name the kind of nothing it is. */
+    emptyMessage?: string | undefined;
+    /** Names the result list itself. */
+    resultsLabel?: string | undefined;
+}
+/**
+ * One search surface for a whole product: screens, records, and any id pasted
+ * out of a log.
+ *
+ * IT KNOWS NOTHING ABOUT WHAT IT SEARCHES. The caller ranks and groups, and
+ * hands over rows; what this owns is the surface, the keyboard and the way a
+ * screen reader hears it. The alternative, a component that took a data source,
+ * would need one ranking rule per product and would still be wrong for the
+ * next one.
+ *
+ * IT IS A COMBOBOX. Focus stays in the field and the arrows move a highlight
+ * through the results, which the field names with `aria-activedescendant`, so a
+ * screen reader hears each result as it is reached. Results drawn as buttons
+ * instead put up to forty tab stops between the field and itself, and the
+ * highlight moved in silence.
+ *
+ * THE LIST IS THE SURFACE'S OWN BODY, not a popup above it (`popup: false`).
+ * Registered as a popup, the list would take Escape from the stack and take the
+ * veil's press on `pointerdown`, closing the palette before that press's click
+ * and letting the click land on whatever the veil was covering.
+ *
+ * A ROW OPENS ON ITS CLICK, not on the press. Nothing here closes on blur, so
+ * there is no reason to act early, and a surface gone on the press would leave
+ * the release to land on the screen beneath it. The press itself is still
+ * prevented, so it does not move focus off the field: a combobox that loses its
+ * input names no highlight, and typing reaches nothing.
+ *
+ * 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
+ * definition for.
+ */
+export declare function CommandPalette({ open, ...rest }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/CommandPalette/index.d.ts

@@ -0,0 +1,3 @@
+import './CommandPalette.css';
+export { CommandPalette } from './CommandPalette.js';
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteProps } from './CommandPalette.js';

package/dist/CommandPalette/index.js

@@ -0,0 +1,11 @@
+export { CommandPalette } from '../chunk-ESCO4XYW.js';
+import '../chunk-2EOKFKHX.js';
+import '../chunk-GTOUGQQK.js';
+import '../chunk-O6232G37.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette-CSJDUCQA.css

@@ -0,0 +1,115 @@
+/*
+ * The command palette: a field, a list, and a line of keyboard hints.
+ *
+ * It is a Modal with its body's padding dropped, so the three bands run edge to
+ * edge and the field reads as the surface rather than as a question on a form.
+ * The rows are the listbox register (`Listbox.css`), because a result here and
+ * a completion in a field are the same thing to a reader and the accent that
+ * marks the active row has to mean the same in both.
+ *
+ * THE TWO OVERRIDES BELOW NAME BOTH CLASSES ON PURPOSE. A single class would
+ * tie with the rule it is overriding (`.crewlet-modal--md`,
+ * `.crewlet-input--command`), and a tie is broken by the order the stylesheets
+ * happen to be concatenated in, which is alphabetical over filenames.
+ */
+
+.crewlet-modal.crewlet-palette {
+  /* Wider than a prompt and shorter than the window: a launcher is read in one
+     glance, and a list taller than this is a list nobody scans. */
+  --crewlet-modal-width: 620px;
+
+  max-height: min(60dvh, 520px);
+}
+
+/*
+ * THE BODY LAYS THE THREE BANDS OUT, and the RESULTS are what scrolls.
+ *
+ * A Modal's body is a block that scrolls its whole content, which is right for
+ * a dialog read top to bottom and wrong here: the field would ride up out of
+ * view as the arrows walked the list, and the list, sized to its own content,
+ * would never overflow, so the row the listbox brings into view by scrolling
+ * that element would have nowhere to go.
+ */
+.crewlet-palette .crewlet-modal__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/*
+ * The field, drawn as the surface's own top band: no box of its own, the full
+ * height of a large row, and the question asked at the reading size rather
+ * than at a control's. It is the first thing on the surface and the only thing
+ * with focus, so it is the surface's headline as much as its input.
+ */
+.crewlet-input.crewlet-palette__field {
+  flex-shrink: 0;
+  min-height: var(--size-row-lg);
+  padding-inline: var(--spacing-4);
+  border: none;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+}
+
+.crewlet-input.crewlet-palette__field .crewlet-input__control {
+  font-size: var(--font-size-md);
+}
+
+/*
+ * THE FOOT IS THE KEYBOARD'S OWN BAND, at the micro register rather than the
+ * modal footer's. A modal's foot carries buttons and is sized for them; this
+ * one carries a line of keycaps saying what the arrows, Enter and Escape do,
+ * and at a dialog's padding that line reads as an action row nobody can press.
+ *
+ * Both classes are named for the same reason the two rules below are: a single
+ * class ties with `.crewlet-modal__footer`, and a tie is broken by the order
+ * the stylesheets are concatenated in.
+ */
+.crewlet-palette .crewlet-modal__footer {
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-palette .crewlet-modal__footer-start {
+  gap: var(--spacing-3);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-palette__results {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+}
+
+/*
+ * The glyph takes the ROW'S colour rather than a quiet step of its own, so the
+ * row under the arrows turns accent in one piece. Pinned to the tertiary step
+ * it stayed grey inside the highlight, which read as a glyph that had failed
+ * to load.
+ */
+.crewlet-palette__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.crewlet-palette__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * An honest empty state: it says which kind of nothing this is, and the
+ * component takes the sentence from the caller for that reason.
+ */
+.crewlet-palette__empty {
+  margin: 0;
+  padding: var(--spacing-5) var(--spacing-4);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  text-align: center;
+}

package/dist/Container/Container.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Max content width. sm 720, md 960, lg 1200, xl 1440, and `2xl` the
+     * content-max token (1600), which is the widest a console pane goes before
+     * a table's rows stop being scannable across. `full` keeps the gutter and
+     * drops the measure, for a canvas or a wide grid.
+     */
+    size?: ContainerSize | undefined;
+}
+/**
+ * Container, the centered max-width wrapper that gives every page a
+ * consistent measure and horizontal gutter. Pair with Section for the
+ * vertical rhythm.
+ */
+export declare const Container: ({ size, className, children, ...rest }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Container/index.d.ts

@@ -0,0 +1,3 @@
+import './Container.css';
+export { Container } from './Container.js';
+export type { ContainerProps, ContainerSize } from './Container.js';

package/dist/Container/index.js

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

package/dist/Container-3TSKMGNI.css

@@ -0,0 +1,52 @@
+/*
+ * Container, the centred content measure. One max-width scale shared by every
+ * surface, so pages line up regardless of who composed them.
+ */
+
+.crewlet-container {
+  width: 100%;
+  margin-inline: auto;
+  /* The console's own gutter. A wider one leaves a table's first column
+     further from the window edge than the rail beside it is. */
+  padding-inline: var(--spacing-5);
+}
+
+.crewlet-container--sm {
+  max-width: 720px;
+}
+
+.crewlet-container--md {
+  max-width: 960px;
+}
+
+.crewlet-container--lg {
+  max-width: 1200px;
+}
+
+.crewlet-container--xl {
+  max-width: 1440px;
+}
+
+/*
+ * The console width. It reads the content-max token rather than restating the
+ * number, because the shell and this container have to agree about where a
+ * pane stops or a screen's own header sits at a different width from the
+ * screen under it.
+ */
+.crewlet-container--2xl {
+  max-width: var(--size-content-max);
+}
+
+/*
+ * No measure, and the gutter kept. A canvas, a wide grid or a table that
+ * genuinely wants the viewport still needs its content off the window edge.
+ */
+.crewlet-container--full {
+  max-width: none;
+}
+
+@media (max-width: 480px) {
+  .crewlet-container {
+    padding-inline: var(--spacing-3);
+  }
+}

package/dist/Copyable/CopyButton.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type ButtonSize, type ButtonVariant } from '../Button/index.js';
+import { type ClipboardState } from '../utils/useClipboard.js';
+/** What a copy control draws for each state. */
+export declare function copyGlyph(state: ClipboardState): ReactNode;
+export interface CopyStatusProps {
+    state: ClipboardState;
+    copiedMessage: string;
+    failedMessage: string;
+}
+/**
+ * What the copy did, said out loud.
+ *
+ * A SIBLING OF THE CONTROL, NEVER A CHILD. An accessible name is computed
+ * from an element's contents, so a live region inside the button named it
+ * "Copied copied to the clipboard", the status text becoming part of what the
+ * button claimed to be.
+ */
+export declare function CopyStatus({ state, copiedMessage, failedMessage }: CopyStatusProps): import("react/jsx-runtime").JSX.Element;
+export interface CopyButtonProps {
+    /**
+     * The text, or a THUNK that produces it.
+     *
+     * The thunk is not a convenience. On a live record the thing worth copying
+     * is assembled from everything on the screen, and a screen that pushes twice
+     * per second would serialize the whole record on every push for a button
+     * nobody has pressed. Resolved on the press, it costs nothing until it is
+     * asked for.
+     */
+    text: string | (() => string);
+    /** The label at rest. */
+    label?: string | undefined;
+    /** The label once the text is on the clipboard. */
+    copiedLabel?: string | undefined;
+    /** The label when the browser refused. */
+    failedLabel?: string | undefined;
+    /** Read out on success. */
+    copiedMessage?: string | undefined;
+    /** Read out on failure. */
+    failedMessage?: string | undefined;
+    size?: ButtonSize | undefined;
+    variant?: ButtonVariant | undefined;
+    title?: string | undefined;
+    /** How long `copiedLabel` stands before the control offers its action again. */
+    resetMs?: number | undefined;
+    /**
+     * How long `failedLabel` stands. Unset it is `resetMs`; `null` holds it
+     * until the next press. See [ClipboardOptions.failedResetMs] for why a
+     * refusal wants a clock of its own — and note the cost of `null`, which is
+     * that the control's accessible name stays "Copy failed" and so names a
+     * status rather than the action it still performs.
+     */
+    failedResetMs?: number | null | undefined;
+    className?: string | undefined;
+}
+/**
+ * Put text on the clipboard, and SAY WHETHER IT LANDED.
+ *
+ * The clipboard is invisible: a copy that reached no clipboard clicks exactly
+ * like one that did, so the label and the glyph are the only evidence a
+ * sighted reader gets and the status region is the only evidence anybody else
+ * gets. Both are part of the control, not decoration on it.
+ */
+export declare function CopyButton({ text, label, copiedLabel, failedLabel, copiedMessage, failedMessage, size, variant, title, resetMs, failedResetMs, className, }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Copyable/Copyable.d.ts

@@ -0,0 +1,42 @@
+export type CopyableVariant = 'chip' | 'inline' | 'block';
+export interface CopyableProps {
+    /** The value shown, and the text copied. */
+    value: string | number | null | undefined;
+    /** Shown instead of the value, when the value itself is not what to read. */
+    display?: string | undefined;
+    variant?: CopyableVariant | undefined;
+    monospace?: boolean | undefined;
+    truncate?: boolean | undefined;
+    truncateLength?: number | undefined;
+    /** Names the copy control. */
+    ariaLabel?: string | undefined;
+    /** The copy control's tooltip. */
+    title?: string | undefined;
+    /** Read out on success. */
+    copiedMessage?: string | undefined;
+    /** Read out on failure. */
+    failedMessage?: string | undefined;
+    /** How long the tick stands before the control settles back. */
+    resetMs?: number | undefined;
+    /**
+     * How long the refusal glyph stands. Unset it is `resetMs`; `null` holds it
+     * until the next press. See [ClipboardOptions.failedResetMs] for why a
+     * refusal wants a clock of its own.
+     */
+    failedResetMs?: number | null | undefined;
+    className?: string | undefined;
+}
+/**
+ * An identifier, with a control that copies it.
+ *
+ * ONE TAB STOP. The value used to be a `role="button"` span with its own
+ * `tabIndex` beside the button that did the same thing, so every id in a table
+ * was two stops on the way to the next row, and the first of them was a button
+ * that was not one. The value is text now, and the button is the only control.
+ *
+ * A REFUSAL IS REPORTED. The previous implementation awaited
+ * `document.execCommand` and reported success whatever it returned, so on the
+ * plain http origin anybody reads a remote dashboard at, the tick appeared and
+ * the clipboard was empty.
+ */
+export declare const Copyable: ({ value, display, variant, monospace, truncate, truncateLength, ariaLabel, title, copiedMessage, failedMessage, resetMs, failedResetMs, className, }: CopyableProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Copyable/index.d.ts

@@ -0,0 +1,5 @@
+import './Copyable.css';
+export { Copyable } from './Copyable.js';
+export type { CopyableProps, CopyableVariant } from './Copyable.js';
+export { CopyButton } from './CopyButton.js';
+export type { CopyButtonProps } from './CopyButton.js';

package/dist/Copyable/index.js

@@ -0,0 +1,6 @@
+export { CopyButton, Copyable } from '../chunk-3QRYCPXQ.js';
+import '../chunk-5VNUYO76.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Copyable-5PNRFOLS.css

@@ -0,0 +1,125 @@
+/*
+ * Copyable: a value and the one control that copies it.
+ *
+ * Three framings, and they differ only in how the value is drawn:
+ *
+ *   chip    A compact pill for a table cell, with head and tail truncation.
+ *   inline  The value inline in a detail row, no chip behind it.
+ *   block   A bordered panel for a full URL or a command.
+ *
+ * The control is an IconButton in every one of them, and it is the only tab
+ * stop: the value is text.
+ */
+
+.crewlet-copyable {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.crewlet-copyable__value {
+  font-family: var(--font-family-mono);
+  font-variant-ligatures: none;
+  letter-spacing: var(--font-letter-spacing-snug);
+  /* The ink every identifier chip in the system takes. A step quieter made a
+     value a reader is about to copy the faintest thing in its own row. */
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * The control is quiet until the row is reached, and it is REVEALED BY FOCUS
+ * as well as by hover: hidden from a keyboard reader, an opacity of 0 is a
+ * control that takes a tab stop and shows nothing.
+ */
+.crewlet-copyable__button {
+  flex: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-copyable:hover .crewlet-copyable__button,
+.crewlet-copyable__button:focus-visible,
+.crewlet-copyable.is-copied .crewlet-copyable__button,
+.crewlet-copyable.is-failed .crewlet-copyable__button {
+  opacity: 1;
+}
+
+.crewlet-copyable.is-copied .crewlet-copyable__button {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-copyable.is-failed .crewlet-copyable__button {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* ---- chip -------------------------------------------------------------- */
+
+.crewlet-copyable--chip .crewlet-copyable__value {
+  font-size: var(--font-size-2xs);
+  background: var(--color-surface-inset);
+  padding: 1px var(--spacing-1);
+  border-radius: var(--radius-xs);
+}
+
+/* ---- inline ------------------------------------------------------------ */
+
+.crewlet-copyable--inline .crewlet-copyable__value {
+  font-size: var(--font-size-xs);
+  background: transparent;
+  padding: 0;
+  color: var(--color-text-secondary);
+}
+
+/* ---- block ------------------------------------------------------------- */
+
+.crewlet-copyable--block {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  /* The bordered value surface, which is the one a code block and a field
+     take. The elevated step here lifted a one-line value off the card it sits
+     on further than the card lifts off the page. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-copyable--block .crewlet-copyable__value {
+  font-size: var(--font-size-compact);
+  color: var(--color-text-primary);
+  background: transparent;
+  padding: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  flex: 1;
+}
+
+/* A panel's control is always drawn: there is nothing else in the panel. */
+.crewlet-copyable--block .crewlet-copyable__button {
+  opacity: 1;
+}
+
+/*
+ * The mono face for any framing, for a value that is a command rather than an
+ * identifier. The value is already mono, so this is what a caller reaches for
+ * when `display` has replaced it with prose.
+ */
+.crewlet-copyable--monospace .crewlet-copyable__value {
+  font-family: var(--font-family-mono);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-copyable__button {
+    transition: none;
+  }
+}

package/dist/Count/Count.d.ts

@@ -0,0 +1,24 @@
+export interface CountProps {
+    /** How many. Rendered as it is given, so a caller decides its own formatting. */
+    value: number | string;
+    /**
+     * What is being counted, read after the number: "3 open incidents". Without
+     * one the number is read on its own, which is right beside a heading that
+     * already says what it counts.
+     */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * How many of something a panel, a tab or a heading is about.
+ *
+ * IT IS NEVER TINTED, and that is the whole rule. A count coloured by severity
+ * is a claim the number cannot support: three of something is not a warning,
+ * and a red 3 beside "Failures" says the same thing twice while a red 3 beside
+ * "Retries" says something nobody meant. It sits on the inset surface in the
+ * tertiary ink, in every context.
+ *
+ * Tabular figures, so a count that ticks up does not shift the heading beside
+ * it, and a minimum width so 1 and 10 draw the same pill.
+ */
+export declare function Count({ value, label, className }: CountProps): import("react/jsx-runtime").JSX.Element;

package/dist/Count/index.d.ts

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

package/dist/Count/index.js

@@ -0,0 +1,3 @@
+export { Count } from '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Count-ZVCJ6VPD.css

@@ -0,0 +1,20 @@
+/*
+ * The count pill. One neutral look, deliberately: see the component doc for
+ * why a count is never tinted.
+ */
+
+.crewlet-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  padding: 1px var(--spacing-2);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  /* A count that ticks up must not shift the heading beside it. */
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-normal);
+}

package/dist/DataTable/CopyableCell.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface CopyableCellProps {
+    value: string | number | null | undefined;
+    children?: ReactNode;
+    /** The button's accessible name. */
+    ariaLabel?: string;
+    /** What the status line says once the value is on the clipboard. */
+    copiedLabel?: string;
+    /** What it says when the clipboard refused. */
+    failedLabel?: string;
+}
+export declare const CopyableCell: ({ value, children, ariaLabel, copiedLabel, failedLabel, }: CopyableCellProps) => import("react/jsx-runtime").JSX.Element;