@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/billing/plan-limit-notice.tsx

@@ -6,7 +6,7 @@ import { formatNumber } from "../lib/format";
 import { AlertBanner } from "../components/alert-banner";
 import type { AlertTone } from "../components/alert-banner";
 import { ProgressBar } from "../components/progress-bar";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 

package/src/billing/subscription-actions.tsx

@@ -1,13 +1,13 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import type { LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 import type { PortalTarget } from "./billing-overview";
 
-export interface SubscriptionActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /** "Payment and invoices", as a link — or {@link onManage}. Without either, none. */
   manageHref?: string;
   /** "Payment and invoices", as the app's call: `POST /billing/portal` with
@@ -72,7 +72,7 @@ export function SubscriptionActions({
   const labels = useBillingLabels(labelsProp);
   if (!atProvider) {
     return (
-      <div {...rest} data-at-provider="false" className={cn("text-sm text-[var(--text-muted)]", className)}>
+      <div {...rest} data-at-provider="false" className={cn("text-sm text-muted", className)}>
         <p>{labels.notAtProvider}</p>
       </div>
     );

package/src/chart.ts

@@ -5,7 +5,9 @@
 // is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because
 // a dynamic import of the barrel cannot be tree-shaken down to one of its members.
 //
-// This is also the only entry point in the package that requires `recharts`.
+// It is about chunk size, not about the peer: `recharts` is a REQUIRED peer (since 0.5.0),
+// because the main barrel re-exports everything here too, so `import { Button } from
+// "@eifi1/ui-kit"` reaches recharts as well (packaging-contract.test.ts asserts it).
 export * from "./components/chart";
 export * from "./theme/chart-palette";
 
@@ -19,6 +21,10 @@ export * from "./components/series-chart";
 // 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
 export type { ChartHeight } from "./components/chart-height";
 export * from "./components/chart-zoom";
+// The zoom's own module since 0.34: SharedXZoom and the drag layer (recharts) live here,
+// ./chart-zoom is their public face. Named, so the arithmetic it also holds stays the
+// kit's (refactor audit 2026-10, API-6b) — the same binding the line above re-exports.
+export { SharedXZoom } from "./components/chart-zoom-core";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";

package/src/components/account-chips-labels.ts

@@ -0,0 +1,16 @@
+// The English words of ./account-chips, 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). ./account-chips re-exports them.
+
+import type { AccountStateLabels } from "./account-chips";
+
+export const DEFAULT_ACCOUNT_STATE_LABELS = {
+  active: "Active",
+  inactive: "Inactive",
+  invited: "Invited",
+  registered: "Registered",
+  unverified: "Unverified",
+  passwordChange: "Must change password",
+  deletion: "Deletion requested",
+  deletionOn: (date: string) => `Deletion on ${date}`,
+} satisfies Required<AccountStateLabels>;

package/src/components/account-chips.tsx

@@ -3,11 +3,12 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format";
 import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../lib/format";
-import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
 import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
 import type { DataTableColumn } from "./data-table";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "./account-chips-labels";
 
 /**
  * The parts an admin roster repeats (0.18.0) — and only those.
@@ -152,16 +153,8 @@ export interface AccountStateLabels extends Record<Exclude<AccountState, "deleti
   deletionOn?: (date: string) => string;
 }
 
-export const DEFAULT_ACCOUNT_STATE_LABELS = {
-  active: "Active",
-  inactive: "Inactive",
-  invited: "Invited",
-  registered: "Registered",
-  unverified: "Unverified",
-  passwordChange: "Must change password",
-  deletion: "Deletion requested",
-  deletionOn: (date: string) => `Deletion on ${date}`,
-} satisfies Required<AccountStateLabels>;
+// Defined in ./account-chips-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_ACCOUNT_STATE_LABELS };
 
 /** The default tone of each state: green for the normal case, red for switched off
  *  (and for going, `deletion`), amber for something the user still has to do, blue for
@@ -194,7 +187,7 @@ export interface AccountStateChipProps extends AccountChipLook {
   /** Over the label, for an app whose word for the state is its own ("Deactivated"). */
   children?: ReactNode;
   /** Prop > `<UiKitProvider labels={{ accountState }}>` > English. */
-  labels?: Partial<AccountStateLabels>;
+  labels?: LabelOverride<AccountStateLabels>;
 }
 
 /**
@@ -304,7 +297,7 @@ export function DateMark({
   const fromProvider = useKitDateFormatter();
   const date = toDate(value);
   const cls = cn("whitespace-nowrap tabular-nums", className);
-  if (!date) return <span className={cn(cls, "text-[var(--text-muted)]")}>{empty}</span>;
+  if (!date) return <span className={cn(cls, "text-muted")}>{empty}</span>;
   if (display === "date") {
     const own =
       dateStyle === undefined && fromProvider
@@ -339,7 +332,7 @@ export function DateMark({
     >
       <span className="whitespace-nowrap tabular-nums">{text}</span>
       {absolute === "inline" && " · "}
-      <span className={cn("whitespace-nowrap tabular-nums text-[var(--text-muted)]", absolute === "below" && "text-xs")}>
+      <span className={cn("whitespace-nowrap tabular-nums text-muted", absolute === "below" && "text-xs")}>
         {exact}
       </span>
     </time>
@@ -386,11 +379,15 @@ export function dateColumn<T>({
     filter: filter
       ? {
           type: "date",
-          // The filter compares the first ten characters, so hand it an ISO string.
+          // A string goes as it is: the filter reads a timestamp's local day itself.
+          // A Date or epoch value goes as its LOCAL day, the one the cell shows —
+          // `toISOString()` handed over the UTC day, and in Berlin a 00:30 row was
+          // filtered under the day before (round 0.34 BUG-2).
           getValue: (row) => {
             const raw = value(row);
             if (typeof raw === "string") return raw;
-            return toDate(raw)?.toISOString() ?? null;
+            const date = toDate(raw);
+            return date ? toLocalIso(date) : null;
           },
         }
       : undefined,

package/src/components/alert-banner.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
@@ -29,11 +29,11 @@ export type AlertSize = "sm" | "md";
  * at any offset. Callers compensate the extra pixel in their own padding so
  * switching tones never shifts the layout. */
 const TONE_FRAME: Record<AlertTone, string> = {
-  danger: "border-2 border-[var(--danger-border-strong)] bg-[var(--danger-bg)]",
-  warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
-  info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
-  success: "border-2 border-[var(--success-border)] bg-[var(--success-bg)]",
-  neutral: "border border-[var(--border)]",
+  danger: "border-2 border-danger-strong bg-danger-soft",
+  warning: "border-2 border-warning bg-warning-soft",
+  info: "border-2 border-info bg-info-soft",
+  success: "border-2 border-success bg-success-soft",
+  neutral: "border border-subtle",
 };
 
 /** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are
@@ -50,7 +50,7 @@ const TONE_ELEVATED: Record<AlertTone, string> = {
   success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]",
   neutral: "",
 };
-const ELEVATED = "bg-[var(--bg-surface)] shadow-lg";
+const ELEVATED = "bg-surface shadow-lg";
 
 /** The tone's border + surface on their own — for a caller that already has a box
  * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
@@ -91,19 +91,19 @@ function stripFrameClass(tone: AlertTone, size: AlertSize): string {
 }
 
 const TONE_TEXT: Record<AlertTone, string> = {
-  danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]",
-  neutral: "text-[var(--text-secondary)]",
+  danger: "text-danger",
+  warning: "text-warning",
+  info: "text-info",
+  success: "text-success",
+  neutral: "text-secondary",
 };
 
 const TONE_ICON: Record<AlertTone, string> = {
-  danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]",
-  neutral: "text-[var(--text-muted)]",
+  danger: "text-danger",
+  warning: "text-warning",
+  info: "text-info",
+  success: "text-success",
+  neutral: "text-muted",
 };
 
 /** Which glyph a tone draws when the caller names none. The triangle belongs to the
@@ -196,6 +196,13 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
    *  {@link UiKitProvider}, else "Dismiss". */
   dismissLabel?: string;
   children: ReactNode;
