@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/components/legal.tsx

@@ -7,6 +7,7 @@ import { cn } from "../lib/cn";
 import { countryName } from "../lib/countries";
 import { AlertBanner } from "./alert-banner";
 import { TextLink } from "./text-link";
+import { DEFAULT_LEGAL_LABELS } from "./legal-labels";
 
 /**
  * The legal pages — Imprint, Privacy Policy, Terms — for every app.
@@ -238,104 +239,13 @@ export interface LegalLabels {
   };
 }
 
-export const DEFAULT_LEGAL_LABELS: LegalLabels = {
-  navLabel: "Legal",
-  links: {
-    impressum: "Imprint",
-    privacy: "Privacy Policy",
-    terms: "Terms",
-  },
-  titles: {
-    impressum: "Imprint",
-    privacy: "Privacy Policy",
-    terms: "Terms of Service",
-  },
-  backHome: "Back to home",
-  accept: "I accept the {terms} and the {privacy}",
-  notice: {
-    beta: "Closed beta. These texts have not been reviewed by a lawyer yet and will be before a public launch.",
-    privacy:
-      "Closed beta. The legal wording below has not been reviewed by a lawyer yet and will be before a public launch. The technical descriptions — what is stored, where, and who can read it — describe what the software actually does today, and are meant to be checked against it.",
-  },
-  translation: {
-    note: (o) =>
-      `This is a translation for your convenience. The ${o.bindingLanguage} version is binding.`,
-    show: (o) => `Show the ${o.bindingLanguage} version`,
-  },
-  sections: {
-    impressum: {
-      operator: {
-        title: "Operator",
-        body: (o) =>
-          `${o.name}\n${o.postalCode} ${o.city}\n${o.country}\n\nThe full postal address is supplied on request to anyone with a legitimate legal interest; write to the contact address below.`,
-      },
-      contact: {
-        title: "Contact",
-        body: (o) => `Email: ${o.email}`,
-      },
-      disclaimer: {
-        title: "Liability for content and links",
-        body: "This is a private, non-commercial project offered during a closed beta, without warranty. External sites we link to are the responsibility of their respective operators; we have no control over their content.",
-        commercial:
-          "This is a commercial service. Paid plans are sold by our reseller, which acts as the Merchant of Record: it sells the subscription in its own name, takes the payment, issues the invoice and handles VAT, and its terms of sale apply to the purchase. We take care that the content of this service is accurate, but cannot guarantee that it is complete or up to date. External sites we link to are the responsibility of their respective operators; we have no control over their content.",
-      },
-    },
-    privacy: {
-      controller: {
-        title: "Controller",
-        body: (o) =>
-          `The party responsible for processing personal data in this service is:\n${o.name}\n${o.postalCode} ${o.city}, ${o.country}\nEmail: ${o.email}\n\nThe full postal address is supplied on request to data subjects and supervisory authorities.`,
-      },
-      legal_basis: {
-        title: "Legal basis",
-        body: "As the operator is based in Switzerland, processing is governed by the Swiss Federal Act on Data Protection (FADP). Where the EU General Data Protection Regulation (GDPR) applies to you, we rely on the performance of a contract to provide the service (Art. 6(1)(b) GDPR) and our legitimate interest in operating and securing it (Art. 6(1)(f) GDPR).",
-      },
-      browser: {
-        title: "What your browser stores",
-        lead: "No cookies. The app keeps the following in your browser's storage:",
-        tail: "None of it is used to track you. Entries waiting to be sent are sent to us as soon as they can be; everything else stays on your device. All of it disappears when you clear the site's data, and signing out removes the sign-in tokens.",
-      },
-      rights: {
-        title: "Your rights",
-        lead: "You have the right to access, rectification, erasure, restriction, data portability and objection.",
-        tail: "If you are in Switzerland you may contact the Federal Data Protection and Information Commissioner (FDPIC); if you are in the EU you may lodge a complaint with your local supervisory authority.",
-      },
-      contact: {
-        title: "Contact for data protection",
-        body: (o) => `For any privacy request, contact: ${o.email}`,
-      },
-    },
-    terms: {
-      warranty: {
-        title: "No warranty",
-        body: 'The service is provided "as is" and "as available", without warranties of any kind to the extent permitted by law. As a beta it may contain errors, change, or be interrupted at any time — keep your own backups of important data.',
-      },
-      liability: {
-        title: "Limitation of liability",
-        body: "To the extent permitted by applicable law, the operator is not liable for any indirect or consequential damage arising from the use of, or inability to use, the service. Nothing here limits liability that cannot be limited by law.",
-      },
-      changes: {
-        title: "Changes to these terms",
-        body: "These terms may be updated as the service evolves. Material changes will be announced by email or in the app; continued use after a change means you accept it.",
-      },
-      language: {
-        title: "Language",
-        body: (o) =>
-          `These terms are written in ${o.bindingLanguage}. Translations into other languages are provided for convenience only; where a translation differs, the ${o.bindingLanguage} version prevails.`,
-      },
-      law: {
-        title: "Governing law",
-        body: (o) =>
-          `These terms are governed by Swiss law, excluding its conflict-of-laws rules. As far as legally permissible, the place of jurisdiction is ${o.city} (${o.region}), ${o.country}.`,
-      },
-    },
-  },
-};
+// Defined in ./legal-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_LEGAL_LABELS };
 
 /** The `legal` namespace, resolved: defaults < provider < `labels` prop. The prop may be
  *  partial at every depth (`{ titles: { terms: "…" } }`), as the provider's is. */
 export function useLegalLabels(labels?: LabelOverride<LegalLabels>): LegalLabels {
-  return useKitLabels("legal", DEFAULT_LEGAL_LABELS, labels as Partial<LegalLabels> | undefined);
+  return useKitLabels("legal", DEFAULT_LEGAL_LABELS, labels);
 }
 
 // ── What a LegalPage tells the sections inside it ─────────────────────────────
