@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/src/components/forms.tsx

@@ -3,7 +3,9 @@ import * as React from "react";
 import { leaving, usePresence } from "../presence.js";
 import { cx } from "../cx.js";
 import { useFieldError } from "./form.js";
-import { formatDate, formatNumber, WEEK_START } from "../format.js";
+import { formatDate, WEEK_START } from "../format.js";
+import { useFormat, useStrings, type Formatters } from "../context.js";
+import { FORMS_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { useControlled, useId, useOutside } from "../hooks.js";
 import { Avatar, IconButton, TintIcon } from "./foundation.js";
@@ -101,6 +103,15 @@ export function TextField(p: TextFieldProps) {
           onBlur={p.onBlur}
           required={p.required}
           disabled={p.disabled}
+          readOnly={p.readOnly}
+          min={p.min}
+          max={p.max}
+          step={p.step}
+          minLength={p.minLength}
+          maxLength={p.maxLength}
+          pattern={p.pattern}
+          inputMode={p.inputMode}
+          autoFocus={p.autoFocus}
           aria-invalid={error ? "true" : undefined}
           aria-describedby={error || p.hint ? `${id}-msg` : undefined}
           autoComplete={p.autoComplete}
@@ -223,6 +234,7 @@ export function norm(o: string | Option): Option {
 }
 
 export function Combobox(p: ComboboxProps) {
+  const t = useStrings(FORMS_STRINGS);
   const multi = !!p.multiple,
     opts = (p.options || []).map(norm),
     id = useId("cb");
@@ -310,7 +322,7 @@ export function Combobox(p: ComboboxProps) {
                 {labelOf(val)}
                 <button
                   type="button"
-                  aria-label={`Remove ${labelOf(val)}`}
+                  aria-label={t.removeItem(labelOf(val))}
                   onClick={(e) => {
                     e.stopPropagation();
                     v[1](selList.filter((x) => x !== val));
@@ -336,7 +348,7 @@ export function Combobox(p: ComboboxProps) {
                   : p.placeholder
                 : selOne != null && !q[0]
                   ? labelOf(selOne)
-                  : p.placeholder || "Select…"
+                  : p.placeholder || t.selectPlaceholder
             }
             value={q[0]}
             onChange={(e) => {
@@ -368,9 +380,7 @@ export function Combobox(p: ComboboxProps) {
             role="listbox"
             aria-multiselectable={multi || undefined}
           >
-            {list.length === 0 && !canCreate && (
-              <div className="tf-combo-empty">{"No matches"}</div>
-            )}
+            {list.length === 0 && !canCreate && <div className="tf-combo-empty">{t.noMatches}</div>}
             {list.map((o, i) => (
               <div
                 key={o.value}
@@ -411,7 +421,7 @@ export function Combobox(p: ComboboxProps) {
                 }}
               >
                 <Icon name="plus" size={15} />
-                <span className="tf-option-text">{`Create “${q[0].trim()}”`}</span>
+                <span className="tf-option-text">{t.createOption(q[0].trim())}</span>
               </div>
             )}
           </div>
@@ -422,6 +432,7 @@ export function Combobox(p: ComboboxProps) {
 }
 
 export function TagInput(p: TagInputProps) {
+  const strings = useStrings(FORMS_STRINGS);
   const v = useControlled(p.value, p.defaultValue || [], p.onChange),
     q = React.useState(""),
     id = useId("tag");
@@ -444,7 +455,7 @@ export function TagInput(p: TagInputProps) {
             {t}
             <button
               type="button"
-              aria-label={`Remove ${t}`}
+              aria-label={strings.removeItem(t)}
               onClick={() => {
                 v[1](v[0].filter((x) => x !== t));
               }}
@@ -456,7 +467,7 @@ export function TagInput(p: TagInputProps) {
         <input
           id={id}
           className="tf-combo-input"
-          placeholder={v[0].length ? "" : p.placeholder || "Type and press Enter"}
+          placeholder={v[0].length ? "" : p.placeholder || strings.tagPlaceholder}
           value={q[0]}
           onChange={(e) => {
             const s = e.target.value;
@@ -479,21 +490,30 @@ export function TagInput(p: TagInputProps) {
 }
 
 /* ── Date picker (single or range, with presets) ── */
-function monthName(d: Date) {
-  return formatDate(d, {
-    month: "long",
-    year: "numeric",
-  });
+function monthName(d: Date, locale?: string) {
+  return formatDate(
+    d,
+    {
+      month: "long",
+      year: "numeric",
+    },
+    locale,
+  );
 }
 
-export function weekdays() {
+/** Short weekday names from the first day of the week (`locale` default en-US). */
+export function weekdays(locale?: string) {
   const out: string[] = [];
   for (let i = 0; i < 7; i++) {
     const d = new Date(2024, 0, 1 + ((WEEK_START + i - 1) % 7));
     out.push(
-      formatDate(d, {
-        weekday: "short",
-      }),
+      formatDate(
+        d,
+        {
+          weekday: "short",
+        },
+        locale,
+      ),
     );
   }
   return out;
@@ -513,8 +533,8 @@ function same(a: Date | null | undefined, b: Date | null | undefined): boolean {
   );
 }
 
-function fmtD(d: Date | null | undefined) {
-  return d ? formatDate(d) : "";
+function fmtD(d: Date | null | undefined, locale?: string) {
+  return d ? formatDate(d, undefined, locale) : "";
 }
 
 function addD(d: Date, n: number) {
@@ -524,6 +544,8 @@ function addD(d: Date, n: number) {
 }
 
 export function Calendar(p: CalendarProps) {
+  const t = useStrings(FORMS_STRINGS);
+  const { locale } = useFormat();
   const range = p.range ? ((p.value as DateRange | null | undefined) ?? null) : null;
   const today = d0(p.today || new Date()),
     sv = p.range ? range && range.from : (p.value as Date | null | undefined),
@@ -544,17 +566,17 @@ export function Calendar(p: CalendarProps) {
       <div className="tf-cal-head">
         <IconButton
           icon="chevronLeft"
-          label="Previous month"
+          label={t.previousMonth}
           size="sm"
           variant="soft"
           onClick={() => {
             move(-1);
           }}
         />
-        <b>{monthName(first)}</b>
+        <b>{monthName(first, locale)}</b>
         <IconButton
           icon="chevronRight"
-          label="Next month"
+          label={t.nextMonth}
           size="sm"
           variant="soft"
           onClick={() => {
@@ -562,8 +584,8 @@ export function Calendar(p: CalendarProps) {
           }}
         />
       </div>
-      <div className="tf-cal-grid" role="group" aria-label={monthName(first)}>
-        {weekdays().map((w, i) => (
+      <div className="tf-cal-grid" role="group" aria-label={monthName(first, locale)}>
+        {weekdays(locale).map((w, i) => (
           <span key={i} className="tf-cal-wd">
             {w}
           </span>
@@ -589,7 +611,7 @@ export function Calendar(p: CalendarProps) {
                 isTo && from && "end",
               )}
               aria-pressed={isFrom || isTo}
-              aria-label={formatDate(d, { day: "numeric", month: "long", year: "numeric" })}
+              aria-label={formatDate(d, { day: "numeric", month: "long", year: "numeric" }, locale)}
               onPointerEnter={() => {
                 p.range && hov[1](d);
               }}
@@ -617,6 +639,8 @@ export function Calendar(p: CalendarProps) {
 }
 
 export function DatePicker(p: DatePickerProps) {
+  const t = useStrings(FORMS_STRINGS);
+  const { locale } = useFormat();
   const id = useId("dp"),
     v = useControlled(
       p.value,
@@ -633,18 +657,18 @@ export function DatePicker(p: DatePickerProps) {
   const presets =
     p.presets !== false && p.range
       ? [
-          ["Last 7 days", -6],
-          ["Last 30 days", -29],
-          ["Last 90 days", -89],
-          ["This year", "y"],
+          [t.lastDays(7), -6],
+          [t.lastDays(30), -29],
+          [t.lastDays(90), -89],
+          [t.thisYear, "y"],
         ]
       : null;
   const rv = p.range ? ((v[0] as DateRange | null) ?? null) : null;
   const txt = p.range
     ? rv && rv.from
-      ? fmtD(rv.from) + " – " + (rv.to ? fmtD(rv.to) : "…")
+      ? fmtD(rv.from, locale) + " – " + (rv.to ? fmtD(rv.to, locale) : "…")
       : ""
-    : fmtD(v[0] as Date | null);
+    : fmtD(v[0] as Date | null, locale);
   return (
     <FormField
       id={id}
@@ -667,7 +691,7 @@ export function DatePicker(p: DatePickerProps) {
             onClick={s.toggle}
           >
             <Icon name="calendar" size={15} />
-            <span>{txt || p.placeholder || (p.range ? "Pick a range" : "Pick a date")}</span>
+            <span>{txt || p.placeholder || (p.range ? t.pickRange : t.pickDate)}</span>
           </button>
         )}
       >
@@ -722,6 +746,7 @@ export function DatePicker(p: DatePickerProps) {
 
 /* ── Number, slider, OTP, upload ── */
 export function NumberInput(p: NumberInputProps) {
+  const t = useStrings(FORMS_STRINGS);
   const id = useId("num"),
     v = useControlled(p.value, p.defaultValue != null ? p.defaultValue : 0, p.onChange),
     step = p.step || 1;
@@ -735,7 +760,7 @@ export function NumberInput(p: NumberInputProps) {
       <div className="tf-number">
         <IconButton
           icon="minus"
-          label="Decrease"
+          label={t.decrease}
           size="sm"
           disabled={p.min != null && v[0] <= p.min}
           onClick={() => {
@@ -766,7 +791,7 @@ export function NumberInput(p: NumberInputProps) {
         {p.unit && <span className="tf-number-unit">{p.unit}</span>}
         <IconButton
           icon="plus"
-          label="Increase"
+          label={t.increase}
           size="sm"
           disabled={p.max != null && v[0] >= p.max}
           onClick={() => {
@@ -827,6 +852,7 @@ export function Slider(p: SliderProps) {
 }
 
 export function OtpInput(p: OtpInputProps) {
+  const t = useStrings(FORMS_STRINGS);
   const n = p.length || 6,
     st = React.useState(Array(n).fill("")),
     refs = React.useRef<(HTMLInputElement | null)[]>([]);
@@ -841,7 +867,7 @@ export function OtpInput(p: OtpInputProps) {
     <div
       className={cx("tf-otp", p.error && "invalid")}
       role="group"
-      aria-label={p.label || "Verification code"}
+      aria-label={p.label || t.verificationCode}
     >
       {st[0].map((c, i) => (
         <React.Fragment key={i}>
@@ -855,7 +881,7 @@ export function OtpInput(p: OtpInputProps) {
             autoComplete={i === 0 ? "one-time-code" : "off"}
             maxLength={1}
             value={c}
-            aria-label={`Digit ${i + 1}`}
+            aria-label={t.digitN(i + 1)}
             onChange={(e) => {
               set(i, e.target.value.replace(/\D/g, "").slice(-1));
             }}
@@ -882,26 +908,65 @@ export function OtpInput(p: OtpInputProps) {
   );
 }
 
-function fsize(b: number) {
+function fsize(b: number, f: Pick<Formatters, "formatNumber">) {
   return b > 1048576
-    ? `${formatNumber(b / 1048576, { maximumFractionDigits: 1 })} MB`
-    : `${formatNumber(Math.max(1, Math.round(b / 1024)))} KB`;
+    ? `${f.formatNumber(b / 1048576, { maximumFractionDigits: 1 })} MB`
+    : `${f.formatNumber(Math.max(1, Math.round(b / 1024)))} KB`;
+}
+
+/** Whether a file matches an `accept` list ("image/*,.pdf,application/pdf"); empty accepts all. */
+function acceptsFile(file: { name: string; type: string }, accept?: string): boolean {
+  const rules = (accept || "")
+    .split(",")
+    .map((r) => r.trim().toLowerCase())
+    .filter(Boolean);
+  if (!rules.length) return true;
+  const name = file.name.toLowerCase(),
+    type = (file.type || "").toLowerCase();
+  return rules.some((r) =>
+    r.startsWith(".")
+      ? name.endsWith(r)
+      : r.endsWith("/*")
+        ? type.startsWith(r.slice(0, -1))
+        : type === r,
+  );
 }
 
 export function FileDrop(p: FileDropProps) {
+  const t = useStrings(FORMS_STRINGS);
+  const fm = useFormat();
   const over = React.useState(false),
     files = useControlled(p.files, [], p.onChange),
-    inp = React.useRef<HTMLInputElement>(null);
+    inp = React.useRef<HTMLInputElement>(null),
+    timers = React.useRef<ReturnType<typeof setInterval>[]>([]);
+  // Simulated progress is a demo of the look; with `onFiles` the app reports real progress, so
+  // an uncontrolled list without simulation shows no progress at all.
+  const simulate = p.simulateProgress ?? !p.onFiles,
+    tracked = simulate || p.files !== undefined;
+  React.useEffect(
+    () => () => {
+      timers.current.forEach(clearInterval);
+    },
+    [],
+  );
   function take(list: FileList | null) {
-    const add: UploadFile[] = Array.from(list || []).map((f) => ({
+    let picked = Array.from(list || []);
+    const rejected = picked.filter((f) => !acceptsFile(f, p.accept));
+    picked = picked.filter((f) => acceptsFile(f, p.accept));
+    if (p.multiple === false) picked = picked.slice(0, 1);
+    if (rejected.length) p.onReject?.(rejected);
+    if (!picked.length) return;
+    p.onFiles?.(picked);
+    const add: UploadFile[] = picked.map((f) => ({
       name: f.name,
       size: f.size,
       progress: 0,
+      file: f,
       id: Math.random().toString(36).slice(2),
     }));
-    if (!add.length) return;
     const all = (p.multiple === false ? [] : files[0]).concat(add);
     files[1](all);
+    if (!simulate) return;
     add.forEach((f, k) => {
       let t = 0;
       const iv = setInterval(
@@ -913,6 +978,7 @@ export function FileDrop(p: FileDropProps) {
         },
         160 + k * 40,
       );
+      timers.current.push(iv);
     });
   }
   return (
@@ -949,8 +1015,8 @@ export function FileDrop(p: FileDropProps) {
         }}
       >
         <TintIcon icon="upload" tint={over[0] ? "mint" : "sky"} size={40} />
-        <b>{over[0] ? "Drop to upload" : p.title || "Drop files here or browse"}</b>
-        <span>{p.hint || "PDF, PNG or JPG up to 10 MB"}</span>
+        <b>{over[0] ? t.dropToUpload : p.title || t.dropFiles}</b>
+        <span>{p.hint || t.dropHint}</span>
         <input
           ref={inp}
           type="file"
@@ -971,19 +1037,30 @@ export function FileDrop(p: FileDropProps) {
           }}
         >
           {files[0].map((f) => {
-            const done = f.progress >= 100;
+            // untracked: a file that is only listed (the app uploads it, or not yet)
+            const pending = tracked && f.progress < 100,
+              done = tracked && f.progress >= 100;
             return (
               <div key={f.id} className="tf-upload">
-                <TintIcon icon="file" tint={done ? "mint" : "sky"} />
+                <TintIcon icon="file" tint={pending ? "sky" : "mint"} />
                 <div className="tf-upload-text">
                   <b>{f.name}</b>
                   <span>
                     {done
-                      ? `${fsize(f.size)} · uploaded`
-                      : Math.round(f.progress) + "% · " + fsize(f.size)}
+                      ? t.uploaded(fsize(f.size, fm))
+                      : pending
+                        ? fm.formatPercent(Math.round(f.progress)) + " · " + fsize(f.size, fm)
+                        : fsize(f.size, fm)}
                   </span>
-                  {!done && (
-                    <span className="tf-progress">
+                  {pending && (
+                    <span
+                      className="tf-progress"
+                      role="progressbar"
+                      aria-label={f.name}
+                      aria-valuemin={0}
+                      aria-valuemax={100}
+                      aria-valuenow={Math.round(f.progress)}
+                    >
                       <span
                         style={{
                           width: f.progress + "%",
@@ -993,11 +1070,12 @@ export function FileDrop(p: FileDropProps) {
                   )}
                 </div>
                 <IconButton
-                  icon={done ? "trash" : "x"}
-                  label={done ? `Remove ${f.name}` : "Cancel upload"}
+                  icon={pending ? "x" : "trash"}
+                  label={pending ? t.cancelUpload : t.removeItem(f.name)}
                   size="sm"
                   onClick={() => {
                     files[1](files[0].filter((x) => x.id !== f.id));
+                    p.onRemove?.(f);
                   }}
                 />
               </div>

package/src/components/foundation.tsx

@@ -28,60 +28,47 @@ function slot(
   });
 }
 
-export function Button(p: ButtonProps) {
-  const v = p.variant || "primary";
-  const cls = cx("tf-btn", "tf-btn-" + v, p.size === "sm" && "tf-btn-sm", p.className);
+/** Every native `<button>` attribute, on top of the documented props. */
+type NativeRest<P> = P & Omit<React.ComponentPropsWithRef<"button">, keyof P>;
+
+export function Button(props: NativeRest<ButtonProps>) {
+  const { variant, size, icon, iconRight, asChild, className, children, type, ...native } = props;
+  const v = variant || "primary";
+  const cls = cx("tf-btn", "tf-btn-" + v, size === "sm" && "tf-btn-sm", className);
   const content = (inner: React.ReactNode) => (
     <>
-      {p.icon && <Icon name={p.icon} size={15} />}
+      {icon && <Icon name={icon} size={15} />}
       {inner}
-      {p.iconRight && <Icon name={p.iconRight} size={15} />}
+      {iconRight && <Icon name={iconRight} size={15} />}
     </>
   );
-  if (p.asChild) {
-    const el = slot(React.Children.only(p.children), cls, { style: p.style }, content);
+  if (asChild) {
+    const el = slot(React.Children.only(children), cls, native, content);
     if (el) return el;
   }
   return (
-    <button
-      type={p.type || "button"}
-      className={cls}
-      style={p.style}
-      disabled={p.disabled}
-      onClick={p.onClick}
-    >
-      {content(p.children)}
+    <button {...native} type={type || "button"} className={cls}>
+      {content(children)}
     </button>
   );
 }
 
-export function IconButton(p: IconButtonProps) {
+export function IconButton(props: NativeRest<IconButtonProps>) {
+  const { icon, label, variant, size, asChild, className, children, type, ...native } = props;
   const cls = cx(
     "tf-iconbtn",
-    "tf-iconbtn-" + (p.variant || "soft"),
-    p.size && "tf-iconbtn-" + p.size,
-    p.className,
+    "tf-iconbtn-" + (variant || "soft"),
+    size && "tf-iconbtn-" + size,
+    className,
   );
-  if (p.asChild && p.children) {
-    const el = slot(
-      React.Children.only(p.children),
-      cls,
-      { "aria-label": p.label, title: p.label, style: p.style },
-      () => <Icon name={p.icon} />,
-    );
+  const named = { "aria-label": label, title: label, ...native };
+  if (asChild && children) {
+    const el = slot(React.Children.only(children), cls, named, () => <Icon name={icon} />);
     if (el) return el;
   }
   return (
-    <button
-      type="button"
-      aria-label={p.label}
-      title={p.label}
-      className={cls}
-      style={p.style}
-      disabled={p.disabled}
-      onClick={p.onClick}
-    >
-      <Icon name={p.icon} />
+    <button {...named} type={type || "button"} className={cls}>
+      <Icon name={icon} />
     </button>
   );
 }

package/src/components/inputs.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
 import { Icon } from "../Icon.js";
 import { useId } from "../hooks.js";
 import { useFieldError } from "./form.js";
@@ -127,13 +128,14 @@ export function Textarea(p: TextareaProps) {
 }
 
 export function SearchField(p: SearchFieldProps) {
+  const t = useStrings();
   return (
     <label className={cx("tf-search", p.className)} style={p.style}>
       <Icon name="search" size={15} />
       <input
         type="search"
-        placeholder={p.placeholder || "Search"}
-        aria-label={p.placeholder || "Search"}
+        placeholder={p.placeholder || t.search}
+        aria-label={p.label || p.placeholder || t.search}
         value={p.value}
         onChange={p.onChange}
       />

package/src/components/mail.tsx

@@ -1,5 +1,7 @@
 "use client";
 import * as React from "react";
+import { useStrings } from "../context.js";
+import { MAIL_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { cx } from "../cx.js";
 import { useControlled } from "../hooks.js";
@@ -20,6 +22,7 @@ import type {
 
 /* ── Mail ── */
 export function AccountSwitcher(p: AccountSwitcherProps) {
+  const t = useStrings(MAIL_STRINGS);
   const q = React.useState(""),
     list = (p.accounts || []).filter(
       (a) => !q[0] || a.address.toLowerCase().indexOf(q[0].toLowerCase()) > -1,
@@ -38,9 +41,9 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
         >
           <span className="tf-option-text">
             <b className={cur ? "tf-mono" : undefined}>
-              {cur ? cur.address : p.allLabel || "All inboxes"}
+              {cur ? cur.address : p.allLabel || t.allInboxes}
             </b>
-            <small>{cur ? cur.domain : `${(p.accounts || []).length} addresses`}</small>
+            <small>{cur ? cur.domain : t.addressCount((p.accounts || []).length)}</small>
           </span>
           <Icon name="chevronDown" size={14} />
         </button>
@@ -54,7 +57,7 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
           }}
         >
           <SearchField
-            placeholder="Find an address"
+            placeholder={t.findAddress}
             value={q[0]}
             onChange={(e) => {
               q[1](e.target.value);
@@ -70,7 +73,7 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
               }}
             >
               <Icon name="inbox" size={15} />
-              <span className="tf-option-text">{p.allLabel || "All inboxes"}</span>
+              <span className="tf-option-text">{p.allLabel || t.allInboxes}</span>
               {p.unread != null && <span className="tf-nav-count">{p.unread}</span>}
             </button>
             {list.map((a) => (
@@ -98,6 +101,7 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
 }
 
 export function InboxList(p: InboxListProps) {
+  const t = useStrings(MAIL_STRINGS);
   return (
     <div className="tf-inboxlist" role="list">
       {(p.items || []).map((m) => (
@@ -113,7 +117,7 @@ export function InboxList(p: InboxListProps) {
           <span
             className="tf-mailrow-dot"
             role={m.unread ? "img" : undefined}
-            aria-label={m.unread ? "Unread" : undefined}
+            aria-label={m.unread ? t.unread : undefined}
           />
           <span className="tf-mailrow-main">
             <span className="tf-mailrow-top">
@@ -194,13 +198,14 @@ export function MailThread(p: MailThreadProps) {
 }
 
 export function SignatureEditor(p: SignatureEditorProps) {
+  const t = useStrings(MAIL_STRINGS);
   const v = useControlled<Record<string, string>>(p.value, p.defaultValue || {}, p.onChange),
     fields = p.fields || [
-      { key: "name", label: "Name" },
-      { key: "role", label: "Role" },
-      { key: "company", label: "Company" },
-      { key: "phone", label: "Phone" },
-      { key: "website", label: "Website" },
+      { key: "name", label: t.colName },
+      { key: "role", label: t.role },
+      { key: "company", label: t.company },
+      { key: "phone", label: t.phone },
+      { key: "website", label: t.website },
     ];
   function set(k: string, x: string) {
     const n: Record<string, string> = Object.assign({}, v[0]);
@@ -234,7 +239,7 @@ export function SignatureEditor(p: SignatureEditorProps) {
             padding: 0,
           }}
         >
-          {p.previewLabel || "Preview"}
+          {p.previewLabel || t.preview}
         </span>
         <div className="tf-paper tf-sig-paper">
           <p>—</p>