vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/components/ui/core/feature-button.tsx

@@ -0,0 +1,162 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { View } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+
+import { type CustomPressableProps, Pressable } from './pressable';
+import { Text } from './text';
+
+export type FeatureButtonProps = CustomPressableProps & {
+  title: string;
+  icon: string;
+  color: string; // Hex color value like '#3B82F6'
+  description?: string;
+  disabled?: boolean;
+  testID?: string;
+};
+
+/**
+ * Adjusts color brightness for gradient effect
+ */
+function adjustColorBrightness(hex: string, percent: number): string {
+  // Remove # if present
+  const cleanHex = hex.replace('#', '');
+
+  // Parse RGB values
+  const r = Number.parseInt(cleanHex.substr(0, 2), 16);
+  const g = Number.parseInt(cleanHex.substr(2, 2), 16);
+  const b = Number.parseInt(cleanHex.substr(4, 2), 16);
+
+  // Adjust brightness
+  const adjustedR = Math.round(Math.min(255, r + (r * percent) / 100));
+  const adjustedG = Math.round(Math.min(255, g + (g * percent) / 100));
+  const adjustedB = Math.round(Math.min(255, b + (b * percent) / 100));
+
+  // Convert back to hex
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(adjustedR)}${toHex(adjustedG)}${toHex(adjustedB)}`;
+}
+
+export function FeatureButton({
+  title,
+  icon,
+  color,
+  description,
+  disabled = false,
+  className,
+  testID,
+  ...props
+}: FeatureButtonProps) {
+  // Create gradient colors with more dramatic variation
+  const lighterColor = adjustColorBrightness(color, 30);
+  const darkerColor = adjustColorBrightness(color, -20);
+  const shadowColor = adjustColorBrightness(color, -40);
+
+  // Handle disabled state - ensure we always have at least 2 colors for LinearGradient
+  const gradientColors: [string, string, ...string[]] = disabled
+    ? [`${color}50`, `${darkerColor}50`]
+    : [lighterColor, color, darkerColor];
+
+  return (
+    <View
+      className={twMerge(
+        // More rounded corners and enhanced depth
+        'aspect-square overflow-hidden rounded-3xl',
+        className,
+      )}
+      style={{
+        // Enhanced shadow with color-matched shadow
+        shadowColor: shadowColor,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: disabled ? 0.15 : 0.3,
+        shadowRadius: 16,
+        elevation: disabled ? 4 : 12, // Android shadow
+      }}
+    >
+      {/* Outer glow/border effect */}
+      <View
+        className="absolute inset-0 rounded-3xl"
+        style={{
+          backgroundColor: lighterColor,
+          opacity: disabled ? 0.3 : 0.6,
+        }}
+      />
+
+      {/* Main gradient container with inset for depth */}
+      <View className="m-0.5 flex-1 overflow-hidden rounded-3xl">
+        <LinearGradient
+          colors={gradientColors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={{ flex: 1 }}
+        >
+          <Pressable
+            className={twMerge(
+              // Fill the gradient container and add press effects
+              'flex-1 items-center justify-center p-5',
+              // Enhanced press animation
+              'transition-transform duration-200 active:scale-95',
+            )}
+            disabled={disabled}
+            testID={testID}
+            accessibilityRole="button"
+            accessibilityLabel={title}
+            accessibilityHint={description}
+            {...props}
+          >
+            {/* Icon container with background glow */}
+            <View
+              className="mb-4 items-center justify-center rounded-2xl p-2"
+              style={{
+                backgroundColor: 'rgba(255,255,255,0.15)',
+                shadowColor: 'rgba(0,0,0,0.2)',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 1,
+                shadowRadius: 4,
+              }}
+            >
+              <Text
+                className="text-4xl"
+                style={{
+                  textShadowColor: 'rgba(0,0,0,0.4)',
+                  textShadowOffset: { width: 0, height: 2 },
+                  textShadowRadius: 4,
+                }}
+              >
+                {icon}
+              </Text>
+            </View>
+
+            {/* Title with enhanced styling */}
+            <Text
+              className="text-center text-sm font-bold tracking-wide text-white"
+              numberOfLines={2}
+              style={{
+                textShadowColor: 'rgba(0,0,0,0.6)',
+                textShadowOffset: { width: 0, height: 1 },
+                textShadowRadius: 3,
+                letterSpacing: 0.5,
+              }}
+            >
+              {title}
+            </Text>
+
+            {/* Description with better contrast */}
+            {description && (
+              <Text
+                className="mt-2 text-center text-xs font-medium text-white/95"
+                numberOfLines={2}
+                style={{
+                  textShadowColor: 'rgba(0,0,0,0.4)',
+                  textShadowOffset: { width: 0, height: 1 },
+                  textShadowRadius: 2,
+                }}
+              >
+                {description}
+              </Text>
+            )}
+          </Pressable>
+        </LinearGradient>
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/components/ui/core/focus-aware-status-bar.tsx

@@ -0,0 +1,21 @@
+import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type Props = { hidden?: boolean };
+export const FocusAwareStatusBar = ({ hidden = false }: Props) => {
+  const theme = useThemeConfig();
+  if (Platform.OS === 'web') return null;
+
+  // Always render at root without relying on navigation focus,
+  // avoiding intermittent "couldn't find navigation context" errors
+  return (
+    <StatusBar
+      style={theme.dark === true ? 'light' : 'dark'}
+      translucent={false}
+      backgroundColor={theme.colors.background}
+      hidden={hidden}
+    />
+  );
+};

package/2/apps/native/src/components/ui/core/image.tsx

@@ -0,0 +1,30 @@
+import type { ImageProps } from 'expo-image';
+import { Image as NImage } from 'expo-image';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+
+export type ImgProps = ImageProps & {
+  className?: string;
+};
+
+cssInterop(NImage, { className: 'style' });
+
+export const Image = ({
+  style,
+  className,
+  placeholder = 'L6PZfSi_.AyE_3t7t7R**0o#DgR4',
+  ...props
+}: ImgProps) => {
+  return (
+    <NImage
+      className={className}
+      placeholder={placeholder}
+      style={style}
+      {...props}
+    />
+  );
+};
+
+export const preloadImages = (sources: string[]) => {
+  NImage.prefetch(sources);
+};

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

@@ -0,0 +1,369 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import {
+  type NativeSyntheticEvent,
+  Text,
+  TextInput,
+  type TextInputFocusEventData,
+  type TextInputProps,
+  View,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+// Style variants using tailwind-variants for layout and structure ONLY
+const floatingInputTv = tv({
+  slots: {
+    container: 'mb-6 w-full',
+    inputContainer: 'relative',
+    input: 'h-14 w-full rounded-xl border bg-transparent px-4 text-lg',
+    label: 'pointer-events-auto absolute z-10 ml-3 px-1.5 text-base',
+    errorText: 'ml-4 mt-1 text-xs',
+    helperText: 'ml-4 mt-1 text-xs',
+  },
+  variants: {
+    disabled: {
+      container: 'opacity-50',
+      input: 'opacity-50',
+    },
+    size: {
+      small: {
+        input: 'h-12 px-3 text-base',
+        label: 'ml-2 px-1 text-sm',
+      },
+      medium: {
+        input: 'h-16 px-4 text-lg',
+        label: 'ml-3 px-1.5 text-base',
+      },
+      large: {
+        input: 'h-18 px-5 text-xl',
+        label: 'ml-4 px-2 text-lg',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+type FloatingTextInputProps = {
+  label: string;
+  isError?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  reduceMotion?: 'never' | 'always' | 'system';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  required?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+} & TextInputProps;
+
+export function FloatingTextInput(props: FloatingTextInputProps) {
+  const {
+    label,
+    isError = false,
+    errorMessage,
+    helperText,
+    reduceMotion = 'system',
+    size = 'medium',
+    disabled = false,
+    required = false,
+    leftIcon,
+    rightIcon,
+    value,
+    onFocus,
+    onBlur,
+    ...textInputProps
+  } = props;
+
+  const theme = useThemeConfig();
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const isFloating = isFocused || !!value;
+  const animatedValue = useSharedValue(isFloating ? 1 : 0);
+
+  const motion =
+    reduceMotion === 'never'
+      ? ReduceMotion.Never
+      : reduceMotion === 'always'
+        ? ReduceMotion.Always
+        : ReduceMotion.System;
+
+  // Animation configuration based on size
+  const getAnimationConfig = () => {
+    const configs = {
+      small: { duration: 120, topRange: [14, -8], fontSizeRange: [14, 12] },
+      medium: { duration: 150, topRange: [18, -10], fontSizeRange: [16, 14] },
+      large: { duration: 180, topRange: [22, -12], fontSizeRange: [18, 16] },
+    };
+    return configs[size];
+  };
+
+  const animationConfig = getAnimationConfig();
+
+  // Update animation when value changes externally
+  useEffect(() => {
+    const shouldFloat = isFocused || !!value;
+    animatedValue.value = withTiming(shouldFloat ? 1 : 0, {
+      duration: animationConfig.duration,
+      easing: Easing.inOut(Easing.ease),
+      reduceMotion: motion,
+    });
+  }, [value, isFocused, animatedValue, animationConfig.duration, motion]);
+
+  const handleFocus = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      if (disabled) return;
+
+      setIsFocused(true);
+      animatedValue.value = withTiming(1, {
+        duration: animationConfig.duration,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: motion,
+      });
+      onFocus?.(event);
+    },
+    [disabled, animatedValue, animationConfig.duration, motion, onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setIsFocused(false);
+      if (!value) {
+        animatedValue.value = withTiming(0, {
+          duration: animationConfig.duration,
+          easing: Easing.inOut(Easing.ease),
+          reduceMotion: motion,
+        });
+      }
+      onBlur?.(event);
+    },
+    [value, animatedValue, animationConfig.duration, motion, onBlur],
+  );
+
+  const handleLabelPress = useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  }, [disabled]);
+
+  // Animate the label's position and size
+  const labelAnimatedStyle = useAnimatedStyle(() => {
+    const top = interpolate(
+      animatedValue.value,
+      [0, 1],
+      animationConfig.topRange,
+    );
+    const fontSize = interpolate(
+      animatedValue.value,
+      [0, 1],
+      animationConfig.fontSizeRange,
+    );
+    const scale = interpolate(animatedValue.value, [0, 1], [1, 0.9]);
+
+    return {
+      top,
+      fontSize,
+      transform: [{ scale }],
+    };
+  }, [animationConfig]);
+
+  // Animate the label's color using the theme
+  const labelColorStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      animatedValue.value,
+      [0, 1],
+      [theme.colors.mutedForeground, theme.colors.foreground],
+    );
+    return {
+      color: isError ? theme.colors.destructive : color,
+    };
+  }, [
+    isError,
+    theme.colors.destructive,
+    theme.colors.mutedForeground,
+    theme.colors.foreground,
+  ]);
+
+  const classes = floatingInputTv({ size });
+
+  // Dynamically determine border color from theme
+  const getBorderColor = useCallback(() => {
+    if (disabled) return theme.colors.muted;
+    if (isError) return theme.colors.destructive;
+    if (isFocused) return theme.colors.foreground;
+    return theme.colors.border;
+  }, [disabled, isError, isFocused, theme.colors]);
+
+  const borderColor = getBorderColor();
+
+  // Input container style with icons
+  const inputContainerStyle = {
+    paddingLeft: leftIcon ? 44 : 16,
+    paddingRight: rightIcon ? 44 : 16,
+  };
+
+  const displayLabel = required ? `${label} *` : label;
+
+  return (
+    <View className={classes.container()}>
+      <View className={classes.inputContainer()}>
+        {/* Left Icon */}
+        {leftIcon && (
+          <View
+            style={{
+              position: 'absolute',
+              left: 12,
+              top: '50%',
+              transform: [{ translateY: -12 }],
+              zIndex: 5,
+            }}
+          >
+            {leftIcon}
+          </View>
+        )}
+
+        {/* Floating Label */}
+        <Animated.Text
+          style={[
+            labelAnimatedStyle,
+            labelColorStyle,
+            {
+              backgroundColor: theme.colors.background,
+              zIndex: 10,
+            },
+          ]}
+          className={classes.label()}
+          onPress={handleLabelPress}
+          accessible={false} // Prevent screen reader from reading this separately
+        >
+          {displayLabel}
+        </Animated.Text>
+
+        {/* Text Input */}
+        <TextInput
+          ref={inputRef}
+          value={value}
+          className={classes.input()}
+          style={[
+            {
+              borderColor,
+              color: disabled
+                ? theme.colors.mutedForeground
+                : theme.colors.text,
+              textAlignVertical: 'center',
+            },
+            inputContainerStyle,
+          ]}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={theme.colors.mutedForeground}
+          editable={!disabled}
+          selectTextOnFocus={!disabled}
+          accessibilityLabel={displayLabel}
+          accessibilityHint={helperText || errorMessage}
+          accessibilityState={{
+            disabled,
+          }}
+          {...textInputProps}
+          placeholder={isFloating ? textInputProps.placeholder : ''}
+        />
+
+        {/* Right Icon */}
+        {rightIcon && (
+          <View
+            style={{
+              position: 'absolute',
+              right: 12,
+              top: '50%',
+              transform: [{ translateY: -12 }],
+              zIndex: 5,
+            }}
+          >
+            {rightIcon}
+          </View>
+        )}
+      </View>
+
+      {/* Error Message */}
+      {isError && errorMessage && (
+        <Text
+          style={{ color: theme.colors.destructive }}
+          className={classes.errorText()}
+          accessibilityLiveRegion="polite"
+          accessibilityRole="alert"
+        >
+          {errorMessage}
+        </Text>
+      )}
+
+      {/* Helper Text */}
+      {!isError && helperText && (
+        <Text
+          style={{ color: theme.colors.mutedForeground }}
+          className={classes.helperText()}
+        >
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+/**
+ * Controlled version of FloatingTextInput for use with react-hook-form
+ */
+export type ControlledFloatingInputProps<
+  T extends FieldValues = FieldValues,
+  TName extends FieldPath<T> = FieldPath<T>,
+> = {
+  control: Control<T>;
+  name: TName;
+  testID?: string;
+} & Omit<FloatingTextInputProps, 'value' | 'onChangeText' | 'onBlur'>;
+
+export function ControlledFloatingInput<
+  T extends FieldValues = FieldValues,
+  TName extends FieldPath<T> = FieldPath<T>,
+>({
+  control,
+  name,
+  testID,
+  ...floatingInputProps
+}: ControlledFloatingInputProps<T, TName>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({
+        field: { onChange, onBlur, value },
+        fieldState: { error, invalid },
+        formState: { isSubmitting },
+      }) => (
+        <FloatingTextInput
+          testID={testID}
+          value={value || ''}
+          onChangeText={onChange}
+          onBlur={onBlur}
+          isError={invalid}
+          errorMessage={error?.message}
+          disabled={isSubmitting || floatingInputProps.disabled}
+          {...floatingInputProps}
+        />
+      )}
+    />
+  );
+}