@crewlethq/ui 0.4.4 → 0.5.1

package/dist/SidebarNav-X5NLZNWA.css

@@ -0,0 +1,424 @@
+/*
+ * The rail's navigation.
+ *
+ * ONE VERTICAL LINE. The rail pads by --size-nav-gutter and each row pads by
+ * --size-nav-row-pad, so the mark, the group labels and every row's text start
+ * on the same line: shrink the gutter and grow the pad by the same step and
+ * nothing moves. That is why the row's own background takes the full width the
+ * gutter leaves it, rather than each row carrying a horizontal margin of its
+ * own.
+ */
+
+.crewlet-sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2) var(--size-nav-gutter) var(--spacing-4);
+}
+
+/*
+ * THE ROWS INSIDE A GROUP ARE HALF A STEP APART: the approved design's 2px,
+ * which is what keeps a hovered row's tint from touching the raised row under
+ * it and reading as one band two rows tall. It is half a step rather than one
+ * because a rail holds fifteen destinations and more: at 4px a row the rail
+ * stood 823px in a 755px scroller when its rows were 36px, and the last two
+ * destinations were reachable only by scrolling it. At the 30px row step the
+ * same fifteen rows and fourteen 2px gaps are 478px against 540px flush at the
+ * old step, so the gap is paid for many times over by the row it sits beside.
+ */
+.crewlet-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * THE HEADING: the group's name and, at its end, an optional control (the add
+ * beside "Projects"). It stands at the pointer-target floor, because that
+ * control is a target and the heading is the row it is drawn in; with no
+ * control the heading keeps the same height, so a rail whose groups differ
+ * only in whether they can add something does not change its rhythm.
+ *
+ * Held off the run above by a margin rather than a padding, so its height
+ * does not depend on the document's box-sizing: with the rail's own gap it is
+ * 14px, the design's space between two runs, at density 1.
+ *
+ * Its end inset is a step SHORTER than a row's, because the control is a
+ * 24px square with its glyph centred in it: the row pad would put the glyph
+ * five pixels inside the line every count above and below it ends on.
+ */
+.crewlet-nav-group__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-target-min);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding: 0 var(--spacing-2) 0 var(--size-nav-row-pad);
+}
+
+/*
+ * The group's name in the design's register: sentence case at the caption
+ * step, not the uppercase micro-label it was. It is the same case as every row
+ * it names, so "Projects" reads as the word it is rather than as a label
+ * shouted over the rows, and the quieter ink rather than the tracking is what
+ * sets it apart from them.
+ */
+.crewlet-nav-group__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-tight);
+  /* The 4.5:1 step: a group name is a fact a reader has to read, not
+     decoration. */
+  color: var(--color-text-tertiary);
+}
+
+/* The heading's control. Pushed to the end whether or not the heading has
+   words, and at the floor the heading stands at. */
+.crewlet-nav-group__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-group__action:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* Inside its own box, like every control in the rail: the rail is a clipping
+   scroller. */
+.crewlet-nav-group__action:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-nav-group__action-icon {
+  display: inline-flex;
+}
+
+.crewlet-nav-item {
+  min-width: 0;
+}
+
+.crewlet-nav-item__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-nav-item__row {
+  display: flex;
+  align-items: center;
+  /* The design's 10px between a glyph and its word. */
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  /* The rail's own row step, 30px: a list's 36px row spent six pixels fifteen
+     times over in a column the height of the window. */
+  min-height: var(--size-nav-row);
+  padding: 0 var(--size-nav-row-pad);
+  border: none;
+  /* The chrome's radius, not a card's. A 12px corner on a 30px row leaves the
+     tint reading as a lozenge floating in the gutter rather than as a band the
+     width of the rail. */
+  border-radius: var(--radius-md);
+  background: transparent;
+  /*
+   * A RESTING ROW IS THE SECONDARY STEP, and the reader's own row and a
+   * pointed one lift to the primary. That step is what says which row is
+   * which before the fill does: at full ink every row carried the current
+   * row's own weight, so the rail read heavier and brighter than the approved
+   * design and the current row was found by its lift alone. The secondary step
+   * is held at 4.5:1 on the rail and under the hover overlay by
+   * @crewlethq/tokens (RAIL_PAINTS), so quieter is not fainter.
+   *
+   * The glyph has no colour of its own: it is drawn in currentColor and so is
+   * this ink, on every row, which is what keeps a row from painting its word
+   * and its glyph two different answers to "where am I".
+   */
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  /* THE CHROME IS NOT BODY TEXT. A rail row names a destination; it is read at
+     a glance and never read through, so it takes the compact step in the
+     medium weight, which is what keeps a one-word row legible at 13px. */
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-snug);
+  line-height: var(--font-line-height-tight);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-item__row:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+/*
+ * WHERE THE READER IS: the row stands on RAISED, with the plain border drawn
+ * round it as a hairline INSIDE the row, and lifts to the primary ink.
+ *
+ * It is found the way a card is found. In light, raised is only dE 1.84 off
+ * the frame the rail stands on, so the fill alone is a lift a reader may not
+ * see; the hairline is what carries the row, and in dark it is also what
+ * tells the current row from a hovered one, whose fill lands only dE 1.56
+ * away. @crewlethq/tokens holds both halves by name: the row lifts off the
+ * rail by dE 1.5 and the hairline clears dE 3 on the row it is drawn on.
+ *
+ * It used to be the accent's own soft tint with the label in the accent ink.
+ * The accent is the fill of the primary action now, so a violet row in the
+ * rail would read as a second primary on every screen, beside the one the
+ * screen is actually asking for. Where the reader is, is the row's position,
+ * its lift and its line; aria-current says it to a screen reader.
+ *
+ * THE HAIRLINE IS AN OUTLINE, not an inset box-shadow, for the reason the
+ * focus ring is one: forced-colors mode drops every box-shadow and every
+ * background and keeps outlines, so drawn as a shadow the current row would
+ * be indistinguishable from its neighbours for exactly the readers that mode
+ * exists for. The focus ring is the same property, so its rule is declared
+ * after this one and a focused current row draws the ring instead.
+ *
+ * Drawn from aria-current, so the picture and what a screen reader is told
+ * cannot come apart. It is declared after :hover deliberately: both selectors
+ * weigh the same, a row shows the current lift or the hover overlay and never
+ * both, and later is what decides which.
+ */
+.crewlet-nav-item__row[aria-current='page'] {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  color: var(--color-text-primary);
+}
+
+.crewlet-nav-item__row[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.crewlet-nav-item__row[aria-disabled='true']:hover {
+  background: transparent;
+  color: var(--color-text-secondary);
+}
+
+/*
+ * After the current row's rule, which draws its hairline on the same
+ * property: both weigh the same, so source order is what lets a focused
+ * current row draw the ring rather than the line.
+ */
+.crewlet-nav-item__row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inside the row's own box: the rail is a clipping scroller, so an outset
+     ring on the first or last row is cut off by it. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE GLYPH IS THE LABEL'S INK. Lucide draws in currentColor, so the glyph
+ * takes whatever the row is painted in, at rest, pointed and current alike,
+ * and there is no second ramp to fall out of step with the word beside it.
+ */
+.crewlet-nav-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+.crewlet-nav-item__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * A PROJECT'S KEY, as a chip in the glyph's place: the prefix every item in
+ * the project is filed under, in mono so ENG and PROD line up by letter. It
+ * is the raised rung inside the plain hairline, in the secondary ink, which
+ * the palette suite measures on every ground a row can have; on the reader's
+ * own row, which is raised too, the hairline is what draws it.
+ */
+.crewlet-nav-item__lead {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0 calc(var(--spacing-1) + 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  line-height: var(--font-line-height-body);
+}
+
+/*
+ * THE COUNT: how many of something the destination holds, as a quiet figure
+ * at the end of the row. Tabular, so a count that ticks up does not move the
+ * words beside it. A mark before it (the working dot beside a count of agents
+ * at work) stands half a step off the figure.
+ */
+.crewlet-nav-item__count {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  margin-left: auto;
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-nav-item__figure {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) + 1px);
+}
+
+.crewlet-nav-item__mark {
+  display: inline-flex;
+}
+
+/* The count takes the row's ink on the current row, lifting from the tertiary
+   step to the primary ink with the row it sits in: the tertiary step is
+   measured on the rail and under the hover overlay, and the raised row is a
+   ground it was never held to. */
+.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__count {
+  color: inherit;
+}
+
+/*
+ * THE BADGE, THE ONE FIGURE IN THE CHROME ALLOWED A HUE, and it is the
+ * accent. A count of what is waiting on the reader is the one thing in the
+ * rail that asks them to act, which is what the accent means, and it is the
+ * one thing that should pull the eye out of whatever screen they are on. It
+ * is a FILL carrying a figure rather than a figure in a hue, so it reads to
+ * somebody who cannot separate the hue at all: the filled pill is the signal,
+ * the figure is the count.
+ *
+ * The design's 18px pill, at least as wide as it is tall so a single digit is
+ * a round mark and not a lozenge, and following the density like the xs Tag
+ * it matches. The label is the on-accent step, the primary action's own pair,
+ * on every row alike, because the fill is opaque.
+ */
+.crewlet-nav-item__badge {
+  --crewlet-nav-item-badge-size: calc(18px * var(--density, 1));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  min-width: var(--crewlet-nav-item-badge-size);
+  height: var(--crewlet-nav-item-badge-size);
+  margin-left: auto;
+  padding: 0 calc(var(--spacing-1) + 1px);
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* Beside a count the badge is the second figure, not a second push to the
+   end: two auto margins would split the room between them and float the
+   count into the middle of the row. */
+.crewlet-nav-item__count + .crewlet-nav-item__badge {
+  margin-left: var(--spacing-2);
+}
+
+.crewlet-nav-item__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+}
+
+.crewlet-nav-item__toggle:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-nav-item__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-nav-item__chevron {
+  display: inline-flex;
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-item__chevron--open {
+  transform: rotate(180deg);
+}
+
+/*
+ * Nested rows carry an indent guide rather than more padding, because a run of
+ * indents with no line is a hierarchy a reader has to measure by eye. On the
+ * path the reader is on the guide steps up to the strong border: the same
+ * neutral lift the current row itself takes, and not the accent, which the
+ * rail keeps for the one count that asks the reader to act.
+ */
+.crewlet-nav-item__children {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin-left: var(--size-nav-row-pad);
+  padding-left: var(--spacing-2);
+  border-left: 1px solid var(--color-border-default);
+}
+
+/* No type step of its own any more: every row in the rail reads at the compact
+   step now, and the indent guide is what says a row is nested. */
+.crewlet-nav-item__children:has(.crewlet-nav-item__row[aria-current='page']) {
+  border-left-color: var(--color-border-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-nav-group__action,
+  .crewlet-nav-item__row,
+  .crewlet-nav-item__chevron {
+    transition: none;
+  }
+}

package/dist/StatCard/StatCard.d.ts

@@ -13,15 +13,54 @@ import type { HTMLAttributes, ReactNode } from 'react';
  * number is never that.
  */
 export type StatCardTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * Whether a change is the one the reader wanted.
+ *
+ * NOT the direction. The sign in the value already says which way the number
+ * moved, and whether up is good is a property of what is counted rather than
+ * of the arithmetic: twelve percent more work completed is good news and
+ * twelve percent more tokens spent may not be. So the caller, who knows what
+ * the tile counts, says which it is, and `neutral` is a change that is neither
+ * (four more tasks in progress is not a verdict, it is a fact).
+ */
+export type StatCardDeltaPolarity = 'good' | 'bad' | 'neutral';
+/** A change against an earlier reading, drawn at the head of the second line. */
+export interface StatCardDelta {
+    /** The change, already formatted by the caller and carrying its own sign: "+12%", "−3", "+4". */
+    value: ReactNode;
+    /** Whether it is the change the reader wanted. See the type. */
+    polarity: StatCardDeltaPolarity;
+}
 export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
-    /** What is being counted, for example "Total tokens". */
+    /** What is being counted, in sentence case: "Tasks in progress". */
     label: ReactNode;
     /** The headline value, already formatted by the caller. */
     value: ReactNode;
-    /** A unit after the value, at a quieter weight: "ms", "/ 20K", "per turn". */
+    /** A unit after the value, at a quieter weight: "ms", "/ 7", "per turn". */
     unit?: ReactNode;
-    /** A second line under the label: "3 working, 4 idle". Its line is reserved either way. */
+    /** The second line: "vs last week · 2 blocked". Its line is reserved either way. */
     sub?: ReactNode;
+    /**
+     * The STATE the second line reports, when it reports one: "Oldest waiting
+     * 2h 10m" is a person being kept waiting, so it is `warning`. Paints the
+     * line in that tone's ink, the step measured as text on every rung. The
+     * same rule as `tone`: most second lines are a fact, not a state, and stay
+     * in the quiet ink. A `delta` keeps the ink of its own polarity.
+     */
+    subTone?: StatCardTone;
+    /**
+     * A change against an earlier reading, drawn first on the second line in
+     * the ink of its polarity, with `sub` after it: "+12% vs previous 7 days".
+     */
+    delta?: StatCardDelta | undefined;
+    /**
+     * A small figure at the end of the value's line, such as a `Sparkline`, a
+     * `Meter` or a `SegmentedMeter`, or a small control that acts on the
+     * number. A figure fills the slot's width and a control keeps its own. The
+     * slot is `--crewlet-statcard-trend-width` wide, 96px unless a stylesheet
+     * says otherwise.
+     */
+    trend?: ReactNode;
     /** A glyph before the label. A component, not a name. */
     icon?: ReactNode;
     /** Colours the VALUE's ink. See the type for when that is right. */
@@ -39,18 +78,26 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * One number, with what it counts.
  *
- * THE LABEL SITS ABOVE THE VALUE, in the micro-caps register, which is the
- * engine's order and the one a board is actually read in: the labels are what
- * a reader scans to find the tile they want, and the number is the answer
- * underneath it. It is also the order a screen reader reads correctly, "live
- * nodes, four, holding an unexpired lease" rather than "four, live nodes".
- * The numbers still sit on one line across the row, because the label register
- * is one line at every tile and the value box is a fixed step.
+ * THE LABEL SITS ABOVE THE VALUE, in sentence case at the caption step, which
+ * is the approved design's tile and the order a board is actually read in:
+ * the labels are what a reader scans to find the tile they want, and the
+ * number is the answer underneath it. It is also the order a screen reader
+ * reads correctly, "tasks in progress, 18, +4 vs last week" rather than "18,
+ * tasks in progress". The label is set as it is written: the uppercased,
+ * tracked-open register is a table's column head, and five of them over five
+ * numbers shouted a heading at every tile.
+ *
+ * THE VALUE IS THE SCREEN'S ONE DISPLAY NUMBER, at `--font-size-display` with
+ * tabular figures, so a number that ticks up moves nothing beside it. A
+ * figure showing where it has been going sits at the END of the same line
+ * (`trend`), and a change against an earlier reading heads the line under it
+ * (`delta`), in the ink of whether it was the change the reader wanted.
  *
  * WHILE IT IS LOADING IT SAYS SO. It used to draw a literal `--`, which a
  * screen reader reads aloud as "dash dash" and which looks exactly like a
  * measured value of nothing. A placeholder line plus `aria-busy` on the tile
  * says the number has not arrived, which is a different fact from the number
- * being zero.
+ * being zero. The trend and the delta wait with it: both are readings of the
+ * number that has not arrived.
  */
-export declare const StatCard: ({ label, value, unit, sub, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;
+export declare const StatCard: ({ label, value, unit, sub, subTone, delta, trend, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;

package/dist/StatCard/index.d.ts

@@ -1,3 +1,3 @@
 import './StatCard.css';
 export { StatCard } from './StatCard.js';
-export type { StatCardProps, StatCardTone } from './StatCard.js';
+export type { StatCardDelta, StatCardDeltaPolarity, StatCardProps, StatCardTone } from './StatCard.js';

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-22O7LAW2.js';
+export { StatCard } from '../chunk-IKB6HFGK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';