@cdx-ui/components 0.0.1-beta.75 → 0.0.1-beta.77

package/src/components/CurrencyInput/index.tsx

@@ -0,0 +1,192 @@
+import { forwardRef, useState } from 'react';
+import { type TextInput, type TextInputProps, type ViewProps } from 'react-native';
+import {
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  dataAttributes,
+  type IInputFieldProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  type CurrencyInputVariantProps,
+  currencyInputFieldVariants,
+  currencyInputRootVariants,
+} from './styles';
+
+// Hoisted at module scope — Intl instantiation is expensive (parses locale data).
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+// Cap the accumulated cents to 15 digits so the integer stays below
+// Number.MAX_SAFE_INTEGER (16 digits). Past that, parsing loses precision and the
+// amount garbles or resets — 15 digits already allows up to $9,999,999,999,999.99.
+const MAX_DIGITS = 15;
+
+function centsToAmountDisplay(cents: number): string {
+  return currencyFormatter.format(cents / 100);
+}
+
+function valueToCents(value: number | undefined | null): number {
+  return Math.round((value ?? 0) * 100);
+}
+
+export interface CurrencyInputProps
+  extends
+    IInputFieldProps,
+    CurrencyInputVariantProps,
+    Pick<
+      TextInputProps,
+      'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur'
+    > {
+  /** Current numeric value. Renders formatted zero when undefined or null. */
+  value?: number;
+  /** Called with the parsed number when the user changes the amount. */
+  onChangeValue?: (value: number) => void;
+  /** Currency symbol rendered as an inline prefix. Defaults to `"$"`. */
+  currencySymbol?: string;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
+  (
+    {
+      value,
+      onChangeValue,
+      currencySymbol = '$',
+      size = 'default',
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isFocused,
+      isHovered,
+      isFullWidth,
+      className,
+      style,
+      accessibilityLabel,
+      accessibilityHint,
+      testID,
+      onFocus,
+      onBlur,
+    },
+    ref,
+  ) => {
+    // null = display mode; number = active editing cents.
+    // Calculator-style cents accumulation: digits are always extracted from whatever
+    // the user types, interpreted as integer cents, then reformatted. The caret is
+    // kept at the end at all times so entry behaves like a banking amount pad — new
+    // digits append, backspace removes the rightmost digit.
+    const [editingCents, setEditingCents] = useState<number | null>(null);
+
+    // Controlled caret, pinned to the end of the formatted string. `undefined` in
+    // display mode so we never fight the platform when the field is not being edited.
+    const [selection, setSelection] = useState<{ start: number; end: number }>();
+
+    type FocusHandler = NonNullable<TextInputProps['onFocus']>;
+    type BlurHandler = NonNullable<TextInputProps['onBlur']>;
+    type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
+
+    const displayCents = editingCents !== null ? editingCents : valueToCents(value);
+    const amountDisplay = centsToAmountDisplay(displayCents);
+    const fullDisplay = `${currencySymbol}${amountDisplay}`;
+    const isEmpty = displayCents === 0;
+
+    // Index just past the last character of the formatted string for a given cents.
+    // Computed from `cents` (not the render-closure `fullDisplay`) so the caret is
+    // correct in the same commit as a value change, even when a reformat adds or
+    // removes a grouping comma (e.g. 444.44 → 3,444.44) and changes the length.
+    const caretIndexFor = (cents: number) =>
+      `${currencySymbol}${centsToAmountDisplay(cents)}`.length;
+
+    const pinCaret = (end: number) => setSelection({ start: end, end });
+
+    const handleFocus: FocusHandler = (e) => {
+      // Initialise from the current value so existing amounts are preserved on focus.
+      const cents = valueToCents(value);
+      setEditingCents(cents);
+      pinCaret(caretIndexFor(cents));
+      onFocus?.(e);
+    };
+
+    const handleBlur: BlurHandler = (e) => {
+      setEditingCents(null);
+      setSelection(undefined);
+      onBlur?.(e);
+    };
+
+    const handleChangeText = (text: string) => {
+      // Extract only digit characters, interpret the resulting integer as cents.
+      // e.g. user typing '1' after '0.00' → digits '0001' → 1 cent → 0.01
+      // Backspace on '1.23' → '1.2' → digits '12' → 12 cents → 0.12
+      // Digits past the cap are dropped, so extra keystrokes are ignored rather
+      // than overflowing into an unsafe integer.
+      const digits = text.replace(/\D/g, '').slice(0, MAX_DIGITS);
+      const cents = parseInt(digits || '0', 10);
+      setEditingCents(cents);
+      pinCaret(caretIndexFor(cents));
+      onChangeValue?.(cents / 100);
+    };
+
+    const handleSelectionChange: SelectionChangeHandler = (e) => {
+      // Re-pin the caret to the end ONLY when it drifts to the LEFT of the end while
+      // editing — e.g. web hardware-keyboard arrow keys or a click/tap into the middle
+      // (native decimal-pad keyboards have no arrow keys, so those platforms rarely
+      // trigger this). Value-driven changes already pin the caret via
+      // `handleChangeText`/`handleFocus`.
+      //
+      // Crucially we do NOT touch the caret when it sits at or past the last-rendered
+      // end. While typing, the native caret momentarily lands one past our last render
+      // (the new value hasn't committed yet); re-pinning there would tug it back to the
+      // stale, one-shorter end and yank it one position left — the classic controlled-
+      // selection race. Ignoring forward positions sidesteps that entirely, and also
+      // prevents a feedback loop (the pin re-emits a selectionChange already at the end).
+      if (editingCents === null) {
+        return;
+      }
+      const end = fullDisplay.length;
+      const { selection: current } = e.nativeEvent;
+      if (current.end < end) {
+        pinCaret(end);
+      }
+    };
+
+    return (
+      <InputRootPrimitive
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        isFocused={isFocused}
+        isHovered={isHovered}
+        isFullWidth={isFullWidth}
+        className={cn(currencyInputRootVariants({ size }), className)}
+        style={style}
+        {...dataAttributes({ slot: 'currency-input' })}
+      >
+        <InputFieldPrimitive
+          ref={ref}
+          value={fullDisplay}
+          selection={selection}
+          onChangeText={handleChangeText}
+          onSelectionChange={handleSelectionChange}
+          keyboardType="decimal-pad"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityValue={{ text: fullDisplay }}
+          testID={testID}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={cn(
+            currencyInputFieldVariants({ size }),
+            isEmpty ? 'text-content-tertiary' : 'text-content-primary',
+          )}
+        />
+      </InputRootPrimitive>
+    );
+  },
+);
+
+CurrencyInput.displayName = 'CurrencyInput';

