@crewlethq/ui 0.49.1 → 0.51.0

package/dist/utils/hexColour.d.ts

@@ -10,3 +10,16 @@
  * engine stores, so a value read back compares equal to the value written.
  */
 export declare function normalizeHex(value: string | null | undefined): string | null;
+/**
+ * A colour as a person types or pastes it, read into the one stored spelling
+ * (`#` and six lowercase hex digits), or null for anything else.
+ *
+ * Taken: `#rrggbb` and `rrggbb`, the three digit shorthand with or without
+ * its `#` (each digit doubled), and `rgb(r, g, b)` or `rgb(r g b)` with each
+ * channel a whole number from 0 to 255. Refused: the eight and four digit
+ * forms (a stored brand colour has no alpha), percentages, names and every
+ * other notation, so what is stored is never a value a stylesheet would read
+ * as something else. The result passes `normalizeHex`, the gate every brand
+ * part reads a colour through.
+ */
+export declare function parseColourInput(value: string | null | undefined): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.49.1",
+  "version": "0.51.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.49.1",
-    "@crewlethq/tokens": "0.49.1",
+    "@crewlethq/icons": "0.51.0",
+    "@crewlethq/tokens": "0.51.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/Stepper-HW4JM3YH.css

@@ -1,176 +0,0 @@
-/*
- * The stepper: where a sequence has got to (Stepper.tsx).
- *
- * THE APPROVED DESIGN'S STEP ROW. Each step is a 20px pill inside the default
- * hairline, the 11px step at the medium weight, 8px inside each end and 5px
- * between a mark and the word; two pills are joined by a 10px rule in the
- * strong hairline's colour with 6px either side of it. A finished step is the
- * secondary ink behind a check, the current step its tone's soft tint under
- * its ink behind its dot, and a step still to come the tertiary ink.
- *
- * EVERY INK IS A MEASURED PAIR. The secondary and tertiary steps are held to
- * 4.5:1 on every opaque rung, and each tone's ink to 4.5:1 on its own soft
- * tint over every rung, by the palette suite in @crewlethq/tokens; the pill
- * draws nothing else. The current pill is the design's `work-soft` under
- * `work-ink` in the default tone, and a Tag's colours in every tone, which is
- * what a chip naming a state is in this kit.
- */
-
-.crewlet-stepper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  /* The design's 6px between a pill and the rule beside it: a step and a half. */
-  gap: calc(var(--spacing-1) * 1.5);
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.crewlet-stepper__step {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing-1) * 1.5);
-  min-width: 0;
-}
-
-/*
- * THE RULE BETWEEN TWO STEPS is drawn by the second of them, so a sequence of
- * one draws none and nothing trails the last. A pseudo-element, because it is
- * furniture: it carries nothing a reader has to be told, and the list already
- * says the steps are in order. 10px by a hairline, the measure of this one
- * mark, and fixed at every density as a hairline is.
- */
-.crewlet-stepper__step + .crewlet-stepper__step::before {
-  content: '';
-  flex: none;
-  width: 10px;
-  height: 1px;
-  background: var(--color-border-strong);
-}
-
-.crewlet-stepper__chip {
-  display: inline-flex;
-  align-items: center;
-  /* The design's 5px between the check or the dot and the word. */
-  gap: calc(var(--spacing-1) * 1.25);
-  box-sizing: border-box;
-  /* The design's 20px pill, which follows the density with every other step
-     height in the kit. It labels and takes no press, so the 24px target floor
-     is not its to clear. */
-  height: calc(20px * var(--density, 1));
-  max-width: 100%;
-  padding: 0 var(--spacing-2);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-pill);
-  color: var(--color-text-tertiary);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.crewlet-stepper__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.crewlet-stepper__check {
-  flex: none;
-}
-
-.crewlet-stepper__step--done > .crewlet-stepper__chip {
-  color: var(--color-text-secondary);
-}
-
-/*
- * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
- * away, so the pill keeps its box and the row does not move by a pixel as the
- * current step advances along it, and so forced-colors mode, which draws a
- * transparent border in the system's own colour, still outlines it.
- */
-.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-info-soft);
-  color: var(--color-feedback-info-ink);
-}
-
-.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-success-soft);
-  color: var(--color-feedback-success-ink);
-}
-
-.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-warning-soft);
-  color: var(--color-feedback-warning-ink);
-}
-
-.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-danger-soft);
-  color: var(--color-feedback-danger-ink);
-}
-
-.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
-}
-
-/*
- * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
- * Tag's reason: StatusDot paints the fill step, measured as a mark on the
- * opaque rungs, and here it stands on the tone's soft tint instead, where
- * nothing measures it. The ink is the step that IS measured on that tint, at
- * 4.5:1, and the colour of the word beside it. A pulsing dot keeps
- * StatusDot's halo, the same soft step drawn once more over the pill, which
- * stands dE 3.92 off it at the least (the light warning pill on the frame).
- *
- * Two classes deep, so it beats StatusDot's own tone rule whichever order the
- * bundle writes the two files in.
- */
-.crewlet-stepper .crewlet-stepper__dot {
-  background: currentColor;
-}
-
-/*
- * FORCED COLORS repaints every background to Canvas, which takes the current
- * step's tint and its dot, so the one step the row is about would read like
- * any other. The current pill is drawn as the system draws a selection,
- * HighlightText on Highlight, with its dot in the same ink, and the rule
- * between two steps in GrayText; the chips' hairlines are borders, which the
- * mode keeps in its own colour.
- *
- * THE CURRENT PILL OPTS OUT OF THE ADJUSTMENT, which is safe only because
- * every colour it draws in that mode is a system colour. Left to it, Chromium
- * paints a Canvas backplate behind every run of text, and HighlightText is
- * written for Highlight, not for Canvas: in a dark high-contrast theme the
- * step's words drew black on black (measured in Chromium 153 with the mode
- * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
- * is the tone's soft tint and no system colour, is held still inside it.
- */
-@media (forced-colors: active) {
-  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
-    forced-color-adjust: none;
-    border-color: Highlight;
-    background: Highlight;
-    color: HighlightText;
-  }
-
-  .crewlet-stepper .crewlet-stepper__dot {
-    background: HighlightText;
-  }
-
-  .crewlet-stepper .crewlet-stepper__dot.is-pulsing::after {
-    animation: none;
-  }
-
-  .crewlet-stepper__step + .crewlet-stepper__step::before {
-    background: GrayText;
-  }
-}

