@crewlethq/ui 0.48.3 → 0.49.0

package/dist/utils/fontFamily.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A font-family list somebody chose, as the one grammar every brand part
+ * accepts before it reaches a style: up to MAX_NAMES comma-separated family
+ * names, each a quoted name (no quotes, back slashes or line breaks inside),
+ * a run of plain CSS identifiers (`Segoe UI`, `-apple-system`), or one of the
+ * package's own family tokens (`var(--font-family-sans)` and its siblings).
+ *
+ * WHY A GRAMMAR AND NOT A SANITISER. A family list is drawn into a custom
+ * property, where nothing a person typed can break out of the declaration,
+ * but a value that is not a list of names (a `var()` of something else, a
+ * CSS-wide keyword, a stray function) still changes what the page draws.
+ * Anything that does not read as names is refused whole, and the caller
+ * falls back to the package's face, rather than half of it being kept.
+ *
+ * IT TAKES EVERY LIST THE ENGINE WRITES. The engine resolves a brand's face to
+ * one list (brandformat `FaceFamilies`, mirrored in the dashboard contract as
+ * `BRAND_FACE_FAMILIES`): a kit face or a curated system stack of bare
+ * identifiers, `-apple-system` among them, or an uploaded family quoted in
+ * front of the system sans stack. The suite walks those lists verbatim.
+ */
+/** The list, trimmed, when it reads as family names; null for anything else. */
+export declare function safeFontFamily(value: string | null | undefined): string | null;
+/**
+ * A family list that always ends in a face the page has: the chosen list
+ * when it reads as names, then `fallback` (a package family token), so a face
+ * still loading or never uploaded draws as the package's type rather than as
+ * the browser's default.
+ */
+export declare function fontStack(value: string | null | undefined, fallback: string): string;

package/dist/utils/hexColour.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A colour somebody chose, as the one spelling every brand part stores and
+ * draws: `#` and six lowercase hex digits, or null for anything else.
+ *
+ * WHY ONE FUNCTION. A brand's colours are data, typed or pasted by a person
+ * and drawn into a custom property, so every part that takes one reads it
+ * through the same gate: the tokens package's `parseHex`, which accepts
+ * `#rrggbb` alone (any case, surrounding space trimmed) and nothing a
+ * stylesheet would read as something else. The lowercase form is the one the
+ * engine stores, so a value read back compares equal to the value written.
+ */
+export declare function normalizeHex(value: string | null | undefined): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.48.3",
+  "version": "0.49.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.48.3",
-    "@crewlethq/tokens": "0.48.3",
+    "@crewlethq/icons": "0.49.0",
+    "@crewlethq/tokens": "0.49.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/scripts/check-css-variables.mjs

@@ -15,7 +15,11 @@
 //      name quietly renders `x` forever.
 //   2. Every other name belongs to a component and is namespaced --crewlet-*,
 //      both where it is read and where it is declared, so a component never
-//      claims a name an application stylesheet may already use.
+//      claims a name an application stylesheet may already use. The one
+//      exception is the brand mapping's inputs (`--brand-primary` and the
+//      rest), which a component may DECLARE because @crewlethq/tokens'
+//      css/brand reads them by those names: exactly the inputs that sheet
+//      reads, and no other `--brand-*` name.
 //   3. A --crewlet-* name read without a fallback must be declared somewhere
 //      in the scanned source.
 //   4. No glyph is drawn as a Material Symbols ligature. A component that
@@ -97,8 +101,20 @@ function tokenNames() {
   return names;
 }
 
