@crewlethq/ui 0.55.0 → 0.56.0

package/dist/Stepper/StepList.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Where one step of a request stands. Unlike a `Stepper`'s position against
+ * one current step, every step carries its own state, because the steps of a
+ * request finish, fail or are refused on their own: `running` while it works,
+ * `done`, `failed` (the system could not do it), `refused` (the person's own
+ * access does not allow it), `stopped` (the person stopped the request before
+ * it finished) and `waiting` (it waits on the person's approval).
+ */
+export type StepState = 'running' | 'done' | 'failed' | 'refused' | 'stopped' | 'waiting';
+export declare const STEP_STATES: readonly ["running", "done", "failed", "refused", "stopped", "waiting"];
+/** The words each state is said with, after the step's own words: "Read token spend by agent, Done". */
+export type StepStateLabels = Record<StepState, string>;
+export declare const STEP_STATE_LABELS: StepStateLabels;
+export interface StepStateMarkProps {
+    state: StepState;
+    className?: string | undefined;
+}
+/**
+ * A state's mark in its 16px box: the 14px glyph, or the spinner at the same
+ * size while it runs, so nothing moves when the ring becomes a check. Running
+ * takes the secondary ink, done the success ink, failed the danger ink,
+ * waiting the warning ink, and refused and stopped the tertiary ink. One
+ * mark for a request's steps and for the request's own state (`RunChip`),
+ * which is what makes them one column.
+ */
+export declare function StepStateMark({ state, className }: StepStateMarkProps): import("react").JSX.Element;
+/** One step of a request. */
+export interface StepListStep {
+    /** What tells two steps apart, unique within the list. */
+    id: string;
+    /** What the step does, in plain words: "Read token spend by agent". */
+    label: ReactNode;
+    state: StepState;
+    /** How long it took, already formatted: "0.4s". Drawn in the mono face at the end of the label's line. */
+    duration?: string | undefined;
+    /**
+     * What the step asked for, in the mono face under the label: the tool and
+     * the request it made (`get_spend · GET /tokens/breakdown?group=seat`). A
+     * string breaks only at a space or after `/`, `?` or `&`, never inside a
+     * name such as `sign-in`, and wraps inside a piece only when that piece is
+     * wider than the line. A node is drawn as given.
+     */
+    detail?: ReactNode;
+}
+export interface StepListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    steps: readonly StepListStep[];
+    /** Names the list for a screen reader: "Steps". REQUIRED, for `Stepper`'s reason. */
+    label: string;
+    /** A line above the steps, such as "1 of 2 done". Left out, none is drawn. */
+    summary?: ReactNode;
+    /** The words each state is said with. */
+    labels?: Partial<StepStateLabels> | undefined;
+}
+/** A request's detail, cut into the pieces a line may break between. */
+export declare function stepDetailPieces(text: string): string[];
+/**
+ * The steps a request took, each with its own state, its duration and what it
+ * asked for: the list a run chip opens (`RunChip`).
+ *
+ * ONE STATE COLUMN. Every step's mark sits in the same 16px box, as tall as
+ * the label's first line, so the mark and the duration stay on that line
+ * however far the detail under it wraps, and the request's own mark in the
+ * chip above stands in the same column.
+ *
+ * AN ORDERED LIST, because the order is what happened. Each state is also
+ * said in words after the step's label, because the mark is a picture of it.
+ *
+ * ON THE INSET GROUND, with no edge: it is a well inside the thread rather
+ * than a card of its own.
+ */
+export declare function StepList({ steps, label, summary, labels: overrides, className, ...rest }: StepListProps): import("react").JSX.Element;

package/dist/Stepper/index.d.ts

@@ -1,3 +1,6 @@
 import './Stepper.css';
+import './StepList.css';
 export { Stepper } from './Stepper.js';
 export type { StepperOrientation, StepperProps, StepperStatus, StepperStep, StepperTone } from './Stepper.js';
+export { STEP_STATE_LABELS, STEP_STATES, StepList, StepStateMark, stepDetailPieces } from './StepList.js';
+export type { StepListProps, StepListStep, StepState, StepStateLabels, StepStateMarkProps } from './StepList.js';

