@djangocfg/ui-core 2.1.541 → 2.1.543

package/README.md

@@ -51,7 +51,7 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 | Group | Examples |
 |---|---|
 | `components/data/` | Avatar · Badge · Card · Table · BalancedText · Skeleton |
-| `components/forms/` | Button · Input · Textarea · Select · Switch · Checkbox · Slider · Form · DateField · TimeField · DateTimeField |
+| `components/forms/` | Button · Input · Textarea · Select · Switch · Checkbox · Slider · Form · DateField · TimeField · DateTimeField · MoneyField |
 | `components/feedback/` | Alert · Toast · Banner · Progress · Spinner |
 | `components/overlay/` | Dialog · Drawer · Popover · Tooltip · HoverCard · Sheet · ContextMenu · DropdownMenu |
 | `components/navigation/` | Sidebar · Tabs · Breadcrumb · Pagination · NavigationMenu · Command · Disclosure |
@@ -64,6 +64,8 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 Imports stay flat — group folders are organisational. Native-engine date/time
 fields (`DateField` / `TimeField` / `DateTimeField`) have their own reference in
 [`forms/datetime-field/README.md`](src/components/forms/datetime-field/README.md).
+`MoneyField` carries an amount as integer minor units, not a float — see
+[`forms/money-field/README.md`](src/components/forms/money-field/README.md).
 
 ## Hooks (`/hooks`)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.541",
+  "version": "2.1.543",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -119,6 +119,8 @@
   "files": [
     "dist",
     "src",
+    "!src/**/*.stories.tsx",
+    "!src/components/_gallery.tsx",
     "README.md",
     "LICENSE"
   ],
@@ -128,14 +130,14 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.541",
+    "@djangocfg/i18n": "^2.1.543",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": ">=14.0.0",
-    "react": "^19.2.4",
+    "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.69.0",
     "react-router": ">=7",
     "tailwindcss": "^4.1.18",
@@ -151,6 +153,7 @@
     }
   },
   "dependencies": {
+    "@chenglou/pretext": "^0.0.8",
     "@hookform/resolvers": "^5.4.0",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
@@ -202,17 +205,17 @@
     "tailwind-merge": "^3.6.0",
     "vaul": "1.1.2"
   },
-  "optionalDependencies": {
-    "@chenglou/pretext": "^0.0.8"
-  },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.541",
-    "@djangocfg/typescript-config": "^2.1.541",
+    "@djangocfg/eslint-config": "^2.1.543",
+    "@djangocfg/i18n": "^2.1.543",
+    "@djangocfg/typescript-config": "^2.1.543",
+    "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
     "lucide-react": "^0.545.0",
     "next": "^16.2.10",
