@crewlethq/ui 0.4.3 → 0.5.0

package/dist/Charts-D7G2BSXH.css

@@ -1,277 +0,0 @@
-/* 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/CommandPalette-CSJDUCQA.css

@@ -1,115 +0,0 @@
-/*
- * The command palette: a field, a list, and a line of keyboard hints.
- *
- * It is a Modal with its body's padding dropped, so the three bands run edge to
- * edge and the field reads as the surface rather than as a question on a form.
- * The rows are the listbox register (`Listbox.css`), because a result here and
- * a completion in a field are the same thing to a reader and the accent that
- * marks the active row has to mean the same in both.
- *
- * THE TWO OVERRIDES BELOW NAME BOTH CLASSES ON PURPOSE. A single class would
- * tie with the rule it is overriding (`.crewlet-modal--md`,
- * `.crewlet-input--command`), and a tie is broken by the order the stylesheets
- * happen to be concatenated in, which is alphabetical over filenames.
- */
-
-.crewlet-modal.crewlet-palette {
-  /* Wider than a prompt and shorter than the window: a launcher is read in one
-     glance, and a list taller than this is a list nobody scans. */
-  --crewlet-modal-width: 620px;
-
-  max-height: min(60dvh, 520px);
-}
-
-/*
- * THE BODY LAYS THE THREE BANDS OUT, and the RESULTS are what scrolls.
- *
- * A Modal's body is a block that scrolls its whole content, which is right for
- * a dialog read top to bottom and wrong here: the field would ride up out of
- * view as the arrows walked the list, and the list, sized to its own content,
- * would never overflow, so the row the listbox brings into view by scrolling
- * that element would have nowhere to go.
- */
-.crewlet-palette .crewlet-modal__body {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/*
- * The field, drawn as the surface's own top band: no box of its own, the full
- * height of a large row, and the question asked at the reading size rather
- * than at a control's. It is the first thing on the surface and the only thing
- * with focus, so it is the surface's headline as much as its input.
- */
-.crewlet-input.crewlet-palette__field {
-  flex-shrink: 0;
-  min-height: var(--size-row-lg);
-  padding-inline: var(--spacing-4);
-  border: none;
-  border-bottom: 1px solid var(--color-border-default);
-  border-radius: 0;
-  background: transparent;
-}
-
-.crewlet-input.crewlet-palette__field .crewlet-input__control {
-  font-size: var(--font-size-md);
-}
-
-/*
- * THE FOOT IS THE KEYBOARD'S OWN BAND, at the micro register rather than the
- * modal footer's. A modal's foot carries buttons and is sized for them; this
- * one carries a line of keycaps saying what the arrows, Enter and Escape do,
- * and at a dialog's padding that line reads as an action row nobody can press.
- *
- * Both classes are named for the same reason the two rules below are: a single
- * class ties with `.crewlet-modal__footer`, and a tie is broken by the order
- * the stylesheets are concatenated in.
- */
-.crewlet-palette .crewlet-modal__footer {
-  gap: var(--spacing-3);
-  padding: var(--spacing-2) var(--spacing-3);
-}
-
-.crewlet-palette .crewlet-modal__footer-start {
-  gap: var(--spacing-3);
-  font-size: var(--font-size-2xs);
-}
-
-.crewlet-palette__results {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--spacing-1);
-}
-
-/*
- * The glyph takes the ROW'S colour rather than a quiet step of its own, so the
- * row under the arrows turns accent in one piece. Pinned to the tertiary step
- * it stayed grey inside the highlight, which read as a glyph that had failed
- * to load.
- */
-.crewlet-palette__icon {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.crewlet-palette__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
- * An honest empty state: it says which kind of nothing this is, and the
- * component takes the sentence from the caller for that reason.
- */
-.crewlet-palette__empty {
-  margin: 0;
-  padding: var(--spacing-5) var(--spacing-4);
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-compact);
-  text-align: center;
-}

package/dist/Kbd-W66MXQI5.css

