impact-nova 2.5.20 → 2.5.22

package/dist/components/data-display/calendar/calendar-year-panes.js

@@ -1,64 +1,74 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { ChevronRight as A } from "impact-nova-icons";
-import { cn as N } from "../../../lib/utils.js";
-import { Button as S } from "../../primitives/button/button.js";
-import { CalendarPeriodCell as M } from "./calendar-period-cell.js";
-import { PERIOD_RANGE_GRID_CLASSNAME as Y } from "./calendar-selection-appearance.js";
-import { getYearRangeProps as O, isYearRangeSelection as T } from "./calendar-year-utils.js";
-const Z = 12, H = 6, W = "w-[320px] min-w-[320px] max-w-[320px]";
-function V({
-  pickerYear: _,
-  resolvedStartYear: d,
-  resolvedEndYear: m,
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { ChevronRight as u } from "impact-nova-icons";
+import { cn as S } from "../../../lib/utils.js";
+import { Button as x } from "../../primitives/button/button.js";
+import { CalendarPeriodCell as Y } from "./calendar-period-cell.js";
+import { PERIOD_RANGE_GRID_CLASSNAME as Z } from "./calendar-selection-appearance.js";
+import { getYearPageYears as D, yearPageHasSelectableYear as E, getYearRangeProps as W, isYearRangeSelection as q } from "./calendar-year-utils.js";
+const F = 12, J = 6, K = "w-[320px] min-w-[320px] max-w-[320px]";
+function ot({
+  pickerYear: A,
+  resolvedStartYear: c,
+  resolvedEndYear: a,
   previousYearLabel: R,
-  nextYearLabel: u,
-  yearLabels: c,
+  nextYearLabel: _,
+  yearLabels: l,
   yearCaptions: p,
   showFooter: v = !0,
-  pendingYearSelection: w,
-  selectedYear: C,
-  isYearSelected: P,
-  isYearDisabled: b,
-  onYearPageChange: h,
-  onYearClick: I
+  pendingYearSelection: P,
+  selectedYear: w,
+  isYearSelected: C,
+  isYearDisabled: r,
+  onYearPageChange: g,
+  onYearClick: B
 }) {
-  const i = !!p, n = i ? H : Z, o = Math.floor(_ / n) * n, f = o + n - 1, s = Array.from({ length: n }, (t, l) => o + l).filter(
-    (t) => t >= d && t <= m
-  ), g = s[0] ?? o, E = s[s.length - 1] ?? f, a = v ? w : C, x = T(a) ? a : void 0;
-  return /* @__PURE__ */ r(
+  const s = !!p, t = s ? J : F, n = Math.floor(A / t) * t, G = n + t - 1, i = D(n, t), h = i[0] ?? n, f = i[i.length - 1] ?? G, d = v ? P : w, N = q(d) ? d : void 0, I = E({
+    pageStart: n - t,
+    pageSize: t,
+    resolvedStartYear: c,
+    resolvedEndYear: a,
+    isYearDisabled: r
+  }), b = E({
+    pageStart: n + t,
+    pageSize: t,
+    resolvedStartYear: c,
+    resolvedEndYear: a,
+    isYearDisabled: r
+  });
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-slot": "year-panes",
-      className: N("flex flex-col gap-4 overflow-hidden p-3", W),
+      className: S("flex flex-col gap-4 overflow-hidden p-3", K),
       children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ m("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ e(
-            S,
+            x,
             {
               variant: "ghost",
               size: "icon",
               className: "h-7 w-7 shrink-0",
               "aria-label": R,
-              disabled: o <= d,
-              onClick: () => h(o - n),
-              children: /* @__PURE__ */ e(A, { size: 16, className: "rotate-180" })
+              disabled: !I,
+              onClick: () => g(n - t),
+              children: /* @__PURE__ */ e(u, { size: 16, className: "rotate-180" })
             }
           ),
-          /* @__PURE__ */ r("div", { className: "text-sm font-medium text-content", children: [
-            c?.(g) ?? g,
+          /* @__PURE__ */ m("div", { className: "text-sm font-medium text-content", children: [
+            l?.(h) ?? h,
             " – ",
-            c?.(E) ?? E
+            l?.(f) ?? f
           ] }),
           /* @__PURE__ */ e(
-            S,
+            x,
             {
               variant: "ghost",
               size: "icon",
               className: "h-7 w-7",
-              "aria-label": u,
-              disabled: f >= m,
-              onClick: () => h(o + n),
-              children: /* @__PURE__ */ e(A, { className: "h-4 w-4" })
+              "aria-label": _,
+              disabled: !b,
+              onClick: () => g(n + t),
+              children: /* @__PURE__ */ e(u, { className: "h-4 w-4" })
             }
           )
         ] }),
@@ -66,26 +76,26 @@ function V({
           "div",
           {
             "data-period-grid": "",
-            className: N(Y, i ? "grid-cols-2" : "grid-cols-3"),
-            children: s.map((t) => {
-              const l = P(t), z = b(t), k = !!x, { isStart: B, isEnd: G, isMiddle: j } = O(t, a), D = p?.(t);
+            className: S(Z, s ? "grid-cols-2" : "grid-cols-3"),
+            children: i.map((o) => {
+              const z = o < c || o > a || r(o), k = C(o), O = !!N, { isStart: j, isEnd: M, isMiddle: H } = W(o, d), T = p?.(o);
               return /* @__PURE__ */ e(
-                M,
+                Y,
                 {
-                  selected: l,
+                  selected: k,
                   disabled: z,
-                  isRange: k,
-                  isStart: B,
-                  isEnd: G,
-                  isMiddle: j,
-                  hasRangeEnd: !!x?.to,
-                  size: i ? "year-caption" : "year",
-                  columns: i ? 2 : 3,
-                  onClick: () => I(t),
-                  caption: D,
-                  children: c?.(t) ?? String(t)
+                  isRange: O,
+                  isStart: j,
+                  isEnd: M,
+                  isMiddle: H,
+                  hasRangeEnd: !!N?.to,
+                  size: s ? "year-caption" : "year",
+                  columns: s ? 2 : 3,
+                  onClick: () => B(o),
+                  caption: T,
+                  children: l?.(o) ?? String(o)
                 },
-                t
+                o
               );
             })
           }
@@ -95,8 +105,8 @@ function V({
   );
 }
 export {
-  V as CalendarYearPanes,
-  H as YEAR_CAPTION_PAGE_SIZE,
-  Z as YEAR_PAGE_SIZE,
-  W as YEAR_PANE_WIDTH_CLASS
+  ot as CalendarYearPanes,
+  J as YEAR_CAPTION_PAGE_SIZE,
+  F as YEAR_PAGE_SIZE,
+  K as YEAR_PANE_WIDTH_CLASS
 };

package/dist/components/data-display/calendar/calendar-year-utils.d.ts

@@ -11,6 +11,19 @@ export declare function getYearRangeProps(year: number, currentSelection: YearSe
 };
 export declare function nextYearSelection(selection: YearSelection, prev: YearSelection | YearSelection[] | YearRange | undefined, yearMode: "single" | "multiple" | "range" | "multi-range"): YearSelection | YearSelection[] | YearRange | undefined;
 export declare function isYearSelectedForSelection(year: number, currentSelection: YearSelection | YearSelection[] | YearRange | undefined): boolean;
+/** Full page of years (never shrink the grid when bounds are tight). */
+export declare function getYearPageYears(pageStart: number, pageSize: number): number[];
+/**
+ * Prev/next stay enabled only when the target page has at least one selectable year.
+ * Disabled / out-of-nav years still render on the current page.
+ */
+export declare function yearPageHasSelectableYear(options: {
+    pageStart: number;
+    pageSize: number;
+    resolvedStartYear: number;
+    resolvedEndYear: number;
+    isYearDisabled: (year: number) => boolean;
+}): boolean;
 export declare function isYearDisabledForBounds(year: number, disabled?: unknown, options?: {
     calendarKind?: "gregorian" | "fiscal";
     fiscalConfig?: FiscalCalendarConfig;

package/dist/components/data-display/calendar/calendar-year-utils.js

@@ -1,75 +1,84 @@
 import { localDateFromCivil as d } from "../../../lib/fiscal-calendar/civil-date.js";
-import { buildFiscalYear as m } from "../../../lib/fiscal-calendar/build-year.js";
-import { isDateIntervalDisabled as u } from "./calendar-month-utils.js";
-function g(r) {
+import { buildFiscalYear as u } from "../../../lib/fiscal-calendar/build-year.js";
+import { isDateIntervalDisabled as m } from "./calendar-month-utils.js";
+function A(r) {
   return r ? new Date(r.fy ?? r.year, 0, 1) : /* @__PURE__ */ new Date();
 }
-function n(r) {
+function e(r) {
   return r.fy ?? r.year;
 }
-function e(r, f) {
-  return n(r) === n(f);
+function o(r, s) {
+  return e(r) === e(s);
 }
 function l(r) {
   return !!(r && !Array.isArray(r) && ("from" in r || "to" in r));
 }
-function A(r, f) {
-  if (!l(f))
+function E(r, s) {
+  if (!l(s))
     return { isStart: !1, isEnd: !1, isMiddle: !1 };
-  const i = f.from, t = f.to;
-  if (!i && !t) return { isStart: !1, isEnd: !1, isMiddle: !1 };
-  if (!i)
-    return { isStart: !1, isEnd: t ? n(t) === r : !1, isMiddle: !1 };
-  const s = n(i);
-  if (!t) return { isStart: r === s, isEnd: !1, isMiddle: !1 };
-  const o = n(t);
+  const f = s.from, t = s.to;
+  if (!f && !t) return { isStart: !1, isEnd: !1, isMiddle: !1 };
+  if (!f)
+    return { isStart: !1, isEnd: t ? e(t) === r : !1, isMiddle: !1 };
+  const n = e(f);
+  if (!t) return { isStart: r === n, isEnd: !1, isMiddle: !1 };
+  const i = e(t);
   return {
-    isStart: r === s,
-    isEnd: r === o,
-    isMiddle: r > s && r < o
+    isStart: r === n,
+    isEnd: r === i,
+    isMiddle: r > n && r < i
   };
 }
-function w(r, f, i) {
-  if (i === "single") return r;
-  if (i === "multiple") {
-    const s = Array.isArray(f) ? f : [];
-    return s.some((a) => e(a, r)) ? s.filter((a) => !e(a, r)) : [...s, r];
+function b(r, s, f) {
+  if (f === "single") return r;
+  if (f === "multiple") {
+    const n = Array.isArray(s) ? s : [];
+    return n.some((a) => o(a, r)) ? n.filter((a) => !o(a, r)) : [...n, r];
   }
-  const t = f;
-  return !t?.from || t.to ? { from: r } : e(r, t.from) ? t : n(r) < n(t.from) ? { from: r, to: t.from } : { from: t.from, to: r };
+  const t = s;
+  return !t?.from || t.to ? { from: r } : o(r, t.from) ? t : e(r) < e(t.from) ? { from: r, to: t.from } : { from: t.from, to: r };
 }
-function E(r, f) {
-  if (!f) return !1;
-  const i = { year: r, fy: r };
-  if (Array.isArray(f))
-    return f.some((t) => n(t) === r);
-  if (l(f)) {
-    const t = f.from, s = f.to;
-    if (!t) return s ? n(s) === r : !1;
-    const o = n(t);
-    if (!s) return r === o;
-    const a = n(s);
-    return r >= o && r <= a;
+function w(r, s) {
+  if (!s) return !1;
+  const f = { year: r, fy: r };
+  if (Array.isArray(s))
+    return s.some((t) => e(t) === r);
+  if (l(s)) {
+    const t = s.from, n = s.to;
+    if (!t) return n ? e(n) === r : !1;
+    const i = e(t);
+    if (!n) return r === i;
+    const a = e(n);
+    return r >= i && r <= a;
   }
-  return e(f, i) || f.year === r;
+  return o(s, f) || s.year === r;
 }
-function F(r, f, i) {
-  let t = new Date(r, 0, 1), s = new Date(r, 11, 31, 23, 59, 59, 999);
-  if (i?.calendarKind === "fiscal" && i.fiscalConfig)
+function c(r, s) {
+  return Array.from({ length: s }, (f, t) => r + t);
+}
+function F(r) {
+  const { pageStart: s, pageSize: f, resolvedStartYear: t, resolvedEndYear: n, isYearDisabled: i } = r;
+  return c(s, f).some((a) => a < t || a > n ? !1 : !i(a));
+}
+function M(r, s, f) {
+  let t = new Date(r, 0, 1), n = new Date(r, 11, 31, 23, 59, 59, 999);
+  if (f?.calendarKind === "fiscal" && f.fiscalConfig)
     try {
-      const o = m(i.fiscalConfig, r);
-      t = d(o.start), s = d(o.end);
+      const i = u(f.fiscalConfig, r);
+      t = d(i.start), n = d(i.end);
     } catch {
     }
-  return u(t, s, f);
+  return m(t, n, s);
 }
 export {
-  A as getYearRangeProps,
-  e as isSameYear,
-  F as isYearDisabledForBounds,
+  c as getYearPageYears,
+  E as getYearRangeProps,
+  o as isSameYear,
+  M as isYearDisabledForBounds,
   l as isYearRangeSelection,
-  E as isYearSelectedForSelection,
-  w as nextYearSelection,
-  g as viewMonthFromYear,
-  n as yearKey
+  w as isYearSelectedForSelection,
+  b as nextYearSelection,
+  A as viewMonthFromYear,
+  e as yearKey,
+  F as yearPageHasSelectableYear
 };

package/dist/components/feedback/tooltip/tab-tooltip-render.js

@@ -1,6 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Tooltip as l, TooltipTrigger as n, TooltipContent as o } from "./tooltip.js";
-const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
+import "react";
+const p = (i, r, a) => /* @__PURE__ */ t(l, { children: [
   /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center h-full w-full", children: i }) }),
   /* @__PURE__ */ e(o, { variant: "tertiary", className: a, children: r })
 ] }), h = (i, r) => /* @__PURE__ */ t(l, { children: [
@@ -9,5 +10,5 @@ const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
 ] });
 export {
   h as defaultAccordionTooltipRender,
-  d as defaultTabTooltipRender
+  p as defaultTabTooltipRender
 };

package/dist/components/flows/command-palette/shortcut-settings.js

@@ -2,17 +2,17 @@ import { jsx as r, jsxs as h, Fragment as z } from "react/jsx-runtime";
 import * as o from "react";
 import { Person as G, Monitor as U, PriorityAlert as q, Locked as O, Reset as B } from "impact-nova-icons";
 import { cn as p } from "../../../lib/utils.js";
+import { Kbd as $ } from "../../primitives/kbd/kbd.js";
+import { keybindingToString as H } from "../../primitives/kbd/keybinding-display.js";
 import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
-import { ModuleRegistry as $, AllCommunityModule as H } from "ag-grid-community";
-import { AllEnterpriseModule as V } from "ag-grid-enterprise";
-import { DataTable as J, DataTableContent as Q } from "../../data/data-table/data-table.js";
+import { ModuleRegistry as V, AllCommunityModule as J } from "ag-grid-community";
+import { AllEnterpriseModule as Q } from "ag-grid-enterprise";
+import { DataTable as X, DataTableContent as Y } from "../../data/data-table/data-table.js";
 import { AG_CELL_NO_PADDING as F } from "../../data/ag-grid-react/cell-renderers/index.js";
-import { Kbd as X } from "../../primitives/kbd/kbd.js";
-import { keybindingToString as Y } from "../../primitives/kbd/keybinding-display.js";
 import { useCommandPalette as Z } from "./use-command-palette.js";
 import { COMMAND_SOURCE_LABELS as m, keybindingFromEvent as W, isReservedShortcut as ee } from "./utils.js";
 import { BadgeCellRenderer as te } from "../../data/ag-grid-react/cell-renderers/badge-cell-renderer.js";
-$.registerModules([H, V]);
+V.registerModules([J, Q]);
 function re(a) {
   const t = a.data;
   return t ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2 min-w-0 h-full", children: [
@@ -69,7 +69,7 @@ function ne(a) {
               "flex items-center justify-end h-full w-full text-end",
               t.customisable ? "cursor-pointer" : "cursor-default opacity-70"
             ),
-            children: /* @__PURE__ */ r(X, { keybinding: t.keybinding, size: "sm" })
+            children: /* @__PURE__ */ r($, { keybinding: t.keybinding, size: "sm" })
           }
         ) : t.customisable ? /* @__PURE__ */ r(
           "button",
@@ -133,7 +133,7 @@ function le({
         description: e.description || "",
         category: e.category || "General",
         keybinding: i,
-        keybindingDisplay: i ? Y(i) : "",
+        keybindingDisplay: i ? H(i) : "",
         scope: e.scope,
         source: D,
         sourceColor: T ? "primary" : "neutral",
@@ -278,10 +278,10 @@ function le({
     u?.type === "conflict" ? /* @__PURE__ */ r(q, { className: "h-3.5 w-3.5 shrink-0" }) : u?.type === "reserved" ? /* @__PURE__ */ r(O, { className: "h-3.5 w-3.5 shrink-0" }) : c ? /* @__PURE__ */ r("span", { className: "shrink-0 text-base", children: "⌨️" }) : null,
     /* @__PURE__ */ r("span", { children: u ? u.text : L })
   ] }) : null;
-  return /* @__PURE__ */ h(J, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
+  return /* @__PURE__ */ h(X, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
     s ? s(E) : E,
     /* @__PURE__ */ r(
-      Q,
+      Y,
       {
         rowData: y,
         columnDefs: I,

package/dist/components/flows/filter-panel/filter-panel.js

@@ -6,8 +6,8 @@ import { cn as o } from "../../../lib/utils.js";
 import { MultiColorFilter as F, Cross as P, InfoBadge as u } from "impact-nova-icons";
 import { Button as D } from "../../primitives/button/button.js";
 import { Tooltip as c, TooltipTrigger as f, TooltipContent as h } from "../../feedback/tooltip/tooltip.js";
-import { OverflowTooltip as S } from "../../feedback/tooltip/overflow-tooltip.js";
-import { Kbd as j } from "../../primitives/kbd/kbd.js";
+import { Kbd as S } from "../../primitives/kbd/kbd.js";
+import { OverflowTooltip as j } from "../../feedback/tooltip/overflow-tooltip.js";
 import { useImpactNovaI18n as v } from "../../../i18n/use-impact-nova-i18n.js";
 import { useOverlayHostDismissNestedLayersOnNavigation as I } from "../../../lib/overlay/overlay-portal-context.js";
 import { preventDismissOnTooltipOutside as x } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
@@ -145,14 +145,14 @@ const O = ({
                       ),
                       /* @__PURE__ */ a("div", { className: "flex items-center gap-1 min-w-0", children: [
                         /* @__PURE__ */ e(
-                          S,
+                          j,
                           {
                             triggerClassName: "truncate font-['Manrope'] block min-w-0",
                             content: t.tooltipKeybinding ? /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                               t.label,
                               " ",
                               /* @__PURE__ */ e(
-                                j,
+                                S,
                                 {
                                   keybinding: t.tooltipKeybinding,
                                   size: "sm"

package/dist/components/forms/select/components/SelectTriggerValue.js

@@ -1,8 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { cn as x } from "../../../../lib/utils.js";
+import "react";
 import { OverflowTooltip as m } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { isInvertedSelection as h, isOptionArray as d } from "../utils/select.js";
-function w({
+function C({
   isMulti: u,
   isDisabled: p,
   internalValue: o,
@@ -52,5 +53,5 @@ function w({
   );
 }
 export {
-  w as SelectTriggerValue
+  C as SelectTriggerValue
 };

package/dist/components/forms/select/components/Submenu.js

@@ -1,13 +1,14 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
 import { Checkbox as P } from "../../checkbox/checkbox.js";
+import "react";
 import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
 import { cn as v } from "../../../../lib/utils.js";
 import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
 import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
 import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
-const G = ({
+const R = ({
   parentOption: n,
   isMulti: u,
   isReadOnly: l,
@@ -105,5 +106,5 @@ const G = ({
   ] });
 };
 export {
-  G as Submenu
+  R as Submenu
 };

package/dist/form-react/Fields/TextFieldWithBackendValidation.js

@@ -1,5 +1,5 @@
-import { jsx as m, jsxs as T } from "react/jsx-runtime";
-import { useRef as p, useState as C } from "react";
+import { jsx as m, jsxs as v } from "react/jsx-runtime";
+import { useRef as p, useState as T } from "react";
 import { Controller as k } from "react-hook-form";
 import { SmartInput as I } from "../../components/forms/smart-input/smart-input.js";
 const B = ({
@@ -8,35 +8,35 @@ const B = ({
   isDisabled: x,
   formHelpers: t
 }) => {
-  const i = e.fieldType === "text_with_backend_validation" ? e : null, o = p(!1), l = p(null), [h, f] = C(!1), v = async (r) => {
+  const i = e.fieldType === "text_with_backend_validation" ? e : null, o = p(!1), l = p(null), [h, f] = T(!1), C = async (n) => {
     if (i?.validationConfig?.omitValidation?.includes(
       e.id
     )) {
       o.current = !1, l.current = null, await t.form.trigger(e.id);
       return;
     }
-    if (!(!r || r.trim() === "")) {
+    if (!(!n || n.trim() === "")) {
       f(!0);
       try {
-        const n = e.handlerName ? t.formContext?.functions?.[e.handlerName] : void 0;
+        const r = e.handlerName ? t.formContext?.functions?.[e.handlerName] : void 0;
         let a;
-        if (n) {
-          const d = i?.validationConfig?.fieldValuesToIncludeInApiRequest || [], s = d.length > 0 ? d.reduce(
+        if (r) {
+          const s = i?.validationConfig?.fieldValuesToIncludeInApiRequest || [], d = s.length > 0 ? s.reduce(
             (u, c) => (u[c] = t.form.getValues(c), u),
             {}
           ) : {};
-          a = await n({
+          a = await r({
             formHelpers: t,
             fieldId: e.id,
-            newValue: r,
+            newValue: n,
             oldValue: t.getPreviousFieldValue(e.id),
-            payload: { includedFieldValues: s }
+            payload: { includedFieldValues: d }
           });
         } else {
           if (!i?.validationConfig)
             throw new Error("Validation config is required");
-          const d = i.validationConfig.method || "POST", s = i.validationConfig.fieldValuesToIncludeInApiRequest || [], u = s.length > 0 ? s.reduce(
-            (V, w) => (V[w] = t.form.getValues(w), V),
+          const s = i.validationConfig.method || "POST", d = i.validationConfig.fieldValuesToIncludeInApiRequest || [], u = d.length > 0 ? d.reduce(
+            (w, V) => (w[V] = t.form.getValues(V), w),
             {}
           ) : {}, c = i.validationConfig.apiEndpoint;
           if (!c)
@@ -45,8 +45,8 @@ const B = ({
             {
               formHelpers: t,
               apiEndpoint: c,
-              value: r,
-              method: d,
+              value: n,
+              method: s,
               fieldValuesToIncludeInApiRequest: u
             }
           ), !a)
@@ -55,10 +55,10 @@ const B = ({
             );
         }
         a?.is_valid ? (o.current = !1, l.current = null, await t.form.trigger(e.id)) : (o.current = !0, l.current = a?.message?.trim() || `This ${e.label} is already taken`, await t.form.trigger(e.id));
-      } catch (n) {
-        o.current = !0, l.current = n instanceof Error ? n.message : `This ${e.label} is already taken`, await t.form.trigger(e.id), t.formContext?.transport?.showFormErrorToast?.({
+      } catch (r) {
+        o.current = !0, l.current = r instanceof Error ? r.message : `This ${e.label} is already taken`, await t.form.trigger(e.id), t.formContext?.transport?.showFormErrorToast?.({
           title: "Error",
-          description: n instanceof Error ? n.message : "Something went wrong"
+          description: r instanceof Error ? r.message : "Something went wrong"
         });
       } finally {
         f(!1);
@@ -77,34 +77,35 @@ const B = ({
           backendValidation: () => o.current ? l.current || "Validation pending" : !0
         }
       },
-      render: ({ field: r, fieldState: n }) => {
-        const a = !!n.error && n.error.message !== "Validation pending", d = r.value, s = a && !h ? n.error?.message : void 0;
-        return /* @__PURE__ */ T("div", { className: "w-full min-w-0", children: [
+      render: ({ field: n, fieldState: r }) => {
+        const a = !!r.error && r.error.message !== "Validation pending", s = n.value, d = a && !h ? r.error?.message : void 0;
+        return /* @__PURE__ */ v("div", { className: "w-full min-w-0", children: [
           /* @__PURE__ */ m(
             I,
             {
               label: e.label,
               type: "text",
-              value: d ?? void 0,
+              value: s ?? void 0,
               onChange: (u) => {
-                u ? (o.current = !0, l.current = null) : (o.current = !1, l.current = null), r.onChange(u);
+                u ? (o.current = !0, l.current = null) : (o.current = !1, l.current = null), n.onChange(u);
               },
               onBlur: () => {
-                r.onBlur(), v(d ?? "");
+                n.onBlur(), C(s ?? "");
               },
               placeholder: e.placeholder,
               required: e.isRequired,
               disabled: x,
               error: a && !h,
-              helperText: h ? "Validating…" : a ? void 0 : e.helpText
+              helperText: h ? "Validating…" : a ? void 0 : e.helpText,
+              allowSpecialCharacters: i.allowSpecialCharacters
             }
           ),
-          s ? /* @__PURE__ */ m(
+          d ? /* @__PURE__ */ m(
             "p",
             {
               className: "mt-2 text-sm leading-snug text-[#DC2626] break-words",
               role: "alert",
-              children: s
+              children: d
             }
           ) : null
         ] });

package/dist/form-react/types/fields.types.d.ts

@@ -466,6 +466,11 @@ export type CheckboxField = BaseField & {
 };
 export type TextFieldWithBackendValidation = BaseField & {
     fieldType: "text_with_backend_validation";
+    /**
+     * When false (default), only letters, numbers, and spaces are kept.
+     * Set true to allow punctuation and symbols (same behavior as `text`).
+     */
+    allowSpecialCharacters?: boolean;
     /** Legacy built-in path — optional when field.handlerName is set */
     validationConfig?: {
         method?: "GET" | "POST";