package/dist/Stepper/index.js

@@ -1,4 +1,5 @@
-export { Stepper } from '../chunk-LDGQIDIZ.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-CGT4R7LW.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SuggestionRow/SuggestionRow.d.ts

@@ -0,0 +1,45 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export interface SuggestionRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'children'> {
+    /** The intent's glyph, at 14px in the tertiary ink: `coins` for spend, `pause` for pausing an agent. */
+    icon: ReactNode;
+    /** The question or the start of a request: "What are my agents doing now?", "Pause an agent…". */
+    children: ReactNode;
+    /** One fact under the words: "Agent CTO on ENG-133, Agent PM on PM-37". */
+    detail?: ReactNode;
+    /** A count at the row's end, as a `Tag`: how many are waiting. */
+    count?: ReactNode;
+    /** Draws a chevron at the row's end, for a row that opens something (a list of what is waiting). */
+    chevron?: boolean | undefined;
+    /**
+     * The row starts a request rather than asking a question: it fills the
+     * message box with its words for the person to finish, and sends nothing.
+     * Said to assistive technology after its words (`fillsLabel`), since the
+     * ellipsis that shows it is easy to miss.
+     */
+    fills?: boolean | undefined;
+    /** Said after a filling row's words. ", fills the message box" by default. */
+    fillsLabel?: string | undefined;
+    onSelect: () => void;
+}
+/**
+ * A suggested question or request, as a row: the intent's glyph, the words,
+ * an optional fact under them, and an optional count and chevron at the end.
+ *
+ * A ROW, NOT A CHIP. It is the list row's grammar (the medium row height, a
+ * spacing step by a step and a half, the inset focus ring), so a column of
+ * suggestions reads as a list a person scans, and the same row stands plain
+ * on a page or divided inside a card (`SuggestionList divided`).
+ */
+export declare function SuggestionRow({ icon, children, detail, count, chevron, fills, fillsLabel, onSelect, className, type, ...rest }: SuggestionRowProps): import("react").JSX.Element;
+export interface SuggestionListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Draws the rows inside a card, divided by hairlines, for the block that
+     * leads (what needs the person); plain rows have no box, for the block that
+     * is optional. One hairline for the urgent block, none for the rest.
+     */
+    divided?: boolean | undefined;
+    /** The `SuggestionRow`s. Each is put in its own list item. */
+    children: ReactNode;
+}
+/** A column of suggestions: a list, each row in its own item, plain or divided in a card. */
+export declare function SuggestionList({ divided, className, children, ...rest }: SuggestionListProps): import("react").JSX.Element;

package/dist/SuggestionRow/index.d.ts

@@ -0,0 +1,3 @@
+import './SuggestionRow.css';
+export { SuggestionList, SuggestionRow } from './SuggestionRow.js';
+export type { SuggestionListProps, SuggestionRowProps } from './SuggestionRow.js';

package/dist/SuggestionRow/index.js

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

package/dist/SuggestionRow-OKBGNHSS.css

