@crewlethq/ui 0.11.0 → 0.13.0

package/dist/Switcher-B44Q4WF4.css

@@ -0,0 +1,346 @@
+/*
+ * The switcher: a button that is the page's name, and a banded panel under it
+ * (a search band, a list that scrolls, and a footer that does not).
+ *
+ * The rows are the listbox register (`Listbox.css`), because a project in this
+ * list and a result in the command palette are read the same way, and the
+ * raised row that marks where the arrows are must mean the same in both. What
+ * this adds is the switcher's own: a lead column every row's key lines up in,
+ * the current subject outlined in the accent, and a held row that keeps its
+ * reason without a hover.
+ */
+
+.crewlet-switcher {
+  /* The panel's own measures: a width that holds a key, a long name and a
+     count, and a height that holds eight projects with Recent above them
+     without scrolling. */
+  --crewlet-switcher-width: 360px;
+  --crewlet-switcher-max-height: 520px;
+  --crewlet-switcher-lead: 52px;
+}
+
+/* ── The button ─────────────────────────────────────────────────────────── */
+
+/*
+ * THE PAGE'S NAME, WITH NO BOX AT REST. It is the heading of the page as much
+ * as it is a control, so it reads as text in the trail until the pointer
+ * reaches it; the fill appears under the pointer and stays while the panel is
+ * open, and the chevron turns. The name takes the cut, never the key or the
+ * chevron.
+ */
+.crewlet-switcher-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  max-width: 100%;
+  height: var(--size-row-sm);
+  padding: 0 var(--spacing-1) 0 calc(var(--spacing-1) * 1.5);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-switcher-trigger:hover,
+.crewlet-switcher-trigger[aria-expanded='true'] {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-switcher-trigger:active {
+  background: var(--color-surface-pressed);
+}
+
+/* Inside the button's own edge, so the trail's scrollport never clips it. */
+.crewlet-switcher-trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-switcher-trigger__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-switcher-trigger.is-mono .crewlet-switcher-trigger__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-switcher-trigger .crewlet-key-chip,
+.crewlet-switcher-trigger__tag {
+  display: inline-flex;
+  flex: none;
+}
+
+svg.crewlet-switcher-trigger__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transition:
+    transform var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-switcher-trigger:hover svg.crewlet-switcher-trigger__chevron {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-switcher-trigger[aria-expanded='true'] svg.crewlet-switcher-trigger__chevron {
+  color: var(--color-text-secondary);
+  transform: rotate(180deg);
+}
+
+/* ── The three surfaces ─────────────────────────────────────────────────── */
+
+/*
+ * ANCHORED: the popover's own surface (the subtle rung, the default hairline,
+ * the large corner and the deepest shadow) at the switcher's size. The bands
+ * lay themselves out inside it, so the panel itself does not scroll.
+ */
+.crewlet-popover.crewlet-switcher {
+  display: flex;
+  flex-direction: column;
+  width: var(--crewlet-switcher-width);
+  min-width: 0;
+  max-width: calc(100vw - var(--spacing-4));
+  max-height: min(var(--crewlet-switcher-max-height), calc(100dvh - var(--spacing-10) - var(--spacing-4)));
+  overflow: hidden;
+}
+
+/*
+ * CENTRED: the same panel as a dialog, a step lower than a dialog stands so
+ * it clears the page's bar, arriving at the popover's pace rather than a
+ * dialog's, because it is the same panel opened from somewhere else.
+ */
+.crewlet-modal.crewlet-switcher--centered {
+  --crewlet-modal-width: var(--crewlet-switcher-width);
+
+  max-height: min(var(--crewlet-switcher-max-height), calc(100dvh - var(--spacing-10) - var(--spacing-6)));
+  margin-top: var(--spacing-2);
+  animation-duration: var(--motion-duration-base);
+}
+
+/* A SHEET carries a grab handle over its title, which says it came from the
+   edge it is pinned to. Decoration: the close control is what closes it. */
+.crewlet-modal.crewlet-switcher--sheet::before {
+  content: '';
+  flex: none;
+  width: calc(var(--spacing-7) + var(--spacing-1));
+  height: var(--spacing-1);
+  margin: var(--spacing-2) auto 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-border-strong);
+}
+
+.crewlet-switcher--sheet .crewlet-modal__header {
+  min-height: var(--size-control-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+}
+
+/* A dialog's body scrolls its whole content; here the list alone scrolls. */
+.crewlet-switcher .crewlet-modal__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.crewlet-switcher__panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* ── The search band ────────────────────────────────────────────────────── */
+
+/*
+ * The field with no box of its own, as the command palette draws it: the band
+ * is the field. It is set at the trail's size rather than the palette's
+ * headline size, because the panel is a list read at a glance, and at the
+ * reading size on a phone, where a smaller field zooms the page when tapped.
+ */
+.crewlet-input.crewlet-switcher__search {
+  flex-shrink: 0;
+  min-height: var(--size-control-lg);
+  padding-inline: var(--spacing-3) var(--spacing-2);
+  border: none;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+}
+
+.crewlet-input.crewlet-switcher__search .crewlet-input__control {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-switcher--sheet .crewlet-input.crewlet-switcher__search .crewlet-input__control {
+  font-size: var(--font-size-md);
+}
+
+/* ── The list ───────────────────────────────────────────────────────────── */
+
+.crewlet-switcher__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+  scrollbar-width: thin;
+}
+
+.crewlet-switcher__list {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * A ROW: a lead column, the name, and a figure at the end. Both classes are
+ * named so this ties with nothing in `Listbox.css`, whose rows are a step
+ * shorter and padded on every side.
+ */
+.crewlet-listbox__option.crewlet-switcher__option {
+  gap: 0;
+  min-height: var(--size-row-md);
+  padding-block: 0;
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+.crewlet-switcher--sheet .crewlet-listbox__option.crewlet-switcher__option {
+  min-height: var(--size-control-lg);
+  font-size: var(--font-size-sm);
+}
+
+/*
+ * THE CURRENT SUBJECT, outlined by its own accent hairline inside the row: an
+ * outline rather than a shadow, so forced-colours mode keeps it. The row the
+ * arrows are on takes the raised fill as every listbox row does; both can land
+ * on one row, and it never gains a second border.
+ */
+.crewlet-listbox__option.crewlet-switcher__option.is-current {
+  color: var(--color-text-primary);
+  outline: 1px solid var(--color-brand-accent);
+  outline-offset: -1px;
+}
+
+/* A HELD ROW answers no pointer: no fill under it, and the reason in the quiet
+   ink at its end says why. */
+.crewlet-listbox__option.crewlet-switcher__option[aria-disabled='true'] {
+  background: transparent;
+  color: var(--color-text-tertiary);
+}
+
+/* Every row's key starts on one line, whatever the key's length. */
+.crewlet-switcher__lead {
+  display: flex;
+  flex: none;
+  align-items: center;
+  width: var(--crewlet-switcher-lead);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-switcher__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The letters a search matched: the weight carries it, in the primary ink. */
+b.crewlet-switcher__match {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-switcher__meta {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  margin-left: var(--spacing-3);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* A group's heading carries its count at its end. */
+.crewlet-switcher__heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.crewlet-switcher__count {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+}
+
+/* A line about the list itself, on the inset rung: not a row, so not a row's
+   shape. */
+.crewlet-switcher__note {
+  margin: calc(var(--spacing-1) * 1.5) var(--spacing-2) var(--spacing-1);
+  padding: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+/* A state of the list, said in two lines, with its actions as rows under it. */
+.crewlet-switcher__message {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-3) var(--spacing-2);
+}
+
+.crewlet-switcher__message-title {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-switcher__message-body {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+/* Placeholder rows the shape of the rows on their way. */
+.crewlet-switcher__skeleton-row {
+  display: flex;
+  align-items: center;
+  height: var(--size-row-md);
+  padding: 0 var(--spacing-3);
+}
+
+.crewlet-switcher__skeleton-row > .crewlet-switcher__meta {
+  margin-left: auto;
+}
+
+/* ── The footer ─────────────────────────────────────────────────────────── */
+
+.crewlet-switcher__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  padding: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-switcher-trigger {
+    transition: none;
+  }
+
+  svg.crewlet-switcher-trigger__chevron {
+    transition: none;
+  }
+}

package/dist/Tabs/Tabs.d.ts

@@ -1,5 +1,11 @@
 import React, { type ReactNode } from 'react';
-export type TabsVariant = 'pill' | 'underline';
+/**
+ * How the row is drawn. `pill` is a segmented well with a raised chip for the
+ * one that is on; `underline` is a strip with a sliding bar, for a screen's
+ * sections; `chip` is a row of quiet chips with no well, the one that is on
+ * outlined in the accent, for the lenses beside an object's name in a bar.
+ */
+export type TabsVariant = 'pill' | 'underline' | 'chip';
 export type TabsSize = 'sm' | 'md';
 export interface TabsItem {
     /** Stable identity: the value reported, and half of the tab's id. */

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-JHQUT4WJ.js';
+export { TabPanel, Tabs, tabId } from '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-5I5Q5KKM.css → Tabs-ITJYJFMU.css}

@@ -300,6 +300,55 @@
   outline-offset: 0;
 }
 
+/* ─── Chip (a lens row) ───────────────────────────────────────── */
+/*
+ * QUIET CHIPS WITH NO WELL: the lenses of an object or a scope, set beside its
+ * name in a page's bar. A well round them was a second box beside the name the
+ * lenses are about, and a raised chip inside it a second highlight. Here the
+ * chip that is on is drawn by its own border in the accent and nothing else,
+ * which is the kit's one way of saying "this one is chosen".
+ */
+.crewlet-tabs--chip {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+}
+
+.crewlet-tabs--chip .crewlet-tabs__tab {
+  min-height: var(--size-control-sm);
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-tabs--chip .crewlet-tabs__tab:hover:not(.is-disabled):not(.is-active) {
+  background: var(--color-surface-hover);
+}
+
+/* A COUNT IS A QUIET FIGURE here, not a pill: a pill inside a chip is a box
+   inside a box, beside a name that already has its own. */
+.crewlet-tabs--chip .crewlet-count {
+  min-width: 0;
+  padding: 0;
+  background: none;
+}
+
+/* An outline rather than a border, so a chip turning on does not move its
+   neighbours by a pixel, and forced-colors mode keeps it. */
+.crewlet-tabs--chip .crewlet-tabs__tab.is-active {
+  color: var(--color-text-primary);
+  outline: 1px solid var(--color-brand-accent);
+  outline-offset: -1px;
+}
+
+/* THE RING TAKES THE BORDER'S PLACE: declared after it and of the same
+   weight, so a focused chip that is on draws one edge, the ring. */
+.crewlet-tabs--chip .crewlet-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
 .crewlet-tabs__tab.is-disabled,
 .crewlet-tabs__tab:disabled {
   opacity: 0.55;

package/dist/TagsInput/index.js

@@ -1,7 +1,7 @@
-export { TagsInput } from '../chunk-7JGWSOLM.js';
+export { TagsInput } from '../chunk-GG2QEZO2.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-6MU7HNB4.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';

package/dist/ThemeGallery/ThemeGallery.d.ts

@@ -0,0 +1,65 @@
+import { type HTMLAttributes } from 'react';
+import { type ThemeId } from '@crewlethq/tokens';
+import { type ThemeSwatchPair } from '../ThemeSwatch/index.js';
+/** A theme as the gallery offers it: the fields of a `themeRegistry` entry it reads. */
+export interface ThemeGalleryTheme<T extends string = string> {
+    id: T;
+    name: string;
+    /** A few words on what sets it apart, said with its name. */
+    tag: string;
+    /** The id of the group it is listed under. */
+    group: string;
+    swatch: ThemeSwatchPair;
+}
+/** A heading the themes are listed under, as `themeGroups` carries it. */
+export interface ThemeGalleryGroup {
+    id: string;
+    name: string;
+}
+export interface ThemeGalleryProps<T extends string = ThemeId> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** The group's name, said on entering it. "Theme" by default. */
+    label?: string | undefined;
+    /** The theme in use. */
+    value: T;
+    /** The reader chose a theme: a click, Space or Enter, or an arrow key. */
+    onValueChange: (id: T) => void;
+    /**
+     * The theme the pointer has come to rest on, for a preview beside the
+     * gallery, and `null` when it leaves: told once the pointer has rested on a
+     * card for `HIGHLIGHT_REST_MS`, so crossing the grid does not repaint the
+     * preview at every card it passes.
+     */
+    onPreview?: ((id: T | null) => void) | undefined;
+    /** The themes offered. Every theme `@crewlethq/tokens` ships, by default. */
+    themes?: readonly ThemeGalleryTheme<T>[] | undefined;
+    /** The headings they are listed under, in order. The registry's groups, by default. */
+    groups?: readonly ThemeGalleryGroup[] | undefined;
+    /** How many cards a row holds. Three by default. */
+    columns?: number | undefined;
+    /** Nothing can be chosen, and the gallery says so. */
+    disabled?: boolean | undefined;
+}
+/**
+ * The choice of a theme: every theme, each drawn as its two palettes, listed
+ * under its group.
+ *
+ * A RADIO GROUP, because a theme is a setting and exactly one is in use: the
+ * gallery is one tab stop, and the arrows move through it and choose as they
+ * move, as the platform's own radio group does. They walk the cards in
+ * reading order, across the groups, because the groups break the rows and an
+ * arrow that jumped a row would land somewhere the reader is not looking.
+ *
+ * THE CHOSEN CARD IS SAID WITH ITS OWN BORDER, in the accent: one line round
+ * the card, and the line means "this one". Focus draws its ring over that
+ * border rather than outside it, so a focused card is never two outlines.
+ *
+ * POINTING PREVIEWS, CHOOSING APPLIES. `onPreview` is told the card the
+ * pointer rests on, for a pane beside the gallery to show it in, so a reader
+ * crossing the grid with the pointer does not repaint the whole window at
+ * every card. The keys choose as they move, which is what applies.
+ *
+ * A CARD IS NAMED BY THE THEME'S NAME AND ITS TAG ("Abyss, Vivid violet"),
+ * and described by its group's heading; the drawing is decoration, because
+ * the name is printed under it.
+ */
+export declare function ThemeGallery<T extends string = ThemeId>({ label, value, onValueChange, onPreview, themes, groups, columns, disabled, className, style, ...rest }: ThemeGalleryProps<T>): import("react").JSX.Element;

package/dist/ThemeGallery/index.d.ts

@@ -0,0 +1,3 @@
+import './ThemeGallery.css';
+export { ThemeGallery } from './ThemeGallery.js';
+export type { ThemeGalleryGroup, ThemeGalleryProps, ThemeGalleryTheme } from './ThemeGallery.js';

package/dist/ThemeGallery/index.js

@@ -0,0 +1,6 @@
+export { ThemeGallery } from '../chunk-KLIEPFEZ.js';
+import '../chunk-MNFU2RNT.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ThemeGallery-NITASULQ.css

@@ -0,0 +1,93 @@
+/*
+ * The gallery of themes: each group's heading over a grid of cards.
+ *
+ * A ROW HOLDS THE SAME NUMBER OF CARDS IN EVERY GROUP (`columns`, three by
+ * default), so a group of one draws a card the size of every other card
+ * rather than one stretched across the row, and the swatches line up from
+ * group to group.
+ */
+
+.crewlet-theme-gallery__groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.crewlet-theme-gallery__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-theme-gallery__heading {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-theme-gallery__cards {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-theme-gallery-columns), minmax(0, 1fr));
+  gap: var(--spacing-2);
+}
+
+/*
+ * A CARD IS ITS BORDER. Resting, the plain hairline; under the pointer, the
+ * strong one; chosen, the accent. One line round the card in every state, so
+ * the chosen card is never a card inside a frame.
+ */
+.crewlet-theme-gallery__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* Not on the chosen card: under the pointer it keeps the accent, or the one
+   card that says "this one" would stop saying it while it is being pointed at. */
+.crewlet-theme-gallery__card:hover:not(:disabled):not(.is-chosen) {
+  border-color: var(--color-border-strong);
+}
+
+.crewlet-theme-gallery__card.is-chosen {
+  border-color: var(--color-brand-accent);
+}
+
+/* The ring is drawn OVER the border, inset by its width, never a second line outside it. */
+.crewlet-theme-gallery__card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+.crewlet-theme-gallery__card:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.crewlet-theme-gallery__name {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * FORCED COLORS keeps the border and drops the accent, so the chosen card
+ * would look like every other; the system's own selected colour says it.
+ */
+@media (forced-colors: active) {
+  .crewlet-theme-gallery__card.is-chosen {
+    border-color: Highlight;
+    border-width: 2px;
+  }
+}

package/dist/ThemeSwatch/ThemeSwatch.d.ts

@@ -0,0 +1,71 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * The colours a theme's thumbnail is drawn with, in one mode: the shape of a
+ * `themeRegistry` entry's `swatch.dark` and `swatch.light` in
+ * `@crewlethq/tokens`, which the build reads off the sheet that paints the
+ * theme.
+ */
+export interface ThemeSwatchColours {
+    frame: string;
+    sheet: string;
+    card: string;
+    raised: string;
+    hairline: string;
+    text: string;
+    muted: string;
+    accent: string;
+    onAccent: string;
+    info: string;
+    warning: string;
+    danger: string;
+    success: string;
+}
+/** A theme's two palettes, as its registry entry carries them. */
+export interface ThemeSwatchPair {
+    dark: ThemeSwatchColours;
+    light: ThemeSwatchColours;
+}
+/**
+ * How much of the theme is drawn.
+ *
+ * `chip` is a mark beside a name in a list: each palette's frame with its
+ * accent on it. `card` is a picker's thumbnail: a rail, a sheet and a card
+ * with the primary action and the four states. `pane` is the same sketch
+ * large enough to read as a screen, for a preview beside a picker.
+ */
+export type ThemeSwatchSize = 'chip' | 'card' | 'pane';
+export interface ThemeSwatchProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The theme's colours: a `themeRegistry` entry's `swatch`. */
+    swatch: ThemeSwatchPair;
+    size?: ThemeSwatchSize | undefined;
+    /**
+     * One palette alone. Without it both are drawn, dark beside light, which is
+     * what a theme IS: a pair the mode chooses between.
+     */
+    mode?: 'dark' | 'light' | undefined;
+    /**
+     * Names the drawing as an image. Without one it is decoration and hidden
+     * from assistive technology, which is right wherever the theme's name is
+     * printed beside it.
+     */
+    label?: string | undefined;
+}
+/**
+ * A theme, drawn from its colours: the thumbnail every theme picker shows.
+ *
+ * DRAWN FROM THE REGISTRY, NOT FROM THE PAGE. A thumbnail has to show a theme
+ * that is NOT on screen, so it cannot read the page's custom properties: it
+ * paints each half with its own, set from the colours the build read off the
+ * theme's sheet. The outline round it is the page's own hairline, because
+ * that is where the thumbnail sits.
+ *
+ * BOTH MODES BY DEFAULT, dark beside light, because a theme is a pair and the
+ * reader's mode is a separate choice: a thumbnail of one half would show a
+ * light reader a dark theme they would never see, or hide the half they
+ * would. `mode` draws one, for a preview that follows the reader's mode.
+ *
+ * DECORATION UNLESS NAMED. Wherever the theme's name is printed beside it the
+ * drawing says nothing a reader needs; given a `label`, it is an image with
+ * that name.
+ */
+export declare function ThemeSwatch({ swatch, size, mode, label, className, ...rest }: ThemeSwatchProps): import("react").JSX.Element;

package/dist/ThemeSwatch/index.d.ts

@@ -0,0 +1,3 @@
+import './ThemeSwatch.css';
+export { ThemeSwatch } from './ThemeSwatch.js';
+export type { ThemeSwatchColours, ThemeSwatchPair, ThemeSwatchProps, ThemeSwatchSize } from './ThemeSwatch.js';

package/dist/ThemeSwatch/index.js

@@ -0,0 +1,2 @@
+export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
+import '../chunk-ODEQTPFM.js';