@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Charts/BarList.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+export interface BarDatum {
+    /**
+     * What this row is, as a stable identity. REQUIRED: a ranked list is
+     * re-ranked by every push, and a row keyed by its position hands the
+     * focused row's node to whichever series has taken that place, so a
+     * keyboard reader who was on "planner" finds themselves on "reviewer"
+     * without having moved.
+     */
+    id: string;
+    label: ReactNode;
+    /** Sorting is the caller's; the width is this. */
+    value: number;
+    /** What the number reads as: "412k", "1.2 s", "38%". Defaults to the value. */
+    display?: ReactNode;
+    /** A second line under the label. */
+    sub?: ReactNode;
+    color?: string;
+    /** Where the row leads. A link, wherever the destination is an address. */
+    href?: string;
+    /** What pressing the row does, where it is not a destination. */
+    onSelect?: () => void;
+}
+export interface BarListProps {
+    data: BarDatum[];
+    /** The value the longest bar stands for. Defaults to the largest present. */
+    max?: number;
+    /** How many rows to draw. The rest are counted by `moreLabel`. */
+    limit?: number;
+    /** What the tail says. It is a count, so the caller can phrase it. */
+    moreLabel?: (remaining: number) => ReactNode;
+    emptyLabel?: ReactNode;
+    className?: string;
+}
+/**
+ * A ranked horizontal bar list: the comparison this product asks for most.
+ *
+ * BARS ARE A FRACTION OF THE LARGEST VALUE, not of the total, because the
+ * question is "how does this compare with the biggest one". A total-relative
+ * bar makes every row of a long tail an invisible sliver of the same width.
+ *
+ * A ZERO DRAWS NOTHING. The list used to floor every bar at 1.5 percent so
+ * that a zero still had a sliver, which is a picture of a quantity that is
+ * not there: a seat that spent nothing and a seat that spent a little read
+ * the same. The number beside the label is what says zero.
+ *
+ * The bar is decoration. Every row carries its label and its value as text,
+ * so the bar adds a shape to a number that is already readable, and a reader
+ * who cannot see it has lost nothing.
+ */
+export declare function BarList({ data, max, limit, moreLabel, emptyLabel, className, }: BarListProps): import("react/jsx-runtime").JSX.Element;

package/dist/Charts/Legend.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface LegendItem {
+    /**
+     * The series this entry is for. KEYED BY ID, never by position: a legend
+     * beside a live chart is re-ranked on every push, and index keys hand one
+     * series' node to another, so the swatch a reader was looking at changes
+     * meaning underneath them.
+     */
+    id: string;
+    label: ReactNode;
+    /** Defaults to the series' own place in the data ramp. */
+    color?: string;
+    /** The number beside the name, where the legend doubles as the readout. */
+    value?: ReactNode;
+}
+export interface LegendProps {
+    items: LegendItem[];
+    className?: string;
+}
+/**
+ * What the colours in a chart mean.
+ *
+ * A STACKED BAR IS NEVER DRAWN WITHOUT ONE. A proportional bar with no legend
+ * is a picture of some numbers: the reader can see that one part is bigger
+ * than another and cannot learn which parts they are. The same goes for any
+ * mark that carries a data hue; the hue is a pointer into this list and
+ * nothing else.
+ *
+ * A list, and read as one, so a screen reader says how many series there are
+ * before it reads them.
+ */
+export declare function Legend({ items, className }: LegendProps): import("react/jsx-runtime").JSX.Element;

package/dist/Charts/StackedBar.d.ts

