vibefast-cli 0.2.3 → 0.3.0

package/2/apps/native/src/components/ui/core/inputs/input-otp.tsx

@@ -0,0 +1,304 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  type NativeSyntheticEvent,
+  Pressable,
+  TextInput,
+  type TextInputKeyPressEventData,
+  type TextInputProps,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+// @ts-expect-error colors is a JS CommonJS export without types
+import colors, { muted } from '@/components/ui/colors';
+import { Text } from '@/components/ui/core/text';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const FONT_SIZE = 17;
+const CORNERS = 999;
+
+export interface InputOTPProps
+  extends Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> {
+  /** Number of OTP digits */
+  length?: number;
+  /** Current OTP value */
+  value?: string;
+  /** Called when OTP value changes */
+  onChangeText?: (value: string) => void;
+  /** Called when OTP is complete */
+  onComplete?: (value: string) => void;
+  /** Error message to display */
+  error?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  containerStyle?: ViewStyle;
+  /** Individual slot style */
+  slotStyle?: ViewStyle;
+  /** Error style */
+  errorStyle?: TextStyle;
+  /** Whether to mask the input (show dots instead of numbers) */
+  masked?: boolean;
+  /** Separator component between slots */
+  separator?: React.ReactNode;
+  /** Whether to show cursor in active slot */
+  showCursor?: boolean;
+}
+
+export interface InputOTPRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  getValue: () => string;
+}
+
+export const InputOTP = forwardRef<InputOTPRef, InputOTPProps>(
+  (
+    {
+      length = 6,
+      value = '',
+      onChangeText,
+      onComplete,
+      error,
+      disabled = false,
+      containerStyle,
+      slotStyle,
+      errorStyle,
+      masked = false,
+      separator,
+      showCursor = true,
+      onFocus,
+      onBlur,
+      ...textInputProps
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [, setActiveIndex] = useState(0);
+    const inputRef = useRef<TextInput>(null);
+    const theme = useThemeConfig();
+    const colors = theme.colors;
+
+    // Normalize value to ensure it doesn't exceed length
+    const normalizedValue = value.slice(0, length);
+
+    // Calculate active index based on current value
+    const currentActiveIndex = Math.min(normalizedValue.length, length - 1);
+
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      clear: () => {
+        onChangeText?.('');
+        setActiveIndex(0);
+      },
+      getValue: () => normalizedValue,
+    }));
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        // Only allow numeric input
+        const cleanText = text.replace(/[^0-9]/g, '');
+        const limitedText = cleanText.slice(0, length);
+
+        onChangeText?.(limitedText);
+        setActiveIndex(Math.min(limitedText.length, length - 1));
+
+        // Call onComplete when OTP is fully entered
+        if (limitedText.length === length) {
+          onComplete?.(limitedText);
+        }
+      },
+      [length, onChangeText, onComplete],
+    );
+
+    const handleKeyPress = useCallback(
+      (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        const { key } = e.nativeEvent;
+
+        if (key === 'Backspace' && normalizedValue.length > 0) {
+          const newValue = normalizedValue.slice(0, -1);
+          onChangeText?.(newValue);
+          setActiveIndex(Math.max(0, newValue.length));
+        }
+      },
+      [normalizedValue, onChangeText],
+    );
+
+    const handleFocus = useCallback(
+      (e: any) => {
+        setIsFocused(true);
+        setActiveIndex(normalizedValue.length);
+        onFocus?.(e);
+      },
+      [normalizedValue.length, onFocus],
+    );
+
+    const handleBlur = useCallback(
+      (e: any) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur],
+    );
+
+    const handleSlotPress = useCallback(() => {
+      if (!disabled) {
+        inputRef.current?.focus();
+      }
+    }, [disabled]);
+
+    // Generate slots
+    const slots = Array.from({ length }, (_, index) => {
+      const hasValue = index < normalizedValue.length;
+      const isActive = isFocused && index === currentActiveIndex;
+      const displayValue = hasValue
+        ? masked
+          ? '•'
+          : normalizedValue[index]
+        : '';
+
+      return (
+        <React.Fragment key={index}>
+          <Pressable
+            onPress={handleSlotPress}
+            disabled={disabled}
+            style={[
+              {
+                width: 58,
+                height: 58,
+                borderRadius: CORNERS,
+                borderWidth: 1,
+                borderColor: error
+                  ? colors.warning
+                  : isActive
+                    ? colors.primary
+                    : hasValue
+                      ? colors.border
+                      : colors.border,
+                backgroundColor: disabled ? muted + '20' : colors.card,
+                justifyContent: 'center',
+                alignItems: 'center',
+                opacity: disabled ? 0.6 : 1,
+              },
+              slotStyle,
+            ]}
+          >
+            <Text
+              style={{
+                fontSize: FONT_SIZE + 2,
+                fontWeight: '600',
+                color: error
+                  ? colors.warning
+                  : hasValue
+                    ? colors.foreground
+                    : muted,
+              }}
+            >
+              {displayValue}
+            </Text>
+
+            {/* Cursor */}
+            {showCursor && isActive && !hasValue && (
+              <View
+                style={{
+                  position: 'absolute',
+                  width: 2,
+                  height: 20,
+                  backgroundColor: colors.primary,
+                  opacity: isFocused ? 1 : 0,
+                }}
+              />
+            )}
+          </Pressable>
+
+          {/* Separator */}
+          {separator && index < length - 1 && (
+            <View style={{ marginHorizontal: 4 }}>{separator}</View>
+          )}
+        </React.Fragment>
+      );
+    });
+
+    const renderContent = () => (
+      <View style={containerStyle}>
+        {/* Hidden TextInput for handling input */}
+        <TextInput
+          ref={inputRef}
+          value={normalizedValue}
+          onChangeText={handleChangeText}
+          onKeyPress={handleKeyPress}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          keyboardType="numeric"
+          maxLength={length}
+          editable={!disabled}
+          selectionColor="transparent"
+          style={{
+            position: 'absolute',
+            left: -9999,
+            opacity: 0,
+          }}
+          {...textInputProps}
+        />
+
+        {/* OTP Slots */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: separator ? 0 : 8,
+          }}
+        >
+          {slots}
+        </View>
+
+        {/* Error Message */}
+        {error && (
+          <Text
+            style={[
+              {
+                textAlign: 'center',
+                marginTop: 8,
+                fontSize: 14,
+                color: colors.warning,
+              },
+              errorStyle,
+            ]}
+          >
+            {error}
+          </Text>
+        )}
+      </View>
+    );
+
+    return renderContent();
+  },
+);
+
+InputOTP.displayName = 'InputOTP';
+
+// Optional: Export a preset with separator
+export const InputOTPWithSeparator = forwardRef<
+  InputOTPRef,
+  Omit<InputOTPProps, 'separator'>
+>((props, ref) => (
+  <InputOTP
+    ref={ref}
+    separator={
+      <Text style={{ fontSize: 18, color: colors.mutedForeground }}>-</Text>
+    }
+    {...props}
+  />
+));
+
+InputOTPWithSeparator.displayName = 'InputOTPWithSeparator';

