@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/src/components/commerce.tsx

@@ -2,6 +2,8 @@
 import * as React from "react";
 import { cx } from "../cx.js";
 import { formatMoney } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { COMMERCE_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { useControlled } from "../hooks.js";
 import { Badge, Button, IconButton } from "./foundation.js";
@@ -65,12 +67,19 @@ export function ProductArt(p: ProductArtProps) {
 
 ProductArt.kinds = Object.keys(ART) as ArtKind[];
 
-/** Formats an amount with the configured locale and currency. */
-export function money(v: number | string, cur?: string) {
-  return formatMoney(Number(v), cur);
+/** Formats an amount in a currency (default euros) and locale (default en-US). */
+export function money(v: number | string, cur?: string, locale?: string) {
+  return formatMoney(Number(v), cur, undefined, locale);
+}
+/** `money` in the locale of the nearest `UIProvider`. */
+function useMoney() {
+  const { locale } = useFormat();
+  return (v: number | string, cur?: string) => money(v, cur, locale);
 }
 
 export function Price(p: PriceProps) {
+  const money = useMoney();
+  const { formatPercent } = useFormat();
   const sale = p.compareAt && p.compareAt > p.value;
   return (
     <span className={cx("tf-price", p.size && "tf-price-" + p.size)}>
@@ -78,7 +87,7 @@ export function Price(p: PriceProps) {
       {sale && <s>{money(p.compareAt ?? 0, p.currency)}</s>}
       {sale && p.showSave !== false && (
         <span className="tf-price-save">
-          {"−" + Math.round((1 - p.value / (p.compareAt || p.value)) * 100) + "%"}
+          {"−" + formatPercent(Math.round((1 - p.value / (p.compareAt || p.value)) * 100))}
         </span>
       )}
     </span>
@@ -86,13 +95,12 @@ export function Price(p: PriceProps) {
 }
 
 export function Rating(p: RatingProps) {
-  const v = p.value || 0;
+  const t = useStrings(COMMERCE_STRINGS);
+  const { formatNumber } = useFormat();
+  const v = p.value || 0,
+    shown = formatNumber(v, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
   return (
-    <span
-      className="tf-rating"
-      role="img"
-      aria-label={`${v.toFixed(1)} out of 5` + (p.count != null ? `, ${p.count} reviews` : "")}
-    >
+    <span className="tf-rating" role="img" aria-label={t.ratingLabel(shown, p.count)}>
       <span className="tf-stars" aria-hidden>
         {[0, 1, 2, 3, 4].map((i) => {
           const f = Math.max(0, Math.min(1, v - i));
@@ -111,25 +119,27 @@ export function Rating(p: RatingProps) {
           );
         })}
       </span>
-      <b>{v.toFixed(1)}</b>
-      {p.count != null && <span>{"(" + p.count + ")"}</span>}
+      <b>{shown}</b>
+      {p.count != null && <span>{"(" + formatNumber(p.count) + ")"}</span>}
     </span>
   );
 }
 
 export function StockBadge(p: StockBadgeProps) {
+  const t = useStrings(COMMERCE_STRINGS);
   const s = p.stock;
   if (s == null) return null;
   return s <= 0 ? (
-    <Badge tone="danger">{"Out of stock"}</Badge>
+    <Badge tone="danger">{t.outOfStock}</Badge>
   ) : s <= (p.low || 10) ? (
-    <Badge tone="warning">{`Low stock · ${s} left`}</Badge>
+    <Badge tone="warning">{t.lowStock(s)}</Badge>
   ) : (
-    <Badge tone="success">{p.compact ? "In stock" : `In stock · ${s}`}</Badge>
+    <Badge tone="success">{p.compact ? t.inStock : t.inStockCount(s)}</Badge>
   );
 }
 
 export function ProductCard(p: ProductCardProps) {
+  const t = useStrings(COMMERCE_STRINGS);
   return (
     <div className={cx("tf-product", p.className)} onClick={p.onClick}>
       <div className="tf-product-media">
@@ -166,11 +176,11 @@ export function ProductCard(p: ProductCardProps) {
           <Price value={p.price} compareAt={p.compareAt} />
           {p.onAdd &&
             (p.stock === 0 ? (
-              <span className="tf-card-desc">{"Sold out"}</span>
+              <span className="tf-card-desc">{t.soldOut}</span>
             ) : (
               <IconButton
                 icon={p.added ? "check" : "plus"}
-                label={`Add ${p.name} to cart`}
+                label={t.addToCart(p.name)}
                 variant={p.added ? "solid" : "soft"}
                 size="sm"
                 onClick={(e) => {
@@ -186,6 +196,7 @@ export function ProductCard(p: ProductCardProps) {
 }
 
 export function VariantPicker(p: VariantPickerProps) {
+  const t = useStrings(COMMERCE_STRINGS);
   const opts = (p.options || []).map((o) => (typeof o === "string" ? { value: o, label: o } : o));
   const v = useControlled(p.value, p.defaultValue ?? "", p.onChange),
     color = p.type === "color";
@@ -209,7 +220,7 @@ export function VariantPicker(p: VariantPickerProps) {
               className={cx("tf-variant", on && "on", off && "off")}
               aria-pressed={on}
               disabled={off}
-              aria-label={color ? (off ? `${lab} (sold out)` : lab) : undefined}
+              aria-label={color ? (off ? t.variantSoldOut(lab) : lab) : undefined}
               title={color ? lab : undefined}
               onClick={() => {
                 v[1](val);
@@ -234,6 +245,7 @@ export function VariantPicker(p: VariantPickerProps) {
 }
 
 export function CartLine(p: CartLineProps) {
+  const t = useStrings(COMMERCE_STRINGS);
   return (
     <div className="tf-cartline">
       <ProductArt kind={p.art} tint={p.tint} size={64} />
@@ -246,7 +258,7 @@ export function CartLine(p: CartLineProps) {
         <div className="tf-number tf-number-sm">
           <IconButton
             icon={p.qty <= 1 ? "trash" : "minus"}
-            label={p.qty <= 1 ? `Remove ${p.name}` : "One less"}
+            label={p.qty <= 1 ? t.removeItem(p.name) : t.oneLess}
             size="sm"
             onClick={() => {
               p.qty <= 1 ? p.onRemove && p.onRemove() : p.onQty?.(p.qty - 1);
@@ -257,7 +269,7 @@ export function CartLine(p: CartLineProps) {
           </span>
           <IconButton
             icon="plus"
-            label="One more"
+            label={t.oneMore}
             size="sm"
             onClick={() => {
               p.onQty?.(p.qty + 1);
@@ -273,6 +285,9 @@ export function CartLine(p: CartLineProps) {
 }
 
 export function OrderSummary(p: OrderSummaryProps) {
+  const t = useStrings(COMMERCE_STRINGS);
+  const money = useMoney();
+  const { formatPercent } = useFormat();
   const lines = p.lines || [],
     sub = lines.reduce((a, l) => a + l.price * l.qty, 0),
     disc = p.discount
@@ -288,7 +303,7 @@ export function OrderSummary(p: OrderSummaryProps) {
     toFree = (p.freeShippingFrom || 75) - (sub - disc);
   return (
     <div className="tf-summary">
-      {p.title !== false && <b className="tf-summary-title">{p.title || "Order summary"}</b>}
+      {p.title !== false && <b className="tf-summary-title">{p.title || t.orderSummary}</b>}
       {p.showLines && (
         <div
           className="tf-col"
@@ -313,9 +328,7 @@ export function OrderSummary(p: OrderSummaryProps) {
       )}
       {toFree > 0 && p.freeShippingFrom !== 0 && (
         <div className="tf-freeship">
-          <span>
-            Add <b>{money(Math.ceil(toFree * 100) / 100)}</b> for free shipping
-          </span>
+          <span>{t.freeShippingIn(<b>{money(Math.ceil(toFree * 100) / 100)}</b>)}</span>
           <span className="tf-usage-track">
             <span
               className="tf-usage-fill tf-sf-mint"
@@ -339,7 +352,7 @@ export function OrderSummary(p: OrderSummaryProps) {
                 p.onCoupon?.(null);
               }}
             >
-              {"Remove"}
+              {t.remove}
             </button>
           </div>
         ) : (
@@ -348,14 +361,14 @@ export function OrderSummary(p: OrderSummaryProps) {
             onSubmit={(e) => {
               e.preventDefault();
               const r = p.onCoupon?.(code[0].trim().toUpperCase());
-              err[1](r === false ? "That code isn’t valid" : null);
+              err[1](r === false ? t.invalidCode : null);
               if (r !== false) code[1]("");
             }}
           >
             <input
               className="tf-input"
-              placeholder="Discount code"
-              aria-label="Discount code"
+              placeholder={t.discountCode}
+              aria-label={t.discountCode}
               value={code[0]}
               onChange={(e) => {
                 code[1](e.target.value);
@@ -364,7 +377,7 @@ export function OrderSummary(p: OrderSummaryProps) {
               aria-invalid={err[0] ? "true" : undefined}
             />
             <Button type="submit" variant="soft" disabled={!code[0].trim()}>
-              {"Apply"}
+              {t.apply}
             </Button>
             {err[0] && (
               <span
@@ -380,25 +393,25 @@ export function OrderSummary(p: OrderSummaryProps) {
         ))}
       <dl className="tf-summary-rows">
         <div>
-          <dt>{"Subtotal"}</dt>
+          <dt>{t.subtotal}</dt>
           <dd>{money(sub)}</dd>
         </div>
         {disc > 0 && (
           <div className="save">
-            <dt>{"Discount"}</dt>
+            <dt>{t.discount}</dt>
             <dd>{"−" + money(disc)}</dd>
           </div>
         )}
         <div>
-          <dt>{"Shipping"}</dt>
-          <dd>{ship === 0 ? "Free" : money(ship)}</dd>
+          <dt>{t.shipping}</dt>
+          <dd>{ship === 0 ? t.free : money(ship)}</dd>
         </div>
         <div className="total">
-          <dt>{"Total"}</dt>
+          <dt>{t.total}</dt>
           <dd>{money(total)}</dd>
         </div>
         <div className="vat">
-          <dt>{`incl. ${p.vat || 19}% VAT`}</dt>
+          <dt>{t.inclVat(formatPercent(p.vat || 19))}</dt>
           <dd>{money(Math.round(vat * 100) / 100)}</dd>
         </div>
       </dl>
@@ -408,10 +421,11 @@ export function OrderSummary(p: OrderSummaryProps) {
 }
 
 export function CheckoutSteps(p: CheckoutStepsProps) {
-  const steps = p.steps || ["Cart", "Details", "Shipping", "Payment"],
+  const t = useStrings(COMMERCE_STRINGS);
+  const steps = p.steps || t.checkoutSteps,
     cur = p.current || 0;
   return (
-    <ol className="tf-csteps" aria-label="Checkout progress">
+    <ol className="tf-csteps" aria-label={t.checkoutProgress}>
       {steps.map((s, i) => (
         <li
           key={s}
@@ -436,18 +450,10 @@ export function CheckoutSteps(p: CheckoutStepsProps) {
 
 /* Status keys and their visible text. */
 const ORDER_STEPS = ["Placed", "Paid", "Packed", "Shipped", "Delivered"] as const;
-const orderStepLabel = (s: string) =>
-  ({
-    Placed: "Placed",
-    Paid: "Paid",
-    Packed: "Packed",
-    Shipped: "Shipped",
-    Delivered: "Delivered",
-    Refunded: "Refunded",
-    Cancelled: "Cancelled",
-  })[s] ?? s;
 
 export function OrderTimeline(p: OrderTimelineProps) {
+  const t = useStrings(COMMERCE_STRINGS);
+  const orderStepLabel = (s: string) => t.orderStatus[s] ?? s;
   const cur = (ORDER_STEPS as readonly string[]).indexOf(p.status),
     times = p.times || {},
     cancelled = p.status === "Cancelled" || p.status === "Refunded";
@@ -482,33 +488,35 @@ export function OrderTimeline(p: OrderTimelineProps) {
 /* ── System screens ── */
 
 export function PlanCard(p: PlanCardProps) {
+  const t = useStrings(COMMERCE_STRINGS);
+  const money = useMoney();
   return (
     <div className={cx("tf-plan", p.featured && "featured", p.current && "current")}>
-      {p.featured && <span className="tf-plan-flag">{p.flag || "Most popular"}</span>}
+      {p.featured && <span className="tf-plan-flag">{p.flag || t.mostPopular}</span>}
       <div className="tf-plan-head">
         <b>{p.name}</b>
         {p.text && <span>{p.text}</span>}
       </div>
       <div className="tf-plan-price">
         {p.price === 0 ? (
-          <b>{"Free"}</b>
+          <b>{t.free}</b>
         ) : p.price == null ? (
-          <b>{"Let’s talk"}</b>
+          <b>{t.letsTalk}</b>
         ) : (
           <>
             <b>{money(p.price)}</b>
-            <span>{p.per || "per seat / month"}</span>
+            <span>{p.per || t.perSeatMonth}</span>
           </>
         )}
         {p.was && <s>{money(p.was)}</s>}
       </div>
       <Button
         variant={p.current ? "soft" : p.featured ? "primary" : "secondary"}
-        disabled={p.current}
+        disabled={p.current || p.disabled}
         onClick={p.onPick}
         className="tf-plan-cta"
       >
-        {p.current ? "Current plan" : p.cta || `Choose ${p.name}`}
+        {p.current ? t.currentPlan : p.cta || t.choosePlan(p.name)}
       </Button>
       <ul className="tf-plan-feats">
         {(p.features || []).map((f, i) => (

package/src/components/data-display.tsx

@@ -2,6 +2,9 @@
 
 import * as React from "react";
 import { cx, durationToken, enterDelay, reduced } from "../cx.js";
+import { formatLike, parseFormatted, type FormattedNumber } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { DATA_DISPLAY_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { useMounted, useScrollFocus } from "../hooks.js";
 import { Avatar, IconButton, TintIcon } from "./foundation.js";
@@ -26,44 +29,24 @@ import type {
 } from "./types.js";
 
 /* ── Data ── */
-interface ParsedNumber {
-  pre: string;
-  num: number;
-  dec: number;
-  comma: boolean;
-  post: string;
-}
-function parseNum(v: string | number): ParsedNumber | null {
-  const m = /^([^0-9-]*)(-?[0-9][0-9,]*\.?[0-9]*)(.*)$/.exec(String(v));
-  if (!m) return null;
-  const raw = (m[2] as string).replace(/,/g, ""),
-    dec = (raw.split(".")[1] || "").length;
-  return {
-    pre: m[1] ?? "",
-    num: parseFloat(raw),
-    dec: dec,
-    comma: (m[2] as string).indexOf(",") > -1,
-    post: m[3] ?? "",
-  };
-}
-export function fmt(n: number, o: ParsedNumber) {
-  let s = n.toFixed(o.dec);
-  if (o.comma) {
-    const parts = s.split(".");
-    parts[0] = (parts[0] as string).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    s = parts.join(".");
-  }
-  return o.pre + s + o.post;
-}
+/**
+ * Counts up to `value`. Strings are read in the locale of the nearest `UIProvider` ("13,05 €/m²"
+ * in de-DE, "$1,305.50" in en-US): the number animates, the text around it stays, and decimals and
+ * grouping are kept. The final text is always `value` itself.
+ */
 export function CountUp(p: CountUpProps) {
-  const o = parseNum(p.value),
-    st = React.useState(o ? fmt(0, o) : String(p.value)),
+  const { locale } = useFormat();
+  const o = parseFormatted(p.value, locale),
+    fmt = (n: number, shape: FormattedNumber) => formatLike(n, shape, locale),
+    // numbers are shown in the locale too; strings end exactly as given
+    final = o && typeof p.value === "number" ? fmt(p.value, o) : String(p.value),
+    st = React.useState(o ? fmt(0, o) : final),
     last = React.useRef(0),
     first = React.useRef(true),
     el = React.useRef<HTMLSpanElement>(null);
   React.useEffect(() => {
     if (!o || reduced(el.current)) {
-      st[1](String(p.value));
+      st[1](final);
       return;
     }
     const slow = durationToken("--dur-slow", 900, el.current);
@@ -79,17 +62,20 @@ export function CountUp(p: CountUpProps) {
       if (start === null) start = t;
       const k = Math.min(1, Math.max(0, (t - start - delay) / dur));
       const e = 1 - Math.pow(1 - k, 3),
-        v = from + (target.num - from) * e;
+        v = from + (target.value - from) * e;
       last.current = v;
       st[1](fmt(v, target));
       if (k < 1) raf = requestAnimationFrame(tick);
-      else last.current = target.num;
+      else {
+        last.current = target.value;
+        st[1](final);
+      }
     }
     raf = requestAnimationFrame(tick);
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [p.value]);
+  }, [p.value, locale]);
   return (
     <span ref={el} className={p.className}>
       {st[0]}
@@ -160,6 +146,7 @@ const KIND: Record<string, [IconName, Tint]> = {
   incident: ["bell", "blush"],
 };
 export function EventCard(p: EventCardProps) {
+  const t = useStrings(DATA_DISPLAY_STRINGS);
   const k = KIND[p.kind || "meeting"] || (KIND.meeting as [IconName, Tint]),
     tint = p.tint || k[1];
   return (
@@ -178,9 +165,9 @@ export function EventCard(p: EventCardProps) {
         </span>
         {p.actions !== false && (
           <span className="tf-row">
-            <IconButton icon="eye" label="Open" size="sm" variant="outline" />
-            <IconButton icon="edit" label="Edit" size="sm" variant="outline" />
-            <IconButton icon="trash" label="Remove" size="sm" variant="outline" />
+            <IconButton icon="eye" label={t.open} size="sm" variant="outline" />
+            <IconButton icon="edit" label={t.edit} size="sm" variant="outline" />
+            <IconButton icon="trash" label={t.remove} size="sm" variant="outline" />
           </span>
         )}
       </div>
@@ -312,6 +299,7 @@ export function Table(p: TableProps) {
   );
 }
 export function ListRow(p: ListRowProps) {
+  const t = useStrings(DATA_DISPLAY_STRINGS);
   return (
     <button
       type="button"
@@ -331,7 +319,7 @@ export function ListRow(p: ListRowProps) {
         }}
       >
         <span className="tf-row-title">
-          {p.unread && <span className="tf-unread" role="img" aria-label="Unread" />}
+          {p.unread && <span className="tf-unread" role="img" aria-label={t.unread} />}
           {p.title}
         </span>
         {p.subtitle && (
@@ -386,6 +374,7 @@ const FT: Record<string, [IconName, Tint]> = {
   zip: ["folder", "butter"],
 };
 export function FileRow(p: FileRowProps) {
+  const strings = useStrings(DATA_DISPLAY_STRINGS);
   const t = FT[p.kind || "doc"] || (FT.doc as [IconName, Tint]);
   return (
     <div className="tf-file">
@@ -399,11 +388,12 @@ export function FileRow(p: FileRowProps) {
         <div className="tf-file-name">{p.name}</div>
         <div className="tf-file-meta">{p.meta}</div>
       </div>
-      <IconButton icon="download" label={`Download ${p.name}`} size="sm" />
+      <IconButton icon="download" label={strings.downloadItem(p.name)} size="sm" />
     </div>
   );
 }
 export function KanbanColumn(p: KanbanColumnProps) {
+  const t = useStrings(DATA_DISPLAY_STRINGS);
   return (
     <section className="tf-kanban" aria-label={p.title}>
       <div className="tf-kanban-head">
@@ -429,7 +419,7 @@ export function KanbanColumn(p: KanbanColumnProps) {
           {p.title}
           <span className="tf-kanban-count">{React.Children.count(p.children)}</span>
         </span>
-        <IconButton icon="more" label="Column options" size="sm" />
+        <IconButton icon="more" label={t.columnOptions} size="sm" />
       </div>
       <Stagger
         className="tf-col"
@@ -442,12 +432,13 @@ export function KanbanColumn(p: KanbanColumnProps) {
       </Stagger>
       <button type="button" className="tf-kanban-add" onClick={p.onAdd}>
         <Icon name="plus" size={14} />
-        {"Add card"}
+        {t.addCard}
       </button>
     </section>
   );
 }
 export function Progress(p: ProgressProps) {
+  const t = useStrings(DATA_DISPLAY_STRINGS);
   const v = Math.max(0, Math.min(100, p.value || 0));
   return (
     <div
@@ -456,7 +447,7 @@ export function Progress(p: ProgressProps) {
       aria-valuenow={v}
       aria-valuemin={0}
       aria-valuemax={100}
-      aria-label={p.label || "Progress"}
+      aria-label={p.label || t.progress}
     >
       <span
         style={{
@@ -467,6 +458,8 @@ export function Progress(p: ProgressProps) {
   );
 }
 export function ProgressRing(p: ProgressRingProps) {
+  const t = useStrings(DATA_DISPLAY_STRINGS);
+  const { formatPercent } = useFormat();
   const size = p.size || 88,
     sw = p.stroke || 9,
     r = (size - sw) / 2,
@@ -481,7 +474,7 @@ export function ProgressRing(p: ProgressRingProps) {
         height: size,
       }}
       role="img"
-      aria-label={(p.label || "Progress") + " " + v + "%"}
+      aria-label={(p.label || t.progress) + " " + formatPercent(v, { maximumFractionDigits: 2 })}
     >
       <svg width={size} height={size} viewBox={"0 0 " + size + " " + size}>
         <circle className="tf-arc-track" cx={size / 2} cy={size / 2} r={r} strokeWidth={sw} />
@@ -497,7 +490,7 @@ export function ProgressRing(p: ProgressRingProps) {
       </svg>
       <span className="tf-ring-label">
         <span>
-          <CountUp value={v + "%"} delay={150} />
+          <CountUp value={formatPercent(v, { maximumFractionDigits: 2 })} delay={150} />
           {p.caption && <small>{p.caption}</small>}
         </span>
       </span>

package/src/components/data-table.tsx

@@ -1,5 +1,7 @@
 "use client";
 import * as React from "react";
+import { useStrings } from "../context.js";
+import { DATA_TABLE_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { cx } from "../cx.js";
 import { SearchField } from "./inputs.js";
@@ -9,6 +11,7 @@ import type { DataTableProps, FilterBarProps, FilterDef } from "./types.js";
 
 /* ── Data table: sort, select + bulk bar, column toggles, sticky head, expandable rows ── */
 export function FilterBar(p: FilterBarProps) {
+  const t = useStrings(DATA_TABLE_STRINGS);
   const active = p.value || {},
     keys = Object.keys(active).filter((k) => active[k] != null && active[k] !== "");
   function set(k: string, val: string | null) {
@@ -54,7 +57,7 @@ export function FilterBar(p: FilterBarProps) {
                 <button
                   type="button"
                   className="x"
-                  aria-label={`Remove filter ${f.label}`}
+                  aria-label={t.removeFilter(f.label)}
                   onClick={() => {
                     set(k, null);
                   }}
@@ -86,7 +89,7 @@ export function FilterBar(p: FilterBarProps) {
           trigger={(s) => (
             <button type="button" className="tf-chip tf-chip-dashed" onClick={s.toggle}>
               <Icon name="plus" size={14} />
-              {"Filter"}
+              {t.addFilter}
             </button>
           )}
         >
@@ -109,7 +112,7 @@ export function FilterBar(p: FilterBarProps) {
             p.onChange?.({});
           }}
         >
-          {"Clear all"}
+          {t.clearAll}
         </button>
       )}
       {p.right && <div className="tf-filterbar-right">{p.right}</div>}
@@ -121,6 +124,7 @@ export function AddFilterMenu(p: {
   avail: FilterDef[];
   onPick?: (key: string, option: string) => void;
 }) {
+  const t = useStrings(DATA_TABLE_STRINGS);
   const step = React.useState<FilterDef | null>(null);
   const cur = step[0];
   if (cur)
@@ -128,7 +132,7 @@ export function AddFilterMenu(p: {
       <Menu
         items={[
           {
-            label: "Back",
+            label: t.back,
             icon: "chevronLeft",
             onClick: () => {
               step[1](null);
@@ -161,6 +165,7 @@ export function AddFilterMenu(p: {
 export function DataTable<R extends Record<string, any> = Record<string, any>>(
   p: DataTableProps<R>,
 ) {
+  const t = useStrings(DATA_TABLE_STRINGS);
   const cols = p.columns || [],
     rk = p.rowKey || "id";
   const sort = React.useState<{ key: string; dir: "asc" | "desc" } | null>(p.defaultSort || null),
@@ -229,11 +234,11 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
               width={220}
               flush
               trigger={(s) => (
-                <Tooltip label="Columns">
+                <Tooltip label={t.columns}>
                   <button
                     type="button"
                     className="tf-iconbtn tf-iconbtn-soft"
-                    aria-label="Choose columns"
+                    aria-label={t.chooseColumns}
                     onClick={s.toggle}
                   >
                     <Icon name="grid" />
@@ -242,7 +247,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
               )}
             >
               <div className="tf-menu tf-menu-static">
-                <div className="tf-menu-label">{"Columns"}</div>
+                <div className="tf-menu-label">{t.columns}</div>
                 {cols
                   .filter((c) => c.hideable !== false && c.label)
                   .map((c) => {
@@ -287,12 +292,12 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
                     () => {
                       sel[1](all ? [] : ids);
                     },
-                    "Select all rows",
+                    t.selectAllRows,
                     some,
                   )}
                 </th>
               )}
-              {p.renderExpanded && <th className="tf-dt-exp" aria-label="Expand" />}
+              {p.renderExpanded && <th className="tf-dt-exp" aria-label={t.expand} />}
               {vis.map((c) => {
                 const s = sort[0] && sort[0].key === c.key ? sort[0].dir : null;
                 return (
@@ -347,7 +352,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
             {rows.length === 0 ? (
               <tr>
                 <td colSpan={span} className="tf-dt-empty">
-                  {p.empty || "Nothing matches these filters."}
+                  {p.empty || t.nothingMatchesFilters}
                 </td>
               </tr>
             ) : (
@@ -365,7 +370,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
                             () => {
                               toggle(id);
                             },
-                            "Select row",
+                            t.selectRow,
                           )}
                         </td>
                       )}
@@ -375,7 +380,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
                             type="button"
                             className={cx("tf-dt-toggle", ex && "open")}
                             aria-expanded={ex}
-                            aria-label={ex ? "Collapse row" : "Expand row"}
+                            aria-label={ex ? t.collapseRow : t.expandRow}
                             onClick={() => {
                               const n = Object.assign({}, open[0]);
                               n[String(id)] = !ex;
@@ -407,8 +412,8 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
         </table>
       </div>
       {p.selectable && selected.length > 0 && (
-        <div className="tf-bulkbar" role="toolbar" aria-label="Bulk actions">
-          <b>{`${selected.length} selected`}</b>
+        <div className="tf-bulkbar" role="toolbar" aria-label={t.bulkActions}>
+          <b>{t.selectedCount(selected.length)}</b>
           <button
             type="button"
             className="tf-linkbtn on-frame"
@@ -416,7 +421,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
               sel[1]([]);
             }}
           >
-            {"Clear"}
+            {t.clear}
           </button>
           <div className="tf-bulkbar-actions">
             {(p.bulkActions || []).map((a) => (