@crewlethq/ui 0.23.0 → 0.25.0

package/dist/CanvasBoard-ZLPDINSM.css

@@ -0,0 +1,236 @@
+/*
+ * A canvas of artboards and notes (CanvasBoard.tsx). Boards and notes are laid
+ * out in canvas pixels inside the canvas's world and scale with it; their
+ * chrome (titles, handles, tools) is counter-scaled by the zoom the component
+ * writes on the layer, so it stays one size on screen.
+ */
+
+.crewlet-canvas-board {
+  height: 100%;
+  min-height: 0;
+}
+
+.crewlet-canvas-board__layer {
+  --crewlet-canvas-board-zoom: 1;
+  --crewlet-canvas-board-unzoom: calc(1 / var(--crewlet-canvas-board-zoom));
+  position: relative;
+}
+
+/* ---- a board ------------------------------------------------------------ */
+
+.crewlet-canvas-board__board {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.crewlet-canvas-board__body {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-xs);
+}
+
+/* The page a live board runs fills its frame exactly. */
+.crewlet-canvas-board__body > :not(.crewlet-canvas-board__shield) {
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-canvas-board__board[data-active] .crewlet-canvas-board__body {
+  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-focus);
+  outline-offset: 0;
+}
+
+/*
+ * THE SHIELD over a live board that does not hold the pointer: a press on it
+ * pans the canvas as the field around it does, because a sandboxed page would
+ * otherwise swallow every press that began over it.
+ */
+.crewlet-canvas-board__shield {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.crewlet-canvas-board[data-editable] .crewlet-canvas-board__shield {
+  cursor: inherit;
+}
+
+/* A board that is not running draws its title and size at screen size. */
+.crewlet-canvas-board__placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  text-align: center;
+}
+
+/* ONE BLOCK, SCALED ONCE: its lines keep their spacing at screen size rather
+   than each line shrinking back into the space the zoom left it. */
+.crewlet-canvas-board__placeholder-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__placeholder-title {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ---- chrome, at screen size --------------------------------------------- */
+
+.crewlet-canvas-board__chrome {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  width: calc(100% * var(--crewlet-canvas-board-zoom));
+  padding-bottom: var(--spacing-1);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: bottom left;
+}
+
+.crewlet-canvas-board__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__handle {
+  appearance: none;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font: inherit;
+  cursor: move;
+  touch-action: none;
+}
+
+.crewlet-canvas-board__handle:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-default);
+}
+
+/* Both handles draw an edge of their own, so the ring sits over it. */
+.crewlet-canvas-board__handle:focus-visible,
+.crewlet-canvas-board__resize:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-canvas-board__resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--color-brand-accent);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  cursor: nwse-resize;
+  touch-action: none;
+  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__hint {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 0;
+  padding-top: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: top left;
+}
+
+/* ---- a note ------------------------------------------------------------- */
+
+.crewlet-canvas-board__note {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+/*
+ * A TITLE IS SET IN ITS BOX'S OWN HEIGHT, so the author's frame is the type
+ * size: a heading over a group of boards is as large as the box drawn for it.
+ */
+.crewlet-canvas-board__note[data-kind='title'] {
+  container-type: size;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-primary);
+}
+
+.crewlet-canvas-board__note[data-kind='title'] .crewlet-canvas-board__note-text {
+  font-size: 60cqh;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__note-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.crewlet-canvas-board__note-field {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  resize: none;
+}
+
+.crewlet-canvas-board__note-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-canvas-board__note-tools {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: bottom left;
+}
+
+.crewlet-canvas-board__note-move {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  background-image: radial-gradient(var(--color-text-tertiary) 1px, transparent 1.5px);
+  background-size: var(--spacing-2) var(--spacing-2);
+}

package/dist/CanvasSchematic/CanvasSchematic.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A design drawn as a schematic: every artboard's rectangle where the canvas
+ * places it, the cover board marked and titled, the notes as faint blocks.
+ *
+ * A COVER DRAWN, NEVER A SCREENSHOT. A gallery card shows where a design's
+ * boards sit without running a single page: it is drawn from the canvas's
+ * numbers alone (a design's outline), so a gallery of fifty designs frames
+ * nothing, and the drawing follows the reader's theme.
+ */
+import type { HTMLAttributes } from 'react';
+/** A rectangle of the schematic, in the canvas's own pixels. */
+export interface CanvasSchematicRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** One board of the schematic. */
+export interface CanvasSchematicBoard extends CanvasSchematicRect {
+    id: string;
+    title?: string | undefined;
+}
+export interface CanvasSchematicProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The accessible description of the drawing, such as "Launch page, 4 boards". */
+    label: string;
+    boards: readonly CanvasSchematicBoard[];
+    notes?: readonly CanvasSchematicRect[] | undefined;
+    /** The board drawn as the cover, and titled. */
+    cover?: string | undefined;
+}
+export declare function CanvasSchematic({ label, boards, notes, cover, className, ...rest }: CanvasSchematicProps): import("react").JSX.Element;

package/dist/CanvasSchematic/index.d.ts

@@ -0,0 +1,3 @@
+import './CanvasSchematic.css';
+export { CanvasSchematic } from './CanvasSchematic.js';
+export type { CanvasSchematicBoard, CanvasSchematicProps, CanvasSchematicRect, } from './CanvasSchematic.js';

package/dist/CanvasSchematic/index.js

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

package/dist/CanvasSchematic-PLB3N46J.css

@@ -0,0 +1,36 @@
+/*
+ * A design's schematic (CanvasSchematic.tsx): rectangles drawn in the
+ * canvas's own coordinates, filling the box they are given.
+ */
+
+.crewlet-canvas-schematic {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.crewlet-canvas-schematic svg {
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-canvas-schematic__board {
+  fill: var(--color-surface-elevated);
+  stroke: var(--color-border-strong);
+  stroke-width: 1;
+}
+
+.crewlet-canvas-schematic__board[data-cover] {
+  fill: var(--color-brand-accent-soft);
+  stroke: var(--color-brand-accent);
+}
+
+.crewlet-canvas-schematic__note {
+  fill: var(--color-surface-inset);
+}
+
+.crewlet-canvas-schematic__title {
+  fill: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
+}

package/dist/ChangeMark/index.js

@@ -1,6 +1,6 @@
-export { ChangeMark } from '../chunk-PPAQFGS2.js';
-import '../chunk-YYZRLLLY.js';
-import '../chunk-S35G6PNC.js';
+export { ChangeMark } from '../chunk-YEKYVJQR.js';
+import '../chunk-NHBP2XS5.js';
+import '../chunk-Z7JYG5TF.js';
 import '../chunk-QWOPX2MN.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-HMPFGIWM.js';

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-5PSXBL73.js';
-import '../chunk-CBOICT64.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-HVIX5ECM.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/Checkbox.d.ts

@@ -12,6 +12,12 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     tone?: 'default' | 'danger';
     /** The bordered row a dialog uses for a decision that stands on its own. */
     framed?: boolean;
+    /**
+     * The step the label is set at. `sm` sets it at the compact step, beside the
+     * small inputs and selects of a dense form row, where a body-step label
+     * reads as a heading over the controls around it.
+     */
+    size?: 'sm' | 'md' | undefined;
     /**
      * Neither on nor off: some of what this box stands for is ticked. It is a
      * DOM property rather than an attribute, so it can only be set from script,

package/dist/Checkbox/index.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup } from '../chunk-IASV5UCP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Checkbox-KT7RS6QQ.css → Checkbox-5UORUG3F.css}

@@ -99,6 +99,22 @@
   border-radius: var(--radius-lg);
 }
 
+/*
+ * THE COMPACT STEP, for a box in a dense form row beside small inputs and
+ * selects. The label takes their step, so a row of controls reads as one line,
+ * and the box shrinks with it; the nudge above is in `em` against the row's own
+ * size, so it still sits the box on the label's first line.
+ */
+.crewlet-checkbox--sm {
+  --crewlet-checkbox-size: 14px;
+
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-checkbox--sm .crewlet-checkbox__label {
+  font-size: var(--font-size-compact);
+}
+
 .crewlet-checkbox.is-disabled,
 .crewlet-checkbox.is-disabled .crewlet-checkbox__control {
   cursor: not-allowed;

package/dist/CommentThread/index.js

@@ -1,8 +1,8 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-PBNP7H2C.js';
-import '../chunk-WI6K5M5X.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-M2VJGNCD.js';
 import '../chunk-RIEDQSA4.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-WI6K5M5X.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/DashboardCover-RMINBODB.css

@@ -0,0 +1,143 @@
+/*
+ * DashboardCover: a dashboard's cover at a gallery card's preview size (16:9,
+ * about 280 by 158 pixels at its smallest). Up to three headline figures, or a
+ * schematic of the board's first widgets, or the kind's glyph. Its frame is
+ * the shared .crewlet-artifact-cover in ArtifactCover.css.
+ */
+
+.crewlet-dashboard-cover {
+  height: 100%;
+  padding: var(--spacing-3);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-dashboard-cover--stats {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-dashboard-cover__stat {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  height: 100%;
+  max-height: 100%;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-dashboard-cover__label,
+.crewlet-dashboard-cover__source {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__label {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-dashboard-cover__value {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xl);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__source {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-dashboard-cover--layout {
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--spacing-2);
+}
+
+.crewlet-dashboard-cover__block {
+  box-sizing: border-box;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-dashboard-cover__block--chart {
+  align-items: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-dashboard-cover__block--table,
+.crewlet-dashboard-cover__block--note {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-dashboard-cover__block--stat {
+  align-items: center;
+}
+
+.crewlet-dashboard-cover__bar {
+  flex: 1;
+  min-width: 0;
+  border-radius: var(--radius-xs);
+  background: var(--color-data-1);
+}
+
+.crewlet-dashboard-cover__bar:nth-child(1) {
+  height: 40%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(2) {
+  height: 70%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(3) {
+  height: 55%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(4) {
+  height: 90%;
+}
+
+.crewlet-dashboard-cover__line {
+  height: var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-border-strong);
+}
+
+.crewlet-dashboard-cover__line:last-child {
+  width: 60%;
+}
+
+.crewlet-dashboard-cover__figure {
+  width: 50%;
+  height: var(--spacing-3);
+  border-radius: var(--radius-xs);
+  background: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+.crewlet-dashboard-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/DataTable/index.js

@@ -1,8 +1,8 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-35UKQ33X.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-SVW3VG72.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-F4DPAJCN.js';
-import '../chunk-IASV5UCP.js';
+import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DataView/index.js

@@ -1,15 +1,15 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-JCSXFAXG.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-OJRDEVHV.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-35UKQ33X.js';
+import '../chunk-SVW3VG72.js';
 import '../chunk-WG5WUFBX.js';
-import '../chunk-STJ7QBC3.js';
-import '../chunk-DTIW4CHZ.js';
 import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-IASV5UCP.js';
+import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/DatasetSource/DatasetSource.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type TimeValue } from '../RelativeTime/index.js';
+import type { DatasetStatus } from '../WidgetFrame/index.js';
+/**
+ * Where a dataset's rows come from: the artifact's own datastore, a named read
+ * of the engine's domains, a data file of the version, or a calculation over
+ * other datasets.
+ */
+export type DatasetSourceKind = 'store' | 'engine' | 'file' | 'calc';
+/** Every source kind, in the order a legend lists them. */
+export declare const DATASET_SOURCE_KINDS: readonly DatasetSourceKind[];
+export interface DatasetSourceLabels {
+    kinds: Record<DatasetSourceKind, string>;
+    /** The row count, "12 rows". */
+    rows: (count: number) => string;
+    live: string;
+    asOf: string;
+    stale: string;
+    loading: string;
+    /** The sentence drawn for `refused` or `failed` when the host gave no detail. */
+    refused: string;
+    failed: string;
+    /** Said before the refresh promise to a screen reader: "Refreshes: Every 2 min". */
+    refresh: string;
+}
+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;
+    /** 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". */
+    refresh?: string | undefined;
+    /** When the rows were true. Unset for a live source or one not read yet. */
+    asOf?: TimeValue | undefined;
+    status: DatasetStatus;
+    /** The refusal or failure sentence, for `refused` and `failed`. */
+    detail?: string | undefined;
+    /** How many rows the reader holds. Unset while loading, refused or failed. */
+    rows?: number | undefined;
+    /** Whether this entry is the one the host is showing. */
+    selected?: boolean | undefined;
+    /** Given, the entry is a toggle button that selects it, announced as pressed. */
+    onSelect?: (() => void) | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<Omit<DatasetSourceLabels, 'kinds'>> & {
+        kinds?: Partial<Record<DatasetSourceKind, string>>;
+    };
+    /** A preview of the rows, drawn under the entry by the host when it is selected. */
+    children?: ReactNode;
+}
+/**
+ * One entry of a dashboard's Sources rail: a dataset's title, where it reads
+ * from, what it reads, how it is kept current, and where it stands now.
+ *
+ * THE PROVENANCE OF EVERY FIGURE IN ONE PLACE. A widget cites its dataset by
+ * title; this is what that citation opens: the definition a reader can check,
+ * the refresh promise, and "as of" the instant the rows were true, so a
+ * number on the board is never a number nobody can trace.
+ *
+ * SELECTABLE WITHOUT NESTING. With `onSelect` the summary is a toggle button
+ * (`aria-pressed`), and the host's rows preview (`children`) is drawn AFTER
+ * it, outside it: a table inside a button is invalid markup and unreachable
+ * to a screen reader.
+ *
+ * A refusal reads as calmly here as on the figure: the reader may not read
+ * the data, which is an ordinary state, so it takes the secondary ink and
+ * never an error colour.
+ */
+export declare function DatasetSource({ title, kind, definition, refresh, asOf, status, detail, rows, selected, onSelect, now, labels, className, children, ...rest }: DatasetSourceProps): import("react").JSX.Element;
+export interface DatasetSourceListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** What the list is, for a screen reader: "Sources". */
+    label: string;
+    /** The entries, each a `DatasetSource`. */
+    children: ReactNode;
+}
+/**
+ * A dashboard's Sources rail: every dataset the board draws from, one
+ * `DatasetSource` per item, as a real list (`role="list"` is kept explicit
+ * because Safari drops a list's role once its markers are styled away).
+ */
+export declare function DatasetSourceList({ label, className, children, ...rest }: DatasetSourceListProps): import("react").JSX.Element;

package/dist/DatasetSource/index.d.ts

@@ -0,0 +1,3 @@
+import './DatasetSource.css';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './DatasetSource.js';
+export type { DatasetSourceKind, DatasetSourceLabels, DatasetSourceListProps, DatasetSourceProps, } from './DatasetSource.js';

package/dist/DatasetSource/index.js

@@ -0,0 +1,7 @@
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZZDY4XL7.js';
+import '../chunk-GFV4LJHH.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';