package/2/apps/native/src/components/ui/core/inputs/input.tsx

@@ -0,0 +1,373 @@
+import { useColorScheme } from 'nativewind';
+import * as React from 'react';
+import type {
+  Control,
+  FieldValues,
+  Path,
+  RegisterOptions,
+} from 'react-hook-form';
+import { useController } from 'react-hook-form';
+import type { TextInputProps } from 'react-native';
+import {
+  I18nManager,
+  PixelRatio,
+  Pressable,
+  StyleSheet,
+  TextInput as NTextInput,
+  View,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolateColor,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+
+import colors from '../../colors';
+import { Text } from '../text';
+
+const inputTv = tv({
+  slots: {
+    container: 'mb-4',
+    label: 'text-grey-100 mb-1.5 text-[14px] font-medium dark:text-slate-100',
+    error: 'text-sm text-danger-400 dark:text-danger-600',
+  },
+
+  variants: {
+    error: {
+      true: {
+        label: 'text-danger-600 dark:text-danger-600',
+      },
+    },
+  },
+  defaultVariants: {
+    error: false,
+  },
+});
+
+export interface NInputProps extends TextInputProps {
+  label?: string;
+  disabled?: boolean;
+  error?: string;
+  showClearButton?: boolean;
+  clearButtonMode?: 'never' | 'while-editing' | 'unless-editing' | 'always';
+  startIcon?: React.ReactElement;
+  isFocusBorderColor?: string;
+  isBlurBorderColor?: string;
+  isBlurValueBorderColor?: string;
+  reduceMotion?: 'never' | 'always' | 'system';
+  className?: string;
+  containerClassName?: string;
+}
+
+type TRule<T extends FieldValues> =
+  | Omit<
+      RegisterOptions<T>,
+      'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'
+    >
+  | undefined;
+
+export type RuleType<T extends FieldValues> = { [name in keyof T]: TRule<T> };
+export type InputControllerType<T extends FieldValues> = {
+  name: Path<T>;
+  control: Control<T>;
+  rules?: RuleType<T>;
+};
+
+interface ControlledInputProps<T extends FieldValues>
+  extends NInputProps,
+    InputControllerType<T> {}
+
+export const Input = React.forwardRef<NTextInput, NInputProps>((props, ref) => {
+  const {
+    label,
+    error,
+    testID,
+    showClearButton = true,
+    clearButtonMode = 'while-editing',
+    startIcon,
+    isFocusBorderColor,
+    isBlurBorderColor,
+    isBlurValueBorderColor,
+    reduceMotion = 'system',
+    value,
+    onChangeText,
+    className,
+    containerClassName,
+    placeholderTextColor: customPlaceholderColor,
+    ...inputProps
+  } = props;
+
+  const [isFocussed, setIsFocussed] = React.useState(false);
+  const { colorScheme } = useColorScheme();
+  const inputRef = React.useRef<NTextInput>(null);
+  const fontScale = PixelRatio.getFontScale();
+  const animatedValue = useSharedValue(0);
+
+  // Handle focus and blur events with animations
+  const handleFocus = React.useCallback(() => {
+    setIsFocussed(true);
+    animatedValue.value = withTiming(1, {
+      duration: 350,
+      easing: Easing.in(Easing.linear),
+      reduceMotion:
+        reduceMotion === 'never'
+          ? ReduceMotion.Never
+          : reduceMotion === 'always'
+            ? ReduceMotion.Always
+            : ReduceMotion.System,
+    });
+  }, [animatedValue, reduceMotion]);
+
+  const handleBlur = React.useCallback(() => {
+    setIsFocussed(false);
+    animatedValue.value = withTiming(0, {
+      duration: 250,
+      easing: Easing.out(Easing.linear),
+      reduceMotion:
+        reduceMotion === 'never'
+          ? ReduceMotion.Never
+          : reduceMotion === 'always'
+            ? ReduceMotion.Always
+            : ReduceMotion.System,
+    });
+  }, [animatedValue, reduceMotion]);
+
+  // Memoize color values to prevent unnecessary re-renders
+  const errorColor = React.useMemo(() => colors.danger[600], []);
+  const darkBlurColor = React.useMemo(() => colors.neutral[700], []);
+  const lightBlurColor = React.useMemo(() => colors.neutral[300], []);
+  const darkBlurValueColor = React.useMemo(() => colors.neutral[600], []);
+  const darkFocusColor = React.useMemo(() => colors.neutral[400], []);
+  const lightFocusColor = React.useMemo(() => colors.neutral[500], []);
+
+  // Animated border style - only apply if no className override
+  const borderStyle = useAnimatedStyle(() => {
+    'worklet';
+
+    // If className is provided, don't apply border animation
+    if (className) {
+      return {};
+    }
+
+    let fromColor: string;
+    let toColor: string;
+
+    if (error) {
+      // Error state - always red regardless of focus
+      fromColor = errorColor;
+      toColor = errorColor;
+    } else {
+      // No error state - handle normal cases
+      if (value) {
+        // Has value
+        fromColor =
+          isBlurValueBorderColor ||
+          (colorScheme === 'dark' ? darkBlurValueColor : lightBlurColor);
+      } else {
+        // No value
+        fromColor =
+          isBlurBorderColor ||
+          (colorScheme === 'dark' ? darkBlurColor : lightBlurColor);
+      }
+
+      // Focus color
+      toColor =
+        isFocusBorderColor ||
+        (colorScheme === 'dark' ? darkFocusColor : lightFocusColor);
+    }
+
+    return {
+      borderColor: interpolateColor(
+        animatedValue.value,
+        [0, 1],
+        [fromColor, toColor],
+      ),
+    };
+  });
+
+  const styles = React.useMemo(
+    () =>
+      inputTv({
+        error: Boolean(error),
+      }),
+    [error],
+  );
+
+  // Theme-aware placeholder color - use prop if provided
+  const placeholderColor = React.useMemo(() => {
+    if (customPlaceholderColor) {
+      return customPlaceholderColor;
+    }
+    return colorScheme === 'dark' ? colors.slate[500] : colors.slate[400];
+  }, [colorScheme, customPlaceholderColor]);
+
+  // Theme-aware text color
+  const textColor = React.useMemo(() => {
+    if (props.disabled) {
+      return colorScheme === 'dark' ? colors.slate[500] : colors.slate[400];
+    }
+    return colorScheme === 'dark' ? colors.white : colors.black;
+  }, [colorScheme, props.disabled]);
+
+  // Background color
+  const bgColor = React.useMemo(() => {
+    if (props.disabled) {
+      return colorScheme === 'dark' ? colors.slate[800] : colors.slate[100];
+    }
+    return 'transparent';
+  }, [colorScheme, props.disabled]);
+
+  // Clear button logic
+  const shouldShowClearButton = React.useMemo(() => {
+    if (!showClearButton || !value || props.disabled) return false;
+
+    switch (clearButtonMode) {
+      case 'never':
+        return false;
+      case 'while-editing':
+        return isFocussed;
+      case 'unless-editing':
+        return !isFocussed;
+      case 'always':
+        return true;
+      default:
+        return false;
+    }
+  }, [showClearButton, value, props.disabled, clearButtonMode, isFocussed]);
+
+  const handleClear = React.useCallback(() => {
+    if (onChangeText) {
+      onChangeText('');
+    }
+    // Use setTimeout to ensure focus happens after state update
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [onChangeText]);
+
+  // Set ref
+  React.useImperativeHandle(ref, () => inputRef.current!);
+
+  return (
+    <View className={containerClassName || styles.container()}>
+      {label && (
+        <Text
+          testID={testID ? `${testID}-label` : undefined}
+          className={styles.label()}
+        >
+          {label}
+        </Text>
+      )}
+      <Animated.View
+        className={className}
+        style={[
+          // Always apply layout styles
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+          // Only apply default styling if no className override
+          !className && {
+            borderWidth: 1,
+            borderRadius: 16,
+            minHeight: 54 * fontScale,
+            backgroundColor: bgColor,
+            opacity: props.disabled ? 0.6 : 1,
+          },
+          // Only apply border animation if no className
+          !className && borderStyle,
+        ]}
+      >
+        {startIcon && (
+          <View
+            style={{
+              marginLeft: I18nManager.isRTL ? 8 : 16,
+              marginRight: I18nManager.isRTL ? 16 : 8,
+            }}
+          >
+            {startIcon}
+          </View>
+        )}
+        <NTextInput
+          ref={inputRef}
+          testID={testID}
+          placeholderTextColor={placeholderColor}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          value={value}
+          onChangeText={onChangeText}
+          editable={!props.disabled}
+          {...inputProps}
+          style={StyleSheet.flatten([
+            {
+              flex: 1,
+              color: textColor,
+              fontSize: 16,
+              paddingVertical: 16,
+              paddingHorizontal: startIcon ? 8 : 16,
+              writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+              textAlign: I18nManager.isRTL ? 'right' : 'left',
+            },
+            inputProps.style,
+          ])}
+        />
+        {shouldShowClearButton && (
+          <Pressable
+            onPress={handleClear}
+            onPressIn={(e) => e.stopPropagation()}
+            style={{
+              marginLeft: I18nManager.isRTL ? 16 : 8,
+              marginRight: I18nManager.isRTL ? 8 : 16,
+              padding: 4,
+            }}
+            hitSlop={8}
+            accessibilityLabel="Clear input"
+            accessibilityRole="button"
+          >
+            <Text
+              style={{
+                color: colors.slate[400],
+                fontSize: 20,
+                fontWeight: '600',
+                lineHeight: 20,
+              }}
+            >
+              ×
+            </Text>
+          </Pressable>
+        )}
+      </Animated.View>
+      {error && (
+        <Text
+          testID={testID ? `${testID}-error` : undefined}
+          className={styles.error()}
+        >
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+});
+
+// only used with react-hook-form
+export function ControlledInput<T extends FieldValues>(
+  props: ControlledInputProps<T>,
+) {
+  const { name, control, rules, ...inputProps } = props;
+
+  const { field, fieldState } = useController({ control, name, rules });
+  return (
+    <Input
+      ref={field.ref}
+      autoCapitalize="none"
+      onChangeText={field.onChange}
+      value={typeof field.value === 'string' ? field.value : ''}
+      {...inputProps}
+      error={fieldState.error?.message}
+    />
+  );
+}