+  /**
+   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit
+   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or
+   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside
+   * that row, the `<div>` holding the two. Hence `HTMLElement`.
+   */
+  ref?: Ref<HTMLElement>;
 }
 
 /**
@@ -243,6 +250,7 @@ export function AlertBanner({
   className,
   children,
   role,
+  ref,
   ...rest
 }: AlertBannerProps) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
@@ -299,7 +307,7 @@ export function AlertBanner({
         strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
         elevated && cn(ELEVATED, TONE_ELEVATED[tone]),
       );
-  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]");
+  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-surface");
 
   const content = (
     <>
@@ -358,11 +366,15 @@ export function AlertBanner({
   if (!interactive) {
     return (
       <div
+        // 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 frame classes are the kit's to change.
+        data-tone={tone}
         // Arbitrary attributes first — a `data-tour` anchor, a test id, an
         // `aria-describedby` — then the layout and tone classes, which are merged
         // through `cn` rather than spread so a caller's `className` refines the box
         // instead of replacing it.
         {...rest}
+        ref={ref as Ref<HTMLDivElement>}
         role={resolvedRole}
         className={cn(row, frame, TONE_TEXT[tone], className)}
       >
@@ -385,18 +397,22 @@ export function AlertBanner({
         inlineRow || strip ? "items-center" : "items-start",
         "outline-none after:absolute after:inset-0 after:content-['']",
         strip ? "after:rounded-none" : "after:rounded-md",
-        "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-[var(--brand)]",
+        "focus-visible:after:ring-focus focus-visible:after:ring-brand",
       )
     : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   // The div's attributes are the row element's: an `id`, a test id or an
   // `aria-describedby` belongs on the thing that takes focus. The live-region role is
   // NOT carried over — a button or a link that is also a `status` is neither.
   const actionRest = split ? {} : rest;
+  // The `ref` goes with the rest: to the row element when it is the frame.
+  const rowRef = split ? undefined : ref;
 
   const rowAction =
     href !== undefined ? (
       <a
+        data-tone={split ? undefined : tone}
         {...(actionRest as ComponentPropsWithoutRef<"a">)}
+        ref={rowRef as Ref<HTMLAnchorElement> | undefined}
         href={href}
         className={actionClass}
       >
@@ -404,7 +420,9 @@ export function AlertBanner({
       </a>
     ) : (
       <button
+        data-tone={split ? undefined : tone}
         {...(actionRest as ComponentPropsWithoutRef<"button">)}
+        ref={rowRef as Ref<HTMLButtonElement> | undefined}
         type="button"
         onClick={onClick}
         className={actionClass}
@@ -416,7 +434,9 @@ export function AlertBanner({
   if (!split) return rowAction;
   return (
     <div
+      data-tone={tone}
       {...rest}
+      ref={ref as Ref<HTMLDivElement>}
       role={resolvedRole}
       className={cn("relative", row, frame, TONE_TEXT[tone], hover, className)}
     >