+/**
+ * The brand mapping's inputs: every `--brand-*` name @crewlethq/tokens'
+ * css/brand reads. A component that brands a region (BrandScope) sets them,
+ * and nothing else outside its namespace.
+ */
+function brandInputs() {
+  const require = createRequire(import.meta.url);
+  const text = withoutComments(readFileSync(require.resolve('@crewlethq/tokens/css/brand'), 'utf8'), true);
+  return new Set([...text.matchAll(REFERENCE)].map((match) => match[1]).filter((name) => name.startsWith('--brand-')));
+}
+
 export async function findings(roots, base = packageRoot) {
   const tokens = tokenNames();
+  const inputs = brandInputs();
   const files = readSources(roots, base);
   const declared = new Set();
   const references = [];
@@ -111,7 +127,7 @@ export async function findings(roots, base = packageRoot) {
     for (const match of text.matchAll(isStylesheet ? CSS_DECLARATION : SCRIPT_DECLARATION)) {
       const name = match[1];
       declared.add(name);
-      if (!name.startsWith(COMPONENT_PREFIX)) {
+      if (!name.startsWith(COMPONENT_PREFIX) && !inputs.has(name)) {
         problems.push(
           `${where(match.index)}: declares ${name}; a component declares only ${COMPONENT_PREFIX}* names (token values belong in @crewlethq/tokens)`,
         );

package/dist/Combobox-YDONYDTM.css

@@ -1,81 +0,0 @@
-/*
- * Combobox: a field that offers completions.
- *
- * The panel is anchored inside the field's own box rather than portalled or
- * laid out in the flow. In the flow it pushed every field under it down the
- * form as somebody typed; portalled, it would have to be placed, followed and
- * given a layer of its own for a list that never leaves its field's side.
- */
-
-.crewlet-combobox {
-  position: relative;
-  width: 100%;
-}
-
-.crewlet-combobox__panel {
-  /* Six rows and a scroll, as every list this package offers from a field. */
-  --crewlet-combobox-panel-max-height: 12rem;
-
-  position: absolute;
-  top: calc(100% + var(--spacing-1));
-  left: 0;
-  right: 0;
-  max-height: var(--crewlet-combobox-panel-max-height);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--spacing-1);
-  --crewlet-listbox-gap: 1px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--crewlet-listbox-gap);
-  /*
-   * OPAQUE, and the product's own panel surface: a translucent list over a
-   * form puts two sets of words in the same place, and the words underneath
-   * are a label and a value somebody is in the middle of typing.
-   */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  /* Above the fields below it, and nothing more: it never leaves its form. */
-  z-index: var(--z-index-dropdown);
-}
-
-/* Names read exactly rather than for sense: a secret reference, a path, a key. */
-.crewlet-combobox__panel.is-mono .crewlet-combobox__label {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-compact);
-}
-
-.crewlet-combobox__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
- * The row the arrows or the pointer are on, in the hover tint. The accent is
- * what "here, this is the current one" means elsewhere in the product; a
- * completion list has no current one, only the row about to be taken.
- *
- * Scoped to the panel rather than written on the row class, because the
- * shared listbox register paints [aria-selected] itself and the stylesheets
- * are bundled in hash order: a rule of equal weight would win or lose by the
- * name of a build artefact.
- */
-.crewlet-combobox__panel .crewlet-listbox__option {
-  border-radius: var(--radius-xs);
-}
-
-.crewlet-combobox__panel .crewlet-listbox__option[aria-selected='true'],
-.crewlet-combobox__panel .crewlet-listbox__option.is-highlight,
-.crewlet-combobox__panel .crewlet-listbox__option:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-.crewlet-combobox__panel .crewlet-listbox__option.is-disabled {
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: not-allowed;
-}

package/dist/chunk-OOJTPR7N.js

@@ -1,137 +0,0 @@
-import { useListbox } from './chunk-7KHM2FZH.js';
-import { Input } from './chunk-EXRRTKWT.js';
-import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './HitArea-QUOS6ZDJ.css';
-import './Combobox-YDONYDTM.css';
-import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var Combobox = forwardRef(function Combobox2({
-  value,
-  onValueChange,
-  options,
-  renderList,
-  onCommit,
-  open,
-  onOpenChange,
-  label,
-  tabCommits = false,
-  commitOn = "mousedown",
-  mono = false,
-  emptyMessage,
-  id,
-  className,
-  containerClassName,
-  ...rest
-}, ref) {
-  const generatedId = useId();
-  const fieldId = id ?? generatedId;
-  const offered = useMemo(() => options ?? [], [options]);
-  const showing = open && (offered.length > 0 || renderList !== void 0 || emptyMessage !== void 0);
-  const lists = open && (offered.length > 0 || renderList !== void 0);
-  const box = useRef(null);
-  const commit = useCallback(
-    (index) => {
-      const option = offered[index];
-      if (!option || option.disabled) return;
-      if (onCommit) onCommit(option, index);
-      else onValueChange(option.value);
-      onOpenChange(false);
-    },
-    [offered, onCommit, onOpenChange, onValueChange]
-  );
-  const listbox = useListbox({
-    id: fieldId,
-    // A list that is showing with nothing in it still owns Escape: the reader
-    // can see it, so dismissing it is what Escape means there too.
-    open: showing,
-    count: offered.length,
-    onCommit: commit,
-    onClose: () => onOpenChange(false),
-    tabCommits
-  });
-  function onKeyDown(event) {
-    if (listbox.onKeyDown(event)) return;
-    if (!showing && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-      event.preventDefault();
-      onOpenChange(true);
-    }
-  }
-  const handlers = (index) => {
-    const { onMouseDown, onMouseEnter } = listbox.optionHandlers(index);
-    if (commitOn === "click") {
-      return {
-        onMouseEnter,
-        // The press is still swallowed, so the field keeps focus and the value
-        // being completed keeps its caret; only what TAKES the row moves.
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => commit(index)
-      };
-    }
-    return { onMouseDown, onMouseEnter };
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox", containerClassName), ref: listbox.anchorRef, children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        ...rest,
-        ref: (el) => {
-          box.current = el;
-          if (typeof ref === "function") ref(el);
-          else if (ref) ref.current = el;
-        },
-        id: fieldId,
-        className,
-        value,
-        role: "combobox",
-        "aria-autocomplete": "list",
-        "aria-expanded": lists,
-        "aria-controls": lists ? listbox.listId : void 0,
-        "aria-activedescendant": lists && offered.length > 0 ? listbox.optionId(listbox.active) : void 0,
-        autoComplete: "off",
-        spellCheck: false,
-        onChange: (event) => onValueChange(event.target.value),
-        onKeyDown
-      }
-    ),
-    showing ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: listbox.listRef,
-        className: cx("crewlet-combobox__panel", mono && "is-mono"),
-        role: lists ? "listbox" : void 0,
-        id: lists ? listbox.listId : void 0,
-        "aria-label": lists ? label : void 0,
-        children: renderList ? renderList({
-          listId: listbox.listId,
-          active: listbox.active,
-          optionId: listbox.optionId,
-          optionHandlers: handlers
-        }) : offered.length > 0 ? offered.map((option, index) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id: listbox.optionId(index),
-            role: "option",
-            "aria-selected": index === listbox.active,
-            "aria-disabled": option.disabled || void 0,
-            className: cx(
-              "crewlet-listbox__option",
-              HIT_AREA_CLASS,
-              index === listbox.active && "is-highlight",
-              option.disabled && "is-disabled"
-            ),
-            ...option.disabled ? {} : handlers(index),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "crewlet-combobox__label", children: option.label ?? option.value }),
-              option.hint ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.hint }) : null
-            ]
-          },
-          option.value
-        )) : /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage })
-      }
-    ) : null
-  ] });
-});
-
-export { Combobox };

