@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/status-dot.tsx

@@ -1,170 +0,0 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { statusTone, type StatusKind } from "../lib/status-tone";
-import type { ProgressBarTone } from "./progress-bar";
-import type { ChipHue } from "./chip";
-
-/**
- * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a
- * dot in a legend, the bar it explains and the badge beside it can be given the same
- * word and agree. The money pair is here for the same reason it is there: a legend
- * swatch for income is money, not "success". Chip's categorical hues are here too
- * (0.11): a unit-status dot in a combobox (kastlan lease-unit-step.tsx:35, "rented"
- * is blue) must match the Chip that states the same status elsewhere.
- */
-export type StatusDotTone = ProgressBarTone | ChipHue;
-
-/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's
- *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */
-export type StatusDotSize = "sm" | "md" | "lg";
-
-const FILL: Record<StatusDotTone, string> = {
-  brand: "bg-brand",
-  neutral: "bg-[var(--text-muted)]",
-  success: "bg-success",
-  warning: "bg-warning",
-  danger: "bg-danger",
-  info: "bg-info",
-  income: "bg-money-income",
-  expense: "bg-money-expense",
-  blue: "bg-hue-blue",
-  indigo: "bg-hue-indigo",
-  purple: "bg-hue-purple",
-  teal: "bg-hue-teal",
-  orange: "bg-hue-orange",
-};
-
-/**
- * The colour of each tone as a CSS value — the same `var(--…)` the dot's class paints
- * with. For a mark the kit does not draw: a `SwatchPicker` option (`color`), a chart
- * series, an inline `style`. keksdose's category picker spelled `var(--hue-teal)` out by
- * hand to match the dot beside the category name; a renamed token would have parted
- * them silently. (The class table above stays literal: Tailwind finds classes by
- * reading the source, so `bg-[${…}]` would never be generated. A test keeps the two
- * tables agreeing.)
- */
-const COLOR: Record<StatusDotTone, string> = {
-  brand: "var(--brand)",
-  neutral: "var(--text-muted)",
-  success: "var(--success)",
-  warning: "var(--warning)",
-  danger: "var(--danger)",
-  info: "var(--info)",
-  income: "var(--money-income)",
-  expense: "var(--money-expense)",
-  blue: "var(--hue-blue)",
-  indigo: "var(--hue-indigo)",
-  purple: "var(--hue-purple)",
-  teal: "var(--hue-teal)",
-  orange: "var(--hue-orange)",
-};
-
-/** The CSS colour a {@link StatusDot} of `tone` is filled with — `statusDotColor("teal")`
- *  is `"var(--hue-teal)"`. See the table above for when to reach for it. */
-export function statusDotColor(tone: StatusDotTone): string {
-  return COLOR[tone];
-}
-
-const SIZE: Record<StatusDotSize, string> = { sm: "size-2", md: "size-2.5", lg: "size-3" };
-
-/**
- * A labelled dot at Large and Extra large (0.32.1, keksdose's 0.32 report;
- * docs/text-size-harmonization.md §4 "nothing truncates"): the label wraps instead of
- * ending in "…", so a legend entry or a status keeps its last word, the one that tells
- * two states apart. The dot then sits on the label's FIRST line rather than halfway down
- * the block: the row aligns to the top and the dot moves down by half of what one line
- * (`1lh`, the label's own line height, which the dot inherits) leaves around it.
- * `large:` classes, so Normal keeps its one centred line.
- *
- * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this
- * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility breaks
- * with `overflow-wrap: anywhere`, which lowers the label's min-content width: a legend in
- * an auto-sized table column (the showcase's tone table at 360 px, Extra large) wants the
- * column given a width, or it is squeezed to a letter per line.
- */
-const LABEL_TRUNCATE = "truncate-until-large";
-const DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {
-  sm: "large:mt-[calc((1lh_-_0.5rem)/2)]",
-  md: "large:mt-[calc((1lh_-_0.625rem)/2)]",
-  lg: "large:mt-[calc((1lh_-_0.75rem)/2)]",
-};
-
-export interface StatusDotProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
-  tone?: StatusDotTone;
-  /** What the dot means as a status (0.49 KIT-8), instead of a `tone` — see Chip's
-   *  `status` and {@link statusTone}. An explicit `tone` wins. */
-  status?: StatusKind;
-  size?: StatusDotSize;
-  /**
-   * Visible text beside the dot — a legend entry ("Rented") or a status ("Online"). It
-   * is also what a screen reader reads: the dot itself is decorative whenever there is
-   * a label.
-   *
-   * Without a label the dot is hidden from assistive technology, because a coloured
-   * circle says nothing to someone who cannot see it. Say the state where it IS read —
-   * keksdose's avatar trigger puts "3 unread" in its own `aria-label` — or give the dot
-   * an `aria-label` of its own, which makes it an image with that name.
-   */
-  label?: ReactNode;
-  /**
-   * A ring in the surface colour round the dot, so a dot laid over the corner of an
-   * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx
-   * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white
-   * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).
-   */
-  ring?: boolean;
-  /** Extra classes for the dot itself; `className` goes on the outer element. */
-  dotClassName?: string;
-}
-
-/**
- * A small token-coloured dot, with an optional label.
- *
- * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend
- * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette
- * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are
- * this.
- */
-export function StatusDot({
-  tone: toneProp,
-  status,
-  size = "sm",
-  label,
-  ring = false,
-  className,
-  dotClassName,
-  "aria-label": ariaLabel,
-  ...rest
-}: StatusDotProps) {
-  const tone: StatusDotTone = toneProp ?? (status ? statusTone(status) : "neutral");
-  const dot = (
-    <span
-      // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a test or
-      // a caller's selector, where the fill class is the kit's to change.
-      data-tone={tone}
-      className={cn(
-        "inline-block shrink-0 rounded-full",
-        SIZE[size],
-        FILL[tone],
-        ring && "ring-2 ring-[var(--bg-surface)]",
-        label != null && DOT_ON_FIRST_LINE[size],
-        label == null && className,
-        dotClassName,
-      )}
-      {...(label == null
-        ? ariaLabel
-          ? { role: "img", "aria-label": ariaLabel, ...rest }
-          : { "aria-hidden": true, ...rest }
-        : { "aria-hidden": true })}
-    />
-  );
-  if (label == null) return dot;
-  return (
-    // No `aria-label` here: the visible label is the text, and a name on a role-less
-    // span is one ARIA forbids and screen readers ignore.
-    <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start", className)}>
-      {dot}
-      <span className={cn("min-w-0", LABEL_TRUNCATE)}>{label}</span>
-    </span>
-  );
-}