@@ -0,0 +1,102 @@
+/*
+ * A suggestion, in the list row's grammar: the medium row height, a spacing
+ * step by a step and a half, the hover tint, and the inset focus ring that a
+ * row inside a clipped card can still show.
+ */
+.crewlet-suggestion-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-suggestion-list--divided {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-suggestion-list--divided > .crewlet-suggestion-list__item + .crewlet-suggestion-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-suggestion-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-suggestion-list--divided .crewlet-suggestion-row {
+  border-radius: 0;
+}
+
+.crewlet-suggestion-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-suggestion-row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-suggestion-row:disabled {
+  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row:disabled:hover {
+  background: none;
+}
+
+.crewlet-suggestion-row__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row__icon .crewlet-glyph {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+}
+
+.crewlet-suggestion-row__words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-suggestion-row__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row__trail {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-suggestion-row {
+    transition: none;
+  }
+}

package/dist/Switcher/index.js

@@ -1,18 +1,19 @@
-export { Switcher } from '../chunk-MFXN46NN.js';
-import '../chunk-NWGGH2LN.js';
+export { Switcher } from '../chunk-67F2AM4R.js';
+import '../chunk-QZ4B72FP.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-TEUQWOWZ.js';
-import '../chunk-RTPQDNW3.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Table/Table.d.ts

@@ -22,10 +22,31 @@ export interface TableActionButton {
     label: ReactNode;
     onClick: () => void;
 }
+/** Which edge a column's cells stand against: `start` for words, `end` for figures. */
+export type TableColumnAlign = 'start' | 'end';
 export interface TableProps {
     headers: ReactNode[];
     /** One array per row, in the header's own order. Cells may be any node. */
     data: ReactNode[][];
+    /**
+     * Each column's edge, in the header's order: `end` for a column of figures,
+     * so the numbers and their heading line up on the right. Left out, every
+     * column starts.
+     */
+    align?: readonly TableColumnAlign[] | undefined;
+    /**
+     * A last row that sums the rows above it ("Total", "7,840,000", "100%"),
+     * fenced from them by a rule and set at medium weight. Its first cell heads
+     * the row, so a screen reader hears "Total" with each figure in it.
+     */
+    footer?: readonly ReactNode[] | undefined;
+    /**
+     * Draws the table's own frame (the edge, the corner and the panel ground).
+     * `false` for a table that fills a card, which already has an edge: a card
+     * never holds a second bordered box. Its outer cells then take the card's
+     * own inset.
+     */
+    framed?: boolean | undefined;
     /**
      * What the table is about, rendered as its `<caption>`.
      *
@@ -36,7 +57,7 @@ export interface TableProps {
     caption?: ReactNode;
     captionHidden?: boolean;
     emptyMessage?: ReactNode;
-    actionButton?: TableActionButton;
+    actionButton?: TableActionButton | undefined;
     /**
      * How tall the rows may get before they scroll, as a CSS length.
      *
@@ -48,4 +69,4 @@ export interface TableProps {
     maxHeight?: string;
     className?: string;
 }
-export declare const Table: ({ headers, data, caption, captionHidden, emptyMessage, actionButton, maxHeight, className, }: TableProps) => import("react").JSX.Element;
+export declare const Table: ({ headers, data, caption, captionHidden, emptyMessage, actionButton, maxHeight, align, footer, framed, className, }: TableProps) => import("react").JSX.Element;

package/dist/Table/index.d.ts

@@ -1,3 +1,3 @@
 import './Table.css';
 export { Table } from './Table.js';
-export type { TableProps, TableActionButton } from './Table.js';
+export type { TableActionButton, TableColumnAlign, TableProps } from './Table.js';

package/dist/Table/index.js

@@ -1,3 +1,3 @@
-export { Table } from '../chunk-V2N3BMOT.js';
+export { Table } from '../chunk-45KMH3E3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Table-TGCS4C3F.css → Table-RUYMMWXT.css}

@@ -118,6 +118,55 @@
  * a control.
  */
 
+/* A column of figures stands against the end, its heading over its numbers. */
+.crewlet-table__table .crewlet-table__cell--end {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * THE TOTAL ROW, fenced from the rows it sums by the same hairline and set at
+ * medium weight. Its first cell heads the row, so it is a th and is reset to
+ * the body's register rather than the header's micro-label.
+ */
+.crewlet-table__table tfoot th,
+.crewlet-table__table tfoot td {
+  position: static;
+  height: var(--size-row-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  border-bottom: none;
+  background: none;
+  font-size: inherit;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+  color: var(--color-text-primary);
+  vertical-align: middle;
+}
+
+/*
+ * IN A CARD, the card is the frame: no edge, corner or ground of the table's
+ * own, and the outer cells take the card's 16px inset so every row lines up
+ * with the card's title.
+ */
+.crewlet-table--flush {
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.crewlet-table--flush .crewlet-table__table th:first-child,
+.crewlet-table--flush .crewlet-table__table td:first-child {
+  padding-left: var(--spacing-4);
+}
+
+.crewlet-table--flush .crewlet-table__table th:last-child,
+.crewlet-table--flush .crewlet-table__table td:last-child {
+  padding-right: var(--spacing-4);
+}
+
 .crewlet-table__empty {
   padding: var(--spacing-7) var(--spacing-3);
   text-align: center;

package/dist/TableCells/index.js

@@ -1,8 +1,8 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-3EYSYEXP.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-3CZ7XAVY.js';
+import '../chunk-KS7YIJ4S.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/Tabs/index.js

@@ -1,13 +1,14 @@
-export { TabPanel, Tabs, tabId } from '../chunk-FS4IH7VB.js';
+export { TabPanel, Tabs, tabId } from '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-BHHIIK3M.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-IVAR7NRW.js';
-import '../chunk-KYIAFNU7.js';
+export { TagsInput } from '../chunk-JS2TRHBF.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeGallery/index.js

@@ -1,7 +1,7 @@
-export { ThemeGallery } from '../chunk-UTESMBPL.js';
+export { ThemeGallery } from '../chunk-ESUZ27TS.js';
 import '../chunk-MNFU2RNT.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/ThemeSwitcher/index.js

@@ -1,18 +1,19 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-TQ3C3Q7V.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-S5C64PTT.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-CNGHOTHV.js';
-import '../chunk-FS4IH7VB.js';
+import '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-BHHIIK3M.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeToggle/index.js

@@ -1,6 +1,6 @@
-export { ThemeToggle } from '../chunk-PM3JVNRY.js';
+export { ThemeToggle } from '../chunk-N3ISZVLK.js';
 import '../chunk-Z24ZUSTX.js';
 import '../chunk-ZXXDZJQN.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeRangePicker/TimeRangePicker.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The windows a screen offers, as one row of choices, and a window of the
+ * reader's own behind Custom.
+ *
+ * # Beside `TimeWindowPicker`, not instead of it
+ *
+ * Both choose a window of time; they are two shapes of that choice, and the
+ * shape is the screen's. This one is INLINE: every window the screen can
+ * answer is a segment in the toolbar, one press away and always in view,
+ * which is right for a screen whose reader moves between "1h" and "7d" all
+ * day (a live strip, a spend chart, an event log). `TimeWindowPicker` is a
+ * TRIGGER that opens a panel of presets, a custom duration and a calendar,
+ * which is right where the window is set once and the toolbar has no room.
+ *
+ * Their values differ for the same reason: this one never interprets a
+ * window. The screen's own vocabulary is its options (`1h`, `today`, `7d`,
+ * whatever the screen calls them), and a custom window is handed back as the
+ * two strings the reader typed, for the screen to read on its own clock: an
+ * operator's company day starts at midnight in the company's zone, which no
+ * shared value model can know. `TimeWindowPicker` resolves its own value on
+ * the reader's clock or UTC.
+ *
+ * # What it guarantees
+ *
+ * The options are drawn in the order given, so two screens offering
+ * overlapping sets read left to right the same way. The custom window's
+ * tooltip carries the chosen interval rather than its label, since two
+ * timestamps do not fit in a segment and a segment whose width changed with
+ * its value would reflow the toolbar every time. The dialog is prefilled with
+ * the window on screen, because a reader opening it almost always wants to
+ * move one edge. Each way the two fields can be wrong is its own sentence,
+ * and Apply is the form's submit button, so Enter in either field applies.
+ */
+/** The value that stands for a window of the reader's own. An option may not use it. */
+export declare const TIME_RANGE_CUSTOM = "custom";
+export type TimeRangeCustomValue = typeof TIME_RANGE_CUSTOM;
+/** One window the screen offers. */
+export interface TimeRangeOption<V extends string> {
+    /** The screen's own name for it: `1h`, `today`, `7d`. */
+    value: V;
+    /** What the segment says: "1h", "Today". */
+    label: string;
+    /** What it means, as its tooltip: "The last hour". */
+    title?: string | undefined;
+}
+/**
+ * How a custom window is named.
+ *
+ * - `instants`: two moments to the minute, `YYYY-MM-DDTHH:MM`; the end comes
+ *   after the start.
+ * - `days`: two whole days, `YYYY-MM-DD`, both inclusive; the last is on or
+ *   after the first. For a screen whose answer has no unit smaller than a
+ *   day, where minutes would offer a precision the answer cannot have.
+ */
+export type TimeRangeCustomMode = 'instants' | 'days';
+export interface TimeRangeCustom {
+    mode: TimeRangeCustomMode;
+    /**
+     * The Custom segment's tooltip: the window chosen, while one is ("Apr 3 to
+     * Apr 9"), or what pressing it does.
+     */
+    title: string;
+    /** The first field's value when the dialog opens: the start of the window on screen. */
+    start: string;
+    /** The second field's: its end. */
+    end: string;
+    /**
+     * The sentence under the first field, which both fields are measured in:
+     * "In your time zone.", "Company days, in Europe/Berlin."
+     */
+    helper?: string | undefined;
+    /**
+     * A check of the screen's own, run once both fields are well formed and in
+     * order: the window as the screen's clock reads it. A sentence refuses it;
+     * nothing (or an empty string) accepts it.
+     */
+    validate?: ((start: string, end: string) => string | undefined) | undefined;
+    /** The two fields, as typed, once the window is accepted. */
+    onApply: (start: string, end: string) => void;
+}
+/** Every string the picker renders on its own. */
+export interface TimeRangePickerLabels {
+    custom: string;
+    dialogTitle: string;
+    start: string;
+    end: string;
+    firstDay: string;
+    lastDay: string;
+    cancel: string;
+    apply: string;
+    startNotInstant: string;
+    endNotInstant: string;
+    endNotAfterStart: string;
+    firstNotDay: string;
+    lastNotDay: string;
+    lastBeforeFirst: string;
+}
+export declare const TIME_RANGE_PICKER_LABELS: TimeRangePickerLabels;
+export interface TimeRangePickerProps<V extends string> {
+    /** The windows this screen can answer, in the order a reader reads them. */
+    options: readonly TimeRangeOption<V>[];
+    /** The window on screen: one of the options, or `TIME_RANGE_CUSTOM` for a window of the reader's own. */
+    value: V | TimeRangeCustomValue;
+    /** One of the options was chosen. */
+    onChange: (value: V) => void;
+    /** Offers a window of the reader's own, behind a Custom segment. */
+    custom?: TimeRangeCustom | undefined;
+    /** Names the group. */
+    label?: string | undefined;
+    labels?: Partial<TimeRangePickerLabels> | undefined;
+    className?: string | undefined;
+}
+/** A field's value as a sortable key, or null where it is not the shape the mode asks for. */
+export declare function timeRangeFieldKey(value: string, mode: TimeRangeCustomMode): string | null;
+/**
+ * Why a custom window is refused, or an empty string where it is accepted.
+ * Each way the fields can be wrong is its own sentence: "Invalid" over a form
+ * of two fields tells a reader to check both.
+ */
+export declare function timeRangeProblem(start: string, end: string, mode: TimeRangeCustomMode, labels?: TimeRangePickerLabels, validate?: (start: string, end: string) => string | undefined): string;
+export declare function TimeRangePicker<V extends string>({ options, value, onChange, custom, label, labels, className, }: TimeRangePickerProps<V>): import("react").JSX.Element;

package/dist/TimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem, } from './TimeRangePicker.js';
+export type { TimeRangeCustom, TimeRangeCustomMode, TimeRangeCustomValue, TimeRangeOption, TimeRangePickerLabels, TimeRangePickerProps, } from './TimeRangePicker.js';

package/dist/TimeRangePicker/index.js

@@ -0,0 +1,23 @@
+export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-QYEOGGVS.js';
+import '../chunk-QZ4B72FP.js';
+import '../chunk-BPCY7ZID.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
+import '../chunk-FXQLNETQ.js';
+import '../chunk-XCUUI7E7.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2BQYODY3.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';