package/dist/{chunk-ISDEXIXH.js → chunk-E6HXFFWO.js}

@@ -1,5 +1,5 @@
-import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-RMEBFYL7.js';
 import { SlideNav } from './chunk-RRO7UEYU.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-RMEBFYL7.js';
 import { Eyebrow } from './chunk-RK4XPHVG.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-6R5BSA36.js → chunk-GHY63X4C.js}

@@ -1,5 +1,5 @@
-import { Textarea } from './chunk-EXRRTKWT.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Textarea } from './chunk-EXRRTKWT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';
 import { forwardRef } from 'react';

package/dist/{chunk-ICVS3U4S.js → chunk-PGR2PKH6.js}

@@ -1,7 +1,7 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { FormField, Textarea } from './chunk-EXRRTKWT.js';
 import { characterCountState, CharacterCount, countCharacters } from './chunk-XCUUI7E7.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-VKFG4FLE.js → chunk-R6R2UHVG.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-XQZ6EWOE.js';
-import { Popover } from './chunk-KHJIEPZV.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
+import { Popover } from './chunk-KHJIEPZV.js';
 import { Input } from './chunk-EXRRTKWT.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-OO7QJCJQ.js → chunk-WXOYHVWG.js}

@@ -6,8 +6,8 @@ import { ChangeMark } from './chunk-66X5WDKE.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-LFSIKGRQ.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { StatusDot } from './chunk-WIATRXEJ.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-UFXLNC2N.js → chunk-ZFM5L7M4.js}

@@ -1,5 +1,5 @@
-import { Popover } from './chunk-KHJIEPZV.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
+import { Popover } from './chunk-KHJIEPZV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';