@@ -541,8 +451,8 @@ export interface LegalFooterProps {
 export function LegalFooter({ children, links, currentHref, landmark = true, className, labels }: LegalFooterProps) {
   const Root = landmark ? "footer" : "div";
   return (
-    <Root className={cn("border-t border-[var(--border)] bg-[var(--bg-surface)]", className)}>
-      <div className="mx-auto max-w-5xl px-4 py-8 text-sm text-[var(--text-muted)]">
+    <Root className={cn("border-t border-subtle bg-surface", className)}>
+      <div className="mx-auto max-w-5xl px-4 py-8 text-sm text-muted">
         <LegalLinks
           links={links}
           currentHref={currentHref}
@@ -593,16 +503,16 @@ export function LegalSection({ heading, body, children, id: idProp, headingAs }:
   const Heading = headingAs ?? page?.sectionHeading ?? "h2";
   return (
     <section id={id} className="scroll-mt-20">
-      <Heading className="text-lg font-semibold break-words text-[var(--text-primary)]">
+      <Heading className="text-lg font-semibold break-words text-primary">
         {number !== undefined && `${number}. `}
         {heading}
       </Heading>
       <LegalSlotContext.Provider value={null}>
         {body !== undefined && (
-          <LegalText text={body} className="mt-2 text-sm leading-relaxed text-[var(--text-secondary)]" />
+          <LegalText text={body} className="mt-2 text-sm leading-relaxed text-secondary" />
         )}
         {children !== undefined && (
-          <div className="mt-2 text-sm leading-relaxed break-words text-[var(--text-secondary)]">
+          <div className="mt-2 text-sm leading-relaxed break-words text-secondary">
             {typeof children === "string" ? resolveLegalRefs(children, page) : children}
           </div>
         )}
@@ -656,7 +566,7 @@ export function LegalLayout({
   return (
     <article className={cn("mx-auto w-full max-w-3xl px-4 py-12", className)}>
       {back !== undefined && <div className="mb-4 text-sm">{back}</div>}
-      <Heading className="text-3xl font-bold tracking-tight break-words text-[var(--text-primary)]">{title}</Heading>
+      <Heading className="text-3xl font-bold tracking-tight break-words text-primary">{title}</Heading>
       {translationNote !== undefined && translationNote !== null && <div className="mt-3">{translationNote}</div>}
       {notice !== undefined && notice !== null && (
         <AlertBanner tone="warning" role="note" className="mt-4">
@@ -665,7 +575,7 @@ export function LegalLayout({
       )}
       <div className="mt-8 space-y-8">{children}</div>
       {links !== undefined && links.length > 0 && (
-        <LegalLinks links={links} currentHref={currentHref} labels={labels} className="mt-12 border-t border-[var(--border)] pt-4" />
+        <LegalLinks links={links} currentHref={currentHref} labels={labels} className="mt-12 border-t border-subtle pt-4" />
       )}
     </article>
   );

package/src/components/lightbox-labels.ts

@@ -0,0 +1,18 @@
+// The English words of ./lightbox, 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). ./lightbox re-exports them.
+
+import type { LightboxLabels } from "./lightbox";
+
+export const DEFAULT_LIGHTBOX_LABELS: LightboxLabels = {
+  dialog: "Image viewer",
+  close: "Close",
+  previous: "Previous image",
+  next: "Next image",
+  counter: (index, count) => `${index} / ${count}`,
+  position: (index, count) => `Image ${index} of ${count}`,
+  download: "Download",
+  zoom: "Zoom",
+  noPreview: "No preview available for this file",
+  openInNewTab: "Open in new tab",
+};

package/src/components/lightbox.tsx

@@ -4,14 +4,16 @@ import { ChevronLeft, ChevronRight, Download, ExternalLink, FileText, ZoomIn } f
 
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAuthedSrc } from "../hooks/use-authed-src";
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { FullBleedDialog } from "./full-bleed-dialog";
-import { IconButton, buttonClasses } from "./ui";
+import { IconButton } from "./icon-button";
+import { buttonClasses } from "./button-look";
 import { ImageStates, DEFAULT_AUTHED_IMAGE_LABELS } from "./authed-image";
 import { useAnchorDir } from "./use-anchor-dir";
+import { DEFAULT_LIGHTBOX_LABELS } from "./lightbox-labels";
 
 /* ── The item both the grid and the lightbox show ────────────────────────── */
 
@@ -73,18 +75,8 @@ export interface LightboxLabels {
   openInNewTab: string;
 }
 
-export const DEFAULT_LIGHTBOX_LABELS: LightboxLabels = {
-  dialog: "Image viewer",
-  close: "Close",
-  previous: "Previous image",
-  next: "Next image",
-  counter: (index, count) => `${index} / ${count}`,
-  position: (index, count) => `Image ${index} of ${count}`,
-  download: "Download",
-  zoom: "Zoom",
-  noPreview: "No preview available for this file",
-  openInNewTab: "Open in new tab",
-};
+// Defined in ./lightbox-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_LIGHTBOX_LABELS };
 
 /* ── The component ───────────────────────────────────────────────────────── */
 
@@ -116,7 +108,7 @@ export interface LightboxProps {
   /** Push a history entry so Back closes the viewer. Default `true`; see
    *  `FullBleedDialog`'s `backCloses` for when to turn it off. */
   backCloses?: boolean;
-  labels?: Partial<LightboxLabels>;
+  labels?: LabelOverride<LightboxLabels>;
 }
 
 /** Swipes shorter than this are taps, and a drag that is mostly vertical is a scroll. */
@@ -270,7 +262,7 @@ export function Lightbox({
 
   const header = item ? (
     <div className="flex min-w-0 items-center gap-2">
-      <span aria-hidden className="shrink-0 text-sm tabular-nums text-[var(--text-secondary)]">
+      <span aria-hidden className="shrink-0 text-sm tabular-nums text-secondary">
         {labels.counter(index + 1, count)}
       </span>
       {/* The page turn, said — focus does not move when the picture changes, so
@@ -295,10 +287,10 @@ export function Lightbox({
   ) : null;
 
   const slide = !item ? null : kind === "file" ? (
-    <div className="flex max-w-sm flex-col items-center gap-3 rounded-lg border border-[var(--border)] p-6 text-center">
-      <FileText aria-hidden className="size-10 text-[var(--text-muted)]" />
-      <p className="break-all font-medium text-[var(--text-primary)]">{item.fileName ?? item.alt}</p>
-      <p className="text-sm text-[var(--text-muted)]">{labels.noPreview}</p>
+    <div className="flex max-w-sm flex-col items-center gap-3 rounded-lg border border-subtle p-6 text-center">
+      <FileText aria-hidden className="size-10 text-muted" />
+      <p className="break-all font-medium text-primary">{item.fileName ?? item.alt}</p>
+      <p className="text-sm text-muted">{labels.noPreview}</p>
       {fetched.src && (
         <a
           href={fetched.src}
@@ -347,7 +339,7 @@ export function Lightbox({
         data-lightbox=""
         footer={
           item?.caption !== undefined && item.caption !== null && item.caption !== false ? (
-            <p className="me-auto min-w-0 text-sm text-[var(--text-secondary)]">{item.caption}</p>
+            <p className="me-auto min-w-0 text-sm text-secondary">{item.caption}</p>
           ) : undefined
         }
       >

package/src/components/line-items-labels.ts

@@ -0,0 +1,14 @@
+// The English words of ./line-items, 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). ./line-items re-exports them.
+
+import type { LineItemsLabels } from "./line-items";
+
+export const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels = {
+  add: "Add row",
+  remove: (row) => `Remove row ${row}`,
+  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,
+  row: (row) => `Row ${row}`,
+  cell: (column, row) => `${column}, row ${row}`,
+  totals: "Total",
+};

package/src/components/line-items.tsx

@@ -1,9 +1,12 @@
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, KeyboardEvent, Key, ReactNode } from "react";
+import type { ComponentPropsWithRef, CSSProperties, HTMLAttributes, KeyboardEvent, Key, ReactNode } from "react";
 import { Plus, Trash2 } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
-import { Button, IconButton } from "./ui";
+import { hasContent } from "../lib/presence";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { DEFAULT_LINE_ITEMS_LABELS } from "./line-items-labels";
 
 /** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */
 export interface LineItemsLabels {
@@ -21,14 +24,8 @@ export interface LineItemsLabels {
   totals: string;
 }
 
-export const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels = {
-  add: "Add row",
-  remove: (row) => `Remove row ${row}`,
-  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,
-  row: (row) => `Row ${row}`,
-  cell: (column, row) => `${column}, row ${row}`,
-  totals: "Total",
-};
+// Defined in ./line-items-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_LINE_ITEMS_LABELS };
 
 /** What a column's `render` receives for one row. */
 export interface LineItemCellContext<T> {
@@ -121,7 +118,7 @@ export type LineItemsRowProps = Omit<HTMLAttributes<HTMLDivElement>, "children"
   [key: `data-${string}`]: string | number | boolean | undefined;
 };
 
-export interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface LineItemsProps<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   items: readonly T[];
   columns: readonly LineItemsColumn<T>[];
   /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`
@@ -193,18 +190,18 @@ export interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">,
    * Ctrl/⌘+Enter "add a row" (call `preventDefault()` to keep that from happening).
    */
   rowProps?: (item: T, index: number) => LineItemsRowProps | undefined;
-  labels?: Partial<LineItemsLabels>;
+  labels?: LabelOverride<LineItemsLabels>;
 }
 
 const REMOVE_TRACK = "2.25rem";
 const SUMMARY_TONE: Record<LineItemsSummaryTone, string> = {
-  neutral: "text-[var(--text-primary)]",
-  success: "text-[var(--success)]",
-  danger: "text-[var(--danger)]",
-  muted: "text-[var(--text-muted)]",
+  neutral: "text-primary",
+  success: "text-success",
+  danger: "text-danger",
+  muted: "text-muted",
   // SignedAmount's money palette (toneTextClass "income" / "expense").
-  income: "text-[var(--money-income)]",
-  expense: "text-[var(--money-expense)]",
+  income: "text-money-income",
+  expense: "text-money-expense",
 };
 const REMOVE_ALIGN: Record<LineItemsRemoveAlign, string> = {
   start: "@lg:self-start",
@@ -222,10 +219,6 @@ function defaultKey(item: unknown, index: number): Key {
   return index;
 }
 
-function hasContent(node: ReactNode): boolean {
-  return node !== undefined && node !== null && node !== false && node !== "";
-}
-
 type PendingFocus = { kind: "added" } | { kind: "removed"; index: number };
 
 /**
@@ -359,7 +352,7 @@ export function LineItems<T>({
     <span
       key={column.key}
       className={cn(
-        "min-w-0 truncate text-xs font-medium text-[var(--text-muted)]",
+        "min-w-0 truncate text-xs font-medium text-muted",
         column.align === "end" && "text-end",
       )}
     >
@@ -427,7 +420,7 @@ export function LineItems<T>({
       )}
 
       {items.length === 0 && hasContent(empty) && (
-        <div className="rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]">
+        <div className="rounded-md border border-dashed border-subtle px-3 py-4 text-center text-sm text-muted">
           {empty}
         </div>
       )}
@@ -462,7 +455,7 @@ export function LineItems<T>({
               // still fit a figure each; on anything narrower they stack after all.
               pairs && "@2xs:grid-cols-2",
               // Stacked, each row is a card of its own so the rows stay apart.
-              "@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3",
+              "@max-lg:rounded-md @max-lg:border @max-lg:border-subtle @max-lg:p-3",
               extra?.className,
             )}
           >
@@ -480,7 +473,7 @@ export function LineItems<T>({
                   )}
                 >
                   {!floating && (
-                    <span aria-hidden className="block text-xs font-medium text-[var(--text-muted)] @lg:hidden">
+                    <span aria-hidden className="block text-xs font-medium text-muted @lg:hidden">
                       {column.header}
                     </span>
                   )}
@@ -518,7 +511,7 @@ export function LineItems<T>({
           role="group"
           aria-label={typeof totalsLabel === "string" ? totalsLabel : labels.totals}
           data-line-items-totals=""
-          className="grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]"
+          className="grid grid-cols-1 gap-2 border-t border-subtle pt-2 text-sm font-semibold tabular-nums text-primary @lg:grid-cols-[var(--line-items-cols)]"
         >
           {columns.map((column) => {
             const value = totals[column.key];
@@ -541,7 +534,7 @@ export function LineItems<T>({
               >
                 {hasContent(value) && (
                   <span className="flex justify-between gap-2 @lg:block">
-                    <span aria-hidden className="font-normal text-[var(--text-muted)] @lg:hidden">
+                    <span aria-hidden className="font-normal text-muted @lg:hidden">
                       {column.header}
                     </span>
                     {value}
@@ -557,7 +550,7 @@ export function LineItems<T>({
       {summary && (
         <div
           data-line-items-summary=""
-          className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--text-primary)]"
+          className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-primary"
         >
           {/* With no value the line is a state of its own, and the label takes the
               tone — the only place left to carry it. */}
@@ -594,7 +587,7 @@ export function LineItems<T>({
       )}
 
       {hasError && (
-        <p className="text-caption leading-tight text-[var(--danger)]">
+        <p className="text-caption leading-tight text-danger">
           {error}
         </p>
       )}

package/src/components/list-labels.ts

@@ -0,0 +1,10 @@
+// The English words of ./list, 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). ./list re-exports them.
+
+import type { ListLabels } from "./list";
+
+export const DEFAULT_LIST_LABELS: ListLabels = {
+  unread: "Unread",
+  opensInNewTab: "opens in a new tab",
+};