@crewlethq/ui 0.48.3 → 0.49.0

package/dist/ColorSwatch-DNMUFHNS.css

@@ -0,0 +1,83 @@
+/*
+ * One colour of a brand: a chip of it over its role and its value. The chip's
+ * fill is the one value that is not a token, and it arrives through
+ * `--crewlet-color-swatch-value` only after it has passed `#rrggbb`. Every
+ * other colour here is a token.
+ */
+.crewlet-color-swatch {
+  /* The hatch of no colour, as one value: the same lines an arranged page's
+     ground draws, so "nothing here" reads one way across the package. */
+  --crewlet-color-swatch-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE CHIP HAS AN EDGE OF ITS OWN, so a colour that matches the page is
+   still a chip rather than a gap. */
+.crewlet-color-swatch__chip {
+  display: block;
+  width: 100%;
+  height: var(--size-row-lg);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-swatch-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
+.crewlet-color-swatch__chip.is-empty {
+  background: var(--crewlet-color-swatch-hatch);
+}
+
+.crewlet-color-swatch__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-color-swatch__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-color-swatch__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__value--plain {
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__empty {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* ---- sm: a chip beside the words, for a dense list ---- */
+
+.crewlet-color-swatch--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-color-swatch--sm .crewlet-color-swatch__chip {
+  flex: none;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  border-radius: var(--radius-sm);
+}

package/dist/Combobox/Combobox.d.ts

@@ -20,7 +20,8 @@ export interface ComboboxListRender {
     /** Mouse wiring for the row at `index`. */
     optionHandlers: (index: number) => Record<string, unknown>;
 }
-export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | 'role' | 'onKeyDown' | 'list'> {
+/** What every combobox takes, whether its list is a popup or always on screen. */
+export interface ComboboxBaseProps extends Omit<InputProps, 'value' | 'onChange' | 'role' | 'onKeyDown' | 'list'> {
     /** What the field holds. The caller owns it: a completion is an edit to it. */
     value: string;
     onValueChange: (next: string) => void;
@@ -45,9 +46,6 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
      * `${NAME}` inside a longer value) does it itself.
      */
     onCommit?: ((option: ComboboxOption, index: number) => void) | undefined;
-    /** Whether the list is on screen. Controlled: only the caller knows when it has something to offer. */
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
     /** Names the list. A listbox with no name is announced as "list box" and nothing else. */
     label: string;
     /**
@@ -67,6 +65,35 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
     /** The line shown while the list is open with nothing to offer. Nothing is drawn without one. */
     emptyMessage?: ReactNode;
 }
+/** A field that offers completions in a list that opens under it. */
+export interface ComboboxPopupProps extends ComboboxBaseProps {
+    inline?: false | undefined;
+    /** Whether the list is on screen. Controlled: only the caller knows when it has something to offer. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/**
+ * A field over a list that is always on screen: a picker whose list IS the
+ * surface's body (a folder picker in a dialog), filtered by the field.
+ */
+export interface ComboboxInlineProps extends ComboboxBaseProps {
+    /**
+     * The list is part of the surface rather than a popup: always on screen,
+     * in the flow under the field, at a stable height, filtered by what the
+     * field holds. See the component's notes.
+     */
+    inline: true;
+    /** How many rows the list shows before it scrolls, and so how tall it stands. Six by default. */
+    rows?: number | undefined;
+    /**
+     * The value of the option chosen so far: drawn chosen, announced as
+     * selected, and where the highlight starts.
+     */
+    chosen?: string | undefined;
+    open?: undefined;
+    onOpenChange?: undefined;
+}
+export type ComboboxProps = ComboboxPopupProps | ComboboxInlineProps;
 /**
  * A text field that offers completions.
  *
@@ -81,6 +108,20 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
  * field stays open; a second Escape reaches it. Without that, somebody
  * dismissing a completion they did not want lost the whole editor with it.
  *
+ * INLINE (`inline`), THE LIST IS THE SURFACE'S BODY. For a picker whose list
+ * is the point of the dialog it sits in (Move to…), the list is always on
+ * screen, in the flow under the field, filtered by it: no popup, no portal,
+ * nothing that opens or closes. A list that closed when the field lost focus
+ * made the dialog shrink under the pointer between the press on Cancel and
+ * its release, so the click landed on the veil. Its box keeps one height
+ * (`rows`) whatever the filter leaves in it, so nothing under it moves as
+ * somebody types, and says so in its own row when nothing matches. The keys
+ * are the popup's (the arrows step over a disabled row, Enter takes the
+ * highlighted one, the letters filter), Home and End reach the first and the
+ * last row while the field is empty and are the caret's once it holds text,
+ * and Escape is never its own: there is nothing to dismiss, so it reaches the
+ * dialog. `chosen` marks the option picked so far as selected.
+ *
  * WHAT IT DOES NOT DECIDE is what matches. The caller filters and hands over
  * what is offered, because a completion's question belongs to the value: the
  * engine's secret references complete on the name under the caret, not on the

package/dist/Combobox/index.d.ts

@@ -1,4 +1,4 @@
 import '../HitArea/HitArea.css';
 import './Combobox.css';
 export { Combobox } from './Combobox.js';
-export type { ComboboxListRender, ComboboxOption, ComboboxProps } from './Combobox.js';
+export type { ComboboxBaseProps, ComboboxInlineProps, ComboboxListRender, ComboboxOption, ComboboxPopupProps, ComboboxProps, } from './Combobox.js';

package/dist/Combobox/index.js

@@ -1,4 +1,4 @@
-export { Combobox } from '../chunk-OOJTPR7N.js';
+export { Combobox } from '../chunk-P5JBDHWC.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';

package/dist/Combobox-GBCWXWEB.css

@@ -0,0 +1,163 @@
+/*
+ * Combobox: a field that offers completions.
+ *
+ * The panel is anchored inside the field's own box rather than portalled or
+ * laid out in the flow. In the flow it pushed every field under it down the
+ * form as somebody typed; portalled, it would have to be placed, followed and
+ * given a layer of its own for a list that never leaves its field's side.
+ */
+
+.crewlet-combobox {
+  position: relative;
+  width: 100%;
+}
+
+.crewlet-combobox__panel {
+  /* Six rows and a scroll, as every list this package offers from a field. */
+  --crewlet-combobox-panel-max-height: 12rem;
+
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  right: 0;
+  max-height: var(--crewlet-combobox-panel-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+  --crewlet-listbox-gap: 1px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--crewlet-listbox-gap);
+  /*
+   * OPAQUE, and the product's own panel surface: a translucent list over a
+   * form puts two sets of words in the same place, and the words underneath
+   * are a label and a value somebody is in the middle of typing.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  /* Above the fields below it, and nothing more: it never leaves its form. */
+  z-index: var(--z-index-dropdown);
+}
+
+/* Names read exactly rather than for sense: a secret reference, a path, a key. */
+.crewlet-combobox__panel.is-mono .crewlet-combobox__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-combobox__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The row the arrows or the pointer are on, in the hover tint. The accent is
+ * what "here, this is the current one" means elsewhere in the product; a
+ * completion list has no current one, only the row about to be taken.
+ *
+ * Scoped to the panel rather than written on the row class, because the
+ * shared listbox register paints [aria-selected] itself and the stylesheets
+ * are bundled in hash order: a rule of equal weight would win or lose by the
+ * name of a build artefact.
+ */
+.crewlet-combobox__panel .crewlet-listbox__option {
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-combobox__panel .crewlet-listbox__option[aria-selected='true'],
+.crewlet-combobox__panel .crewlet-listbox__option.is-highlight,
+.crewlet-combobox__panel .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-combobox__panel .crewlet-listbox__option.is-disabled {
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/* ---- inline (`inline`): the list is the surface's body ------------------
+   Always on screen, in the flow under the field, at ONE HEIGHT: the box is
+   `rows` one-line rows tall (`--crewlet-combobox-rows`, set by the component)
+   whatever the filter leaves in it, so nothing under it moves as somebody
+   types, and it scrolls past that. It sits on the surface's own ground inside
+   a hairline, because it is part of the surface rather than a panel over it. */
+.crewlet-combobox--inline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-combobox__list {
+  /* ONE ROW IS ONE ROW STEP, exactly: a row's own height is held to it
+     below, so a label that draws a glyph beside its words is no taller than
+     one that does not, and `rows` rows fill the box to the pixel. */
+  --crewlet-combobox-row: var(--size-row-md);
+  --crewlet-listbox-gap: 1px;
+
+  height: calc(
+    var(--crewlet-combobox-rows) * var(--crewlet-combobox-row) + (var(--crewlet-combobox-rows) - 1) * var(--crewlet-listbox-gap) +
+      var(--spacing-1) * 2 + 2px
+  );
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-combobox__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--crewlet-listbox-gap);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.crewlet-combobox__list.is-mono .crewlet-combobox__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option {
+  height: var(--crewlet-combobox-row);
+  min-height: 0;
+  padding-block: 0;
+  border-radius: var(--radius-xs);
+}
+
+/* The row the arrows or the pointer are on, in the hover tint, as the popup
+   draws it. Scoped to the list for the same reason as the panel's. */
+.crewlet-combobox__options .crewlet-listbox__option.is-highlight,
+.crewlet-combobox__options .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/*
+ * THE CHOSEN ROW (`chosen`), as every chosen option in the package is drawn:
+ * the selected fill, never the accent, with a tick in the accent's ink so the
+ * choice never rests on the tint. It keeps its fill under the arrows too.
+ */
+.crewlet-combobox__options .crewlet-listbox__option[aria-selected='true'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+}
+
+.crewlet-combobox__check {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option.is-disabled {
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}

package/dist/CommandPalette/index.js

@@ -1,9 +1,9 @@
-export { CommandPalette } from '../chunk-TWZEWXNW.js';
-import '../chunk-6AKG2VLR.js';
+export { CommandPalette } from '../chunk-MIEBOO7Y.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/CommentThread/index.js

@@ -1,14 +1,14 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-6EBGPCAW.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-H7NMJ5AI.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-6R5BSA36.js';
+import '../chunk-GHY63X4C.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/Composer/index.js

@@ -1,7 +1,7 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-6R5BSA36.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-GHY63X4C.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/ContrastBadge/ContrastBadge.d.ts

@@ -0,0 +1,63 @@
+/**
+ * What a pair is read as. `body` is text at the body's size, held to 4.5:1
+ * for AA and 7:1 for AAA. `large` is large text and every graphical mark (a
+ * logo, an accent on a ground), held to 3:1 for AA and 4.5:1 for AAA.
+ */
+export type ContrastScale = 'body' | 'large';
+/**
+ * Where a pair stands: AAA, AA, AA for large text only (body text that clears
+ * 3:1 but not 4.5:1), or under every floor its scale has.
+ */
+export type ContrastLevel = 'aaa' | 'aa' | 'aa-large' | 'fail';
+/**
+ * The level a measured ratio reaches, on the floors `@crewlethq/tokens`
+ * exports. The ratio is compared UNROUNDED: a pair that passes only once
+ * rounded does not pass.
+ */
+export declare function contrastLevel(ratio: number, scale?: ContrastScale): ContrastLevel;
+/**
+ * The ratio between two `#rrggbb` colours, or null when either is not one.
+ * The one measurement every brand part takes, from `@crewlethq/tokens`.
+ */
+export declare function contrastRatio(foreground: string, background: string): number | null;
+/**
+ * A ratio as printed, cut DOWN to two places and never rounded up, so the
+ * number shown never claims a floor the pair misses: 4.497 is "4.49", not
+ * "4.5".
+ */
+export declare function formatContrastRatio(ratio: number): string;
+export interface ContrastBadgeLabels {
+    levels: Record<ContrastLevel, string>;
+    /** Said for a pair that cannot be measured (a colour not set yet). */
+    unmeasured: string;
+    /** The ratio, said in words: "4.49 to 1". */
+    ratio: (ratio: string) => string;
+    /** The letters the sample draws the pair with. */
+    sample: string;
+}
+export interface ContrastBadgeProps {
+    /** The colour read: text, a logo, an accent. `#rrggbb`. */
+    foreground: string;
+    /** The colour it is read on. `#rrggbb`. */
+    background: string;
+    /** What the pair is: "Text on light ground". */
+    label?: string | undefined;
+    /** What it is read as: body text (the default), or large text and marks. */
+    scale?: ContrastScale | undefined;
+    className?: string | undefined;
+    labels?: Partial<ContrastBadgeLabels> | undefined;
+}
+/**
+ * Whether one colour reads on another: a sample of the pair, the measured
+ * ratio, and the level it reaches.
+ *
+ * THE MEASUREMENT IS THE TOKENS PACKAGE'S. The ratio comes from
+ * `@crewlethq/tokens`' `contrast()`, the same maths the palette suite holds
+ * every theme to, and the floors from its `WCAG_CONTRAST`, so the badge an
+ * administrator reads and the gate a theme passes never disagree.
+ *
+ * THE LEVEL IS A WORD AND A GLYPH, never the tint alone, and the ratio is
+ * said as "4.49 to 1" rather than read out as punctuation. The sample is
+ * decoration: it shows the pair, and the words say how it measures.
+ */
+export declare function ContrastBadge({ foreground, background, label, scale, className, labels }: ContrastBadgeProps): import("react").JSX.Element;

package/dist/ContrastBadge/index.d.ts

@@ -0,0 +1,3 @@
+import './ContrastBadge.css';
+export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
+export type { ContrastBadgeLabels, ContrastBadgeProps, ContrastLevel, ContrastScale } from './ContrastBadge.js';

package/dist/ContrastBadge/index.js

@@ -0,0 +1,6 @@
+export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-B235ANDO.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ContrastBadge-CBZPGG3G.css

@@ -0,0 +1,47 @@
+/*
+ * Whether one colour reads on another: a sample of the pair, the ratio and
+ * the level. The sample's two colours are the only values here that are not
+ * tokens, and they arrive through `--crewlet-contrast-badge-ink` and
+ * `--crewlet-contrast-badge-ground` only once both have passed `#rrggbb`.
+ */
+.crewlet-contrast-badge {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+}
+
+/* THE SAMPLE HAS AN EDGE OF ITS OWN, so a ground that matches the page is
+   still a sample. */
+.crewlet-contrast-badge__sample {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-contrast-badge-ground, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  color: var(--crewlet-contrast-badge-ink, var(--color-text-tertiary));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.crewlet-contrast-badge__label {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-contrast-badge__ratio {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-contrast-badge__unmeasured {
+  color: var(--color-text-tertiary);
+}

package/dist/DataGrid/DataGrid.d.ts

@@ -123,6 +123,20 @@ export interface DataGridBand<T> {
     /** A per-band aggregate line, or the way to what the band did not fit. */
     footer?: ReactNode;
 }
+/**
+ * Rows a reader picks for a bulk action, by their `rowKey`: a column of boxes
+ * before the first, with a box over them in the head.
+ */
+export interface DataGridSelection<T> {
+    /** The keys of the rows picked. Controlled, and kept across pages and sorts by the host. */
+    selected: ReadonlySet<string>;
+    /** The keys as they should be now. */
+    onChange: (selected: ReadonlySet<string>) => void;
+    /** A row's box, said: "Select Q3 plan". The row's own words are its name, so this says what ticking it does. */
+    rowLabel: (row: T) => string;
+    /** A row that cannot be picked (the reader may not act on it): its box is drawn and disabled. */
+    isSelectable?: ((row: T) => boolean) | undefined;
+}
 /** The words a grid says, for an application that says them otherwise. */
 export interface DataGridLabels {
     /** "Hidden to fit: Due and Updated". */
@@ -131,6 +145,8 @@ export interface DataGridLabels {
     showEveryColumn: string;
     /** Joins the last two names of a list: "Due and Updated". */
     and: string;
+    /** The head's box, over every row the grid draws. */
+    selectAll: string;
 }
 /**
  * What an application drives a grid's cursor with. The grid binds no keys of
@@ -156,6 +172,17 @@ export interface DataGridProps<T> {
     rowHref?: ((row: T) => string) | undefined;
     /** The row the reader is on (the object a page or a side panel shows): tinted and announced as current. */
     isSelected?: ((row: T) => boolean) | undefined;
+    /**
+     * Rows picked for a bulk action: a box on every row before the first
+     * column, and one in the head over every row drawn (ticked, clear, or mixed
+     * when some are). Shift with a box picks or clears every row between it and
+     * the box pressed before it, in the order the grid draws them.
+     *
+     * NOT `isSelected`, which is the one row the reader is ON. A picked row is
+     * tinted in the selected fill and its box says it; the current row keeps
+     * its own mark.
+     */
+    selection?: DataGridSelection<T> | undefined;
     isFailed?: ((row: T) => boolean) | undefined;
     /**
      * The sort as `key` or `-key` (descending), empty for the rows' own order.
@@ -264,4 +291,4 @@ export declare function fitGridColumns({ fit, width, overflows, visible, }: {
  * lets its head stick against the page's scroller; an application whose
  * scroller carries a sticky bar sets `--crewlet-data-grid-sticky-top`.
  */
-export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;
+export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;

package/dist/DataGrid/index.js

@@ -1,7 +1,14 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-2MYSESZF.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-FB5CFQTG.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-PPUR46MK.js';
+import '../chunk-EXRRTKWT.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DataGrid-AQKPJD7W.css → DataGrid-VNGQESJA.css}

@@ -195,6 +195,21 @@ button.crewlet-data-grid__row-link {
   background: var(--color-brand-accent-soft);
 }
 
+/*
+ * PICKED FOR A BULK ACTION (`selection`), as every chosen option is drawn:
+ * the selected fill, never the accent. One fill, so the hover overlay does not
+ * stack on it, and its box says it as well.
+ */
+.crewlet-data-grid__row--picked,
+.crewlet-data-grid__row--picked:hover {
+  background: var(--color-surface-selected);
+}
+
+/* The selection box, centred in its track and standing above the row's link. */
+.crewlet-data-grid__select {
+  display: inline-flex;
+}
+
 .crewlet-data-grid__row--cursor {
   box-shadow: inset 2px 0 0 var(--color-brand-accent);
 }

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-AS2BMY3E.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQ7S7CKZ.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-F57N6ZJG.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';

package/dist/DataView/index.js

@@ -1,21 +1,21 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-SMOFYZJ5.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-NAWUXCBC.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-AS2BMY3E.js';
-import '../chunk-UFXLNC2N.js';
+import '../chunk-ZFM5L7M4.js';
+import '../chunk-WQ7S7CKZ.js';
+import '../chunk-YCC2S7DF.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-7KHM2FZH.js';
+import '../chunk-GXQ3B46I.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-GXQ3B46I.js';
-import '../chunk-F57N6ZJG.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-NCHKKYPQ.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/DateTimePicker/index.js

@@ -1,6 +1,6 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-UFXLNC2N.js';
-import '../chunk-KHJIEPZV.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-ZFM5L7M4.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';