@@ -1,61 +0,0 @@
-/* A keycap: the key's name on a small raised tile. */
-.crewlet-kbd {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 18px;
-  padding: 1px var(--spacing-1);
-  border-radius: var(--radius-xs);
-  border: 1px solid var(--color-border-default);
-  /* The thicker bottom edge is the whole of the "cap": one border, drawn
-     heavier on one side, reads as a key without a shadow that forced-colors
-     mode would drop. */
-  border-bottom-width: 2px;
-  background: var(--color-surface-inset);
-  /*
-   * The MONO face, not the surrounding one. A keycap is a literal: the reader
-   * is being told which character is printed on a key, and a proportional face
-   * draws `l`, `I` and `1` as three widths of the same mark.
-   */
-  font-family: var(--font-family-mono);
-  font-variant-ligatures: none;
-  font-size: var(--font-size-2xs);
-  /* THE DOCUMENT'S OWN LEADING, because a cap is drawn INSIDE a line of text
-     and not beside it: a hint at the end of a search field, a key named in a
-     sentence, a shortcut in a menu row. Tightened it stood a pixel under the
-     line it sits in and the row it was in wobbled by that pixel wherever a
-     cap appeared and wherever one did not. */
-  line-height: var(--font-line-height-normal);
-  color: var(--color-text-tertiary);
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-/*
- * A quieter cap: FLATTER, not fainter. The opacity this replaces multiplied
- * the ink as well as the frame, and 0.7 of a text step measures 3.43:1 on the
- * panel, so a hint printing the key a reader is told to press was the one
- * thing on the row they could not read. The cap gives up its raised edge and
- * its fill instead, and keeps the tertiary ink, which is measured at 4.5:1 on
- * every surface the package paints on.
- */
-.crewlet-kbd--subtle {
-  border-bottom-width: 1px;
-  background: none;
-}
-
-/*
- * A whole shortcut: the caps drawn together, and one sentence read instead of
- * them. The caps are hidden from assistive technology by the component; this
- * only lays them out.
- */
-.crewlet-kbd-combo {
-  display: inline-flex;
-  align-items: center;
-}
-
-.crewlet-kbd-keys {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}

package/dist/SearchTrigger-QXOYAUUY.css

@@ -1,79 +0,0 @@
-/*
- * A button drawn as the field it stands in for.
- *
- * Below the shell breakpoint it keeps the glyph and drops the label and the
- * hint, which is why the name lives on the button rather than in its text.
- */
-
-.crewlet-search-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  /* The resting width of the box. A topbar with less room sets it. */
-  --crewlet-search-trigger-width: 220px;
-  min-width: var(--crewlet-search-trigger-width);
-  height: var(--size-control-md);
-  padding: 0 var(--spacing-2) 0 var(--spacing-3);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-subtle);
-  color: var(--color-text-tertiary);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-compact);
-  cursor: pointer;
-  transition:
-    border-color var(--motion-duration-fast) var(--motion-easing-default),
-    color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-search-trigger:hover {
-  border-color: var(--color-border-hover);
-  color: var(--color-text-primary);
-}
-
-.crewlet-search-trigger:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-}
-
-.crewlet-search-trigger__icon {
-  display: inline-flex;
-  flex: none;
-}
-
-/* The glyph is quieter than the word beside it, on the decoration step, which
-   is the one thing that step is for. */
-.crewlet-search-trigger__icon svg {
-  color: var(--color-text-muted);
-}
-
-.crewlet-search-trigger__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* The hint as a whole, so its keys stay together at the end of the box. */
-.crewlet-search-trigger__shortcut {
-  display: inline-flex;
-  align-items: center;
-  margin-left: auto;
-  flex: none;
-}
-
-@media (max-width: 900px) {
-  .crewlet-search-trigger {
-    min-width: 0;
-  }
-
-  .crewlet-search-trigger__label,
-  .crewlet-search-trigger__shortcut {
-    display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-search-trigger {
-    transition: none;
-  }
-}