@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Skeleton-V735HRGM.css

@@ -0,0 +1,421 @@
+/*
+ * Skeleton, the loading placeholder, in eight shapes:
+ *   box           One large rectangle with a sweeping glow, for a hero area.
+ *   text          Lines of text, with a row count and a row height.
+ *   card          One card: a title and two lines.
+ *   grid          An N by M grid of those cards.
+ *   list          Avatar and two-line rows.
+ *   table         A header and rows.
+ *   info-grid     Label and value pairs with row separators.
+ *   pricing-card  A row of cards laid out like PricingCard.Grid.
+ *
+ * Every class is namespaced under .crewlet-skeleton, so a placeholder never
+ * matches an application's own `.skeleton-line`.
+ *
+ * ITS GREY IS THE INSET OVERLAY, not a surface step. An overlay darkens
+ * whatever it is drawn on, so one value works on the page, on a card and
+ * inside a dialog; the elevated step it used to spell is invisible on an
+ * elevated surface, which is exactly where most of these sit.
+ *
+ * THE GLOW HAS ONE COLOUR, where it had five. A placeholder stands in for
+ * content that has not arrived, and a blue one and a red one say nothing
+ * different about that; each of the five was also a raw rgba outside the
+ * palette. It is the hover overlay sweeping across the inset one.
+ *
+ * EVERY BLOCK SWEEPS, where the small ones used to pulse. The engine draws one
+ * skeleton and it is a band of light travelling left to right; a block that
+ * fades in place beside one that sweeps reads as two different things loading
+ * in two different ways. The sweep is also the honest shape: it moves along
+ * the row the way the text will arrive, where a fade says only that something
+ * is happening somewhere.
+ */
+
+/* ── The sweep, shared by every shimmer block ───────────────────── */
+@keyframes crewlet-skeleton-sweep {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
+  }
+}
+
+/*
+ * The gradient is four times the box, so the lit band crosses it rather than
+ * standing still inside it. The two stops are the inset overlay and the hover
+ * one, which composite onto whatever the block is drawn on: one value works on
+ * the page, on a card and inside a dialog.
+ */
+.crewlet-skeleton .crewlet-skeleton__line,
+.crewlet-skeleton .crewlet-skeleton__avatar,
+.crewlet-skeleton .crewlet-skeleton__circle,
+.crewlet-skeleton .crewlet-skeleton__button {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-inset) 25%,
+    var(--color-surface-hover) 37%,
+    var(--color-surface-inset) 63%
+  );
+  background-size: 400% 100%;
+  /* Five of the slow step: 1.5s, which is the engine's own sweep to within a
+     tenth of a second and the nearest the scale comes to it. */
+  animation: crewlet-skeleton-sweep calc(var(--motion-duration-slow) * 5) var(--motion-easing-in-out) infinite;
+}
+
+/* ── Primitives: line, avatar, circle, button ───────────────────── */
+.crewlet-skeleton__line {
+  height: 12px;
+  border-radius: var(--radius-xs);
+  margin-bottom: var(--spacing-2);
+}
+
+.crewlet-skeleton__line:last-child {
+  margin-bottom: 0;
+}
+
+.crewlet-skeleton__line--title { height: 16px; width: 60%; margin-bottom: var(--spacing-3); }
+.crewlet-skeleton__line--text  { height: 12px; width: 100%; }
+.crewlet-skeleton__line--short { width: 70%; }
+.crewlet-skeleton__line--label { height: 13px; width: 40%; margin-bottom: var(--spacing-2); }
+.crewlet-skeleton__line--value { height: 14px; width: 80%; }
+
+.crewlet-skeleton__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-circle);
+  flex-shrink: 0;
+}
+
+.crewlet-skeleton__circle {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-circle);
+  flex-shrink: 0;
+}
+
+.crewlet-skeleton__circle--small {
+  width: 16px;
+  height: 16px;
+}
+
+.crewlet-skeleton__button {
+  width: 100%;
+  height: 36px;
+  border-radius: var(--radius-md);
+}
+
+/* ── card / grid / list containers ──────────────────────────────── */
+.crewlet-skeleton--card {
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+}
+
+/*
+ * grid and info-grid read their column count from --crewlet-skeleton-cols,
+ * set by the --cols-N modifier the component adds and lowered by the
+ * responsive rules at the end of this file.
+ */
+.crewlet-skeleton--cols-1 { --crewlet-skeleton-cols: 1; }
+.crewlet-skeleton--cols-2 { --crewlet-skeleton-cols: 2; }
+.crewlet-skeleton--cols-3 { --crewlet-skeleton-cols: 3; }
+.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 4; }
+
+.crewlet-skeleton--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-skeleton-cols, 1), 1fr);
+  gap: var(--spacing-4);
+  width: 100%;
+}
+
+.crewlet-skeleton__card {
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-5);
+}
+
+.crewlet-skeleton--list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+.crewlet-skeleton__list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-skeleton__list-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── table ──────────────────────────────────────────────────────── */
+.crewlet-skeleton--table {
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+}
+
+.crewlet-skeleton__table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+  display: table;
+  table-layout: auto;
+}
+
+.crewlet-skeleton__table thead {
+  border-bottom: 1px solid var(--color-border-default);
+  display: table-header-group;
+}
+
+.crewlet-skeleton__table tbody { display: table-row-group; }
+.crewlet-skeleton__table tr { display: table-row; }
+
+.crewlet-skeleton__th {
+  padding: 2px var(--spacing-4);
+  text-align: left;
+  position: relative;
+  display: table-cell;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.crewlet-skeleton__th .crewlet-skeleton__line {
+  height: 14px;
+  width: 60%;
+  margin: 0;
+  display: inline-block;
+  transform: translateY(-4px);
+}
+
+.crewlet-skeleton__th:first-child .crewlet-skeleton__line { width: 70%; }
+.crewlet-skeleton__th:last-child .crewlet-skeleton__line { width: 40%; }
+
+.crewlet-skeleton__tr {
+  background: var(--color-surface-subtle);
+  border-bottom: 1px solid var(--color-border-default);
+  display: table-row;
+}
+
+.crewlet-skeleton__td {
+  padding: var(--spacing-3) var(--spacing-4);
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.crewlet-skeleton__td .crewlet-skeleton__line {
+  height: 8px;
+  width: auto;
+  min-width: 80px;
+  margin: 0;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-skeleton__td:first-child .crewlet-skeleton__line { min-width: 200px; }
+.crewlet-skeleton__td:last-child .crewlet-skeleton__line { min-width: 60px; width: 60px; }
+
+/* ── info-grid (label and value pairs with row separators) ──────── */
+.crewlet-skeleton--info-grid {
+  --crewlet-skeleton-row-gap: var(--spacing-7);
+  --crewlet-skeleton-col-gap: var(--spacing-9);
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-skeleton-cols, 1), 1fr);
+  gap: var(--crewlet-skeleton-row-gap) var(--crewlet-skeleton-col-gap);
+  width: 100%;
+}
+
+.crewlet-skeleton__info-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  position: relative;
+}
+
+/*
+ * A separator centred in the row gap above the first item of every row after
+ * the first, drawn across the whole row: the item's own width times the column
+ * count, plus the column gaps between them. The row-start selectors are
+ * wrapped in :where() so every rule here shares one specificity and the
+ * responsive overrides win by source order.
+ */
+.crewlet-skeleton__info-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: calc(var(--crewlet-skeleton-row-gap) / -2);
+  width: calc(
+    100% * var(--crewlet-skeleton-cols, 1) + var(--crewlet-skeleton-col-gap) * (var(--crewlet-skeleton-cols, 1) - 1)
+  );
+  height: 1px;
+  background: var(--color-border-default);
+  display: none;
+}
+
+:where(.crewlet-skeleton--cols-1) > .crewlet-skeleton__info-item:where(:nth-child(n + 2))::before,
+:where(.crewlet-skeleton--cols-2) > .crewlet-skeleton__info-item:where(:nth-child(2n + 1):nth-child(n + 3))::before,
+:where(.crewlet-skeleton--cols-3) > .crewlet-skeleton__info-item:where(:nth-child(3n + 1):nth-child(n + 4))::before,
+:where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(4n + 1):nth-child(n + 5))::before {
+  display: block;
+}
+
+/* ── pricing-card (mirrors PricingCard.Grid and the card surface) ── */
+.crewlet-skeleton--pricing-card {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--spacing-3);
+  align-items: stretch;
+  width: 100%;
+}
+
+.crewlet-skeleton__pricing-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-skeleton__pricing-card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-skeleton__pricing-card-description {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-skeleton__pricing-card-features {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-skeleton__pricing-card-feature {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-skeleton__line--heading { width: 80px; height: 16px; margin: 0; }
+.crewlet-skeleton__line--wide { width: 90%; }
+.crewlet-skeleton__line--three-quarter { width: 75%; }
+.crewlet-skeleton__line--feature { width: 60px; height: 12px; margin: 0; }
+
+/* ── Box variant: the hero shimmer ──────────────────────────────── */
+.crewlet-skeleton--box {
+  width: 100%;
+  padding: 0;
+}
+
+.crewlet-skeleton__glow-box {
+  width: 100%;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-default);
+  position: relative;
+  overflow: hidden;
+}
+
+.crewlet-skeleton__glow-wave {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--color-surface-hover), transparent);
+  animation: crewlet-skeleton-wave calc(var(--motion-duration-slow) * 5) var(--motion-easing-in-out) infinite;
+}
+
+@keyframes crewlet-skeleton-wave {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+/* ── responsive ─────────────────────────────────────────────────── */
+@media (max-width: 1200px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 2; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 2;
+    --crewlet-skeleton-row-gap: var(--spacing-6);
+    --crewlet-skeleton-col-gap: var(--spacing-7);
+  }
+
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item::before { display: none; }
+
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(2n + 1):nth-child(n + 3))::before {
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: minmax(0, 1fr); }
+
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 1; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 1;
+    --crewlet-skeleton-row-gap: var(--spacing-5);
+  }
+
+  .crewlet-skeleton__info-item::before { display: none; }
+  .crewlet-skeleton__info-item:where(:nth-child(n + 2))::before { display: block; }
+
+  .crewlet-skeleton--card,
+  .crewlet-skeleton__card { padding: var(--spacing-4); }
+}
+
+/*
+ * A placeholder that cannot move is still a placeholder: it keeps its shape,
+ * its grey and its position, so the page still says how much is coming and
+ * still does not jump when it arrives.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-skeleton .crewlet-skeleton__line,
+  .crewlet-skeleton .crewlet-skeleton__avatar,
+  .crewlet-skeleton .crewlet-skeleton__circle,
+  .crewlet-skeleton .crewlet-skeleton__button,
+  .crewlet-skeleton__glow-wave {
+    animation: none;
+  }
+
+  /* Held still ON the inset step rather than wherever the sweep stopped: a
+     gradient frozen mid-travel is a block with a bright stripe down it. */
+  .crewlet-skeleton .crewlet-skeleton__line,
+  .crewlet-skeleton .crewlet-skeleton__avatar,
+  .crewlet-skeleton .crewlet-skeleton__circle,
+  .crewlet-skeleton .crewlet-skeleton__button {
+    background: var(--color-surface-inset);
+  }
+
+  .crewlet-skeleton__glow-wave {
+    display: none;
+  }
+}

