@crewlethq/ui 0.48.2 → 0.49.0

package/dist/ColorField-2OIOWT3Z.css

@@ -0,0 +1,68 @@
+/*
+ * A colour a person chooses: the swatch that opens the platform's picker,
+ * beside the hex field. The swatch's fill is the one value that is not a
+ * token, and it arrives through `--crewlet-color-field-value` only after it
+ * has passed `#rrggbb`.
+ */
+.crewlet-color-field__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * THE SWATCH IS THE PICKER: the platform's colour input lies over the chip,
+ * transparent, so a press anywhere on the chip opens it and the chip is what
+ * the reader sees, the same in every browser. Its edge is its own, so a
+ * colour that matches the page is still a chip.
+ */
+.crewlet-color-field__swatch {
+  /* The hatch of no colour, as a colour swatch draws it. */
+  --crewlet-color-field-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-field-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-field);
+}
+
+.crewlet-color-field__swatch.is-empty {
+  background: var(--crewlet-color-field-hatch);
+}
+
+.crewlet-color-field__swatch.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-color-field__picker {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.crewlet-color-field__picker:disabled {
+  cursor: not-allowed;
+}
+
+/* THE RING IS THE CHIP'S: the input under it is transparent, so the ring a
+   keyboard needs is drawn on what the reader sees. */
+.crewlet-color-field__swatch:has(.crewlet-color-field__picker:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}

package/dist/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export interface ColorSwatchLabels {
+    /** Names the copy control: "Copy the Primary colour". */
+    copy: (name: string) => string;
+    /** Read out once the value is on the clipboard: "#5b3df5 copied to the clipboard". */
+    copied: (hex: string) => string;
+    /** Read out when the browser refused the clipboard. */
+    failed: string;
+    /** Printed in the value's place for a role with no colour. */
+    empty: string;
+}
+export type ColorSwatchSize = 'md' | 'sm';
+export interface ColorSwatchProps {
+    /** The colour's role: "Primary", "Dark ground". */
+    name: string;
+    /**
+     * The colour, as `#rrggbb`. Anything else (an empty role, a value that is
+     * not one) draws the hatch of no colour and says `empty`, and is never put
+     * into a style.
+     */
+    value: string | null | undefined;
+    /** What the role is used for: "Links, buttons and accents". */
+    description?: ReactNode;
+    /** A copy control beside the value. On by default: a reader takes the value to use elsewhere. */
+    copyable?: boolean | undefined;
+    /** `sm` is a row of chips beside a name, for a dense list. */
+    size?: ColorSwatchSize | undefined;
+    className?: string | undefined;
+    labels?: Partial<ColorSwatchLabels> | undefined;
+}
+/**
+ * One colour of a brand: a chip of it, its role, its value, and a control that
+ * copies the value and says whether it landed.
+ *
+ * THE VALUE IS PRINTED, so the chip is decoration: a reader who cannot tell
+ * two chips apart still reads two values. The value is drawn through one
+ * custom property, and only after it has passed `#rrggbb`, so a colour typed
+ * by a person never reaches a stylesheet as anything but a colour.
+ *
+ * THE CHIP HAS AN EDGE OF ITS OWN, so a colour that matches the page (white on
+ * a light theme, near black on a dark one) is still a chip.
+ */
+export declare function ColorSwatch({ name, value, description, copyable, size, className, labels, }: ColorSwatchProps): import("react").JSX.Element;

package/dist/ColorSwatch/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorSwatch.css';
+export { ColorSwatch } from './ColorSwatch.js';
+export type { ColorSwatchLabels, ColorSwatchProps, ColorSwatchSize } from './ColorSwatch.js';

package/dist/ColorSwatch/index.js

@@ -0,0 +1,9 @@
+export { ColorSwatch } from '../chunk-WLSEAIVC.js';
+import '../chunk-7SHAFLEX.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ColorSwatch-DNMUFHNS.css

@@ -0,0 +1,83 @@
+/*
+ * One colour of a brand: a chip of it over its role and its value. The chip's
+ * fill is the one value that is not a token, and it arrives through
+ * `--crewlet-color-swatch-value` only after it has passed `#rrggbb`. Every
+ * other colour here is a token.
+ */
+.crewlet-color-swatch {
+  /* The hatch of no colour, as one value: the same lines an arranged page's
+     ground draws, so "nothing here" reads one way across the package. */
+  --crewlet-color-swatch-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE CHIP HAS AN EDGE OF ITS OWN, so a colour that matches the page is
+   still a chip rather than a gap. */
+.crewlet-color-swatch__chip {
+  display: block;
+  width: 100%;
+  height: var(--size-row-lg);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-swatch-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
+.crewlet-color-swatch__chip.is-empty {
+  background: var(--crewlet-color-swatch-hatch);
+}
+
+.crewlet-color-swatch__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-color-swatch__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-color-swatch__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__value--plain {
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__empty {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* ---- sm: a chip beside the words, for a dense list ---- */
+
+.crewlet-color-swatch--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-color-swatch--sm .crewlet-color-swatch__chip {
+  flex: none;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  border-radius: var(--radius-sm);
+}

package/dist/Combobox/Combobox.d.ts

@@ -20,7 +20,8 @@ export interface ComboboxListRender {
     /** Mouse wiring for the row at `index`. */
     optionHandlers: (index: number) => Record<string, unknown>;
 }
-export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | 'role' | 'onKeyDown' | 'list'> {
+/** What every combobox takes, whether its list is a popup or always on screen. */
+export interface ComboboxBaseProps extends Omit<InputProps, 'value' | 'onChange' | 'role' | 'onKeyDown' | 'list'> {
     /** What the field holds. The caller owns it: a completion is an edit to it. */
     value: string;
     onValueChange: (next: string) => void;
@@ -45,9 +46,6 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
      * `${NAME}` inside a longer value) does it itself.
      */
     onCommit?: ((option: ComboboxOption, index: number) => void) | undefined;
-    /** Whether the list is on screen. Controlled: only the caller knows when it has something to offer. */
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
     /** Names the list. A listbox with no name is announced as "list box" and nothing else. */
     label: string;
     /**
@@ -67,6 +65,35 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
     /** The line shown while the list is open with nothing to offer. Nothing is drawn without one. */
     emptyMessage?: ReactNode;
 }
+/** A field that offers completions in a list that opens under it. */
+export interface ComboboxPopupProps extends ComboboxBaseProps {
+    inline?: false | undefined;
+    /** Whether the list is on screen. Controlled: only the caller knows when it has something to offer. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/**
+ * A field over a list that is always on screen: a picker whose list IS the
+ * surface's body (a folder picker in a dialog), filtered by the field.
+ */
+export interface ComboboxInlineProps extends ComboboxBaseProps {
+    /**
+     * The list is part of the surface rather than a popup: always on screen,
+     * in the flow under the field, at a stable height, filtered by what the
+     * field holds. See the component's notes.
+     */
+    inline: true;
+    /** How many rows the list shows before it scrolls, and so how tall it stands. Six by default. */
+    rows?: number | undefined;
+    /**
+     * The value of the option chosen so far: drawn chosen, announced as
+     * selected, and where the highlight starts.
+     */
+    chosen?: string | undefined;
+    open?: undefined;
+    onOpenChange?: undefined;
+}
+export type ComboboxProps = ComboboxPopupProps | ComboboxInlineProps;
 /**
  * A text field that offers completions.
  *
@@ -81,6 +108,20 @@ export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | '
  * field stays open; a second Escape reaches it. Without that, somebody
  * dismissing a completion they did not want lost the whole editor with it.
  *
+ * INLINE (`inline`), THE LIST IS THE SURFACE'S BODY. For a picker whose list
+ * is the point of the dialog it sits in (Move to…), the list is always on
+ * screen, in the flow under the field, filtered by it: no popup, no portal,
+ * nothing that opens or closes. A list that closed when the field lost focus
+ * made the dialog shrink under the pointer between the press on Cancel and
+ * its release, so the click landed on the veil. Its box keeps one height
+ * (`rows`) whatever the filter leaves in it, so nothing under it moves as
+ * somebody types, and says so in its own row when nothing matches. The keys
+ * are the popup's (the arrows step over a disabled row, Enter takes the
+ * highlighted one, the letters filter), Home and End reach the first and the
+ * last row while the field is empty and are the caret's once it holds text,
+ * and Escape is never its own: there is nothing to dismiss, so it reaches the
+ * dialog. `chosen` marks the option picked so far as selected.
+ *
  * WHAT IT DOES NOT DECIDE is what matches. The caller filters and hands over
  * what is offered, because a completion's question belongs to the value: the
  * engine's secret references complete on the name under the caret, not on the

package/dist/Combobox/index.d.ts

@@ -1,4 +1,4 @@
 import '../HitArea/HitArea.css';
 import './Combobox.css';
 export { Combobox } from './Combobox.js';
-export type { ComboboxListRender, ComboboxOption, ComboboxProps } from './Combobox.js';
+export type { ComboboxBaseProps, ComboboxInlineProps, ComboboxListRender, ComboboxOption, ComboboxPopupProps, ComboboxProps, } from './Combobox.js';

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-LOBV4QON.js';
+export { Combobox } from '../chunk-P5JBDHWC.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox-GBCWXWEB.css

@@ -0,0 +1,163 @@
+/*
+ * 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;
+}
+
+/* ---- inline (`inline`): the list is the surface's body ------------------
+   Always on screen, in the flow under the field, at ONE HEIGHT: the box is
+   `rows` one-line rows tall (`--crewlet-combobox-rows`, set by the component)
+   whatever the filter leaves in it, so nothing under it moves as somebody
+   types, and it scrolls past that. It sits on the surface's own ground inside
+   a hairline, because it is part of the surface rather than a panel over it. */
+.crewlet-combobox--inline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-combobox__list {
+  /* ONE ROW IS ONE ROW STEP, exactly: a row's own height is held to it
+     below, so a label that draws a glyph beside its words is no taller than
+     one that does not, and `rows` rows fill the box to the pixel. */
+  --crewlet-combobox-row: var(--size-row-md);
+  --crewlet-listbox-gap: 1px;
+
+  height: calc(
+    var(--crewlet-combobox-rows) * var(--crewlet-combobox-row) + (var(--crewlet-combobox-rows) - 1) * var(--crewlet-listbox-gap) +
+      var(--spacing-1) * 2 + 2px
+  );
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-combobox__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--crewlet-listbox-gap);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.crewlet-combobox__list.is-mono .crewlet-combobox__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option {
+  height: var(--crewlet-combobox-row);
+  min-height: 0;
+  padding-block: 0;
+  border-radius: var(--radius-xs);
+}
+
+/* The row the arrows or the pointer are on, in the hover tint, as the popup
+   draws it. Scoped to the list for the same reason as the panel's. */
+.crewlet-combobox__options .crewlet-listbox__option.is-highlight,
+.crewlet-combobox__options .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/*
+ * THE CHOSEN ROW (`chosen`), as every chosen option in the package is drawn:
+ * the selected fill, never the accent, with a tick in the accent's ink so the
+ * choice never rests on the tint. It keeps its fill under the arrows too.
+ */
+.crewlet-combobox__options .crewlet-listbox__option[aria-selected='true'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+}
+
+.crewlet-combobox__check {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option.is-disabled {
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}

package/dist/CommandPalette/index.js

@@ -1,17 +1,17 @@
-export { CommandPalette } from '../chunk-YUDUYMZB.js';
-import '../chunk-6AKG2VLR.js';
+export { CommandPalette } from '../chunk-MIEBOO7Y.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-2YTOOH3A.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,20 +1,20 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-JNFTFAPN.js';
-import '../chunk-PWG3VHRQ.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-H7NMJ5AI.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-KNMQS3JY.js';
+import '../chunk-PWG3VHRQ.js';
+import '../chunk-GHY63X4C.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/index.js

@@ -1,11 +1,11 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-KNMQS3JY.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-GHY63X4C.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-5CLWBPB5.js';
+export { ConfirmField, confirmMatches } from '../chunk-ZCIL5IHU.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastBadge/ContrastBadge.d.ts

@@ -0,0 +1,63 @@
+/**
+ * What a pair is read as. `body` is text at the body's size, held to 4.5:1
+ * for AA and 7:1 for AAA. `large` is large text and every graphical mark (a
+ * logo, an accent on a ground), held to 3:1 for AA and 4.5:1 for AAA.
+ */
+export type ContrastScale = 'body' | 'large';
+/**
+ * Where a pair stands: AAA, AA, AA for large text only (body text that clears
+ * 3:1 but not 4.5:1), or under every floor its scale has.
+ */
+export type ContrastLevel = 'aaa' | 'aa' | 'aa-large' | 'fail';
+/**
+ * The level a measured ratio reaches, on the floors `@crewlethq/tokens`
+ * exports. The ratio is compared UNROUNDED: a pair that passes only once
+ * rounded does not pass.
+ */
+export declare function contrastLevel(ratio: number, scale?: ContrastScale): ContrastLevel;
+/**
+ * The ratio between two `#rrggbb` colours, or null when either is not one.
+ * The one measurement every brand part takes, from `@crewlethq/tokens`.
+ */
+export declare function contrastRatio(foreground: string, background: string): number | null;
+/**
+ * A ratio as printed, cut DOWN to two places and never rounded up, so the
+ * number shown never claims a floor the pair misses: 4.497 is "4.49", not
+ * "4.5".
+ */
+export declare function formatContrastRatio(ratio: number): string;
+export interface ContrastBadgeLabels {
+    levels: Record<ContrastLevel, string>;
+    /** Said for a pair that cannot be measured (a colour not set yet). */
+    unmeasured: string;
+    /** The ratio, said in words: "4.49 to 1". */
+    ratio: (ratio: string) => string;
+    /** The letters the sample draws the pair with. */
+    sample: string;
+}
+export interface ContrastBadgeProps {
+    /** The colour read: text, a logo, an accent. `#rrggbb`. */
+    foreground: string;
+    /** The colour it is read on. `#rrggbb`. */
+    background: string;
+    /** What the pair is: "Text on light ground". */
+    label?: string | undefined;
+    /** What it is read as: body text (the default), or large text and marks. */
+    scale?: ContrastScale | undefined;
+    className?: string | undefined;
+    labels?: Partial<ContrastBadgeLabels> | undefined;
+}
+/**
+ * Whether one colour reads on another: a sample of the pair, the measured
+ * ratio, and the level it reaches.
+ *
+ * THE MEASUREMENT IS THE TOKENS PACKAGE'S. The ratio comes from
+ * `@crewlethq/tokens`' `contrast()`, the same maths the palette suite holds
+ * every theme to, and the floors from its `WCAG_CONTRAST`, so the badge an
+ * administrator reads and the gate a theme passes never disagree.
+ *
+ * THE LEVEL IS A WORD AND A GLYPH, never the tint alone, and the ratio is
+ * said as "4.49 to 1" rather than read out as punctuation. The sample is
+ * decoration: it shows the pair, and the words say how it measures.
+ */
+export declare function ContrastBadge({ foreground, background, label, scale, className, labels }: ContrastBadgeProps): import("react").JSX.Element;

package/dist/ContrastBadge/index.d.ts

@@ -0,0 +1,3 @@
+import './ContrastBadge.css';
+export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
+export type { ContrastBadgeLabels, ContrastBadgeProps, ContrastLevel, ContrastScale } from './ContrastBadge.js';

package/dist/ContrastBadge/index.js

@@ -0,0 +1,6 @@
+export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-B235ANDO.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';