@crewlethq/ui 0.10.0 → 0.12.0

package/dist/styles.css

@@ -1413,6 +1413,63 @@
 }
 
 
+/* AvatarPicker-PREY36MG.css */
+/*
+ * The badge as a button, with a pencil pip on its corner saying it changes
+ * the badge. No chrome of its own beyond the focus ring: the badge is the
+ * control's face.
+ */
+.crewlet-avatar-picker {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: none;
+  cursor: pointer;
+}
+
+button.crewlet-avatar-picker:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-avatar-picker__pip {
+  position: absolute;
+  right: calc(var(--spacing-1) * -1);
+  bottom: calc(var(--spacing-1) * -1);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
+  color: var(--color-text-primary);
+}
+
+.crewlet-avatar-picker__body {
+  display: grid;
+  gap: var(--spacing-2);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--spacing-3);
+}
+
+.crewlet-avatar-picker__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);
+}
+
+
 /* AvatarStack-GEJBNV7E.css */
 /*
  * Several badges as one mark (AvatarStack.tsx).
@@ -3996,6 +4053,118 @@
 }
 
 
+/* ChoiceList-2PQJS4DX.css */
+/*
+ * A short list of answers in one bordered box: a radio, the label with a line
+ * of detail under it, and a tag at the row's end. The selected row takes the
+ * accent's soft fill, so the answer reads at a glance without the radio.
+ */
+.crewlet-choice-list {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-list.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-choice-list__group {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.crewlet-choice-list__item {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+/* The "Something else" a list ends with, set apart by a dashed rule. */
+.crewlet-choice-list__item.is-separated {
+  padding-top: var(--spacing-1);
+  border-top: 1px dashed var(--color-border-strong);
+}
+
+.crewlet-choice-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-choice-list__row.is-checked {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+  cursor: not-allowed;
+}
+
+.crewlet-choice-list__radio {
+  margin: 3px 0 0;
+  accent-color: var(--color-brand-accent);
+  cursor: inherit;
+}
+
+/* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
+.crewlet-choice-list__radio:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-choice-list__text {
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-choice-list__label {
+  font-size: var(--font-size-compact);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__tag {
+  padding-top: 2px;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent-ink);
+  white-space: nowrap;
+}
+
+.crewlet-choice-list__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-list__row {
+    transition: none;
+  }
+}
+
+
 /* CodeBlock-GYNJ2HI6.css */
 /*
  * CodeBlock, a monospace command, config or record surface. One step off the
@@ -4532,6 +4701,97 @@
 }
 
 
+/* Composer-ABGJIAIR.css */
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring, an accent border and a 2px soft halo, so the
+ * field inside draws no border or outline of its own and the footer reads as
+ * part of what is being written.
+ */
+.crewlet-composer {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-composer:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  min-height: 68px;
+  max-height: 220px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  resize: none;
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-composer .crewlet-composer__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+/* Past its cap the field scrolls rather than pushing the page. */
+.crewlet-composer .crewlet-composer__field.is-auto-resize {
+  overflow-y: auto;
+}
+
+.crewlet-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-composer__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-composer__counter {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-composer__spacer {
+  flex: 1;
+}
+
+@media (width < 640px) {
+  .crewlet-composer__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}
+
+
 /* Container-3TSKMGNI.css */
 /*
  * Container, the centred content measure. One max-width scale shared by every
@@ -8032,6 +8292,66 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* FactList-G2H73NFR.css */
+/*
+ * Read-only facts in one bordered box, a 32px row each: label and lock on the
+ * left, the value on the right. The rows share the box's hairline between
+ * them, so a list of six reads as one object rather than six cards.
+ */
+.crewlet-fact-list {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-fact-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 32px;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-fact-list__row + .crewlet-fact-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-fact-list__row.is-locked {
+  cursor: help;
+}
+
+.crewlet-fact-list__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__lock {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__value {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+
 /* FilterChip-EZ4QMW4E.css */
 /*
  * The filter chip: neutral until it is on, and then the accent.
@@ -8624,7 +8944,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-DRFNI26F.css */
+/* Input-RAKNQJCV.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -9129,6 +9449,13 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-tertiary);
 }
 
+/* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
+   labels and values at rest, and the sentence appears under the field the
+   reader is in. Still described, so a screen reader hears it on entry. */
+.crewlet-form-field--helper-on-focus:not(:focus-within) .crewlet-form-field__helper {
+  display: none;
+}
+
 /*
  * The error line, on the danger INK. It stays BESIDE the help rather than
  * replacing it: a reader told they are wrong needs the line that says what
@@ -15492,7 +15819,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-BWFQSWY3.css */
+/* Tabs-5I5Q5KKM.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -15833,6 +16160,39 @@ svg.crewlet-select__chevron {
   }
 }
 
+/* ── markers ──────────────────────────────────────────────────────────────
+   What needs the reader behind a tab: a danger count for problems, a 6px
+   dot for a warning or an unsaved change. One per tab, the most urgent. */
+.crewlet-tabs__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.crewlet-tabs__marker--danger {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-circle);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+.crewlet-tabs__marker--warning,
+.crewlet-tabs__marker--changed {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+}
+.crewlet-tabs__marker--warning {
+  background: var(--color-feedback-warning);
+}
+.crewlet-tabs__marker--changed {
+  background: var(--color-brand-accent);
+}
+
 
 /* Tag-4BRQS6GN.css */
 /*

package/dist/utils/index.js

@@ -1,5 +1,5 @@
 import '../chunk-AER7UDD4.js';
-export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.10.0",
-    "@crewlethq/tokens": "0.10.0"
+    "@crewlethq/icons": "0.12.0",
+    "@crewlethq/tokens": "0.12.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/{chunk-VE6LD3KM.js → chunk-2PZBIHRV.js}

@@ -1,7 +1,7 @@
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-YVXHMWLN.css';

package/dist/{chunk-OVLJEVQS.js → chunk-7LD6P32I.js}

@@ -1,5 +1,5 @@
-import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AppShell-CEVLW4QG.css';
 import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';

package/dist/{chunk-CEOXFO3E.js → chunk-EG6NYWVK.js}

@@ -1,6 +1,6 @@
 import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
-import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Card-KJOYHDTJ.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';

package/dist/{chunk-FZVJDJFN.js → chunk-ENJUPIND.js}

@@ -1,5 +1,5 @@
-import { Count } from './chunk-BHHIIK3M.js';
 import { headingTag } from './chunk-PQADV6P6.js';
+import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-5I56UXBJ.js → chunk-JCNUQ3US.js}

@@ -1,7 +1,7 @@
-import { Popover } from './chunk-PDUZO35I.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Popover } from './chunk-PDUZO35I.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-4AZBTODT.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-SX2DFTQV.js → chunk-MCPKHYMC.js}

@@ -1,8 +1,8 @@
 import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-S3BCVWTU.js';
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { focusables } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeGrid-NSW7VMOX.css';

package/dist/{chunk-BTHX2FS3.js → chunk-TEEJSTFG.js}

@@ -1,8 +1,8 @@
+import { Button } from './chunk-OG6CL3EB.js';
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-BNT3TDV2.css';
 import { useId, useRef, useCallback } from 'react';

package/dist/{chunk-LSB3EHBW.js → chunk-TFH6SYWB.js}

@@ -1,7 +1,7 @@
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-BT5PMFJI.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-26SCUACK.js → chunk-YACKC3K2.js}

@@ -1,6 +1,6 @@
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Copyable-5PNRFOLS.css';

package/dist/{chunk-MPXI6FM6.js → chunk-ZHOM65MI.js}

@@ -1,8 +1,8 @@
 import { Tag } from './chunk-LOECRMHA.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
 import { announce } from './chunk-RSAQOKH3.js';
-import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-P2HS5QL4.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';