+    "storybook": "^10.5.0",
     "typescript": "^5.9.3"
   },
   "publishConfig": {

package/src/components/data/BalancedText/hooks/useMaxLinesWidth.ts

@@ -8,32 +8,13 @@
 
 'use client';
 
+import { walkLineRanges } from '@chenglou/pretext';
 import * as React from 'react';
 import type { PreparedTextWithSegments } from '../../../../lib/pretext';
 
-// We replicate the structure of `useBalancedWidth` so that pretext stays an
-// optionalDependency: import the runtime lazily via require, mirror the
-// minimal `walkLineRanges` surface.
-interface WalkLineRange {
-  width: number;
-  start: number;
-  end: number;
-}
-interface PretextWalker {
-  walkLineRanges(
-    prepared: PreparedTextWithSegments,
-    maxWidth: number,
-    visit: (line: WalkLineRange) => void,
-  ): void;
-}
-
-let cached: PretextWalker | null = null;
-function getPretext(): PretextWalker {
-  if (cached) return cached;
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  cached = require('@chenglou/pretext') as PretextWalker;
-  return cached;
-}
+// Imported statically: `@chenglou/pretext` is ESM-only, so the previous lazy
+// `require` resolved in no runtime — under Vite/ESM `require` is not defined
+// and the first render threw `require is not defined`.
 
 export function useMaxLinesWidth(
   prepared: PreparedTextWithSegments | null,
@@ -43,8 +24,6 @@ export function useMaxLinesWidth(
   return React.useMemo(() => {
     if (!prepared || !maxLines || maxLines <= 0 || maxWidth <= 0) return 0;
 
-    const { walkLineRanges } = getPretext();
-
     // Natural line count at maxWidth. If it's already within the cap, defer
     // to `useBalancedWidth` (returning 0 means "don't use my value").
     let naturalCount = 0;

package/src/components/forms/button-download/index.tsx

@@ -63,7 +63,7 @@ export interface DownloadButtonProps extends Omit<ButtonProps, 'onClick'> {
   /**
    * Optional request body for POST requests
    */
-  body?: any
+  body?: unknown
 }
 
 type DownloadStatus = 'idle' | 'downloading' | 'success' | 'error'

package/src/components/forms/datetime-field/date-time-field.tsx

@@ -162,7 +162,7 @@ export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldPro
             // flip the whole popover ABOVE the field when there's no room below.
             // `collisionPadding` just keeps it off the very edge.
             className="w-auto p-0"
-            align="start"
+            align={align}
             collisionPadding={12}
           >
             <Calendar

package/src/components/forms/editable/index.tsx

@@ -41,14 +41,14 @@ export interface EditableRootProps
   children?: React.ReactNode;
 }
 
-export interface EditablePreviewProps extends React.ComponentPropsWithoutRef<"span"> {}
+export type EditablePreviewProps = React.ComponentPropsWithoutRef<"span">;
 
 export interface EditableInputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {
   /** Density — matches the standalone Input's `inputSize`. Default: 'default'. */
   inputSize?: 'default' | 'sm';
 }
 
-export interface EditableTextareaProps extends Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "defaultValue"> {}
+export type EditableTextareaProps = Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "defaultValue">;
 
 // =============================================================================
 // Context
@@ -163,7 +163,11 @@ const Editable = React.forwardRef<HTMLDivElement, EditableRootProps>(
       setEditing(false);
     }, [setValue, onValueCancel, setEditing]);
 
-    const startEditing = React.useCallback(() => {
+    // NOT exposed on the context below — consumers enter edit mode through
+    // `setIsEditing(true)`, which skips this snapshot of `previousValueRef`.
+    // Kept because it documents the intended enter-edit path; wiring it up is a
+    // behaviour change (cancel would then restore the value at edit-start).
+    const _startEditing = React.useCallback(() => {
       if (disabled || readOnly) return;
       previousValueRef.current = resolvedValue;
       setEditing(true);

package/src/components/forms/input-group/index.tsx

@@ -34,8 +34,20 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "h-10 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
+        //
+        // Each side gets its inset from EITHER the addon or the control, never
+        // both and never neither. With an addon the addon supplies the edge
+        // gap and the control only needs to clear it (pl-2); with no addon the
+        // control has to stand in for it (pl-3, matching `Input`'s own px-3).
+        //
+        // The `not-has-` half is load-bearing: `bare` strips the control's
+        // padding, so a group without an addon on a side used to leave its text
+        // flush against the border — visible on any addon-less group, and on a
+        // MoneyField with `showSymbol={false}`.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "not-has-[>[data-align=inline-start]]:[&>input]:pl-3",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "not-has-[>[data-align=inline-end]]:[&>input]:pr-3",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 

package/src/components/forms/mask-input/index.tsx

@@ -237,7 +237,11 @@ const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(
         if (!data) return;
 
         const start = input.selectionStart ?? 0;
-        const end = input.selectionEnd ?? 0;
+        // NOTE: only the selection START is consulted. A non-collapsed
+        // selection (`selectionEnd !== start`) is validated as if the caret sat
+        // at its left edge, so typing over a selection checks the wrong mask
+        // slot. handleKeyDown below does handle `start !== end`; this path does
+        // not. Left as-is — fixing it changes input behaviour.
 
         // Determine which mask position we're at
         let maskPos = 0;
@@ -382,7 +386,7 @@ const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(
           updateValue(newRaw);
         }
       },
-      [maskParts, maskChar, onKeyDown, updateValue]
+      [maskParts, onKeyDown, updateValue]
     );
 
     const computeNextEmptyCaret = React.useCallback(() => {
@@ -424,7 +428,7 @@ const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(
         setIsFocused(false);
         onBlur?.(event);
         if (cleanOnBlur) {
-          const { complete, raw } = applyMask(rawValue, maskParts, maskChar);
+          const { complete } = applyMask(rawValue, maskParts, maskChar);
           if (!complete) {
             updateValue("");
           }

package/src/components/forms/money-field/README.md

@@ -0,0 +1,79 @@
+# MoneyField
+
+An amount input that formats as you type and reports **minor units** — cents,
+not dollars.
+
+```tsx
+const [price, setPrice] = useState(1999);   // $19.99
+
+<MoneyField currency="USD" value={price} onValueChange={setPrice} />
+```
+
+## The value is an integer
+
+`value` and `onValueChange` carry minor units. A field that hands back `19.99`
+hands back a number that does not exist in binary floating point: totals drift
+by a cent, and the bug surfaces in an invoice rather than in a test. `1999` is
+exact.
+
+This matches `@djangocfg/payments`, which moves `MinorUnits` for the same
+reason — a value goes from this field to a charge with no conversion between.
+
+## Entry is till-style
+
+Digits fill from the right: `1` `9` `9` reads $1.99. The caret never has to sit
+"before the decimal point", which is the state that makes most currency inputs
+confusing.
+
+Every keystroke rewrites the whole display, so the caret is restored by **digit
+count, not string offset**. Inserting a thousands separator shifts every
+character after it, and an offset-based restore moves the caret a place — the
+single most common defect in a currency input.
+
+## Separators come from `Intl`
+
+The decimal mark is a comma across most of Europe. Guessing it means `1.234` is
+read as either 1.234 or 1234 depending on the user, with nothing on screen to
+say which happened. Pass `locale` to pin it; otherwise the runtime's is used.
+
+## Zero-decimal currencies
+
+¥500 is five hundred yen, not five. `currencyFractionDigits()` and
+`minorUnitFactor()` are exported for callers that need the same rule:
+
+```ts
+minorUnitFactor('USD')          // 100
+minorUnitFactor('JPY')          // 1
+currencyFractionDigits('JPY')   // 0
+```
+
+The zero-decimal list mirrors `@djangocfg/payments`' `domain/money.ts`. It is
+duplicated rather than imported because `ui-core` sits **below** `payments` in
+the dependency direction and may not depend on it.
+
+## Props
+
+| Prop | Type | Notes |
+|---|---|---|
+| `value` | `number` | Amount in minor units (controlled). |
+| `defaultValue` | `number` | Uncontrolled initial amount, minor units. |
+| `onValueChange` | `(minorUnits: number) => void` | |
+| `currency` | `string` | ISO 4217. Drives symbol, decimals, minor-unit factor. Default `USD`. |
+| `locale` | `string` | BCP 47. Defaults to the runtime's. |
+| `showSymbol` | `boolean` | Default `true`. Set false when the label carries the unit. |
+| `max` | `number` | Minor units. Entry beyond it is ignored, not clamped after the fact. |
+| `groupClassName` | `string` | Applied to the group, to size the whole control. |
+
+## Accessibility
+
+The currency symbol is `aria-hidden` — a screen reader announcing "dollar sign"
+on entry is noise. The accessible name has to come from a label you associate
+yourself:
+
+```tsx
+<label htmlFor={id}>Price</label>
+<MoneyField id={id} … />
+```
+
+Text is left-aligned so it hugs the symbol. Right alignment belongs to a column
+of amounts in a table; pass `className="text-right"` there.

package/src/components/forms/money-field/index.tsx

@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../input-group';
+
+// =============================================================================
+// Money model
+// =============================================================================
+
+/**
+ * Currencies with no minor unit — ¥500 is five hundred yen, not five yen.
+ *
+ * Formatting one of these with two decimals inflates every amount by 100×,
+ * which reads as a plausible price rather than as an error. The list mirrors
+ * `@djangocfg/payments`' `domain/money.ts`; it is duplicated rather than
+ * imported because `ui-core` sits BELOW `payments` and may not depend on it.
+ */
+const ZERO_DECIMAL_CURRENCIES = new Set([
+  'BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA',
+  'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF',
+]);
+
+/** Minor units per major unit for a currency — 100 for USD, 1 for JPY. */
+export function minorUnitFactor(currency: string): number {
+  return ZERO_DECIMAL_CURRENCIES.has(currency.toUpperCase()) ? 1 : 100;
+}
+
+/** Digits after the decimal separator for a currency. */
+export function currencyFractionDigits(currency: string): number {
+  return ZERO_DECIMAL_CURRENCIES.has(currency.toUpperCase()) ? 0 : 2;
+}
+
+// =============================================================================
+// Locale probing
+// =============================================================================
+
+// A `localeParts()` helper used to probe the group/decimal separators by hand.
+// It is gone: nothing parses separators any more. Input is digits-only
+// (`parseToMinor`) and output goes straight through `Intl.NumberFormat`
+// (`formatMinor`), so the locale's separators never have to be named.
+
+/** The currency's symbol in this locale, e.g. "$", "€", "¥". */
+function currencySymbol(currency: string, locale: string | undefined): string {
+  try {
+    const parts = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).formatToParts(0);
+    return parts.find((p) => p.type === 'currency')?.value ?? currency.toUpperCase();
+  } catch {
+    // Unknown code — show it as-is rather than throwing inside a render.
+    return currency.toUpperCase();
+  }
+}
+
+// =============================================================================
+// Format / parse
+// =============================================================================
+
+/** Format minor units for display, grouped and with the locale's separators. */
+function formatMinor(minor: number, currency: string, locale: string | undefined): string {
+  const digits = currencyFractionDigits(currency);
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+    useGrouping: true,
+  }).format(minor / minorUnitFactor(currency));
+}
+
+/**
+ * Read minor units out of whatever the user typed.
+ *
+ * Digits-only, right-anchored: the last `fractionDigits` digits are the minor
+ * part. Typing "5" in USD means $0.05, "550" means $5.50 — the till-style
+ * entry people expect from a money field, and the reason the caret never has
+ * to sit "before the decimal point".
+ */
+function parseToMinor(raw: string, _currency: string): number {
+  const digits = raw.replace(/\D/g, '');
+  if (!digits) return 0;
+  // Number, not parseInt: 16 digits of cents is past MAX_SAFE_INTEGER, and
+  // silently truncating someone's amount is worse than clamping it.
+  const value = Number(digits);
+  return Number.isFinite(value) ? value : 0;
+}
+
+/** Count digits in `text` up to `index` — the caret anchor that survives regrouping. */
+function digitsBefore(text: string, index: number): number {
+  let n = 0;
+  for (let i = 0; i < index && i < text.length; i += 1) {
+    if (text[i] !== undefined && /\d/.test(text[i] as string)) n += 1;
+  }
+  return n;
+}
+
+/** Inverse of `digitsBefore`: the offset just after the nth digit. */
+function offsetAfterDigits(text: string, digitCount: number): number {
+  if (digitCount <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] !== undefined && /\d/.test(text[i] as string)) {
+      seen += 1;
+      if (seen === digitCount) return i + 1;
+    }
+  }
+  return text.length;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export interface MoneyFieldProps
+  extends Omit<
+    React.ComponentProps<'input'>,
+    'value' | 'defaultValue' | 'onChange' | 'prefix' | 'type'
+  > {
+  /**
+   * Amount in MINOR UNITS — cents, not dollars.
+   *
+   * Money never crosses a boundary as a float here. `19.99` is not
+   * representable in binary floating point, so a column of them drifts; `1999`
+   * is exact. This matches `@djangocfg/payments`, which moves `MinorUnits`
+   * for the same reason, so a value goes from this field to a charge with no
+   * conversion in between.
+   */
+  value?: number;
+  /** Uncontrolled initial amount, also in minor units. */
+  defaultValue?: number;
+  /** Called with the new amount in minor units. */
+  onValueChange?: (minorUnits: number) => void;
+  /** ISO 4217 code — drives the symbol, the decimals and the minor-unit factor. */
+  currency?: string;
+  /** BCP 47 tag for separators and symbol placement. Defaults to the runtime's. */
+  locale?: string;
+  /** Show the currency symbol before the input. Set false when the label carries it. */
+  showSymbol?: boolean;
+  /** Largest accepted amount, in minor units. Entry beyond it is ignored. */
+  max?: number;
+  /** Applied to the group, so callers can size the whole control. */
+  groupClassName?: string;
+}
+
+/**
+ * An amount input that formats as you type and reports MINOR UNITS.
+ *
+ * ```tsx
+ * const [price, setPrice] = React.useState(1999);   // $19.99
+ * <MoneyField currency="USD" value={price} onValueChange={setPrice} />
+ * ```
+ *
+ * Three decisions worth knowing, because each is a common way this component
+ * is got wrong:
+ *
+ * **The value is an integer.** A money field that hands back `19.99` hands
+ * back a number that does not exist in binary floating point. Totals drift by
+ * a cent, and the bug surfaces in an invoice rather than in a test.
+ *
+ * **Entry is till-style and right-anchored.** Every keystroke rewrites the
+ * whole display, so digits fill from the right: "1", "19", "199" → $1.99. The
+ * caret is then restored by DIGIT COUNT, not by string offset — inserting a
+ * thousands separator shifts every character after it, and an offset-based
+ * restore is exactly why so many currency inputs jump the cursor when a
+ * number crosses 1,000.
+ *
+ * **Separators come from `Intl`, not from a constant.** The decimal mark is a
+ * comma across most of Europe. Guessing it means "1.234" is read as either
+ * 1.234 or 1234 depending on where the user is, with nothing on screen to say
+ * which happened.
+ */
+const MoneyField = React.forwardRef<HTMLInputElement, MoneyFieldProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      currency = 'USD',
+      locale,
+      showSymbol = true,
+      max,
+      className,
+      groupClassName,
+      onBlur,
+      disabled,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);
+
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
+    const minor = isControlled ? value : internal;
+
+    const display = React.useMemo(
+      () => formatMinor(minor, currency, locale),
+      [minor, currency, locale],
+    );
+    const symbol = React.useMemo(
+      () => currencySymbol(currency, locale),
+      [currency, locale],
+    );
+
+    // A controlled input commits the caret to end-of-string on every rewrite,
+    // so the position is recorded here during the change and applied after the
+    // render lands. Same shape as `MaskInput`, for the same reason.
+    const pendingCaretRef = React.useRef<number | null>(null);
+
+    React.useLayoutEffect(() => {
+      const pos = pendingCaretRef.current;
+      if (pos == null) return;
+      pendingCaretRef.current = null;
+      inputRef.current?.setSelectionRange(pos, pos);
+    });
+
+    const commit = React.useCallback(
+      (next: number) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const el = event.target;
+        const typed = el.value;
+        const caret = el.selectionStart ?? typed.length;
+
+        let next = parseToMinor(typed, currency);
+        if (max !== undefined && next > max) next = max;
+
+        // Anchor on digits to the LEFT of the caret, which regrouping cannot
+        // move. Deleting a separator deletes nothing, so step past it and take
+        // the digit instead — otherwise Backspace on "1,234" appears to do
+        // nothing at all.
+        let digitsLeft = digitsBefore(typed, caret);
+        const deletedSeparator =
+          typed.length < display.length && digitsLeft === digitsBefore(display, caret + 1);
+        if (deletedSeparator && digitsLeft > 0) digitsLeft -= 1;
+
+        const nextDisplay = formatMinor(next, currency, locale);
+        pendingCaretRef.current = offsetAfterDigits(nextDisplay, digitsLeft);
+
+        commit(next);
+      },
+      [commit, currency, display, locale, max],
+    );
+
+    return (
+      <InputGroup className={groupClassName} data-disabled={disabled ? '' : undefined}>
+        {showSymbol ? (
+          // aria-hidden: the accessible name belongs on the field's label.
+          // A screen reader announcing "dollar sign" on entry is noise; a
+          // label reading "Price in US dollars" is what actually helps.
+          <InputGroupAddon align="inline-start" aria-hidden="true">
+            {symbol}
+          </InputGroupAddon>
+        ) : null}
+        <InputGroupInput
+          ref={inputRef}
+          // `inputMode` rather than `type="number"`: a number input rejects
+          // the grouped string this component displays, and its spinner is
+          // meaningless for an amount. This still opens a numeric keypad.
+          inputMode="decimal"
+          autoComplete="off"
+          value={display}
+          onChange={handleChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          // Left-aligned, hugging the symbol. `text-right` looks correct in a
+          // column of amounts and wrong in a single field: `flex-1` stretches
+          // the control to the group's full width, so the symbol sits at one
+          // edge and the number at the other with a gap between them. Right
+          // alignment belongs to a table cell, which can set it via `className`.
+          className={cn('tabular-nums', className)}
+          {...props}
+        />
+      </InputGroup>
+    );
+  },
+);
+MoneyField.displayName = 'MoneyField';
+
+export { MoneyField };

package/src/components/forms/otp/use-otp-input.ts

@@ -30,7 +30,7 @@ function cleanInput(
   if (!input) return ''
 
   // Remove all whitespace and convert to uppercase for consistency
-  let cleaned = input.replace(/\s+/g, '').trim()
+  const cleaned = input.replace(/\s+/g, '').trim()
 
   if (validationMode === 'custom' && customValidator) {
     // For custom validation, filter character by character