package/dist/StatCard/StatCard.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The STATE this number is in, when it has one.
+ *
+ * DELIBERATELY ABSENT FROM MOST STATS. Colour carries state and never
+ * identity, and a token count or an elapsed time is not in a state: tinting
+ * every tile would spend the four status hues on decoration and leave the one
+ * tile that means something indistinguishable from its neighbours. Use it
+ * where the value IS an outcome, such as a turn's decision or a probe's
+ * verdict, and nowhere else.
+ *
+ * There is no `brand` here. The accent means "where the reader is", and a
+ * number is never that.
+ */
+export type StatCardTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** What is being counted, for example "Total tokens". */
+    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". */
+    unit?: ReactNode;
+    /** A second line under the label: "3 working, 4 idle". Its line is reserved either way. */
+    sub?: 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. */
+    tone?: StatCardTone;
+    /** The value has not arrived. Draws a placeholder and marks the tile busy. */
+    loading?: boolean;
+    /** What a reader is told while it is loading. */
+    loadingLabel?: string;
+    /**
+     * Drop the tile's own surface, border and radius, so a StatGroup can draw
+     * one card around the row and hairlines between the tiles inside it.
+     */
+    flush?: boolean;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare const StatCard: ({ label, value, unit, sub, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/StatCard/index.d.ts

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

package/dist/StatCard/index.js

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

package/dist/StatCard-KYPKZUWX.css

@@ -0,0 +1,111 @@
+/*
+ * The stat tile.
+ *
+ * THE TONE PAINTS THE VALUE, which is what the props always said and what the
+ * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
+ * and no icon got a tile identical to a neutral one. Ink only, and never a
+ * fill: a tinted block behind a 24px number reads as a button.
+ */
+
+.crewlet-statcard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-4);
+  /* The panel recipe: the surface, the hairline, the 12px corner and the
+     elevation the engine gives every card on a screen, so a lone tile is the
+     same object as the panel beside it rather than a flatter cousin. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs), var(--shadow-hairline);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  min-width: 0;
+}
+
+/* Inside a StatGroup the row is one card and the tiles are its columns, so a
+   tile brings no surface of its own. */
+.crewlet-statcard--flush {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+  box-shadow: none;
+}
+
+.crewlet-statcard__value {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  /* 1.1, the engine's, which is tighter than the tight step: a 24px number
+     with 1.2 of leading sits low in its box and opens a gap between the value
+     and the line under it that the 4px gap was already spending. */
+  line-height: 1.1;
+  /* A number that ticks up must not move the label under it. */
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-statcard__unit {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The placeholder is a line, not a pair of dashes. `--` is read aloud as
+ * "dash dash" and looks exactly like a measured value of nothing; the tile
+ * carries aria-busy instead, and the line says the number is on its way.
+ */
+.crewlet-statcard__placeholder {
+  display: inline-block;
+  width: 3ch;
+  height: 0.7em;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-statcard__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  min-width: 0;
+}
+
+.crewlet-statcard__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * The second line keeps its space whether or not there is one, so a row of
+ * tiles where only some carry a sub still sits on one baseline.
+ */
+.crewlet-statcard__sub {
+  min-height: 1.2em;
+  font-size: var(--font-size-xs);
+  /* The quiet step, with the label. The sub qualifies the number rather than
+     being a second one, and the engine keeps both of them a step under the
+     value they belong to. */
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
+.crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }

package/dist/StatGroup/StatGroup.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How many tiles a row holds. FIXED, and that is the whole point: the board
+     * this replaces reflowed from one column to three as tiles appeared and
+     * vanished, which moved every number on the page for a reason that had
+     * nothing to do with the numbers.
+     */
+    columns?: 2 | 3 | 4;
+    children?: ReactNode;
+}
+/**
+ * A row of stat tiles, as one card.
+ *
+ * The tiles inside it are `flush`, so the group draws the surface and the
+ * hairlines between them rather than four separate cards with gaps. Under the
+ * md breakpoint it drops to two columns, which is the last count at which a
+ * six-character number still fits on one line of a phone.
+ */
+export declare function StatGroup({ columns, className, children, ...rest }: StatGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/StatGroup/index.d.ts

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

package/dist/StatGroup/index.js

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