@crewlethq/ui 0.12.0 → 0.14.0

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';

package/dist/ThemeSwatch-4DL457ZB.css

@@ -0,0 +1,256 @@
+/*
+ * A theme's thumbnail.
+ *
+ * EVERY COLOUR IS THE THEME'S OWN, from the custom properties ThemeSwatch sets
+ * on each half (--crewlet-swatch-*), and none is the page's except the
+ * outline, which is the page's hairline because the page is where the
+ * thumbnail sits. Two halves share the box equally: dark, then light.
+ *
+ * IT IS A PICTURE, so forced-colors mode leaves it alone: repainted to the
+ * system's two colours, every theme would draw the same blank box.
+ */
+
+.crewlet-theme-swatch {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  flex: none;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  forced-color-adjust: none;
+}
+
+.crewlet-theme-swatch--chip {
+  width: 26px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-theme-swatch--card {
+  width: 100%;
+  height: 38px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch--pane {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+}
+
+.crewlet-theme-swatch__half {
+  display: grid;
+  grid-template-columns: 26% minmax(0, 1fr);
+  min-width: 0;
+  background: var(--crewlet-swatch-frame);
+}
+
+/* ── The chip: each palette's frame, with its accent on it ────────────── */
+
+.crewlet-theme-swatch--chip .crewlet-theme-swatch__half {
+  grid-template-columns: none;
+  place-items: center;
+}
+
+.crewlet-theme-swatch__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+  background: var(--crewlet-swatch-accent);
+}
+
+/* ── The card: a rail, a sheet, a card on it ──────────────────────────── */
+
+.crewlet-theme-swatch__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 4px;
+  min-width: 0;
+}
+
+.crewlet-theme-swatch__rail-row {
+  display: block;
+  width: 80%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
+}
+
+/* The row the reader is on stands on the raised rung, as the rail draws it. */
+.crewlet-theme-swatch__rail-row.is-current {
+  width: 100%;
+  height: 6px;
+  background: var(--crewlet-swatch-raised);
+}
+
+.crewlet-theme-swatch__sheet {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 3px 3px 3px 0;
+  padding: 3px;
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-sheet);
+}
+
+.crewlet-theme-swatch__card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 4px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
+}
+
+.crewlet-theme-swatch__line {
+  display: block;
+  width: 60%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
+
+/*
+ * THE ACTION GIVES WAY BEFORE IT DISAPPEARS. A narrow thumbnail has less room
+ * than the action and the four states take, so the action narrows to a floor
+ * and the row clips its last states, rather than the action, which is what a
+ * theme is chosen for, shrinking to nothing.
+ */
+.crewlet-theme-swatch__row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+}
+
+/* The primary action: the accent's fill. */
+.crewlet-theme-swatch__action {
+  display: block;
+  flex: 0 1 14px;
+  min-width: 6px;
+  height: 6px;
+  margin-right: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-accent);
+}
+
+/* The four states, in the order the kit names them. */
+.crewlet-theme-swatch__state {
+  display: block;
+  flex: none;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-theme-swatch__state--info { background: var(--crewlet-swatch-info); }
+.crewlet-theme-swatch__state--warning { background: var(--crewlet-swatch-warning); }
+.crewlet-theme-swatch__state--danger { background: var(--crewlet-swatch-danger); }
+.crewlet-theme-swatch__state--success { background: var(--crewlet-swatch-success); }
+
+/* ── The pane: the same sketch, large enough to read as a screen ───────── */
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__half {
+  grid-template-columns: 26% minmax(0, 1fr);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail {
+  gap: 7px;
+  padding: 12px 8px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row {
+  height: 5px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row.is-current {
+  height: 12px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__sheet {
+  gap: 8px;
+  margin: 6px 6px 6px 0;
+  padding: 10px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch__title {
+  display: block;
+  flex: none;
+  width: 40%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__card {
+  flex: none;
+  gap: 7px;
+  justify-content: flex-start;
+  padding: 8px;
+}
+
+.crewlet-theme-swatch__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__state {
+  width: 6px;
+  height: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__line {
+  width: 45%;
+  height: 4px;
+}
+
+.crewlet-theme-swatch__muted {
+  display: block;
+  width: 18%;
+  height: 4px;
+  margin-left: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
+}
+
+.crewlet-theme-swatch__actions {
+  display: flex;
+  gap: 6px;
+  margin-top: auto;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__action {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 40%;
+  height: 16px;
+  margin-right: 0;
+  border-radius: var(--radius-xs);
+}
+
+/* The primary action's label, in the colour the theme labels its accent with. */
+.crewlet-theme-swatch__label {
+  display: block;
+  width: 50%;
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-on-accent);
+}
+
+.crewlet-theme-swatch__secondary {
+  display: block;
+  width: 26%;
+  height: 16px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
+}

package/dist/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -31,13 +31,15 @@ export type PreferenceControl<T extends string> = {
     storageKey?: undefined;
 };
 interface ThemeRowProps {
-    /** Names the group. */
+    /** Names the group. Mode by default: the theme is the palette, and this row chooses its light or dark half. */
     label?: string | undefined;
     /** What each choice is called out loud. The glyphs say nothing on their own. */
     lightLabel?: string | undefined;
     systemLabel?: string | undefined;
     darkLabel?: string | undefined;
     size?: 'sm' | 'md' | undefined;
+    /** Equal options filling the width given, so the row draws the same box as a Density row beside it. */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 export type ThemeSwitcherProps = ThemeRowProps & PreferenceControl<ThemePreference>;
@@ -64,6 +66,8 @@ interface DensityRowProps {
     normalMark?: string | undefined;
     comfortableMark?: string | undefined;
     size?: 'sm' | 'md' | undefined;
+    /** Equal options filling the width given, so the row draws the same box as a Mode row beside it. */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 export type DensitySwitcherProps = DensityRowProps & PreferenceControl<DensityPreference>;

package/dist/ThemeSwitcher/index.js

@@ -1,8 +1,8 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-SBRE7IML.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
-import '../chunk-UAQIUSSK.js';
-import '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-VYY56AMX.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ThemeToggle/ThemeToggle.d.ts

@@ -30,7 +30,7 @@ export type ThemeToggleProps = ToggleButtonProps & PreferenceControl<ThemePrefer
  * full `ThemeSwitcher`, which is where a settings screen offers it.
  *
  * NAMED FOR THE ACTION, drawn as the destination. The name changes with the
- * palette ("Switch to the light theme" on a dark page), so a screen reader
+ * mode ("Switch to light mode" on a dark page), so a screen reader
  * hears what a press will do, and the glyph is the palette it goes to: a sun
  * on a dark page, a moon on a light one. It is NOT `aria-pressed`, because
  * neither palette is the "on" state of the other, and a pressed state beside a

package/dist/ThemeToggle/index.js

@@ -1,4 +1,4 @@
-export { ThemeToggle } from '../chunk-ORNOOMVY.js';
+export { ThemeToggle } from '../chunk-6TSZCBID.js';
 import '../chunk-K3OWD7BJ.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,12 +1,12 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
-import '../chunk-SEFMO2EV.js';
-import '../chunk-6MU7HNB4.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-IFM63LAG.js';
+import '../chunk-IXUU5DLZ.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{TimeWindowPicker-GBF4JDFI.css → TimeWindowPicker-BZ5HHATU.css}

@@ -1,8 +1,9 @@
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
- * The trigger takes the same geometry as a Select and a DateTimePicker, so the
- * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * The trigger takes the same geometry and button boundary as a Select and a
+ * DateTimePicker (--color-border-strong; see Select.css), so the three line
+ * up in a filter bar. The panel is a RAIL of named windows beside
  * the calendars, rather than two tabs with one of them hidden: the windows a
  * reader picks by name are the road, and the absolute range is the turning off
  * it, so both are on screen at once and each shows what the other chose.
@@ -17,7 +18,7 @@
   /* The side inset only: see DateTimePicker's own trigger. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -34,7 +35,7 @@
 }
 
 .crewlet-time-window:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*

package/dist/Toaster/index.js

@@ -1,4 +1,4 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-UG5ZMAXW.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-CBZSSKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';