@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/calculator.tsx

@@ -5,11 +5,7 @@ import { cn } from "../lib/cn";
 import { FIELD_TOUCH_TEXT } from "./field-base";
 import { FOCUS_RING } from "./focus-ring";
 import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc";
-import {
-  DEFAULT_CALCULATOR_LABELS,
-  useKitLabels,
-  type CalculatorLabels,
-} from "../i18n/kit-labels";
+import { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from "../i18n/kit-labels";
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not
@@ -46,9 +42,7 @@ interface CalculatorButtonProps {
 /** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is
  *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit
  *  is named by its own glyph. */
-type Key =
-  | { kind: "ins"; label: string; ins: string; accent?: boolean; name?: KeyName }
-  | { kind: "back" };
+type Key = { kind: "ins"; label: string; ins: string; accent?: boolean; name?: KeyName } | { kind: "back" };
 
 type KeyName = "plus" | "minus" | "times" | "divide" | "decimal";
 
@@ -158,7 +152,10 @@ function CalculatorPanel({
         // is right-aligned in every script too — so both stay physical, pinned
         // with `dir="ltr"` rather than mirrored in a right-to-left form.
         dir="ltr"
-        className={cn("block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong", FIELD_TOUCH_TEXT)}
+        className={cn(
+          "block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong",
+          FIELD_TOUCH_TEXT,
+        )}
       />
       <div dir="ltr" className="h-4 pr-1 text-right font-mono text-xs text-placeholder">
         {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : ""}

package/src/components/calendar-heatmap.tsx

@@ -493,7 +493,9 @@ export function CalendarHeatmap({
   const gridName = ariaLabel ?? labels.grid;
   let body: ReactNode;
   if (layout === "weeks") {
-    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` } as CSSProperties;
+    const columns = {
+      gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))`,
+    } as CSSProperties;
     const cellSize = "size-[var(--heatmap-cell,0.75rem)]";
     // A month's name over the first column that holds its 1st — or over the first
     // column, when the window opens far enough before the next month for it to fit.
@@ -576,20 +578,13 @@ export function CalendarHeatmap({
 
   return (
     <div {...rest} className={cn("min-w-0", className)}>
-      {dropped > 0 && (
-        <div className="mb-2 text-xs text-muted">{labels.truncated(dropped)}</div>
-      )}
+      {dropped > 0 && <div className="mb-2 text-xs text-muted">{labels.truncated(dropped)}</div>}
       {body}
       {legend && (
         <div aria-hidden className="mt-2 flex items-center justify-end gap-1 text-micro text-muted">
           <span className="me-0.5">{labels.less}</span>
           {legendLevels.map((l) => (
-            <span
-              key={l}
-              data-legend-level={l}
-              className="size-2.5 rounded-sm"
-              style={{ background: legendFill(l) }}
-            />
+            <span key={l} data-legend-level={l} className="size-2.5 rounded-sm" style={{ background: legendFill(l) }} />
           ))}
           <span className="ms-0.5">{labels.more}</span>
         </div>

package/src/components/card.tsx

@@ -205,14 +205,14 @@ export function Card({
             ? // No shadow and no `flush`: it sits on a surface that already has both.
               "rounded-lg border border-subtle bg-surface p-4"
             : cn(
-              // Surface + border are theme tokens so the palette switcher (feedback
-              // #307) can re-skin every card; a caller's own bg-*/border-* override
-              // still wins via tailwind-merge.
-              "bg-surface",
-              flush
-                ? "border-y border-subtle md:rounded-lg md:border md:shadow-sm"
-                : "rounded-lg border border-subtle shadow-sm",
-            ),
+                // Surface + border are theme tokens so the palette switcher (feedback
+                // #307) can re-skin every card; a caller's own bg-*/border-* override
+                // still wins via tailwind-merge.
+                "bg-surface",
+                flush
+                  ? "border-y border-subtle md:rounded-lg md:border md:shadow-sm"
+                  : "rounded-lg border border-subtle shadow-sm",
+              ),
         toned && (bordered ? toned.border : toned.fill),
         strong && tone && CARD_TONES_STRONG[tone],
         toneFill && bordered && tone && CARD_TONE_WASH[tone],
@@ -372,10 +372,6 @@ export function CardContent({ className, ...props }: CardContentProps) {
 export function CardFooter({ className, ...props }: CardFooterProps) {
   const padded = useContext(CardPaddedContext);
   return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center", !padded && "px-6 pb-6", className)}
-      {...props}
-    />
+    <div data-slot="card-footer" className={cn("flex items-center", !padded && "px-6 pb-6", className)} {...props} />
   );
 }

package/src/components/chart-zoom-core.tsx

@@ -26,12 +26,7 @@
 // types, and until 0.35 the deprecated arithmetic and HOC, which no app imports.
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { ComponentType, Dispatch, ReactNode, SetStateAction } from "react";
-import {
-  usePlotArea,
-  useXAxisInverseScale,
-  useYAxisInverseScale,
-  type InverseScaleFunction,
-} from "recharts";
+import { usePlotArea, useXAxisInverseScale, useYAxisInverseScale, type InverseScaleFunction } from "recharts";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
@@ -202,9 +197,7 @@ function widen(span: Span, value: unknown): Span {
 
 /** Which series are measured on an axis. */
 function keysOn(source: ZoomFitSource, axisId: string): string[] {
-  return source.series
-    .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId)
-    .map((entry) => entry.key);
+  return source.series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId).map((entry) => entry.key);
 }
 
 /** A row's value as a sample, or 0 for a stack's missing layer — a stacked bar with no
@@ -274,10 +267,7 @@ export function axisExtent(
  * An axis with nothing inside the window is left OUT rather than collapsed: a window
  * between two samples is one where the chart should keep drawing the line across.
  */
-export function fitYToX(
-  source: ZoomFitSource,
-  window: readonly [number, number],
-): Record<string, [number, number]> {
+export function fitYToX(source: ZoomFitSource, window: readonly [number, number]): Record<string, [number, number]> {
   const fitted: Record<string, [number, number]> = {};
   for (const axis of source.axes) {
     const span = axisExtent(source, axis.id, window);
@@ -328,11 +318,7 @@ export const NO_ZOOM: ZoomState = { x: undefined, y: null };
  * the first: a band down y keeps the x window when the band holds no samples, and
  * otherwise pulls x in to where they are.
  */
-export function zoomAfter(
-  state: ZoomState,
-  selection: ZoomSelection,
-  source: ZoomFitSource,
-): ZoomState {
+export function zoomAfter(state: ZoomState, selection: ZoomSelection, source: ZoomFitSource): ZoomState {
   if (selection.which === "both") return { x: selection.x, y: selection.y };
   // Leave y derived, so it fits itself to what is inside the new window.
   if (selection.which === "x") return { x: selection.x, y: null };
@@ -566,14 +552,7 @@ function ZoomLayer({
   // What the drag would do, shown while it is being made: a band paints the full width
   // or height, so the reader sees it is about to let the other axis refit.
   const which = drag
-    ? zoomAxesFor(
-        drag.toX - drag.fromX,
-        drag.toY - drag.fromY,
-        plot.width,
-        plot.height,
-        ZOOM_SQUARE_ENOUGH,
-        only,
-      )
+    ? zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height, ZOOM_SQUARE_ENOUGH, only)
     : null;
 
   return (
@@ -635,13 +614,7 @@ function ZoomLayer({
 }
 
 /** One axis's pixel→value function, parked where the pointer handler can reach it. */
-function AxisProbe({
-  axisId,
-  scales,
-}: {
-  axisId: string;
-  scales: Map<string, InverseScaleFunction | undefined>;
-}) {
+function AxisProbe({ axisId, scales }: { axisId: string; scales: Map<string, InverseScaleFunction | undefined> }) {
   const inverse = useYAxisInverseScale(axisId);
   useEffect(() => {
     scales.set(axisId, inverse);

package/src/components/chart.tsx

@@ -10,11 +10,7 @@
 // that make shadcn charts read as "designed" rather than "default Recharts".
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import type { ComponentProps, CSSProperties, ReactNode, RefObject } from "react";
-import {
-  Legend as RechartsLegend,
-  ResponsiveContainer,
-  Tooltip as RechartsTooltip,
-} from "recharts";
+import { Legend as RechartsLegend, ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts";
 import { cn } from "../lib/cn";
 import { isRtl } from "../lib/direction";
 import { TYPOGRAPHIC_MINUS } from "../lib/minus";
@@ -116,8 +112,7 @@ const CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;
  * deliberately not accepted: its second argument is an arbitrary value, i.e. the same
  * hole in a shape that looks safe.
  */
-const CSS_COLOR =
-  /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\([0-9A-Za-z.,%/ -]*\)|var\(--[A-Za-z0-9_-]+\))$/;
+const CSS_COLOR = /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\([0-9A-Za-z.,%/ -]*\)|var\(--[A-Za-z0-9_-]+\))$/;
 
 /**
  * The colour an entry is painted with, or `undefined` when the style block refuses it.
@@ -152,9 +147,7 @@ function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
     return true;
   });
   if (!entries.length) return null;
-  const css = `[data-chart=${id}] {\n${entries
-    .map(([key, c]) => `  --color-${key}: ${c.color};`)
-    .join("\n")}\n}`;
+  const css = `[data-chart=${id}] {\n${entries.map(([key, c]) => `  --color-${key}: ${c.color};`).join("\n")}\n}`;
   return <style dangerouslySetInnerHTML={{ __html: css }} />;
 }
 
@@ -387,17 +380,10 @@ export function ChartTooltipContent({
         className={cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2")}
       >
         <span
-          className={cn(
-            "shrink-0 rounded-[2px]",
-            indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1",
-          )}
+          className={cn("shrink-0 rounded-[2px]", indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1")}
           style={{ backgroundColor: color }}
         />
-        <span
-          className={cn("min-w-0 text-muted", inRow ? "truncate" : "break-words")}
-        >
-          {name}
-        </span>
+        <span className={cn("min-w-0 text-muted", inRow ? "truncate" : "break-words")}>{name}</span>
         <span
           data-private
           // Isolated, so an RTL page does not turn "-26.6" into "26.6-": a figure has no
@@ -457,9 +443,7 @@ export function ChartTooltipContent({
       className="min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-subtle bg-surface px-2.5 py-2 text-xs shadow-xl"
     >
       {!hideLabel && label != null && (
-        <div className="mb-1.5 font-medium text-primary">
-          {labelFormatter ? labelFormatter(label) : label}
-        </div>
+        <div className="mb-1.5 font-medium text-primary">{labelFormatter ? labelFormatter(label) : label}</div>
       )}
       <div className="grid gap-1.5">{items.map((item, i) => tooltipRow(item, i, false))}</div>
     </div>
@@ -490,12 +474,7 @@ interface ChartLegendContentProps {
   activeKey?: string | null;
 }
 
-export function ChartLegendContent({
-  payload,
-  onItemClick,
-  hiddenKeys,
-  activeKey,
-}: ChartLegendContentProps) {
+export function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey }: ChartLegendContentProps) {
   const hidden = hiddenKeys ? new Set(hiddenKeys) : null;
   const config = useChart();
   if (!payload?.length) return null;
@@ -536,9 +515,7 @@ export function ChartLegendContent({
             // in isolate mode pressed = the isolated one. With neither supplied the
             // legend knows nothing about state, and a pressed="false" it cannot vouch
             // for would lie — so it says nothing.
-            aria-pressed={
-              hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey
-            }
+            aria-pressed={hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey}
             className={className}
           >
             {swatch}

package/src/components/checkbox-group.tsx

@@ -212,10 +212,7 @@ export function CheckboxGroup<T extends string = string>({
       )}
       <RequiredStarOnLegend.Provider value={true}>
         <div
-          className={cn(
-            layout === "horizontal" ? "flex flex-wrap gap-x-4 gap-y-2" : COLUMNS[columns],
-            listClassName,
-          )}
+          className={cn(layout === "horizontal" ? "flex flex-wrap gap-x-4 gap-y-2" : COLUMNS[columns], listClassName)}
         >
           {options.map((o) => (
             <Checkbox

package/src/components/chip-input.tsx

@@ -37,8 +37,7 @@ export { DEFAULT_CHIP_INPUT_LABELS };
  * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this
  * component's, forwarded to the inner `<input>`; the div has none of its own.
  */
-export interface ChipInputProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "placeholder" | "children"> {
+export interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "placeholder" | "children"> {
   value: string[];
   onChange: (next: string[]) => void;
   placeholder?: string;
@@ -127,9 +126,7 @@ export function ChipInput({
   const errorId = `${id}-error`;
   const rejectedId = `${id}-rejected`;
   const isInvalid = invalid || !!error;
-  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]
-    .filter(Boolean)
-    .join(" ");
+  const describedBy = [error ? errorId : null, rejected ? rejectedId : null].filter(Boolean).join(" ");
 
   const focusChip = (index: number | null) => {
     setFocusedChip(index);
@@ -344,7 +341,10 @@ export function ChipInput({
           // `w-0` with flex-1: without a width the browser's default input size (20
           // characters) became the field's minimum width and pushed it past a 240 px
           // phone at 150 % (0.32's screenshot run).
-          className={cn("w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default", FIELD_TOUCH_TEXT)}
+          className={cn(
+            "w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default",
+            FIELD_TOUCH_TEXT,
+          )}
         />
         {/* Additions, removals and rejections move no focus, so nothing would announce
             them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's

package/src/components/chip.tsx

@@ -34,16 +34,7 @@ export type { ChipInputLabels, ChipInputProps } from "./chip-input";
  * things". Using `Button` for both is the mistake this exists to prevent.
  */
 
-export type ChipTone =
-  | "neutral"
-  | "brand"
-  | "danger"
-  | "warning"
-  | "success"
-  | "info"
-  | "income"
-  | "expense"
-  | ChipHue;
+export type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info" | "income" | "expense" | ChipHue;
 /**
  * Categorical hues (0.10.0): colour that says "a different value" and nothing more —
  * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those
@@ -263,10 +254,7 @@ export interface ChipLinkProps {
  * {@link Chip}): `split` is then the interactive part's own padding — the full start
  * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.
  */
-const SIZE: Record<
-  ChipSize,
-  { body: string; split: string; tail: string; icon: string; remove: string }
-> = {
+const SIZE: Record<ChipSize, { body: string; split: string; tail: string; icon: string; remove: string }> = {
   xs: {
     body: "gap-1 px-1.5 py-0 text-caption leading-4",
     split: "gap-1 ps-1.5 pe-0.5 py-0 text-caption leading-4",
@@ -582,8 +570,7 @@ export function Chip({
   const interactive = !!href || !!onClick;
   // One radius for every rounded piece — the pill, the body inside a split pill, the ×
   // — so a square chip has no round focus ring inside it.
-  const radius =
-    shape === "square" ? (size === "sm" || size === "xs" ? "rounded" : "rounded-md") : "rounded-full";
+  const radius = shape === "square" ? (size === "sm" || size === "xs" ? "rounded" : "rounded-md") : "rounded-full";
   const dot = variant === "dot";
   const type = cn(caps && CAPS[size], variant === "solid" && "justify-center tabular-nums");
   const surface = cn(
@@ -682,11 +669,7 @@ export function Chip({
       // Composed through `common.fieldValue` because the punctuation between the two
       // halves is the language's, not ours. A chip whose content is not plain text
       // has no value to name, and gets the bare verb rather than a dangling colon.
-      aria-label={
-        typeof children === "string" && children
-          ? common.fieldValue(common.remove, children)
-          : common.remove
-      }
+      aria-label={typeof children === "string" && children ? common.fieldValue(common.remove, children) : common.remove}
       onClick={(e) => {
         // The chip may itself be a link; removing it must not also follow it.
         e.preventDefault();
@@ -723,7 +706,15 @@ export function Chip({
       ref={snap ? snapRef : undefined}
       data-tone={tone}
       // The pill is the target's box here (§4): the body inside stretches to its height.
-      className={cn(CHIP_PILL, s.tail, radius, surface, target && CHIP_TOUCH_LARGE, snap && "justify-center", className)}
+      className={cn(
+        CHIP_PILL,
+        s.tail,
+        radius,
+        surface,
+        target && CHIP_TOUCH_LARGE,
+        snap && "justify-center",
+        className,
+      )}
     >
       {inner}
       {remove}
@@ -847,9 +838,6 @@ export function Chip({
 }
 
 /** Calls a chip's `renderLink` with the props it was given — see its call site. */
-function RenderedLink({
-  render,
-  ...props
-}: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {
+function RenderedLink({ render, ...props }: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {
   return render(props);
 }

package/src/components/choice-card.tsx

@@ -163,10 +163,7 @@ export function ChoiceCard({
   });
 
   return (
-    <label
-      htmlFor={inputId}
-      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}
-    >
+    <label htmlFor={inputId} className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}>
       {/* A 20px cell, so the box centres on the title's first line (text-sm). */}
       <span className="relative flex h-5 shrink-0 items-center">
         <input
@@ -187,12 +184,7 @@ export function ChoiceCard({
             onChange?.(e);
             onCheckedChange?.(e.target.checked);
           }}
-          className={cn(
-            BOX,
-            type === "radio" ? RADIO : CHECKBOX,
-            mixed && "border-brand bg-brand",
-            inputClassName,
-          )}
+          className={cn(BOX, type === "radio" ? RADIO : CHECKBOX, mixed && "border-brand bg-brand", inputClassName)}
         />
         {type === "checkbox" &&
           (mixed ? (
@@ -356,11 +348,7 @@ export function ActionCard({
     className,
   );
   const labelledBy = rest["aria-labelledby"] ?? titleId;
-  const describedBy = mergeDescribedBy(
-    rest["aria-describedby"],
-    showDescription && descriptionId,
-    showMeta && metaId,
-  );
+  const describedBy = mergeDescribedBy(rest["aria-describedby"], showDescription && descriptionId, showMeta && metaId);
   const body = (
     <>
       {Icon && <Icon aria-hidden className={cn("mt-0.5 size-5 shrink-0", ICON_TONE[iconTone], iconClassName)} />}
@@ -486,9 +474,7 @@ export interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGro
   onChange: (value: T[]) => void;
 }
 
-export type ChoiceCardGroupProps<T extends string> =
-  | ChoiceCardSingleProps<T>
-  | ChoiceCardMultipleProps<T>;
+export type ChoiceCardGroupProps<T extends string> = ChoiceCardSingleProps<T> | ChoiceCardMultipleProps<T>;
 
 /**
  * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.

package/src/components/column-mapper-labels.ts

@@ -10,8 +10,7 @@ export const markedShort = (role: string) => `${role} *`;
 
 export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
   paste: "Paste a table",
-  pasteHint:
-    "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
+  pasteHint: "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
   chooseFile: "Choose a file",
   readError: (name) => `“${name}” could not be read`,
   headerRow: "The first line names the columns",
@@ -23,10 +22,7 @@ export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
   separatorSpace: "separated by spaces",
   decimalComma: "decimal comma (1,5)",
   decimalPoint: "decimal point (1.5)",
-  unreadCount: (count) =>
-    count === 1
-      ? "1 line could not be read"
-      : `${count} lines could not be read`,
+  unreadCount: (count) => (count === 1 ? "1 line could not be read" : `${count} lines could not be read`),
   unreadLine: (line) => `Line ${line} could not be read`,
   unreadMore: (count) => `…and ${count} more`,
   noRows: "No line of this text reads as a row of the table.",
@@ -36,10 +32,7 @@ export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
   ignore: "Ignore",
   requiredRole: (role) => `${role} (required)`,
   requiredRoleShort: markedShort,
-  previewOf: (shown, total) =>
-    shown === 1
-      ? `The first of ${total} rows`
-      : `The first ${shown} of ${total} rows`,
+  previewOf: (shown, total) => (shown === 1 ? `The first of ${total} rows` : `The first ${shown} of ${total} rows`),
   oneOf: (roles) => `either ${roles}`,
   missing: (roles) => `Still needed: ${roles}.`,
 };