@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

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 '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+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/DateField/index.tsx

@@ -0,0 +1,196 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  DateFieldInput as DateFieldInputPrimitive,
+  DateFieldRoot as DateFieldRootPrimitive,
+  DateFieldSegment as DateFieldSegmentPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type DateFieldRootProps as DateFieldRootPrimitiveProps,
+  type DateFieldSegmentProps as DateFieldSegmentPrimitiveProps,
+} from '@cdx-ui/primitives';
+import type { DateComponentLabels } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import {
+  dateFieldGroupVariants,
+  dateFieldInputVariants,
+  dateFieldRootVariants,
+  dateFieldSegmentVariants,
+  dateFieldSuffixVariants,
+  type DateFieldGroupVariantProps,
+} from './styles';
+
+const SCOPE = 'DATE_FIELD';
+
+type DateFieldStyleContext = DateFieldGroupVariantProps & {
+  fullWidth?: boolean;
+};
+
+const useDateFieldStyleContext = (): DateFieldStyleContext =>
+  (useParentContext()[SCOPE] as DateFieldStyleContext | undefined) ?? {};
+
+export interface DateFieldProps extends DateFieldRootPrimitiveProps, DateFieldGroupVariantProps {
+  className?: string;
+  /** When true (the default), the group stretches to fill its container; when false, it hugs the segments. */
+  fullWidth?: boolean;
+  labels?: Partial<DateComponentLabels>;
+}
+
+const DateFieldRoot = forwardRef<View, DateFieldProps>(
+  (
+    {
+      mode = 'date',
+      locale = 'en-US',
+      labels,
+      variant = 'outline',
+      size = 'default',
+      fullWidth,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, fullWidth } }),
+      [parent, variant, size, fullWidth],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DateFieldRootPrimitive
+          ref={ref}
+          mode={mode}
+          locale={locale}
+          labels={labels}
+          className={cn(dateFieldRootVariants(), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field' }))}
+        >
+          {children}
+        </DateFieldRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateFieldRoot.displayName = 'DateField';
+
+export interface DateFieldGroupProps extends ViewProps, DateFieldGroupVariantProps {
+  className?: string;
+  children?: ReactNode;
+  fullWidth?: boolean;
+}
+
+const DateFieldGroup = forwardRef<View, DateFieldGroupProps>(
+  ({ variant, size, fullWidth, className, children, style, ...props }, ref) => {
+    const inherited = useDateFieldStyleContext();
+    const resolvedVariant = variant ?? inherited.variant ?? 'outline';
+    const resolvedSize = size ?? inherited.size ?? 'default';
+    const resolvedFullWidth = fullWidth ?? inherited.fullWidth ?? true;
+    const computedClassName = cn(
+      dateFieldGroupVariants({ variant: resolvedVariant, size: resolvedSize }),
+      !resolvedFullWidth && 'w-auto self-start',
+      className,
+    );
+
+    return (
+      <InputRootPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </InputRootPrimitive>
+    );
+  },
+);
+
+DateFieldGroup.displayName = 'DateField.Group';
+
+export interface DateFieldInputProps extends Omit<ViewProps, 'children'> {
+  children?: (segment: DateFieldSegmentPrimitiveProps['segment']) => ReactNode;
+  slot?: 'start' | 'end';
+  className?: string;
+}
+
+export interface DateFieldSegmentProps extends DateFieldSegmentPrimitiveProps {
+  className?: string;
+}
+
+const DateFieldSegment = forwardRef<View, DateFieldSegmentProps>(
+  ({ segment, className, style, ...props }, ref) => (
+    <DateFieldSegmentPrimitive
+      ref={ref}
+      segment={segment}
+      className={cn(dateFieldSegmentVariants({ literal: !segment.isEditable }), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field-segment' }))}
+    />
+  ),
+);
+
+DateFieldSegment.displayName = 'DateField.Segment';
+
+const renderDefaultDateFieldSegment = (segment: DateFieldSegmentPrimitiveProps['segment']) => (
+  <DateFieldSegment segment={segment} />
+);
+
+const DateFieldInput = forwardRef<View, DateFieldInputProps>(
+  ({ children = renderDefaultDateFieldSegment, className, style, ...props }, ref) => {
+    const { size } = useDateFieldStyleContext();
+    return (
+      <DateFieldInputPrimitive
+        ref={ref}
+        className={cn(dateFieldInputVariants({ size: size ?? 'default' }), className)}
+        style={style}
+        {...props}
+      >
+        {children}
+      </DateFieldInputPrimitive>
+    );
+  },
+);
+
+DateFieldInput.displayName = 'DateField.Input';
+
+export interface DateFieldSuffixProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DateFieldSuffix = forwardRef<View, DateFieldSuffixProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(dateFieldSuffixVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field-suffix' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DateFieldSuffix.displayName = 'DateField.Suffix';
+
+type DateFieldCompound = typeof DateFieldRoot & {
+  Group: typeof DateFieldGroup;
+  Input: typeof DateFieldInput;
+  Segment: typeof DateFieldSegment;
+  Suffix: typeof DateFieldSuffix;
+};
+
+export const DateField = Object.assign(DateFieldRoot, {
+  Group: DateFieldGroup,
+  Input: DateFieldInput,
+  Segment: DateFieldSegment,
+  Suffix: DateFieldSuffix,
+}) as DateFieldCompound;

package/src/components/DateField/styles.ts

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { inputRootVariants, inputSlotVariants } from '../Input/styles';
+
+export const dateFieldRootVariants = cva('gap-1.5');
+
+export const dateFieldGroupVariants = inputRootVariants;
+
+export const dateFieldInputVariants = cva(
+  [
+    'flex-1 min-w-0 flex-row flex-wrap items-center gap-px bg-transparent p-0',
+    'text-content-primary',
+    'web:outline-none',
+    'tracking-normal',
+    'tabular-nums',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const dateFieldSegmentVariants = cva(
+  [
+    'body-md shrink-0 rounded-[var(--border-radius-default)] px-0.5 text-end tabular-nums',
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[focus=true]:bg-surface-action-subtle data-[focus=true]:text-content-primary',
+  ],
+  {
+    variants: {
+      literal: {
+        true: 'text-content-secondary px-0',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      literal: false,
+    },
+  },
+);
+
+export const dateFieldSuffixVariants = inputSlotVariants;
+
+export type DateFieldGroupVariantProps = VariantProps<typeof dateFieldGroupVariants>;

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,187 @@
+import { forwardRef, useCallback, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { CalendarToday } from '@cdx-ui/icons';
+import type { DateId } from '@cdx-ui/formatters';
+import {
+  dataAttributes,
+  DatePickerContext,
+  DatePickerRoot as DatePickerRootPrimitive,
+  mergeDataAttributes,
+  useDatePickerContext,
+  type DatePickerRootProps as DatePickerRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { Calendar, type CalendarProps } from '../Calendar';
+import { PickerTrigger, type PickerTriggerProps } from '../picker/PickerTrigger';
+import {
+  PickerBottomSheetSurface,
+  PickerDialogSurface,
+  PickerPopoverSurface,
+} from '../picker/surfaces';
+
+export interface DatePickerProps extends DatePickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+
+const DatePickerRoot = forwardRef<View, DatePickerProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [DATE_FIELD_SCOPE]: { variant: 'outline', size: 'default', fullWidth: true },
+      }),
+      [parent],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DatePickerRootPrimitive
+          ref={ref}
+          className={cn('gap-2', className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-picker' }))}
+        >
+          {children}
+        </DatePickerRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DatePickerRoot.displayName = 'DatePicker';
+
+type DatePickerTriggerProps = Omit<
+  PickerTriggerProps,
+  'open' | 'setOpen' | 'disabled' | 'triggerRef' | 'accessibilityLabel'
+> & {
+  accessibilityLabel?: string;
+};
+
+const DatePickerTrigger = forwardRef<View, DatePickerTriggerProps>(
+  ({ accessibilityLabel, ...props }, ref) => {
+    const { open, setOpen, disabled, triggerRef, labels } = useDatePickerContext();
+    return (
+      <PickerTrigger
+        ref={ref}
+        open={open}
+        setOpen={setOpen}
+        disabled={disabled}
+        triggerRef={triggerRef}
+        accessibilityLabel={accessibilityLabel ?? labels.openDatePicker}
+        {...props}
+      />
+    );
+  },
+);
+
+DatePickerTrigger.displayName = 'DatePicker.Trigger';
+
+const DatePickerTriggerIndicator = () => (
+  <Icon as={CalendarToday} className="text-content-secondary" />
+);
+
+DatePickerTriggerIndicator.displayName = 'DatePicker.TriggerIndicator';
+
+type DatePickerCalendarProps = Omit<
+  CalendarProps,
+  'value' | 'onValueChange' | 'minValue' | 'maxValue'
+>;
+
+const DatePickerCalendar = forwardRef<View, DatePickerCalendarProps>(({ ...props }, ref) => {
+  const { value, onValueChange, open, setOpen, minValue, maxValue, locale, labels } =
+    useDatePickerContext();
+
+  const handleValueChange = useCallback(
+    (next: DateId | undefined) => {
+      onValueChange?.(next);
+      if (open) {
+        setOpen(false);
+      }
+    },
+    [onValueChange, open, setOpen],
+  );
+
+  return (
+    <Calendar
+      ref={ref}
+      value={value}
+      onValueChange={handleValueChange}
+      minValue={minValue}
+      maxValue={maxValue}
+      locale={locale}
+      labels={labels}
+      {...props}
+    />
+  );
+});
+
+DatePickerCalendar.displayName = 'DatePicker.Calendar';
+
+function DatePickerDialog({ children }: { children: ReactNode }) {
+  const ctx = useDatePickerContext();
+  return (
+    <PickerDialogSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <Dialog.Popup className="p-4">
+        <DatePickerContext.Provider value={ctx}>{children}</DatePickerContext.Provider>
+      </Dialog.Popup>
+    </PickerDialogSurface>
+  );
+}
+
+function DatePickerBottomSheet({ children }: { children: ReactNode }) {
+  const ctx = useDatePickerContext();
+  return (
+    <PickerBottomSheetSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <DatePickerContext.Provider value={ctx}>{children}</DatePickerContext.Provider>
+    </PickerBottomSheetSurface>
+  );
+}
+
+function DatePickerPopover({ children, className }: { children: ReactNode; className?: string }) {
+  const ctx = useDatePickerContext();
+  return (
+    <PickerPopoverSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+      anchorRef={ctx.anchorRef}
+      triggerRef={ctx.triggerRef}
+      className={className}
+    >
+      <DatePickerContext.Provider value={ctx}>{children}</DatePickerContext.Provider>
+    </PickerPopoverSurface>
+  );
+}
+
+type DatePickerCompound = typeof DatePickerRoot & {
+  Trigger: typeof DatePickerTrigger;
+  TriggerIndicator: typeof DatePickerTriggerIndicator;
+  Calendar: typeof DatePickerCalendar;
+  Popover: typeof DatePickerPopover;
+  Dialog: typeof DatePickerDialog;
+  BottomSheet: typeof DatePickerBottomSheet;
+};
+
+export const DatePicker = Object.assign(DatePickerRoot, {
+  Trigger: DatePickerTrigger,
+  TriggerIndicator: DatePickerTriggerIndicator,
+  Calendar: DatePickerCalendar,
+  Popover: DatePickerPopover,
+  Dialog: DatePickerDialog,
+  BottomSheet: DatePickerBottomSheet,
+}) as DatePickerCompound;