@isi-ui7/bos7-shared 0.2.4 → 0.2.7

package/src/form-renderer.tsx

@@ -12,6 +12,8 @@ import {
   Toggle,
 } from "@carbon/react";
 import { LookupInput } from "@isi-ui7/lookup-input";
+import type { T_LookupTblStruct } from "@isi-ui7/lookup-input";
+import { EditableTable } from "@isi-ui7/editable-table";
 import { useI18n } from "@isi-ui7/i18n";
 import type { Ui7Locale } from "@isi-ui7/i18n";
 import {
@@ -27,7 +29,7 @@ import {
   UI7_FORM_VISUAL_CLASSNAMES,
   UI7_FORM_VISUAL_TOKENS,
 } from "./style-contract";
-import type { Ui7FormDensity } from "./style-contract";
+import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
 
@@ -44,6 +46,8 @@ export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   scopeClassName?: string;
   /** Form layout density. Defaults to "compact". */
   density?: Ui7FormDensity;
+  /** Desktop form-panel width. Defaults to "two-thirds". */
+  width?: Ui7FormWidth;
 };
 
 function clampSpan(span: number | undefined, defaultSpan: number): number {
@@ -80,7 +84,60 @@ function makeDisplayRenderer(
   ): ReactNode {
     if (field.format) return field.format(value as never, data as never);
     if (field.type === "checkbox") return value ? labels.boolYes : labels.boolNo;
-    if (field.type === "toggle") return value ? labels.toggleOn : labels.toggleOff;
+    if (field.type === "toggle") {
+      // valueOn / valueOff override the default boolean truthiness check
+      // for non-boolean stored values (e.g., "Y"/"N").
+      if (field.toggle && field.toggle.valueOn !== undefined) {
+        return value === field.toggle.valueOn ? labels.toggleOn : labels.toggleOff;
+      }
+      return value ? labels.toggleOn : labels.toggleOff;
+    }
+    if (field.type === "select") {
+      // Resolve the option label so read-only mode shows "Active" rather than
+      // the stored code "active". Falls back to the raw value when no option
+      // matches (e.g. a legacy value no longer in the options list).
+      const match = (field.options ?? []).find((o) => String(o.value) === asString(value));
+      if (match) return match.label;
+      return asString(value) || labels.emptyValue;
+    }
+    if (field.type === "date") {
+      const raw = asString(value);
+      if (!raw) return labels.emptyValue;
+      const d = new Date(raw);
+      if (Number.isNaN(d.getTime())) return raw;
+      const nloc = locale === "en" ? "en-GB" : "id-ID";
+      return new Intl.DateTimeFormat(nloc, { day: "2-digit", month: "short", year: "numeric" }).format(d);
+    }
+    if (field.type === "datetime") {
+      // ISO timestamp → locale-aware "18 Jun 2026, 10:23" (24h). Echoes the
+      // raw value if unparseable. Edit mode falls through to a text input.
+      const raw = asString(value);
+      if (!raw) return labels.emptyValue;
+      const d = new Date(raw);
+      if (Number.isNaN(d.getTime())) return raw;
+      const nloc = locale === "en" ? "en-GB" : "id-ID";
+      return new Intl.DateTimeFormat(nloc, {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      }).format(d);
+    }
+    if (field.type === "lookup") {
+      // View/read-only mode mirrors the LookupInput initialDisplay logic:
+      // when initialDisplayFields is set and all referenced FormData
+      // values are non-empty, render the compound "kode - nama". Falls
+      // back to the raw primary key when companion fields are missing.
+      const lookup = field.lookup;
+      if (lookup?.initialDisplayFields?.length) {
+        const sep = lookup.initialDisplaySeparator ?? " ";
+        const parts = lookup.initialDisplayFields.map((k) => asString(data[String(k)]));
+        if (parts.every((p) => p !== "")) return parts.join(sep);
+      }
+      return asString(value) || labels.emptyValue;
+    }
     if (field.type === "number" && typeof value === "number") {
       const nloc = locale === "en" ? "en-US" : "id-ID";
       const numeric = field.numeric;
@@ -158,6 +215,7 @@ function NumericField({
   value,
   numericKind,
   prec,
+  currencyCode,
   locale,
   size,
   disabled,
@@ -172,6 +230,13 @@ function NumericField({
   value: number;
   numericKind: "currency" | "percent" | "integer" | "decimal";
   prec?: number;
+  /**
+   * Currency ISO code (e.g. "IDR", "USD") — only used when numericKind ===
+   * "currency". When set, the code is shown as a subdued suffix next to the
+   * field label so the user sees which currency they're entering, mirroring
+   * the view-mode renderer which shows `Rp 1.000.000` / `IDR 1.000.000`.
+   */
+  currencyCode?: string;
   locale: Ui7Locale;
   size?: "sm" | "md" | "lg";
   disabled?: boolean;
@@ -209,19 +274,94 @@ function NumericField({
     return parsed.ok ? parsed.value : 0;
   };
 
+  /**
+   * Input-time sanitizer — drops any character the user types that isn't part
+   * of a valid number in the active locale. Without this, typing "abc" would
+   * stick in the textbox (because `raw` stores the user's verbatim keystrokes)
+   * while the parsed numeric value silently becomes 0. Filtering at input gives
+   * immediate visual feedback: rejected chars never appear at all.
+   *
+   * Rules:
+   * - Integer: 0–9 plus a single leading minus.
+   * - Decimal / currency / percent: 0–9, thousand separator, a single decimal
+   *   separator, leading minus. Decimal separator is rejected entirely when
+   *   `prec === 0` (no fractional part allowed), and excess fraction digits
+   *   beyond `prec` are clipped on the fly so users see the limit enforced.
+   */
+  const sanitizeInput = (input: string): string => {
+    let out = "";
+    let seenMinus = false;
+    if (numericKind === "integer") {
+      for (let i = 0; i < input.length; i++) {
+        const c = input[i];
+        if (c >= "0" && c <= "9") out += c;
+        else if (c === "-" && out === "" && !seenMinus) {
+          out += c;
+          seenMinus = true;
+        }
+      }
+      return out;
+    }
+    let seenDecimal = false;
+    const allowDecimal = prec === undefined || prec > 0;
+    for (let i = 0; i < input.length; i++) {
+      const c = input[i];
+      if (c >= "0" && c <= "9") out += c;
+      else if (c === decimalSep && !seenDecimal && allowDecimal) {
+        out += c;
+        seenDecimal = true;
+      } else if (c === thousandSep) out += c;
+      else if (c === "-" && out === "" && !seenMinus) {
+        out += c;
+        seenMinus = true;
+      }
+    }
+    // Clip excess fraction digits to declared precision.
+    if (typeof prec === "number" && prec > 0 && seenDecimal) {
+      const decIdx = out.indexOf(decimalSep);
+      const intPart = out.slice(0, decIdx);
+      const fracPart = out.slice(decIdx + 1);
+      if (fracPart.length > prec) {
+        out = intPart + decimalSep + fracPart.slice(0, prec);
+      }
+    }
+    return out;
+  };
+
   const displayValue = raw !== null ? raw : formatDisplay(value);
 
-  return (
+  // Auto helper-text for currency fields with non-zero precision — surfaces
+  // the decimal limit to the user so the silent truncation in parseRaw
+  // doesn't surprise them. Skipped when prec === 0 (the display format
+  // already shows no decimal separator, no extra explanation needed) or
+  // when caller already supplied a helperText.
+  const autoCurrencyHelper = (() => {
+    if (helperText !== undefined) return undefined;
+    if (numericKind !== "currency" || !currencyCode) return undefined;
+    const p = prec ?? 0;
+    if (p <= 0) return undefined;
+    if (locale === "en") {
+      return `Up to ${p} decimal place${p > 1 ? "s" : ""}`;
+    }
+    return `Maksimal ${p} angka desimal`;
+  })();
+  const effectiveHelperText = helperText ?? autoCurrencyHelper;
+
+  const input = (
     <TextInput
       id={id}
       labelText={labelText}
-      helperText={helperText}
+      helperText={effectiveHelperText}
       value={displayValue}
       onFocus={() => {
         setRaw(value === 0 ? "" : String(value).replace(".", decimalSep));
       }}
       onChange={(e) => {
-        const next = e.target.value;
+        // Filter non-numeric input at the source so the textbox can never
+        // visibly display characters that aren't part of a valid number.
+        // Caret behaviour stays natural because we only ever DROP chars —
+        // never reorder.
+        const next = sanitizeInput(e.target.value);
         setRaw(next);
         onChange(parseRaw(next));
       }}
@@ -232,12 +372,84 @@ function NumericField({
       size={size}
       disabled={disabled}
       inputMode={numericKind === "integer" ? "numeric" : "decimal"}
-      light
       invalid={invalid}
       invalidText={invalidText}
       placeholder={placeholder}
     />
   );
+
+  // Currency chip — rendered to the right of the TextInput, height + Y position
+  // matched to the actual input field. We anchor via `align-items: flex-end` so
+  // the chip bottom sits flush with the input bottom (which is just above the
+  // helper-text / invalid-text row), then offset the chip up past those rows
+  // so its bottom lands on the input bottom edge regardless of whether the
+  // label wraps to two lines. `box-sizing: border-box` keeps height parity
+  // with the Carbon input (which also includes its 1px border in 2rem/2.5rem).
+  if (numericKind === "currency" && currencyCode) {
+    // Resolve locale-aware currency display so the chip matches what view-mode
+    // shows — `Intl.NumberFormat(... style:'currency')` renders IDR as "Rp" in
+    // id-ID and as "IDR" in en-US.
+    const chipText = (() => {
+      try {
+        const parts = new Intl.NumberFormat(nloc, {
+          style: "currency",
+          currency: currencyCode,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).formatToParts(0);
+        const sym = parts.find((p) => p.type === "currency")?.value;
+        return sym && sym.trim() ? sym.trim() : currencyCode;
+      } catch {
+        return currencyCode;
+      }
+    })();
+
+    // Chip height + horizontal min-width follow the same CSS variable that the
+    // form contract uses to size .cds--text-input (1.75rem compact / 2.5rem
+    // comfortable). Fallback covers the rare host that mounts NumericField
+    // outside the .ui7-form-contract scope; map by Carbon `size` so the chip
+    // still matches Carbon's native input height there.
+    const chipHeightFallback = size === "lg" ? "3rem" : size === "md" ? "2.5rem" : "1.75rem";
+    const chipHeight = `var(--ui7-form-control-height, ${chipHeightFallback})`;
+    // `.cds--form-requirement` (invalid) ~1rem + 0.25rem margin; same for
+    // `.cds--form__helper-text`. Offset the chip up by that combined ~1.25rem
+    // so its bottom sits flush with the input bottom regardless of subtext.
+    const subtextRowOffset =
+      invalid && invalidText ? "1.25rem" : effectiveHelperText ? "1.25rem" : "0";
+
+    return (
+      <div style={{ display: "flex", alignItems: "flex-end", gap: "0.5rem" }}>
+        <div style={{ flex: "1 1 auto", minWidth: 0 }}>{input}</div>
+        <span
+          aria-label={`Mata uang: ${chipText}`}
+          title={currencyCode}
+          style={{
+            flex: "0 0 auto",
+            boxSizing: "border-box",
+            marginBlockEnd: subtextRowOffset,
+            height: chipHeight,
+            minWidth: chipHeight,
+            paddingInline: "0.625rem",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            letterSpacing: "0.02em",
+            color: "var(--cds-text-primary, #161616)",
+            background: "var(--cds-layer-accent-01, #e8e8e8)",
+            border: "1px solid var(--cds-border-subtle, #e0e0e0)",
+            whiteSpace: "nowrap",
+            userSelect: "none",
+          }}
+        >
+          {chipText}
+        </span>
+      </div>
+    );
+  }
+
+  return input;
 }
 
 export function SchemaFormRenderer<TData extends Record<string, unknown>>({
@@ -251,12 +463,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
   showSectionHeader = true,
   scopeClassName,
   density = "compact",
+  width,
 }: SchemaFormRendererProps<TData>) {
   const isView = mode === "view";
   const dt = UI7_FORM_DENSITY_TOKENS[density];
   const carbonSize = density === "compact" ? "sm" : "md";
   const rootClassName =
-    scopeClassName ?? getUi7FormContractClassName({ density, readonly: isView });
+    scopeClassName ?? getUi7FormContractClassName({ density, width, readonly: isView });
   const labels = useBosSharedI18n();
   const { locale } = useI18n();
   const renderDisplayValue = makeDisplayRenderer(labels, locale);
@@ -281,7 +494,10 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
             style={{
               padding: "1rem 1.125rem",
               border: "1px solid var(--cds-border-subtle, #e0e0e0)",
-              background: "var(--cds-layer-01, #ffffff)",
+              // Section sits flat on the page background (white) and is set
+              // apart by its border line only — fields carry the contrasting
+              // fill instead (see read-only box + non-light Carbon inputs).
+              background: "var(--cds-background, #ffffff)",
             }}
           >
             {showSectionHeader && (section.title || section.description) ? (
@@ -338,11 +554,98 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   Boolean(field.validation?.required) && !effectiveReadonly;
                 const invalidText = errors?.[field.key];
                 const span = clampSpan(field.span, defaultSpan);
+                // `breakBefore` forces a new row by pinning to column 1.
+                // Without it, CSS grid auto-flow may fit the field on the
+                // current row if remaining columns are enough for `span`.
                 const wrapperStyle = {
-                  gridColumn: `span ${span} / span ${span}`,
+                  gridColumn: field.breakBefore
+                    ? `1 / span ${span}`
+                    : `span ${span} / span ${span}`,
                   minWidth: 0,
                 } as const;
 
+                // ── Detail-rows (master-detail editor) ──────────────────────
+                // Rendered BEFORE the readonly branch so view / edit / create
+                // share the same `<EditableTable>` instance — the table
+                // renders rows even when `readOnly={true}` and just hides
+                // the add/delete affordances. Default span = 12 (full width)
+                // because tables rarely look right in a half-column.
+                if (field.type === "detail-rows") {
+                  const detail = field.detailRows;
+                  if (!detail) return [];
+                  const rows = Array.isArray(rawValue)
+                    ? (rawValue as Record<string, unknown>[])
+                    : [];
+                  const detailSpan = clampSpan(field.span, 12);
+                  const detailWrapperStyle = {
+                    gridColumn: field.breakBefore
+                      ? `1 / span ${detailSpan}`
+                      : `span ${detailSpan} / span ${detailSpan}`,
+                    minWidth: 0,
+                  } as const;
+                  return [
+                    <div
+                      key={key}
+                      className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                      style={detailWrapperStyle}
+                    >
+                      <FieldShell
+                        label={field.label}
+                        required={effectiveRequired}
+                        helperText={field.helperText}
+                      >
+                        <EditableTable
+                          columns={detail.columns}
+                          value={rows}
+                          onChange={(newRows) =>
+                            setValue(
+                              field.key,
+                              (newRows as unknown) as TData[keyof TData],
+                            )
+                          }
+                          newRowFactory={detail.newRowFactory}
+                          maxRows={detail.maxRows}
+                          readOnly={effectiveReadonly}
+                          lockExistingRows={detail.lockExistingRows}
+                          validateRow={detail.validateRow}
+                          lookupCellRenderer={(args) => {
+                            const ct = args.column.columnType;
+                            if (ct.type !== "lookup") return null;
+                            let initialDisplay: string | undefined;
+                            if (ct.initialDisplayFields?.length) {
+                              const sep = ct.initialDisplaySeparator ?? " ";
+                              const parts = ct.initialDisplayFields.map((k) => asString(args.row[k]));
+                              if (parts.every((p) => p !== "")) initialDisplay = parts.join(sep);
+                            }
+                            return (
+                              <LookupInput
+                                id={`et-${String(field.key)}-${args.rowIndex}-${args.column.field}`}
+                                labelText=""
+                                value={args.value}
+                                initialDisplay={initialDisplay}
+                                onChange={() => {}}
+                                onDataSelected={(picked: Record<string, unknown>) => {
+                                  const patch = ct.patch
+                                    ? ct.patch(picked)
+                                    : { [args.column.field]: asString(picked[args.column.field]) };
+                                  args.onPatch(patch);
+                                }}
+                                dataSource="api"
+                                lookupAPI={ct.lookupAPI}
+                                lookupDataStructure={ct.lookupDataStructure as Record<string, T_LookupTblStruct>}
+                                lookupFieldTitles={ct.lookupFieldTitles ?? {}}
+                                displayFieldNames={ct.displayFieldNames ?? []}
+                                popupWidthPx={ct.popupWidthPx}
+                                readOnly={args.readOnly}
+                              />
+                            );
+                          }}
+                        />
+                      </FieldShell>
+                    </div>,
+                  ];
+                }
+
                 // ── View / readonly ─────────────────────────────────────────
                 if (effectiveReadonly) {
                   return [
@@ -351,12 +654,18 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         <div
                           className={`${UI7_FORM_VISUAL_CLASSNAMES.control} ${UI7_FORM_VISUAL_CLASSNAMES.controlReadonly}`}
                           style={{
-                            minHeight: UI7_FORM_VISUAL_TOKENS.controlHeight,
+                            // Match the editable control height for the active
+                            // density (compact = 2rem) so read-only fields line
+                            // up with create/edit inputs instead of being 40px.
+                            minHeight: dt.controlHeight,
                             display: "flex",
                             alignItems: "center",
                             fontSize: UI7_FORM_VISUAL_TOKENS.inputFontSize,
                             lineHeight: UI7_FORM_VISUAL_TOKENS.inputLineHeight,
                             background: "var(--ui7-form-readonly-background, #f4f4f4)",
+                            // No bottom rule for non-editable fields — the gray
+                            // fill alone sets them apart from the white section;
+                            // an input-style underline would imply editability.
                             cursor: "var(--ui7-form-readonly-cursor, default)",
                             width: "100%",
                             padding: "0 0.75rem",
@@ -376,6 +685,18 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                 // ── Lookup ──────────────────────────────────────────────────
                 if (field.type === "lookup") {
                   const lookup = field.lookup;
+                  // Compose initialDisplay from sibling form fields, e.g.
+                  // ["kode_cabang","branch_name"] → "001 KANTOR CABANG …".
+                  // Falls back to undefined if any referenced field is
+                  // empty so LookupInput uses its default (the key value).
+                  let initialDisplay: string | undefined;
+                  if (lookup?.initialDisplayFields?.length) {
+                    const sep = lookup.initialDisplaySeparator ?? " ";
+                    const parts = lookup.initialDisplayFields.map((k) => asString(value[k]));
+                    if (parts.every((p) => p !== "")) {
+                      initialDisplay = parts.join(sep);
+                    }
+                  }
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText} htmlFor={key}>
@@ -383,6 +704,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           id={key}
                           labelText=""
                           value={asString(rawValue)}
+                          initialDisplay={initialDisplay}
                           onChange={(next: string) => setValue(field.key, next as TData[keyof TData])}
                           onDataSelected={(row: Record<string, unknown>) => {
                             if (lookup?.onDataPatch) {
@@ -448,7 +770,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         value={asString(rawValue)}
                         onChange={(e) => setValue(field.key, e.target.value as TData[keyof TData])}
                         disabled={disabled}
-                        light
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                       >
@@ -465,10 +786,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   const numeric = field.numeric;
                   let numericKind: "currency" | "percent" | "integer" | "decimal" = "decimal";
                   let prec: number | undefined;
+                  let currencyCode: string | undefined;
 
                   if (numeric?.kind === "currency") {
                     numericKind = "currency";
                     const code = String(value[numeric.currencyField] ?? "");
+                    currencyCode = code || undefined;
                     prec = getCurrencyPrecision(code, {
                       precisionByCurrency: numeric.precisionByCurrency,
                       defaultPrecision: numeric.defaultPrecision,
@@ -480,20 +803,46 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                     numericKind = "integer";
                   }
 
+                  // Live min/max validation — surfaces invalidText immediately
+                  // as the user types instead of waiting for Save. Falls back
+                  // to the submit-time error from the form host's errors map
+                  // when the value is within bounds (or no bounds declared).
+                  const numericValue = typeof rawValue === "number" ? rawValue : 0;
+                  let liveInvalidText: string | undefined;
+                  const v = field.validation;
+                  if (v?.min !== undefined) {
+                    const minV = Array.isArray(v.min) ? v.min[0] : v.min;
+                    if (numericValue < minV) {
+                      liveInvalidText = Array.isArray(v.min)
+                        ? v.min[1]
+                        : labels.validMin(minV);
+                    }
+                  }
+                  if (!liveInvalidText && v?.max !== undefined) {
+                    const maxV = Array.isArray(v.max) ? v.max[0] : v.max;
+                    if (numericValue > maxV) {
+                      liveInvalidText = Array.isArray(v.max)
+                        ? v.max[1]
+                        : labels.validMax(maxV);
+                    }
+                  }
+                  const effectiveInvalidText = invalidText ?? liveInvalidText;
+
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <NumericField
                         id={key}
                         labelText={mkLabel(field.label, effectiveRequired)}
                         helperText={field.helperText}
-                        value={typeof rawValue === "number" ? rawValue : 0}
+                        value={numericValue}
                         numericKind={numericKind}
                         prec={prec}
+                        currencyCode={currencyCode}
                         locale={locale}
                         size={carbonSize}
                         disabled={disabled}
-                        invalid={Boolean(invalidText)}
-                        invalidText={invalidText}
+                        invalid={Boolean(effectiveInvalidText)}
+                        invalidText={effectiveInvalidText}
                         placeholder={field.placeholder}
                         onChange={(v) => setValue(field.key, v as TData[keyof TData])}
                       />
@@ -520,6 +869,19 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
 
                 // ── Toggle ──────────────────────────────────────────────────
                 if (field.type === "toggle") {
+                  // Optional valueOn/valueOff for non-boolean stored state
+                  // (e.g., "Y"/"N"). When unset, falls back to plain Boolean.
+                  const hasCustomMapping =
+                    field.toggle && field.toggle.valueOn !== undefined;
+                  const toggled = hasCustomMapping
+                    ? rawValue === field.toggle!.valueOn
+                    : Boolean(rawValue);
+                  const onValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOn
+                    : true;
+                  const offValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOff
+                    : false;
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText}>
@@ -529,9 +891,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                             labelText=""
                             labelA={labels.toggleOff}
                             labelB={labels.toggleOn}
-                            toggled={Boolean(rawValue)}
+                            toggled={toggled}
                             onToggle={(checked) =>
-                              setValue(field.key, Boolean(checked) as TData[keyof TData])
+                              setValue(
+                                field.key,
+                                (checked ? onValue : offValue) as TData[keyof TData]
+                              )
                             }
                             disabled={disabled}
                           />
@@ -582,7 +947,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         disabled={disabled}
                         maxLength={field.maxLength}
                         inputMode="tel"
-                        light
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                         placeholder={field.placeholder}
@@ -606,7 +970,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                       disabled={disabled}
                       maxLength={field.maxLength}
                       inputMode={field.inputMode}
-                      light
                       invalid={Boolean(invalidText)}
                       invalidText={invalidText}
                       placeholder={field.placeholder}