@crewlethq/ui 0.2.0 → 0.4.0

package/dist/TimeWindowPicker-7I7KWCMU.css

@@ -0,0 +1,403 @@
+/*
+ * TimeWindowPicker: one trigger over one panel.
+ *
+ * The trigger takes the same geometry as a Select and a DateTimePicker, so the
+ * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * the calendars, rather than two tabs with one of them hidden: the windows a
+ * reader picks by name are the road, and the absolute range is the turning off
+ * it, so both are on screen at once and each shows what the other chose.
+ */
+
+.crewlet-time-window {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--size-control-md);
+  /* The side inset only: see DateTimePicker's own trigger. */
+  padding: 0 var(--spacing-2) 0 var(--spacing-3);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: var(--font-size-compact);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-time-window--sm {
+  min-height: var(--size-control-sm);
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-time-window:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+}
+
+.crewlet-time-window:focus-visible,
+.crewlet-time-window.is-open {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-color: var(--color-focus);
+}
+
+.crewlet-time-window.is-disabled,
+.crewlet-time-window:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Decoration, as every glyph that repeats what the control already says. */
+svg.crewlet-time-window__icon,
+svg.crewlet-time-window__chevron {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.crewlet-time-window__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-time-window__label.is-placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* ─── The panel ──────────────────────────────────────────────── */
+
+/*
+ * SIZED BY WHAT IS IN IT, not to a number. A calendar's width is seven control
+ * squares, and a control square is a different size at each density, so a panel
+ * pinned to one width is a panel with a hole in it at compact and a wrapped
+ * week at comfortable. The max-width is the only number, and it is the window's.
+ */
+.crewlet-time-window__popover {
+  padding: 0;
+  /* A window picker is one fixed-size thing: shown whole, or not shown. */
+  overflow: visible;
+  width: max-content;
+  max-width: calc(100vw - var(--spacing-8));
+  max-height: none;
+}
+
+.crewlet-time-window__panel {
+  display: grid;
+  grid-template-columns: auto;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3);
+}
+
+.crewlet-time-window__panel--both {
+  grid-template-columns: auto auto;
+}
+
+/* ─── The rail of named windows ──────────────────────────────── */
+
+.crewlet-time-window__relative {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-time-window__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+/*
+ * A window on the rail is a MENU ROW, drawn the way every other row of choices
+ * in the package is drawn: one line, the row corner, the tick in the accent ink
+ * for the one that is on and the hover tint for the one under the pointer. The
+ * two are different facts about different rows, so they are never the same
+ * paint.
+ */
+.crewlet-time-window__preset {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-xs);
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-compact);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-time-window__preset:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-time-window__preset.is-active {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-time-window__preset:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Drawn inside: the rail is a column in a grid with a panel edge beside it,
+     and an outset ring on the last row is clipped by it. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* Held, rather than dropped, so the labels do not step sideways as the
+   choice moves down the rail. */
+svg.crewlet-time-window__tick {
+  flex-shrink: 0;
+  visibility: hidden;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-time-window__preset.is-active svg.crewlet-time-window__tick {
+  visibility: visible;
+}
+
+.crewlet-time-window__preset-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-time-window__custom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-time-window__custom-label {
+  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);
+}
+
+.crewlet-time-window__custom-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* ─── The absolute range ─────────────────────────────────────── */
+
+.crewlet-time-window__absolute {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-time-window__absolute-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.crewlet-time-window__absolute-title {
+  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);
+}
+
+.crewlet-time-window__tz {
+  flex: 0 0 auto;
+}
+
+.crewlet-time-window__calendars {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--spacing-4);
+}
+
+.crewlet-time-window__calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-time-window__calendar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-1);
+}
+
+.crewlet-time-window__calendar-title {
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-time-window__fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-3);
+}
+
+.crewlet-time-window__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-time-window__field-label {
+  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);
+}
+
+.crewlet-time-window__field-row {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+/* ─── The masked boxes ───────────────────────────────────────── */
+
+/*
+ * The value and the shape still to be filled sit side by side in one box, in
+ * the same mono face at the same size, so the two read as one string. The
+ * remainder is a PICTURE: it is aria-hidden, because a reader hearing "Y Y Y
+ * Y slash M M" is being read a template rather than a value.
+ */
+.crewlet-time-window__masked {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  padding: 0 var(--spacing-2);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-time-window__masked:focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-color: var(--color-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.crewlet-time-window__masked-input {
+  min-width: 0;
+  /* The `size` attribute the component sets is what holds the width open in
+     every engine; this narrows it to the text where it is supported. */
+  width: auto;
+  field-sizing: content;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font: inherit;
+  color: var(--color-text-primary);
+}
+
+.crewlet-time-window__masked-input[aria-invalid='true'] {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-time-window__masked-rest {
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+/* ─── The footer ─────────────────────────────────────────────── */
+
+/*
+ * WHAT IS SELECTED, and what to do about it, on one line under both columns.
+ * The sentence is first because it is the answer to the question the panel was
+ * opened to ask, and the buttons are what a reader reaches for after reading
+ * it.
+ */
+.crewlet-time-window__footer {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-time-window__summary {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-time-window__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+/*
+ * One column on a narrow window: the rail over the calendars, and the two
+ * months stacked. The panel is as wide as its content, so without this the
+ * only thing a phone-sized window could do with it is clip it.
+ */
+@media (max-width: 768px) {
+  .crewlet-time-window__panel--both,
+  .crewlet-time-window__calendars,
+  .crewlet-time-window__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .crewlet-time-window__footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /*
+   * One column is a tall column, and a panel taller than the window puts Apply
+   * below the fold of a surface the page cannot scroll: the reader can change
+   * the window and never commit it. So here, and only here, the panel takes
+   * back the scrolling every other popover in the package does.
+   */
+  .crewlet-time-window__popover {
+    max-height: calc(100vh - var(--spacing-10));
+    overflow: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-time-window,
+  .crewlet-time-window__masked,
+  .crewlet-time-window__preset {
+    transition: none;
+  }
+}

package/dist/Timeline/Timeline.d.ts

@@ -0,0 +1,51 @@
+import { type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react';
+export type TimelineItemState = 
+/** Done, or simply past. */
+'default'
+/** This step failed. */
+ | 'danger'
+/** This step is where the work is now. */
+ | 'active';
+export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * The word read before an item's number. "Round" makes the hidden label
+     * "Round 3", which is what a reader listening to a long ledger needs.
+     */
+    itemLabel?: string | undefined;
+    /**
+     * Tints every other item on the inset surface. Two steps, alternating: it
+     * separates adjacent blocks without claiming a meaning.
+     */
+    alternating?: boolean | undefined;
+}
+/**
+ * A numbered sequence of steps, each bracketed by its own rail.
+ *
+ * THE RAIL BRACKETS AN ITEM, it does not connect siblings. Drawn between items
+ * instead, a sequence of one gets no rail at all, which is the common case and
+ * the one a reader complained about: a bare numeral in the gutter beside a
+ * flat stack of look-alike rows. Bounded to its own item, every step is
+ * delimited and the ledger still ends where its last step's content ends.
+ */
+export declare function Timeline({ itemLabel, alternating, className, children, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Timeline {
+    var Item: typeof TimelineItem;
+}
+export interface TimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    state?: TimelineItemState | undefined;
+    /**
+     * What the node draws. The item's own number by default, which is what a
+     * numbered ledger wants; a glyph where the step has an identity of its own.
+     */
+    marker?: ReactNode;
+    /** Overrides the hidden label, for a step whose name is not its number. */
+    label?: string | undefined;
+}
+/**
+ * One step.
+ *
+ * Its rail runs from under the node to the bottom of THIS item's content, on
+ * every item including the last, so appending one changes nothing about the
+ * items already drawn.
+ */
+export declare function TimelineItem({ state, marker, label, className, children, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/Timeline/index.d.ts

@@ -0,0 +1,3 @@
+import './Timeline.css';
+export { Timeline, TimelineItem } from './Timeline.js';
+export type { TimelineProps, TimelineItemProps, TimelineItemState } from './Timeline.js';

package/dist/Timeline/index.js

@@ -0,0 +1,3 @@
+export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Timeline-27SYKOFX.css

@@ -0,0 +1,144 @@
+/*
+ * A numbered ledger: a node per step, a rail bracketing that step's content.
+ *
+ * TWO DEVICES, TWO JOBS. The alternating tint separates adjacent blocks; the
+ * rail bounds one. Drawn the other way round, as a connector strictly BETWEEN
+ * steps, a ledger of one step got neither, and it rendered as a bare numeral
+ * in the gutter beside a flat stack of look-alike rows.
+ */
+
+.crewlet-timeline {
+  /* The node's diameter, which the rail's offset and its left edge both read
+     off, so moving the node is one edit rather than three. */
+  --crewlet-timeline-node-size: 18px;
+  --crewlet-timeline-pulse-period: 1.8s;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * The block padding separates one step from the next, and it has to beat the
+ * gap INSIDE a step by enough to read as a different kind of boundary.
+ */
+.crewlet-timeline__item {
+  display: grid;
+  grid-template-columns: var(--crewlet-timeline-node-size) minmax(0, 1fr);
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) 0;
+  /* The well's radius, which is what every inset block on a screen is drawn
+     at. A step tighter here made a tinted step read as a chip. */
+  border-radius: var(--radius-md);
+}
+
+/*
+ * Two steps, alternating: enough to separate adjacent blocks, not enough to
+ * claim a meaning. The inset surface rather than a second grey step, because
+ * two adjacent surface steps are nearly the same colour in the dark theme.
+ */
+.crewlet-timeline--alternating .crewlet-timeline__item:nth-child(even) {
+  background: var(--color-surface-inset);
+}
+
+.crewlet-timeline__rail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.crewlet-timeline__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  position: relative;
+  width: var(--crewlet-timeline-node-size);
+  height: var(--crewlet-timeline-node-size);
+  margin-top: 2px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * From just under the node to the bottom of THIS step's content, on every
+ * step including the last. Starting it clear of the node left a detached dash
+ * on a step only one row tall.
+ */
+.crewlet-timeline__rail::after {
+  content: '';
+  position: absolute;
+  left: calc(50% - 1px);
+  top: calc(var(--crewlet-timeline-node-size) + 4px);
+  bottom: 0;
+  width: 2px;
+  border-radius: var(--radius-pill);
+  /* The default border step, not the subtle one: this line is the thing that
+     says which blocks are one step, and a rule a reader has to look for is not
+     doing that job. */
+  background: var(--color-border-default);
+}
+
+.crewlet-timeline__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * A step that failed. The one other colour the ledger carries, and it is
+ * earned: scanning nine steps for where it went wrong is the actual question a
+ * reader brings to a stuck run.
+ */
+.crewlet-timeline__item--danger .crewlet-timeline__node {
+  border-color: var(--color-feedback-danger-line);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+/* The step in flight. The accent is the one colour that means "where it is". */
+.crewlet-timeline__item--active .crewlet-timeline__node {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-timeline__item--active .crewlet-timeline__node::before {
+  content: '';
+  position: absolute;
+  width: var(--crewlet-timeline-node-size);
+  height: var(--crewlet-timeline-node-size);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-brand-accent);
+  animation: crewlet-timeline-pulse var(--crewlet-timeline-pulse-period) var(--motion-easing-out) infinite;
+}
+
+@keyframes crewlet-timeline-pulse {
+  0% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.9);
+  }
+}
+
+/*
+ * A live indicator that will not stop is exactly what this setting is for, so
+ * it stops rather than slowing. The node keeps its accent ring, so the step in
+ * flight is still the one that looks different.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-timeline__item--active .crewlet-timeline__node::before {
+    animation: none;
+  }
+}