@crewlethq/ui 0.37.1 → 0.39.0

package/dist/CatalogTile-TGR2ZZVQ.css

@@ -0,0 +1,131 @@
+/*
+ * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
+ * fact and one action.
+ *
+ * ONE WELL FOR EVERY MARK. A vendor's mark is drawn in the vendor's colours,
+ * so the box it stands in is the one thing a catalogue can hold constant: the
+ * same size, the same raised ground and the same hairline for every tile,
+ * set up or not. A drained mark on a grey box read as a placeholder image
+ * (a white plate on grey is not a logo), so a tile not yet set up says so by
+ * its ground, never by its mark.
+ */
+
+.crewlet-catalog-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
+
+.crewlet-catalog-tile--quiet {
+  background: var(--color-surface-background);
+}
+
+.crewlet-catalog-tile__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+/* The name, and under it the state when there is one; centred on the mark
+   either way, so a tile with no state is not a tile with a hole in it. */
+.crewlet-catalog-tile__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__name {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-catalog-tile__status {
+  display: inline-flex;
+}
+
+.crewlet-catalog-tile__description {
+  flex: 1;
+  margin: 0;
+  /* Two lines reserved, so a tile saying what it is for and one saying what
+     is owed keep their feet on one line in a row. */
+  min-height: calc(2em * var(--font-line-height-body));
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-catalog-tile__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* A SMALL CONTROL'S HEIGHT OF CONTENT, under the rule and the padding: a
+     foot holding only a fact stands as tall as one holding a button, so the
+     rules of every foot in a row sit on one line. Measured on the content
+     box, since under border-box sizing the padding spent the floor and a
+     fact-only foot stood 8px shorter. */
+  box-sizing: content-box;
+  min-height: var(--size-control-sm);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-catalog-tile__meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-catalog-tile__action {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * ONE TILE A ROW RESERVES NOTHING. The two reserved lines exist to keep the
+ * feet of tiles side by side on one line; a grid folded to one track has no
+ * neighbours to line up with, and on a phone the reserve was a blank line in
+ * every short tile.
+ */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}

package/dist/CodeBlock/index.js

@@ -1,4 +1,4 @@
-export { CodeBlock } from '../chunk-GDDE4UM7.js';
+export { CodeBlock } from '../chunk-SEC2GR2V.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';

package/dist/{CodeBlock-GYNJ2HI6.css → CodeBlock-N5ETJF24.css}

@@ -16,6 +16,19 @@
   min-width: 0;
 }
 
+/*
+ * A BLOCK THAT IS A CARD'S CONTENT IS THAT CARD'S SURFACE. Placed straight in
+ * a card (with `padding="none"`), it gives up its own edge, corner and ground,
+ * so the card's head rule is the only line over the code and there is no box
+ * inside a box. In a padded body it stays a well, which is what tells code
+ * from the prose beside it.
+ */
+.crewlet-card > .crewlet-codeblock {
+  border: 0;
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
 .crewlet-codeblock__header {
   display: flex;
   align-items: center;

package/dist/CommandPalette/index.js

@@ -1,5 +1,5 @@
-export { CommandPalette } from '../chunk-A72JPXIV.js';
-import '../chunk-SVGARBDY.js';
+export { CommandPalette } from '../chunk-XGBUUQDU.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';

package/dist/DataTable/index.js

@@ -1,7 +1,7 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-A23KDROH.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-AXS6MBNH.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DataView/index.js

@@ -1,10 +1,10 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-MG3HTY6F.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-QRKT4XTT.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-A23KDROH.js';
 import '../chunk-UB6MLXUL.js';
+import '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';

package/dist/DatasetSource/DatasetSource.d.ts

@@ -26,7 +26,13 @@ export interface DatasetSourceLabels {
 export interface DatasetSourceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'onSelect'> {
     /** The dataset's title, which every figure drawn from it cites. */
     title: string;
-    kind: DatasetSourceKind;
+    /**
+     * Where the dataset reads from, drawn as a tag beside the title. Left out
+     * where every entry of a list reads from one place (a picker of the
+     * engine's own sources, grouped under headings of their own), since the
+     * same tag on every row is a column a reader learns to skip.
+     */
+    kind?: DatasetSourceKind | undefined;
     /** What the dataset reads, in the author's terms: "tracker.items, scope mine". */
     definition: ReactNode;
     /** How it is kept current, in words: "Live", "Every 2 min", "On change". */

package/dist/DatasetSource/index.js

@@ -1,5 +1,5 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HMLAWVG6.js';
-import '../chunk-GFV4LJHH.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HQJ24WPM.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/DescriptionList/DescriptionList.d.ts

@@ -12,6 +12,17 @@ export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
      * space after "Up" and stacks a list the panel had room to lay side by side.
      */
     fit?: boolean | undefined;
+    /**
+     * The term column's width, as a CSS track: `12rem`, or
+     * `minmax(120px, 14rem)`. For lists that have to line up with each other,
+     * stacked cards of settings on one page, where each list sizing the column
+     * to its own longest term starts its values somewhere else. The same track
+     * can be set once for a whole page as `--crewlet-description-list-term`,
+     * which every list under it inherits. Ignored with `fit`, whose column is
+     * its own longest term by definition, and under the narrow step, where a
+     * term stands over its detail.
+     */
+    termWidth?: string | undefined;
     /**
      * The pairs. Given as tuples so a caller can build them from a record
      * without inventing a key for each one; `DescriptionList.Item` children are
@@ -32,7 +43,7 @@ export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
  * Each pair is wrapped in a `div`, which HTML allows inside a `dl` and which
  * is what lets one pair be one grid row.
  */
-export declare function DescriptionList({ dense, fit, items, className, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export declare function DescriptionList({ dense, fit, termWidth, items, className, style, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
 export declare namespace DescriptionList {
     var Item: typeof DescriptionListItem;
 }

package/dist/DescriptionList/index.js

@@ -1,2 +1,2 @@
-export { DescriptionList, DescriptionListItem } from '../chunk-F2XSYBKH.js';
+export { DescriptionList, DescriptionListItem } from '../chunk-MFS6F2P7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DescriptionList-IXMRCSMK.css → DescriptionList-DEZISDLQ.css}

@@ -4,11 +4,18 @@
  * The term track is `minmax(120px, max-content)`: wide enough that short terms
  * line up with each other, and free to grow for a long one rather than
  * wrapping it into two lines beside a one-word value.
+ *
+ * ONE LIST'S TRACK IS ITS OWN, which is wrong for a page of them. Four cards
+ * of limits stacked on one page each sized the column to their own longest
+ * term, so their values started at four different places and the cards did
+ * not read as one table. `--crewlet-description-list-term` names the track
+ * instead, and it is inherited: set once on the page (or passed to each list
+ * as `termWidth`), every list under it shares one column.
  */
 
 .crewlet-description-list {
   display: grid;
-  grid-template-columns: minmax(120px, max-content) 1fr;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(120px, max-content)) 1fr;
   gap: var(--spacing-2) var(--spacing-4);
   margin: 0;
   font-size: var(--font-size-compact);

package/dist/Disclosure/index.js

@@ -1,4 +1,4 @@
-export { Disclosure } from '../chunk-MICH6QSJ.js';
+export { Disclosure } from '../chunk-OGXHZHRX.js';
 export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Disclosure-VKBJJIZ7.css → Disclosure-P4FH3C35.css}

@@ -115,9 +115,35 @@
   font-variant-ligatures: none;
 }
 
-/* A fact inside the button: quieter than the title it belongs to. */
+/*
+ * A fact inside the button: quieter than the title it belongs to, and the
+ * first thing to give up room when the row runs short.
+ *
+ * IT USED TO TAKE NONE. `flex: none` held a fact at its full width while the
+ * title, which may shrink, was the only thing that could, so a long fact (a
+ * log's replay mode, generation, range and size, beside a status badge in the
+ * actions) took the whole trigger: the title shrank to nothing, so a row no
+ * longer said which log it was, and the fact ran out of the button and under
+ * the badge beside it.
+ *
+ * A HUNDRED TO THE TITLE'S ONE, as a card's subtitle gives way to its title:
+ * two items that may shrink give up space in proportion to their widths, so
+ * at that ratio the fact absorbs effectively all of it, and ends in an
+ * ellipsis, before the title gives up a pixel. The fact is still the button's
+ * name in full; only its drawing is cut.
+ *
+ * NEVER TO NOTHING. The floor is one glyph wide, because a fact is often a
+ * mark (a failed call's glyph beside a tool's name), and a mark that shrank
+ * to nothing would say nothing at all. A long fact keeps an ellipsis there,
+ * which says a fact was cut. Once the fact is at its floor the title shrinks
+ * and ends in its own ellipsis.
+ */
 .crewlet-disclosure__meta {
-  flex: none;
+  flex: 0 100 auto;
+  min-width: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }

package/dist/LinkInterstitial/index.js

@@ -1,5 +1,5 @@
-export { LinkInterstitial, openExternal } from '../chunk-NRBAXRWE.js';
-import '../chunk-SVGARBDY.js';
+export { LinkInterstitial, openExternal } from '../chunk-N3TFYBN3.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';

package/dist/List/List.d.ts

@@ -9,6 +9,14 @@ export type ListVariant =
  | 'bulleted'
 /** A number per row: an order somebody follows. */
  | 'numbered'
+/**
+ * A number per row in a column of its own, with a hairline between rows:
+ * statements a reader counts and cites by number (a company's standing
+ * policies), each of which may run to several lines. The numbers are the
+ * list's own (an `ol`), drawn in tabular figures so a tenth row's number
+ * stands where the first one's does.
+ */
+ | 'numbered-divided'
 /**
  * A hairline between rows: a feed, a set of results, a conversation. THE
  * DEFAULT, because it is the list every screen in the product draws: rows a

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-DS2C73RJ.js';
+export { List, ListItem } from '../chunk-NZWX27J7.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-MYJIV6MP.css → List-YHLIZFK4.css}

@@ -120,6 +120,52 @@
   padding-inline: 0;
 }
 
+/*
+ * NUMBERED AND DIVIDED: the divided list's hairlines, with the number in a
+ * column of its own rather than in the margin, so a statement that runs to a
+ * second line wraps under its own first word and not under its number. The
+ * row grows with its text (no row height), at the body's leading, and the
+ * number stands on the first line's baseline.
+ *
+ * The number is the list's counter, drawn by the row. The `ol` already
+ * announces each item's position, so the drawn figure is given empty
+ * alternative text and is not read a second time.
+ */
+.crewlet-list--numbered-divided {
+  counter-reset: crewlet-list-item;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item {
+  counter-increment: crewlet-list-item;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item:last-child {
+  border-bottom: none;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row {
+  align-items: baseline;
+  min-height: 0;
+  /* At a card's own inset, since a card is where these stand: the numbers
+     line up under the card head's glyph rather than 4px left of it. */
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 0;
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row::before {
+  content: counter(crewlet-list-item);
+  content: counter(crewlet-list-item) / '';
+  flex: none;
+  min-width: 2ch;
+  text-align: end;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*

package/dist/ListInput/ListInput.d.ts

@@ -21,6 +21,14 @@ export interface ListInputProps {
     optional?: boolean | undefined;
     /** Draws the Enter keycap inside the new-item box, which is what adds one. */
     enterHint?: boolean | undefined;
+    /**
+     * Puts the focus in the new-item box when the list mounts, for a form
+     * opened to change THIS list ("Edit policies"): the reader lands where the
+     * next item is written rather than on the form's first field. It is taken
+     * during mount, so a dialog the list opens in keeps it rather than moving
+     * focus to its own first control. Named as `TagsInput`'s is.
+     */
+    focusOnMount?: boolean | undefined;
     /** The name of the control beside the legend that appends what the box holds. */
     addLabel?: ((itemName: string) => string) | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
@@ -67,4 +75,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, focusOnMount, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

@@ -1,4 +1,4 @@
-export { ListInput } from '../chunk-DOLATMGF.js';
+export { ListInput } from '../chunk-WYYCPV46.js';
 import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';

package/dist/Modal/index.js

@@ -1,4 +1,4 @@
-export { ConfirmModal, Modal } from '../chunk-SVGARBDY.js';
+export { ConfirmModal, Modal } from '../chunk-IAGYPTEJ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/{Modal-7MWRCWAI.css → Modal-TOEWHDCQ.css}

@@ -379,6 +379,11 @@
  */
 .crewlet-modal__title {
   margin: 0;
+  /* The text face at its own tracking, never the display face every heading
+     element takes from the baseline: the title is an h1 for the outline, at
+     the dialog's own register. */
+  font-family: var(--font-family-sans);
+  letter-spacing: var(--font-letter-spacing-normal);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-tight);

package/dist/ObjectHeader/index.js

@@ -1,4 +1,4 @@
-export { FactLine, ObjectHeader, SetByLine } from '../chunk-VGE3G3T4.js';
+export { FactLine, ObjectHeader, SetByLine } from '../chunk-ODOJJGXH.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ObjectHeader-D7GU7QNI.css → ObjectHeader-ZOS22FKX.css}

@@ -1,5 +1,10 @@
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
+ *
+ * SENTENCE CASE, both the eyebrow and the fact labels, as `StatCard`'s label
+ * is: the uppercase, tracked-open micro-caps are a table's column head, and
+ * over an object's name ("UNIT", then TYPE, LEAD and SEATS under it) they put
+ * a heading on every fact and read as a form rather than a record.
  */
 .crewlet-object-header {
   display: flex;
@@ -18,9 +23,7 @@
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 
@@ -35,8 +38,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  letter-spacing: normal;
-  text-transform: none;
 }
 
 .crewlet-object-header__id--mono {
@@ -138,9 +139,7 @@
 }
 
 .crewlet-fact-line__label {
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-DQSXWQMJ.js';
-import '../chunk-GFV4LJHH.js';
+export { PricingCard } from '../chunk-U3ILLCR2.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SettingsTable/SettingsTable.d.ts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** The words the three columns are named by, for assistive technology and the optional header row. */
+export interface SettingsTableColumns {
+    setting?: string | undefined;
+    value?: string | undefined;
+    source?: string | undefined;
+}
+export interface SettingsTableProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Draws the column names as a header row. Off by default: a page that
+     * stacks one table per group (a card each) would repeat the same three
+     * words over every card. The names are always exposed to assistive
+     * technology, drawn or not.
+     */
+    header?: boolean | undefined;
+    /** The column names. Defaults to Setting, Value and Source. */
+    columns?: SettingsTableColumns | undefined;
+    children?: ReactNode;
+}
+/**
+ * A read-only table of settings: what each is called, the value in force and
+ * where that value comes from.
+ *
+ * ONE COLUMN GRID FOR EVERY TABLE ON A PAGE. The tracks are fractions of the
+ * table's own width (`--crewlet-settings-table-columns`), never the width of
+ * the longest label, so a page that stacks a table per group in cards of one
+ * width puts every value and every source on one vertical line down the page.
+ * A term column sized to its own longest term started the values at a
+ * different place in every card, and a fixed one left them floating a third
+ * of the way across a wide card with the rest of the row empty.
+ *
+ * THE SOURCE IS QUIET UNLESS IT IS NEWS. A value that is the default says so
+ * in the tertiary ink, as a word rather than a tag: a tag on every row is
+ * noise that teaches a reader to skip the column. A value that differs from
+ * its default (`changed`) carries a mark before its source, which is the one
+ * row in the table a reader scanning it came to find.
+ *
+ * A TABLE, BECAUSE IT IS ONE. Every row carries the same three fields, so it
+ * is announced as a table with its column names, and each setting's name is
+ * the row's header. The roles are written out rather than taken from table
+ * elements because the row folds into two lines on a narrow table, and a
+ * table element that changes its display loses its semantics in some
+ * browsers.
+ */
+export declare function SettingsTable({ header, columns, className, children, ...rest }: SettingsTableProps): import("react").JSX.Element;
+export declare namespace SettingsTable {
+    var Row: typeof SettingsTableRow;
+}
+export interface SettingsTableRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the setting is called, in a reader's words. */
+    label: ReactNode;
+    /**
+     * The setting's address in the document it is written in
+     * (`turn_engine.max_iterations`), drawn quietly under its name in the
+     * monospace face. For the reader who will go and change it there.
+     */
+    settingKey?: string | undefined;
+    /** The value in force, in its own unit. Drawn in tabular figures. */
+    children?: ReactNode;
+    /** Where the value comes from: "Default", "Set in the company document". */
+    source?: ReactNode;
+    /** The value differs from its default: the source carries a mark. */
+    changed?: boolean | undefined;
+}
+/** One setting: its name (and key), its value and its source. */
+export declare function SettingsTableRow({ label, settingKey, source, changed, className, children, ...rest }: SettingsTableRowProps): import("react").JSX.Element;

package/dist/SettingsTable/index.d.ts

@@ -0,0 +1,3 @@
+import './SettingsTable.css';
+export { SettingsTable, SettingsTableRow } from './SettingsTable.js';
+export type { SettingsTableColumns, SettingsTableProps, SettingsTableRowProps } from './SettingsTable.js';

package/dist/SettingsTable/index.js

@@ -0,0 +1,3 @@
+export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-ODEQTPFM.js';