@@ -0,0 +1,38 @@
+export interface StackedSegment {
+    /** Keyed by id, so a push that re-ranks the parts moves no other part. */
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface StackedBarProps {
+    segments: StackedSegment[];
+    /**
+     * How the parts are read out, for anybody who cannot see the bar. The
+     * default names each part and its share; a caller with a better sentence
+     * (units, an total worth saying) passes its own.
+     */
+    summary?: (parts: {
+        label: string;
+        value: number;
+        percent: number;
+    }[]) => string;
+    className?: string;
+}
+/**
+ * One whole, split into its parts.
+ *
+ * ALWAYS BESIDE ITS LEGEND. The bar carries no labels of its own, so without
+ * a Legend the parts are anonymous colours; pair the two, always, and key
+ * both from the same list.
+ *
+ * A ZERO PART IS NOT DRAWN. Every segment used to get at least two pixels so
+ * that it existed, which drew a phase that never ran as a thin slice of one
+ * that did, and made the eleven-part bar of a quiet company look busy.
+ *
+ * THE VALUES ARE IN THE MARKUP, not only in a `title`. A tooltip on a
+ * fragment of a bar is reachable by a mouse and by nothing else: no keyboard,
+ * no screen reader, no touch. The summary sentence is what a reader who
+ * cannot hover is left with, so it says everything the picture does.
+ */
+export declare function StackedBar({ segments, summary, className }: StackedBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Charts/TimeSeries.d.ts

@@ -0,0 +1,92 @@
+export interface SeriesPoint {
+    /** The bucket's start, epoch milliseconds. */
+    t: number;
+    v: number;
+}
+export interface Series {
+    /** Keyed by id, so a push that reorders the series moves no other one. */
+    id: string;
+    name: string;
+    points: readonly SeriesPoint[];
+    /** Defaults to the series' own place in the data ramp. */
+    color?: string;
+}
+export interface TimeSeriesProps {
+    series: readonly Series[];
+    /** The window the chart draws, epoch milliseconds. */
+    from: number;
+    to: number;
+    /**
+     * What the chart is, read in place of the picture: "tokens spent per hour".
+     * Required, because a picture with no name is announced as "image" and the
+     * reader is left to guess.
+     */
+    label: string;
+    /** How tall the plot is, as a CSS length. */
+    height?: string;
+    /** How a value reads out. Defaults to the reader's own locale. */
+    format?: (value: number) => string;
+    /** How an instant reads out under the plot. Defaults to the reader's locale. */
+    formatTime?: (at: number) => string;
+    /**
+     * The chart's own sentence, where the name is not the whole story. The
+     * default names the window and each series' peak, which is what the shape
+     * shows.
+     */
+    summary?: (facts: {
+        from: number;
+        to: number;
+        peak: number;
+        series: {
+            name: string;
+            peak: number;
+        }[];
+    }) => string;
+    className?: string;
+}
+/**
+ * A quantity over time, when TIME is the question.
+ *
+ * THE X DOMAIN IS THE WINDOW, NOT THE DATA. A series that covers only the last
+ * ten minutes of a twenty-four hour window is drawn in the last twentieth of
+ * the plot, never stretched across it. Stretching is how a quiet company came
+ * to look busy.
+ *
+ * THE PICTURE IS NOT THE ONLY COPY. The window's ends and the peak are drawn
+ * as text under the plot, and the summary sentence is the plot's own name, so
+ * a reader who cannot see it has the same facts rather than an "image".
+ *
+ * ONCE, THOUGH. The sentence was the plot's `aria-label` AND a visually
+ * hidden line beside it, so a screen reader read the whole of it, then the
+ * scale, then the whole of it again. A name is how a graphic carries its
+ * meaning; a second copy in the text is not a fallback, it is a repeat.
+ *
+ * The plot is hand drawn rather than taken from a charting library for one
+ * reason that decides it: every mark here reads tokens, in two themes, at the
+ * contrast floors the palette suite measures, and a library's theming surface
+ * is a second design system to keep in step with this one.
+ */
+export declare function TimeSeries({ series, from, to, label, height, format, formatTime, summary, className, }: TimeSeriesProps): import("react/jsx-runtime").JSX.Element;
+export interface SparklineProps {
+    values: readonly number[];
+    /** The line's colour. Defaults to the accent, which is what a trend takes. */
+    color?: string;
+    /** How tall the shape is, as a CSS length. */
+    height?: string;
+    className?: string;
+}
+/**
+ * A shape beside a number. NEVER ON ITS OWN.
+ *
+ * It has no scale, no axis and no labels, so it cannot be read without the
+ * figure it is captioned by: it says which way a quantity has been going, and
+ * the number beside it says what the quantity is. That is also why it is
+ * hidden from assistive technology rather than given a name of its own. A
+ * reader who is told "412k, sparkline" has learnt nothing the figure did not
+ * already say; a shape that genuinely carries a fact on its own is a
+ * TimeSeries, which has a window, a peak and a sentence.
+ *
+ * Fewer than two values draw nothing, and the box keeps its height, so a row
+ * of figures does not jump as one of them gains its second point.
+ */
+export declare function Sparkline({ values, color, height, className }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/Charts/dataColor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The data ramp: five series and a residual, in a fixed order.
+ *
+ * FIVE, AND THEN EVERYTHING ELSE. The ramp is measured for five hues that a
+ * reader can tell apart from each other and from the accent under normal,
+ * protan and deutan vision; a sixth would have to sit between two of them,
+ * and the honest answer to "what colour is the eleventh series" is that
+ * eleven series are not a comparison anybody can read. Past the fifth, a
+ * series takes the residual, which is the neutral that means "the rest".
+ *
+ * A DATA HUE IS ONLY EVER USED INSIDE A CHART THAT CARRIES A LEGEND. It says
+ * "this series", and a mark with no legend says nothing at all. Status,
+ * phase and the accent have their own families for exactly that reason: a
+ * chart colour never means success, and never means "you are here".
+ */
+export declare const DATA_COLORS: readonly ["var(--color-data-1)", "var(--color-data-2)", "var(--color-data-3)", "var(--color-data-4)", "var(--color-data-5)"];
+/** The neutral for everything past the fifth series. */
+export declare const DATA_COLOR_OTHER = "var(--color-data-other)";
+/** The colour of series `index`, with everything past the fifth as the residual. */
+export declare function dataColor(index: number): string;

package/dist/Charts/index.d.ts

@@ -0,0 +1,12 @@
+import './Charts.css';
+export { DATA_COLORS, DATA_COLOR_OTHER, dataColor } from './dataColor.js';
+export { Legend } from './Legend.js';
+export type { LegendItem, LegendProps } from './Legend.js';
+export { BarList } from './BarList.js';
+export type { BarDatum, BarListProps } from './BarList.js';
+export { StackedBar } from './StackedBar.js';
+export type { StackedBarProps, StackedSegment } from './StackedBar.js';
+export { ActivityStrip } from './ActivityStrip.js';
+export type { ActivityBucket, ActivityStripProps } from './ActivityStrip.js';
+export { TimeSeries, Sparkline } from './TimeSeries.js';
+export type { Series, SeriesPoint, SparklineProps, TimeSeriesProps } from './TimeSeries.js';

package/dist/Charts/index.js

@@ -0,0 +1,3 @@
+export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from '../chunk-F4PJZ4ED.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Charts-D7G2BSXH.css

@@ -0,0 +1,277 @@
+/* The chart kit: a legend, a ranked bar list, a stacked bar and an activity
+   strip. Hand-drawn rather than a charting library, for one reason that
+   decides it: every mark here reads tokens, in two themes, at the contrast
+   floors the palette suite measures, and a library's theming surface is a
+   second design system to keep in step with this one. */
+
+/* ─── Legend ──────────────────────────────────────────────────── */
+.crewlet-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/*
+ * A ROUNDED SQUARE, NOT A DOT. At the smallest radius step an 8px swatch is a
+ * circle, and a circle in this system is a StatusDot: a legend beside a chart
+ * was reading as a row of live states. Half that step keeps the corner soft
+ * and the shape square, and it is written as half a step rather than as 2px so
+ * it is still a value off the scale.
+ */
+.crewlet-legend__swatch {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: calc(var(--radius-xs) / 2);
+  background: var(--crewlet-legend-swatch-color, var(--color-data-other));
+}
+
+.crewlet-legend__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-legend__value {
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─── Bar list ────────────────────────────────────────────────── */
+.crewlet-bar-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-bar-list__item {
+  min-width: 0;
+}
+
+.crewlet-bar-list__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.crewlet-bar-list__row--pressable {
+  cursor: pointer;
+}
+
+.crewlet-bar-list__row--pressable:hover .crewlet-bar-list__label {
+  color: var(--color-text-primary);
+}
+
+.crewlet-bar-list__row--pressable:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-bar-list__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-bar-list__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-primary);
+}
+
+.crewlet-bar-list__value {
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+  /* Tabular, so a column of numbers lines up on its digits and a push that
+     changes one of them does not move the rest. */
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-bar-list__track {
+  display: block;
+  height: 5px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  overflow: hidden;
+}
+
+.crewlet-bar-list__bar {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-bar-list-bar-color, var(--color-data-other));
+}
+
+/*
+ * THE CAPTION STEP. These are sentences a reader actually reads (what a row is
+ * besides its name, how long the tail is, that there is nothing here at all),
+ * and the 11px step is the MICRO-LABEL register: it is for a word above a
+ * column, not for a line of prose.
+ */
+.crewlet-bar-list__sub,
+.crewlet-bar-list__more,
+.crewlet-bar-list__empty {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE SENTENCE STARTS WHERE THE BARS WOULD HAVE. It stands in for them, so it
+ * takes the inset the panel holding it gives every other row and none of its
+ * own.
+ *
+ * It carried the panel's own step for a while, which was a repair applied at
+ * the wrong end: the sentence was landing against a card's border because the
+ * CARD was drawing its content with no inset at all, and a padding here moved
+ * this one line while every sibling in the same card stayed against the edge.
+ * A card draws its own content in a body now, so a padding here is the panel's
+ * inset a second time.
+ */
+.crewlet-bar-list__empty {
+  margin: 0;
+  padding: 0;
+}
+
+.crewlet-bar-list__sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Stacked bar ─────────────────────────────────────────────── */
+.crewlet-stacked-bar__track {
+  display: flex;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  overflow: hidden;
+}
+
+.crewlet-stacked-bar__segment {
+  height: 100%;
+  background: var(--crewlet-stacked-bar-segment-color, var(--color-data-other));
+}
+
+/* ─── Activity strip ──────────────────────────────────────────── */
+.crewlet-activity-strip {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--crewlet-activity-strip-gap, 2px);
+  height: var(--crewlet-activity-strip-height, 26px);
+  width: 100%;
+}
+
+.crewlet-activity-strip__cell {
+  flex: 1;
+  min-width: var(--crewlet-activity-strip-cell-min-width, 2px);
+  height: var(--crewlet-activity-strip-fill, 10%);
+  /*
+   * A quarter of the smallest step. A cell is two pixels wide, so at the step
+   * itself every mark was a capsule and the strip read as a row of pills
+   * rather than as a shape.
+   */
+  border-radius: calc(var(--radius-xs) / 4);
+  /* An empty bucket is a neutral hairline: the bucket happened, and nothing
+     happened in it. That is a different fact from a quiet one, so it takes a
+     different colour rather than a fainter version of the same one. */
+  background: var(--color-border-default);
+}
+
+.crewlet-activity-strip__cell.is-active {
+  background: var(--color-data-1);
+}
+
+/* ─── Time series, and the sparkline beside a number ──────────── */
+
+/*
+ * The plot fills the width it is given and does not clip: a line that touches
+ * the top of its own box is a peak, and a box that clipped it would silently
+ * flatten exactly the moment a reader is looking for.
+ */
+.crewlet-time-series {
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-chart {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+/* The baseline: a hairline, because it is where the plot sits rather than
+   something to read. */
+.crewlet-chart__axis-line {
+  stroke: var(--color-border-default);
+  stroke-width: 1;
+}
+
+/*
+ * The grid is DASHED, which is what keeps three horizontal lines from reading
+ * as three series. They carry no values of their own: the peak under the plot
+ * is the scale, and a chart this size cannot label four gridlines legibly.
+ */
+.crewlet-chart__grid-line {
+  stroke: var(--color-border-default);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
+}
+
+/*
+ * The series line. It is painted with the colour passed on the element,
+ * because a series' hue is data rather than style; the shape of the stroke is
+ * the one thing that is the same for all of them.
+ */
+.crewlet-chart__series {
+  fill: none;
+  stroke-width: 1.75;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* The window's two ends and its peak, under the plot: the scale, as words. */
+.crewlet-time-series__scale {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-spark {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,45 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * The label beside the box, and the box's NAME. Always present: a checkbox
+     * without one is only meaningful to somebody who can see what it sits next
+     * to.
+     */
+    label: ReactNode;
+    /** What ticking it does, when the label alone does not say. */
+    description?: ReactNode;
+    /** Marks the choice as one that destroys something. */
+    tone?: 'default' | 'danger';
+    /** The bordered row a dialog uses for a decision that stands on its own. */
+    framed?: boolean;
+    /**
+     * 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,
+     * which is why it is a prop here rather than something a caller can spell.
+     */
+    indeterminate?: boolean;
+    /** The new state, for a caller that does not want to read it off an event. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * A checkbox with its sentence.
+ *
+ * THE NAME IS THE LABEL; THE DESCRIPTION DESCRIBES. Wrapping both in one
+ * `label` element makes the accessible name the whole paragraph, so a screen
+ * reader announced "Also remove the accounts Crewlet created Each agent's
+ * account at the vendor is deleted., checkbox" as one run-on name, with the
+ * consequence buried inside the thing it is a consequence of. The label span
+ * names the box through `aria-labelledby` and the description is pointed at
+ * with `aria-describedby`, which is read after the name and on request.
+ *
+ * THE WHOLE ROW IS ONE TARGET. The root is the `label`, so a press anywhere
+ * on the box, the words or the sentence beneath them ticks it: a 16px square
+ * is under every pointer-target floor there is, and the row is what makes it
+ * pass.
+ *
+ * A CALLER'S OWN `aria-describedby` IS MERGED, not replaced. A checkbox
+ * inside a FormField is described by that field's help line as well as by its
+ * own consequence, and a component that overwrites the attribute silently
+ * drops whichever sentence it did not write.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.js

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