package/dist/chunk-5QWIJSQM.js

@@ -1,73 +0,0 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './Stepper-HW4JM3YH.css';
-import { CheckGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-function Stepper({
-  steps,
-  current,
-  label,
-  tone = "info",
-  pulse = false,
-  doneLabel = "Done",
-  className,
-  ...rest
-}) {
-  const seen = /* @__PURE__ */ new Set();
-  for (const step of steps) {
-    if (seen.has(step.id)) throw new RangeError(`Stepper step ids must be unique; "${step.id}" is used twice`);
-    seen.add(step.id);
-  }
-  const at = current === null ? steps.length : steps.findIndex((step) => step.id === current);
-  if (at < 0) {
-    throw new RangeError(
-      `Stepper current must be the id of one of its steps, or null once every step is done; "${current}" is not one of ${steps.map((step) => `"${step.id}"`).join(", ")}`
-    );
-  }
-  if (steps.length === 0) return null;
-  const stateOf = (index) => index < at ? "done" : index === at ? "current" : "later";
-  return (
-    /*
-     * `role="list"` although an `ol` already has one, which is why the lint
-     * rule that calls it redundant is silenced here rather than obeyed, as
-     * `Legend` and `DiffList` silence it: the stylesheet takes the markers off,
-     * and WebKit answers a marker-less list as a group of paragraphs, so a
-     * reader would no longer be told how many steps there are before hearing
-     * them. The role puts that back.
-     */
-    // eslint-disable-next-line jsx-a11y/no-redundant-roles
-    /* @__PURE__ */ jsx(
-      "ol",
-      {
-        ...rest,
-        role: "list",
-        className: cx("crewlet-stepper", `crewlet-stepper--${tone}`, className),
-        "aria-label": label,
-        children: steps.map((step, index) => {
-          const state = stateOf(index);
-          return /* @__PURE__ */ jsx(
-            "li",
-            {
-              className: cx("crewlet-stepper__step", `crewlet-stepper__step--${state}`),
-              "aria-current": state === "current" ? "step" : void 0,
-              children: /* @__PURE__ */ jsxs("span", { className: "crewlet-stepper__chip", children: [
-                state === "done" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-stepper__check" }),
-                  /* @__PURE__ */ jsx(VisuallyHidden, { children: doneLabel }),
-                  " "
-                ] }) : null,
-                state === "current" ? /* @__PURE__ */ jsx(StatusDot, { tone, pulse, className: "crewlet-stepper__dot" }) : null,
-                /* @__PURE__ */ jsx("span", { className: "crewlet-stepper__label", children: step.label })
-              ] })
-            },
-            step.id
-          );
-        })
-      }
-    )
-  );
-}
-
-export { Stepper };

package/dist/chunk-MULOZYHL.js

@@ -1,30 +0,0 @@
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './EditingStatus-NNA2CKIL.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var LABELS = {
-  editing: "Editing",
-  unsaved: "Unsaved changes",
-  saving: "Saving"
-};
-function EditingStatus({ dirty, saving = false, labels, className }) {
-  const text = { ...LABELS, ...labels };
-  const state = saving ? text.saving : dirty ? text.unsaved : null;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "status",
-      "aria-live": "polite",
-      className: cx("crewlet-editing-status", dirty && "crewlet-editing-status--dirty", className),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),
-        state && /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
-        state && /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__state", children: state })
-      ]
-    }
-  );
-}
-
-export { EditingStatus };

package/dist/chunk-UZMNR366.js

@@ -1,9 +0,0 @@
-import { parseHex } from '@crewlethq/tokens';
-
-// src/utils/hexColour.ts
-function normalizeHex(value) {
-  if (typeof value !== "string") return null;
-  return parseHex(value) === null ? null : value.trim().toLowerCase();
-}
-
-export { normalizeHex };

package/dist/{Editor-ZYDXHGJE.js → Editor-MLGK3KOG.js}

@@ -1,5 +1,5 @@
-import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
+import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { FormField, Input } from './chunk-EXRRTKWT.js';

package/dist/{chunk-3QSKDZR5.js → chunk-EW2N4FOD.js}

@@ -1,7 +1,7 @@
 import { HuePicker } from './chunk-34RMTXDZ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-SNQRGH4A.js';
+import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-NAWUXCBC.js → chunk-WX6IJJ4U.js}

@@ -1,6 +1,6 @@
 import { PageHeader } from './chunk-DKB73KZI.js';
-import { DateTimePicker } from './chunk-ZFM5L7M4.js';
 import { DataTable } from './chunk-WQ7S7CKZ.js';
+import { DateTimePicker } from './chunk-ZFM5L7M4.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';