package/src/components/CurrencyInput/styles.ts

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR } from '../../styles/primitives';
+
+export const currencyInputRootVariants = cva(
+  [
+    'w-full items-center justify-center',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'data-[readonly=true]:cursor-default',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'py-1',
+        small: 'py-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const currencyInputFieldVariants = cva(
+  [
+    'w-full bg-transparent p-0 text-center',
+    'placeholder:text-content-tertiary',
+    'web:outline-none',
+    'data-[invalid=true]:text-content-danger',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'heading-xl',
+        small: 'heading-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export type CurrencyInputVariantProps = VariantProps<typeof currencyInputRootVariants>;

package/src/components/Link/styles.ts

@@ -46,7 +46,7 @@ export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb
 });
 
 export const linkIconVariants = cva(
-  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  ['size-4', Platform.select({ web: 'text-current', default: 'text-content-link' })],
   {
     variants: {
       visited: {

package/src/components/Select/styles.ts

@@ -19,10 +19,8 @@ export const selectTriggerVariants = cva(
     'web:hover:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
     'data-[focus=true]:border-[length:var(--border-width-focused)]',
     'data-[focus=true]:data-[invalid=false]:border-stroke-action',
-    'data-[focus=true]:data-[invalid=true]:border-stroke-danger',
     'data-[state=open]:border-[length:var(--border-width-focused)]',
     'data-[state=open]:data-[invalid=false]:border-stroke-action',
-    'data-[state=open]:data-[invalid=true]:border-stroke-danger',
     'data-[invalid=true]:border-stroke-danger',
   ],
   {

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CurrencyInput';
 export * from './Dialog';
 export * from './Divider';
 export * from './Field';

package/src/metro/withForgeMetroConfig.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type { MetroConfig } from 'metro-config';
 import { withUniwindConfig } from 'uniwind/metro';
 
@@ -22,8 +23,60 @@ export function withForgeMetroConfig<T extends MetroConfig>(
   config: T,
   options: ForgeMetroConfigOptions,
 ): T {
-  return withUniwindConfig(config, {
+  const withUniwind = withUniwindConfig(config, {
     cssEntryFile: options.cssEntryFile,
     dtsFile: options.generatedTypesFile,
   }) as T;
+
+  return withUniwindMultiCopyFix(withUniwind);
+}
+
+/**
+ * Fixes Uniwind 1.9's nativeResolver in pnpm monorepos with multiple Uniwind copies.
+ *
+ * Uniwind decides whether to wrap a `react-native` import by comparing
+ * `originModulePath` against a cached internal base path resolved via
+ * `require.resolve('uniwind/package.json')`. In pnpm, the Metro config loaded
+ * by Node and the Uniwind copy bundled for the app may resolve to different
+ * physical paths (different peer-dep hashes in the virtual store), so the
+ * `isInternal` check returns false for Uniwind-internal code. The
+ * nativeResolver then re-routes `react-native` to `uniwind/components`, which
+ * re-exports from `react-native` — a circular `get NativeModules` getter that
+ * overflows the stack at runtime.
+ *
+ * Fix: intercept `react-native` requests originating from inside any Uniwind
+ * copy and resolve them from the app's `projectRoot`, bypassing the broken
+ * `isInternal` check entirely.
+ */
+function withUniwindMultiCopyFix<T extends MetroConfig>(config: T): T {
+  const resolver = config.resolver;
+  if (!resolver) return config;
+
+  const innerResolveRequest = resolver.resolveRequest;
+  const uniwindPathFragment = `${path.sep}node_modules${path.sep}uniwind${path.sep}`;
+  const projectRoot = config.projectRoot;
+  const appOriginModulePath = projectRoot ? path.join(projectRoot, 'package.json') : undefined;
+
+  return {
+    ...config,
+    resolver: {
+      ...resolver,
+      resolveRequest: (context, moduleName, platform) => {
+        const fromUniwind = context.originModulePath?.includes(uniwindPathFragment) ?? false;
+        if (
+          fromUniwind &&
+          (moduleName === 'react-native' || moduleName.startsWith('react-native/'))
+        ) {
+          const rewrittenContext = appOriginModulePath
+            ? { ...context, originModulePath: appOriginModulePath }
+            : context;
+          return context.resolveRequest(rewrittenContext, moduleName, platform);
+        }
+        if (innerResolveRequest) {
+          return innerResolveRequest(context, moduleName, platform);
+        }
+        return context.resolveRequest(context, moduleName, platform);
+      },
+    },
+  } as T;
 }

package/src/styles.css

@@ -1,6 +1 @@
 @source './**/*.{ts,tsx}';
-
-/* TODO: Can we keep this? Check with Michael/Jack */
-*:focus {
-  outline: none;
-}