@crewlethq/ui 0.12.0 → 0.14.0

package/dist/Switcher/Switcher.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Moving a page to another subject of the same kind: one project for another,
+ * or for all of them.
+ *
+ * # One panel, three places
+ *
+ * ANCHORED under its button where the page names its subject, which is a
+ * breadcrumb's heading (`Breadcrumb`'s `current`): the reader changes the
+ * subject where the subject is named. CENTRED over the page when it is opened
+ * by a key from a page with no such button, and nothing behind it moves until
+ * a row is chosen. A SHEET from the bottom edge below the phone breakpoint,
+ * whichever of the two it would otherwise be, because a thumb reaches the
+ * bottom of a phone and a panel hung from a heading at the top of one leaves
+ * no room for the keyboard.
+ *
+ * # It is a combobox in a dialog
+ *
+ * Focus stays in the search field and the arrows move a highlight through the
+ * rows, which the field names with `aria-activedescendant`, so a screen reader
+ * hears each row as it is reached. The rows are options in ONE listbox: the
+ * pinned row, the rows a message offers, the groups, and the footer's actions,
+ * which sit in their own band below the scrolling list and are owned by the
+ * listbox (`aria-owns`) so the arrows walk into them without a second list.
+ *
+ * # Every row that goes somewhere is a link
+ *
+ * A row with an `href` is an anchor, so a middle click and a Command or Control
+ * click open it in a new tab as every link does, and Command or Control with
+ * Enter does the same from the keyboard. The panel stays open for all three:
+ * the reader asked for another tab, not to leave this one.
+ *
+ * # A held row stays, with its reason
+ *
+ * A row the reader cannot take right now (New project, for a viewer without
+ * the credential) is drawn with the reason at its end and passed over by the
+ * arrows. A row that vanished would be one the reader could not know exists.
+ *
+ * # Leaving it
+ *
+ * Escape closes it and puts focus back on its button. Tab from the anchored
+ * panel closes it and carries on to whatever follows the button, which is
+ * what Tab from the button would have reached; a centred panel or a sheet is a
+ * modal surface and keeps Tab inside. Taking a row puts focus back on the
+ * button, which is the page's heading, so the reader stays on the name of the
+ * place they just moved to.
+ *
+ * IT KNOWS NOTHING ABOUT PROJECTS. The caller searches, ranks and groups, and
+ * hands over rows and the words around them; this owns the surface, the keys,
+ * and how a screen reader hears it.
+ */
+import { type ReactNode } from 'react';
+/** Where the panel opens. Derived, never asked for: see the component doc. */
+export type SwitcherPlacement = 'anchored' | 'centered' | 'sheet';
+export interface SwitcherOption {
+    /** Stable across a re-query: it keys the row and names its option element. */
+    id: string;
+    /** The row's words. Plain text, so a search's letters can be drawn bold in it. */
+    label: string;
+    /** A project's key, drawn as a `KeyChip` in the lead column. */
+    keyChip?: string | undefined;
+    /** A glyph in the lead column, for a row that is not a project. Decorative. */
+    icon?: ReactNode;
+    /** A short figure at the row's end, in the quiet ink: a project's open count. */
+    meta?: ReactNode;
+    /**
+     * What a screen reader calls the row where its words alone do not say it:
+     * "Product and Engineering, FAIR, 4 open" rather than a name followed by a
+     * bare figure.
+     */
+    accessibleLabel?: string | undefined;
+    /**
+     * Where the row goes. A row with one is a link: a middle click, a Command or
+     * Control click, and Command or Control with Enter open it in a new tab.
+     */
+    href?: string | undefined;
+    /** The subject the page is on now: outlined in the accent, and `aria-current="page"`. */
+    current?: boolean | undefined;
+    /** Why the row cannot be taken right now. Drawn at its end; the arrows pass over it. */
+    held?: string | undefined;
+    /** Taking the row. Without one, a row with an `href` follows it. */
+    onSelect?: (() => void) | undefined;
+    /**
+     * Taking the row leaves the panel open: an action on the list itself, such
+     * as asking for it again after it did not load, where closing would take
+     * the answer away from the reader who asked for it.
+     */
+    keepsOpen?: boolean | undefined;
+}
+export interface SwitcherGroup {
+    id: string;
+    /** The heading over the group, and the name a screen reader gives it. */
+    label: string;
+    /** A figure at the heading's end: how many rows the group holds. */
+    count?: number | undefined;
+    options: SwitcherOption[];
+}
+/**
+ * A state the list is in, said in the panel: nothing matches, nothing loaded,
+ * nothing exists yet. Its actions are rows, where the arrows reach them.
+ */
+export interface SwitcherMessage {
+    title: string;
+    body?: string | undefined;
+    actions?: SwitcherOption[] | undefined;
+}
+/** The button the panel opens from, drawn as the page's own name. */
+export interface SwitcherTrigger {
+    /** The subject's name. */
+    label: string;
+    /** Its key, drawn as a `KeyChip` before the name. */
+    keyChip?: string | undefined;
+    /** Drawn after the name: a `Tag` saying the subject is archived. */
+    tag?: ReactNode;
+    /** The name in the mono face: an identifier still waiting for its name. */
+    mono?: boolean | undefined;
+    /** The tooltip: what the button does and the key that does it from anywhere. */
+    title?: string | undefined;
+}
+export interface SwitcherProps {
+    /** Names the panel, "Switch project"; a sheet draws it as its title. */
+    label: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The button the panel hangs from, drawn where the switcher is rendered.
+     * Without one the panel opens centred over the page.
+     */
+    trigger?: SwitcherTrigger | undefined;
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** The field's placeholder, and its name: "Find a project". */
+    placeholder?: string | undefined;
+    /** Names the list of rows: "Projects". */
+    listLabel?: string | undefined;
+    /** The row that is always first and never matched: "All projects". */
+    pinned?: SwitcherOption | undefined;
+    /** A line about the list itself, under the pinned row: "200 of 340 listed." */
+    note?: string | undefined;
+    message?: SwitcherMessage | undefined;
+    groups?: SwitcherGroup[] | undefined;
+    /** Actions in a band under the list that does not scroll: "Browse all projects". */
+    footer?: SwitcherOption[] | undefined;
+    /** Placeholder rows in place of the groups, while the rows are on their way. */
+    loading?: boolean | undefined;
+    /** What a screen reader is told while loading: "Loading projects". */
+    loadingLabel?: string | undefined;
+    /** Said politely whenever it changes: "3 projects". */
+    announcement?: string | undefined;
+    className?: string | undefined;
+}
+export declare function Switcher({ label, open, onOpenChange, trigger, className, ...panel }: SwitcherProps): import("react").JSX.Element;

package/dist/Switcher/index.d.ts

@@ -0,0 +1,3 @@
+import './Switcher.css';
+export { Switcher } from './Switcher.js';
+export type { SwitcherGroup, SwitcherMessage, SwitcherOption, SwitcherPlacement, SwitcherProps, SwitcherTrigger, } from './Switcher.js';

package/dist/Switcher/index.js

@@ -0,0 +1,16 @@
+export { Switcher } from '../chunk-Y6NR7QJ3.js';
+import '../chunk-W5J7R5EB.js';
+import '../chunk-TFMJH2E6.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-FYTIJM2T.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-IG75YMUN.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-O2ZDZZS7.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

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-ZHOM65MI.js';
+export { TagsInput } from '../chunk-JCO3SIST.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-6MU7HNB4.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.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';