vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,162 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,369 +0,0 @@
-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}
-        />
-      )}
-    />
-  );
-}