@arqel-dev/fields 0.15.0 → 0.16.0

package/dist/index.js

@@ -1,5 +1,6 @@
 import { cn } from '@arqel-dev/ui/utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useArqelTranslations } from '@arqel-dev/react/utils';
 import { useState, useEffect, useRef } from 'react';
 
 // src/shared/styles.ts
@@ -98,6 +99,7 @@ function ColorInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const current = typeof value === "string" && value.length > 0 ? value : "#000000";
@@ -133,7 +135,7 @@ function ColorInput({
       "button",
       {
         type: "button",
-        "aria-label": `Preset ${preset}`,
+        "aria-label": t("arqel.fields.color.preset_aria", "Preset :color", { color: preset }),
         disabled: isDisabled,
         onClick: () => onChange(preset),
         className: "h-6 w-6 rounded-full border border-border disabled:cursor-not-allowed disabled:opacity-50",
@@ -172,6 +174,65 @@ function DateInput({
     }
   );
 }
+function hasZone(value) {
+  return /[zZ]$|[+-]\d{2}:?\d{2}$/.test(value.trim());
+}
+function toZonedLocalInput(date, timeZone, withSeconds) {
+  const options = {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    ...withSeconds ? { second: "2-digit" } : {}
+  };
+  let parts;
+  try {
+    parts = new Intl.DateTimeFormat("en-CA", { ...options, timeZone }).formatToParts(date);
+  } catch {
+    parts = new Intl.DateTimeFormat("en-CA", options).formatToParts(date);
+  }
+  const get = (type) => parts.find((p) => p.type === type)?.value ?? "00";
+  const hour = get("hour") === "24" ? "00" : get("hour");
+  const date_ = `${get("year")}-${get("month")}-${get("day")}`;
+  const time = withSeconds ? `${hour}:${get("minute")}:${get("second")}` : `${hour}:${get("minute")}`;
+  return `${date_}T${time}`;
+}
+function zonedLocalInputToIso(wallClock, timeZone) {
+  const asUtc = /* @__PURE__ */ new Date(`${wallClock}Z`);
+  if (Number.isNaN(asUtc.getTime())) return wallClock;
+  const offsetMs = zoneOffsetMs(asUtc, timeZone);
+  return new Date(asUtc.getTime() - offsetMs).toISOString();
+}
+function zoneOffsetMs(date, timeZone) {
+  try {
+    const dtf = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    });
+    const parts = dtf.formatToParts(date);
+    const get = (type) => Number(parts.find((p) => p.type === type)?.value ?? "0");
+    const hour = get("hour") === 24 ? 0 : get("hour");
+    const asIfUtc = Date.UTC(
+      get("year"),
+      get("month") - 1,
+      get("day"),
+      hour,
+      get("minute"),
+      get("second")
+    );
+    return asIfUtc - date.getTime();
+  } catch {
+    return 0;
+  }
+}
 function DateTimeInput({
   field,
   value,
@@ -183,22 +244,43 @@ function DateTimeInput({
 }) {
   const f = field;
   const hasError = errors !== void 0 && errors.length > 0;
+  const timeZone = f.props.timezone;
+  const withSeconds = f.props.seconds === true;
+  const raw = typeof value === "string" ? value : "";
+  let display = raw;
+  if (timeZone !== void 0 && timeZone !== "" && raw !== "" && hasZone(raw)) {
+    const parsed = new Date(raw);
+    if (!Number.isNaN(parsed.getTime())) {
+      display = toZonedLocalInput(parsed, timeZone, withSeconds);
+    }
+  }
   return /* @__PURE__ */ jsx(
     "input",
     {
       id: inputId,
       type: "datetime-local",
       className: inputClasses,
-      value: typeof value === "string" ? value : "",
+      value: display,
       disabled: disabled || f.disabled || f.readonly,
       readOnly: f.readonly === true,
       required: f.required === true,
       min: f.props.minDate,
       max: f.props.maxDate,
-      step: f.props.seconds ? 1 : void 0,
+      step: withSeconds ? 1 : void 0,
       "aria-invalid": hasError || void 0,
       "aria-describedby": describedBy,
-      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+      onChange: (e) => {
+        const next = e.target.value;
+        if (next === "") {
+          onChange(null);
+          return;
+        }
+        if (timeZone !== void 0 && timeZone !== "") {
+          onChange(zonedLocalInputToIso(next, timeZone));
+          return;
+        }
+        onChange(next);
+      }
     }
   );
 }
@@ -212,6 +294,7 @@ function FileInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const [dragOver, setDragOver] = useState(false);
@@ -224,7 +307,7 @@ function FileInput({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "aria-label": "File upload",
+      "aria-label": t("arqel.fields.file.upload", "File upload"),
       onDragOver: (e) => {
         e.preventDefault();
         if (!isDisabled) setDragOver(true);
@@ -242,9 +325,9 @@ function FileInput({
         isDisabled && "opacity-50"
       ),
       children: [
-        filename ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: filename }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Drag a file here or click to browse" }),
+        filename ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: filename }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("arqel.fields.file.drop_hint", "Drag a file here or click to browse") }),
         /* @__PURE__ */ jsxs("label", { className: "cursor-pointer text-xs text-primary hover:underline", children: [
-          filename ? "Choose another file" : "Browse",
+          filename ? t("arqel.fields.file.choose_another", "Choose another file") : t("arqel.fields.file.browse", "Browse"),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -272,6 +355,7 @@ function ImageInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const [previewUrl, setPreviewUrl] = useState(null);
@@ -293,7 +377,7 @@ function ImageInput({
       "img",
       {
         src: previewUrl,
-        alt: "Preview",
+        alt: t("arqel.fields.image.preview_alt", "Preview"),
         className: cn("max-h-40 w-auto rounded-sm border border-border")
       }
     ),
@@ -306,7 +390,7 @@ function ImageInput({
           isDisabled && "cursor-not-allowed opacity-50"
         ),
         children: [
-          previewUrl ? "Replace image" : "Choose image",
+          previewUrl ? t("arqel.fields.image.replace", "Replace image") : t("arqel.fields.image.choose", "Choose image"),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -350,18 +434,20 @@ function CurrencyInput({
   describedBy
 }) {
   const f = field;
-  const [focused, setFocused] = useState(false);
+  const [draft, setDraft] = useState(null);
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const numeric = typeof value === "number" ? value : value === "" || value == null ? null : Number(value);
   const decimals = f.props.decimals ?? 2;
-  const formatted = numeric === null || Number.isNaN(numeric) ? "" : `${f.props.prefix}${formatNumber(numeric, decimals, f.props.thousandsSeparator, f.props.decimalSeparator)}${f.props.suffix ?? ""}`;
-  const display = focused ? numeric === null ? "" : String(numeric) : formatted;
+  const decimalSeparator = f.props.decimalSeparator ?? ".";
+  const focused = draft !== null;
+  const formatted = numeric === null || Number.isNaN(numeric) ? "" : `${f.props.prefix}${formatNumber(numeric, decimals, f.props.thousandsSeparator, decimalSeparator)}${f.props.suffix ?? ""}`;
+  const display = focused ? draft : formatted;
   return /* @__PURE__ */ jsx(
     "input",
     {
       id: inputId,
-      type: focused ? "number" : "text",
+      type: "text",
       inputMode: "decimal",
       className: inputClasses,
       value: display,
@@ -369,25 +455,33 @@ function CurrencyInput({
       disabled: isDisabled,
       readOnly: f.readonly === true,
       required: f.required === true,
-      min: f.props.min,
-      max: f.props.max,
-      step: f.props.step ?? 10 ** -decimals,
       "aria-invalid": hasError || void 0,
       "aria-describedby": describedBy,
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
+      onFocus: () => setDraft(numeric === null ? "" : toEditable(numeric, decimalSeparator)),
+      onBlur: () => setDraft(null),
       onChange: (e) => {
-        const raw = e.target.value;
-        if (raw === "") {
-          onChange(null);
-          return;
-        }
-        const num = Number(raw);
-        onChange(Number.isNaN(num) ? null : num);
+        setDraft(e.target.value);
+        onChange(parseEditable(e.target.value, decimalSeparator));
       }
     }
   );
 }
+function toEditable(num, decimal) {
+  const s = String(num);
+  return decimal === "." ? s : s.replace(".", decimal);
+}
+function parseEditable(raw, decimal) {
+  if (raw.trim() === "") {
+    return null;
+  }
+  let normalised = raw;
+  if (decimal !== ".") {
+    const escaped = decimal.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    normalised = raw.replace(new RegExp(`[^0-9${escaped}+-]`, "g"), "").replace(decimal, ".");
+  }
+  const num = Number(normalised);
+  return Number.isNaN(num) ? null : num;
+}
 function formatNumber(num, decimals, thousands, decimal) {
   const fixed = num.toFixed(decimals);
   const [whole, frac] = fixed.split(".");
@@ -404,6 +498,7 @@ function NumberInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const setValue = (raw) => {
@@ -448,7 +543,7 @@ function NumberInput({
         "button",
         {
           type: "button",
-          "aria-label": "Increment",
+          "aria-label": t("arqel.fields.increment", "Increment"),
           disabled: isDisabled,
           onClick: () => setValue((current ?? 0) + step),
           className: "flex h-1/2 w-8 items-center justify-center text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
@@ -459,7 +554,7 @@ function NumberInput({
         "button",
         {
           type: "button",
-          "aria-label": "Decrement",
+          "aria-label": t("arqel.fields.decrement", "Decrement"),
           disabled: isDisabled,
           onClick: () => setValue((current ?? 0) - step),
           className: "flex h-1/2 w-8 items-center justify-center text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
@@ -479,6 +574,7 @@ function BelongsToInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
   const [query, setQuery] = useState("");
@@ -515,7 +611,9 @@ function BelongsToInput({
         type: "text",
         className: inputClasses,
         value: open ? query : selectedLabel ?? (value === null || value === void 0 ? "" : String(value)),
-        placeholder: f.placeholder ?? `Search ${f.props.relatedResource}\u2026`,
+        placeholder: f.placeholder ?? t("arqel.fields.belongsto.search", "Search :resource\u2026", {
+          resource: f.props.relatedResource
+        }),
         disabled: isDisabled,
         readOnly: !(f.readonly === true || f.readonly === void 0),
         "aria-invalid": hasError || void 0,
@@ -559,13 +657,12 @@ function BelongsToInput({
 }
 function HasManyReadonly({ field, value, inputId, describedBy }) {
   const f = field;
+  const t = useArqelTranslations();
   const items = Array.isArray(value) ? value : [];
   if (items.length === 0) {
-    return /* @__PURE__ */ jsxs("p", { id: inputId, "aria-describedby": describedBy, className: "text-sm text-muted-foreground", children: [
-      "No ",
-      f.props.relatedResource,
-      " linked."
-    ] });
+    return /* @__PURE__ */ jsx("p", { id: inputId, "aria-describedby": describedBy, className: "text-sm text-muted-foreground", children: t("arqel.fields.has_many_empty", "No :resource linked.", {
+      resource: f.props.relatedResource
+    }) });
   }
   return /* @__PURE__ */ jsx(
     "ul",
@@ -614,6 +711,7 @@ function MultiSelectInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   const options = normaliseOptions(f.props.options);
   const arr = Array.isArray(value) ? value : [];
@@ -635,7 +733,9 @@ function MultiSelectInput({
               "button",
               {
                 type: "button",
-                "aria-label": `Remove ${opt?.label ?? String(v)}`,
+                "aria-label": t("arqel.fields.multiselect.remove", "Remove :label", {
+                  label: opt?.label ?? String(v)
+                }),
                 onClick: () => remove(v),
                 className: "text-muted-foreground hover:text-foreground",
                 children: "\u2715"
@@ -746,6 +846,7 @@ function SlugInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const hasError = errors !== void 0 && errors.length > 0;
   return /* @__PURE__ */ jsx(
     "input",
@@ -754,7 +855,7 @@ function SlugInput({
       type: "text",
       className: inputClasses,
       value: typeof value === "string" ? value : "",
-      placeholder: f.placeholder ?? "my-resource-slug",
+      placeholder: f.placeholder ?? t("arqel.fields.slug.placeholder", "my-resource-slug"),
       disabled: disabled || f.disabled || f.readonly,
       readOnly: f.readonly === true,
       required: f.required === true,
@@ -809,6 +910,7 @@ function PasswordInput({
   describedBy
 }) {
   const f = field;
+  const t = useArqelTranslations();
   const [revealed, setRevealed] = useState(false);
   const hasError = errors !== void 0 && errors.length > 0;
   const isDisabled = disabled || f.disabled || f.readonly;
@@ -834,7 +936,7 @@ function PasswordInput({
       "button",
       {
         type: "button",
-        "aria-label": revealed ? "Hide password" : "Show password",
+        "aria-label": revealed ? t("arqel.fields.password.hide", "Hide password") : t("arqel.fields.password.show", "Show password"),
         "aria-pressed": revealed,
         disabled: isDisabled,
         onClick: () => setRevealed((v) => !v),