package/src/components/swatch-picker-labels.ts

@@ -1,10 +0,0 @@
-// The English words of ./swatch-picker, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./swatch-picker re-exports them.
-
-import type { SwatchPickerLabels } from "./swatch-picker";
-
-export const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {
-  none: "No colour",
-  mixed: "Mixed: the selected items have different colours",
-};

package/src/components/swatch-picker.tsx

@@ -1,283 +0,0 @@
-import { useId, useMemo } from "react";
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { TILE_SIZE, TileRadioGroup } from "./tile-radio";
-import type { TileItem, TileSize } from "./tile-radio";
-import { Tooltip } from "./tooltip";
-import { useCommitReason, type CommitScope } from "./write-lock";
-import { hasContent } from "../lib/presence";
-import { LabelStrip, mergeDescribedBy, useFieldMessages, type FieldHelpProps } from "./field-parts";
-import { DEFAULT_SWATCH_PICKER_LABELS } from "./swatch-picker-labels";
-
-export interface SwatchPickerLabels {
-  /** The "no colour" tile's name, when `allowNone` is set. */
-  none: string;
-  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */
-  mixed: string;
-}
-
-// Defined in ./swatch-picker-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_SWATCH_PICKER_LABELS };
-
-export interface SwatchOption<T extends string> {
-  value: T;
-  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an
-   *  inline background, so it does not have to be a class the kit's CSS knows.
-   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that
-   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor("teal")` rather
-   *  than `"var(--hue-teal)"` written out — one table, so the two cannot drift. */
-  color?: string;
-  /** The colour's name, in the user's language. Shown in the bubble and read out;
-   *  required, because a swatch with no name is a colour only some people can read. */
-  label: string;
-  /** Classes for the swatch dot, for a palette that lives in classes rather than
-   *  values (a light/dark pair). An inline `color` would win over a class, so pass
-   *  one or the other. */
-  swatchClassName?: string;
-  /** A remark read after the name and shown under it in the bubble ("used by
-   *  Groceries"). The tile wears a dot while it has one. */
-  note?: string;
-  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a
-   *  `disabledReason` the tile stays reachable instead and says why. */
-  disabled?: boolean;
-  /**
-   * Why THIS colour cannot be chosen right now — the whole picker's `disabledReason`,
-   * one tile at a time (the kit's later list after keksdose K3: a colour another
-   * category already wears, a flag only an owner may set). {@link Button}'s rule: a tile
-   * that is merely `disabled` is a dead square a keyboard never lands on, so nobody
-   * learns why it is dimmed.
-   *
-   * The tile looks disabled but is `aria-disabled`, not `disabled`: Tab and the arrow
-   * keys still reach it, its bubble shows the reason under its name, and the reason
-   * describes it. Choosing it — a click, Space or Enter, or an arrow under automatic
-   * activation — does nothing: the focus moves onto it and the checked colour stays
-   * where it was, as under the whole-picker lock. Wins over `disabled`.
-   */
-  disabledReason?: ReactNode;
-}
-
-/**
- * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's
- * is omitted rather than shadowed, as on {@link ToggleGroup}.
- */
-export interface SwatchPickerProps<T extends string>
-  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">, FieldHelpProps {
-  options: SwatchOption<T>[];
-  /** The chosen colour, or `null` for none. */
-  value: T | null;
-  onChange: (value: T | null) => void;
-  /** Lead with a "no colour" tile whose value is `null`. Clearing a colour has to be
-   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */
-  allowNone?: boolean;
-  /**
-   * "Some of each" — a bulk edit over rows whose colours differ. Nothing is checked
-   * (not even "none", whatever `value` says), and the group is described as mixed.
-   * Distinct from `value={null}`, which is an answer: "no colour".
-   */
-  mixed?: boolean;
-  /** See {@link IconPickerProps.activation}. Default "automatic". */
-  activation?: "automatic" | "manual";
-  /** 28 / 32 / 44px tiles. Default "md"; "lg" is the touch-target size. */
-  size?: TileSize;
-  /**
-   * Classes for every tile's frame, merged after the kit's own — so a caller's
-   * `size-*` beats `size`'s. For a tile that has to follow a container query or a
-   * breakpoint (keksdose grows its tiles to 40px in a narrow card:
-   * `tileClassName="@max-md:size-10"`) without reaching into the kit's markup with an
-   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s
-   * dimensions; the tile grows round it.
-   */
-  tileClassName?: string;
-  disabled?: boolean;
-  labels?: LabelOverride<SwatchPickerLabels>;
-  /**
-   * An 11px static label in a strip over the swatches, named by it (keksdose K2): the
-   * transaction row's flag picker stands between labelled fields and hand-builds this
-   * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.
-   * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the
-   * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a
-   * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an
-   * explicit `aria-label` / `aria-labelledby` still names the group instead.
-   */
-  label?: ReactNode;
-  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since
-   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a
-   *  touch screen (§4), is a caption under the swatches, describing the group. */
-  hint?: ReactNode;
-  /**
-   * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for
-   * a picker that saves itself on change (keksdose K3, the flag picker in a row a
-   * read-only viewer may see). The swatches stay reachable and the arrow keys still
-   * walk them, but nothing reaches `onChange`; the reason is shown in the kit
-   * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and
-   * describes the group. Wins over `disabled`.
-   */
-  disabledReason?: ReactNode;
-  /** This picker COMMITS — choosing a colour saves it. Under a locked
-   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
-   *  reason, as {@link Button}'s `commit` does. */
-  commit?: CommitScope;
-}
-
-/**
- * A row of colour swatches that is one radio group.
- *
- * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading
- * above it. Each swatch is named by its `label` and shows it in a bubble on hover and
- * focus, so the name is not the screen reader's alone.
- *
- * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one
- * while nothing is checked; the arrow keys move between swatches and, by default,
- * choose as they go; Home and End jump to the ends. Left and right follow the page's
- * direction.
- */
-export function SwatchPicker<T extends string>({
-  options,
-  value,
-  onChange,
-  allowNone = false,
-  mixed = false,
-  activation = "automatic",
-  size = "md",
-  tileClassName,
-  disabled = false,
-  labels,
-  label,
-  hint,
-  help,
-  disabledReason: ownDisabledReason,
-  commit,
-  className,
-  ...rest
-}: SwatchPickerProps<T>) {
-  const text = useKitLabels("swatchPicker", DEFAULT_SWATCH_PICKER_LABELS, labels);
-  const mixedId = useId();
-  const labelId = useId();
-  const reasonId = useId();
-  const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = hasContent(disabledReason);
-  const labelled = hasContent(label);
-  // The label line's "?", or the caption under the swatches (DUP-2). Only with a label,
-  // the help's "?" too (0.36). The caller's ids, the caption, then the group's state:
-  // mixed, locked.
-  const messages = useFieldMessages({
-    hint: labelled ? hint : undefined,
-    help: labelled ? help : undefined,
-    name: label,
-    describedBy: rest["aria-describedby"],
-    reasonId: mergeDescribedBy(mixed && mixedId, locked && reasonId),
-  });
-  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
-  const items: TileItem<T>[] = [
-    ...(allowNone ? [{ key: null, label: text.none }] : []),
-    ...options.map((o) => ({
-      key: o.value,
-      label: o.label,
-      note: o.note,
-      disabled: o.disabled,
-      disabledReason: o.disabledReason,
-    })),
-  ];
-  const tiles = (
-    <TileRadioGroup
-      items={items}
-      checked={mixed ? undefined : value}
-      // A locked picker saves on change, so the change is swallowed — the arrow keys
-      // still move the focus (and, automatic, would choose), and nothing is chosen. A
-      // locked TILE is refused by the tiles themselves; asked again here so a reason
-      // can never become a change, whatever the tiles do.
-      onSelect={(next) => {
-        if (!locked && !hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);
-      }}
-      activation={activation}
-      // A reason wins over `disabled`: the tiles stay in the tab order.
-      disabled={disabled && !locked}
-      size={size}
-      tileClassName={
-        tileClassName || locked
-          ? (_item, selected) =>
-              cn(
-                // The disabled tile's look, without its `disabled`: dimmed, a
-                // not-allowed cursor, and no hover offer on a tile that cannot be
-                // chosen. Not on the selected tile, whose frame IS its state.
-                locked && "cursor-not-allowed opacity-50",
-                locked && !selected && "hover:border-subtle hover:bg-surface",
-                tileClassName,
-              )
-          : undefined
-      }
-      renderTile={(item) => {
-        const opt = item.key === null ? undefined : byValue.get(item.key);
-        return (
-          <span
-            aria-hidden
-            // A hairline round the dot, drawn over whatever colour it is: a pale
-            // yellow swatch on a white surface is otherwise a hole in the row.
-            className={cn(
-              "rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15",
-              TILE_SIZE[size].swatch,
-              opt?.swatchClassName,
-            )}
-            style={{ background: opt?.color }}
-          />
-        );
-      }}
-    />
-  );
-  const group = (
-    <div
-      {...rest}
-      role="radiogroup"
-      aria-labelledby={
-        labelled && rest["aria-label"] === undefined && rest["aria-labelledby"] === undefined
-          ? labelId
-          : rest["aria-labelledby"]
-      }
-      aria-disabled={disabled || locked || undefined}
-      aria-describedby={messages.describedBy}
-      className={cn("flex flex-wrap items-center gap-1.5", !labelled && className)}
-    >
-      {locked ? (
-        // Inside the group, round the tiles — not round the group, whose box is the
-        // caller's row item. This row inherits the group's gap, wrap and alignment, so
-        // the tiles sit exactly where they sit unlocked. Below the row: each tile's own
-        // bubble (its colour's name) is above it.
-        <Tooltip
-          label={disabledReason}
-          side="bottom"
-          className="flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]"
-        >
-          <>
-            {tiles}
-            <span id={reasonId} hidden>
-              {disabledReason}
-            </span>
-          </>
-        </Tooltip>
-      ) : (
-        tiles
-      )}
-      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this
-          way it takes no room in the row. */}
-      {mixed && (
-        <span id={mixedId} hidden>
-          {text.mixed}
-        </span>
-      )}
-    </div>
-  );
-  if (!labelled) return group;
-  return (
-    <LabelStrip
-      labelId={labelId}
-      label={label}
-      hint={messages.labelHint}
-      disabled={disabled || locked}
-      className={className}
-    >
-      {group}
-      {messages.below}
-    </LabelStrip>
-  );
-}