vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/components/timer-settings-modal.tsx

@@ -0,0 +1,352 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
+import { Modal, useModal } from '@/components/ui/core/overlays/modal';
+
+import {
+  FITNESS_COLORS,
+  TIMER_PRESETS,
+  type TimerMode,
+  type TimerPreset,
+} from '../constants';
+
+export type TimerSettings = {
+  mode: TimerMode;
+  workDuration: number;
+  restDuration: number;
+  rounds: number;
+  soundEnabled: boolean;
+  hapticEnabled: boolean;
+};
+
+export type TimerSettingsModalRef = {
+  open: (currentSettings: TimerSettings) => void;
+  close: () => void;
+};
+
+type TimerSettingsModalProps = {
+  onSave: (settings: TimerSettings) => void;
+};
+
+const DURATION_OPTIONS = [10, 15, 20, 30, 45, 60, 90, 120];
+const ROUND_OPTIONS = [4, 6, 8, 10, 12, 15, 20];
+
+export const TimerSettingsModal = forwardRef<
+  TimerSettingsModalRef,
+  TimerSettingsModalProps
+>(({ onSave }, ref) => {
+  const modal = useModal();
+  const [settings, setSettings] = useState<TimerSettings>({
+    mode: 'interval',
+    workDuration: 45,
+    restDuration: 15,
+    rounds: 8,
+    soundEnabled: true,
+    hapticEnabled: true,
+  });
+
+  useImperativeHandle(ref, () => ({
+    open: (currentSettings: TimerSettings) => {
+      setSettings(currentSettings);
+      modal.present();
+    },
+    close: () => modal.dismiss(),
+  }));
+
+  const handlePresetSelect = (preset: TimerPreset) => {
+    setSettings((prev) => ({
+      ...prev,
+      mode: preset.mode,
+      workDuration: preset.workDuration,
+      restDuration: preset.restDuration,
+      rounds: preset.rounds,
+    }));
+  };
+
+  const handleSave = () => {
+    onSave(settings);
+    modal.dismiss();
+  };
+
+  const formatDuration = (seconds: number) => {
+    if (seconds >= 60) {
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+    }
+    return `${seconds}s`;
+  };
+
+  return (
+    <Modal ref={modal.ref} title="Timer Settings" snapPoints={['85%']}>
+      <BottomSheetScrollView
+        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 24 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Mode Presets */}
+        <View className="mb-6">
+          <Text className="text-zinc-400 text-xs font-bold uppercase tracking-widest mb-3">
+            Workout Mode
+          </Text>
+          <View className="flex-row flex-wrap gap-2">
+            {TIMER_PRESETS.map((preset, index) => {
+              const isSelected = settings.mode === preset.mode;
+              return (
+                <Animated.View
+                  key={preset.id}
+                  entering={FadeInDown.delay(index * 50)}
+                  className="flex-1 min-w-[45%]"
+                >
+                  <Pressable
+                    onPress={() => handlePresetSelect(preset)}
+                    className="p-4 rounded-2xl border-2"
+                    style={{
+                      backgroundColor: isSelected
+                        ? `${FITNESS_COLORS.primary}15`
+                        : FITNESS_COLORS.card,
+                      borderColor: isSelected
+                        ? FITNESS_COLORS.primary
+                        : FITNESS_COLORS.card,
+                    }}
+                  >
+                    <View className="flex-row items-center gap-2 mb-1">
+                      <Ionicons
+                        name={preset.icon}
+                        size={20}
+                        color={
+                          isSelected
+                            ? FITNESS_COLORS.primary
+                            : FITNESS_COLORS.textMuted
+                        }
+                      />
+                      <Text
+                        className="font-bold"
+                        style={{
+                          color: isSelected
+                            ? FITNESS_COLORS.primary
+                            : FITNESS_COLORS.text,
+                        }}
+                      >
+                        {preset.name}
+                      </Text>
+                    </View>
+                    <Text className="text-zinc-500 text-xs">
+                      {preset.description}
+                    </Text>
+                  </Pressable>
+                </Animated.View>
+              );
+            })}
+          </View>
+        </View>
+
+        {/* Work Duration */}
+        <View className="mb-5">
+          <Text className="text-zinc-400 text-xs font-bold uppercase tracking-widest mb-3">
+            Work Duration
+          </Text>
+          <View className="flex-row flex-wrap gap-2">
+            {DURATION_OPTIONS.map((duration) => (
+              <Pressable
+                key={duration}
+                onPress={() =>
+                  setSettings((prev) => ({ ...prev, workDuration: duration }))
+                }
+                className="px-4 py-2 rounded-xl"
+                style={{
+                  backgroundColor:
+                    settings.workDuration === duration
+                      ? FITNESS_COLORS.work
+                      : FITNESS_COLORS.card,
+                }}
+              >
+                <Text
+                  className="font-bold"
+                  style={{
+                    color:
+                      settings.workDuration === duration
+                        ? FITNESS_COLORS.background
+                        : FITNESS_COLORS.text,
+                  }}
+                >
+                  {formatDuration(duration)}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+
+        {/* Rest Duration (hidden for countdown/emom) */}
+        {settings.mode !== 'countdown' && settings.mode !== 'emom' && (
+          <View className="mb-5">
+            <Text className="text-zinc-400 text-xs font-bold uppercase tracking-widest mb-3">
+              Rest Duration
+            </Text>
+            <View className="flex-row flex-wrap gap-2">
+              {DURATION_OPTIONS.filter((d) => d <= 60).map((duration) => (
+                <Pressable
+                  key={duration}
+                  onPress={() =>
+                    setSettings((prev) => ({ ...prev, restDuration: duration }))
+                  }
+                  className="px-4 py-2 rounded-xl"
+                  style={{
+                    backgroundColor:
+                      settings.restDuration === duration
+                        ? FITNESS_COLORS.rest
+                        : FITNESS_COLORS.card,
+                  }}
+                >
+                  <Text
+                    className="font-bold"
+                    style={{
+                      color:
+                        settings.restDuration === duration
+                          ? FITNESS_COLORS.background
+                          : FITNESS_COLORS.text,
+                    }}
+                  >
+                    {formatDuration(duration)}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        )}
+
+        {/* Rounds (hidden for countdown) */}
+        {settings.mode !== 'countdown' && (
+          <View className="mb-5">
+            <Text className="text-zinc-400 text-xs font-bold uppercase tracking-widest mb-3">
+              Rounds
+            </Text>
+            <View className="flex-row flex-wrap gap-2">
+              {ROUND_OPTIONS.map((round) => (
+                <Pressable
+                  key={round}
+                  onPress={() =>
+                    setSettings((prev) => ({ ...prev, rounds: round }))
+                  }
+                  className="w-12 h-12 rounded-xl items-center justify-center"
+                  style={{
+                    backgroundColor:
+                      settings.rounds === round
+                        ? FITNESS_COLORS.primary
+                        : FITNESS_COLORS.card,
+                  }}
+                >
+                  <Text
+                    className="font-black text-lg"
+                    style={{
+                      color:
+                        settings.rounds === round
+                          ? FITNESS_COLORS.background
+                          : FITNESS_COLORS.text,
+                    }}
+                  >
+                    {round}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        )}
+
+        {/* Toggle Options */}
+        <View className="mb-6">
+          <Text className="text-zinc-400 text-xs font-bold uppercase tracking-widest mb-3">
+            Feedback
+          </Text>
+          <View className="gap-3">
+            <Pressable
+              onPress={() =>
+                setSettings((prev) => ({
+                  ...prev,
+                  soundEnabled: !prev.soundEnabled,
+                }))
+              }
+              className="flex-row items-center justify-between p-4 rounded-2xl"
+              style={{ backgroundColor: FITNESS_COLORS.card }}
+            >
+              <View className="flex-row items-center gap-3">
+                <Ionicons
+                  name="volume-high"
+                  size={22}
+                  color={FITNESS_COLORS.textMuted}
+                />
+                <Text className="text-white font-medium">Sound Cues</Text>
+              </View>
+              <View
+                className="w-12 h-7 rounded-full justify-center px-1"
+                style={{
+                  backgroundColor: settings.soundEnabled
+                    ? FITNESS_COLORS.primary
+                    : '#3f3f46',
+                }}
+              >
+                <View
+                  className="w-5 h-5 rounded-full bg-white"
+                  style={{
+                    alignSelf: settings.soundEnabled
+                      ? 'flex-end'
+                      : 'flex-start',
+                  }}
+                />
+              </View>
+            </Pressable>
+
+            <Pressable
+              onPress={() =>
+                setSettings((prev) => ({
+                  ...prev,
+                  hapticEnabled: !prev.hapticEnabled,
+                }))
+              }
+              className="flex-row items-center justify-between p-4 rounded-2xl"
+              style={{ backgroundColor: FITNESS_COLORS.card }}
+            >
+              <View className="flex-row items-center gap-3">
+                <Ionicons
+                  name="phone-portrait"
+                  size={22}
+                  color={FITNESS_COLORS.textMuted}
+                />
+                <Text className="text-white font-medium">Haptic Feedback</Text>
+              </View>
+              <View
+                className="w-12 h-7 rounded-full justify-center px-1"
+                style={{
+                  backgroundColor: settings.hapticEnabled
+                    ? FITNESS_COLORS.primary
+                    : '#3f3f46',
+                }}
+              >
+                <View
+                  className="w-5 h-5 rounded-full bg-white"
+                  style={{
+                    alignSelf: settings.hapticEnabled
+                      ? 'flex-end'
+                      : 'flex-start',
+                  }}
+                />
+              </View>
+            </Pressable>
+          </View>
+        </View>
+
+        {/* Save Button */}
+        <Button
+          label="Apply Settings"
+          onPress={handleSave}
+          className="mt-4 mb-4"
+          style={{ backgroundColor: FITNESS_COLORS.primary }}
+          textClassName="text-zinc-950 font-bold"
+        />
+      </BottomSheetScrollView>
+    </Modal>
+  );
+});

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/components/workout-card.tsx

@@ -0,0 +1,105 @@
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+import { ImageBackground, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInRight } from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+import { FITNESS_COLORS } from '../constants';
+
+interface WorkoutCardProps {
+  item: {
+    id: string;
+    title: string;
+    duration: string;
+    cals: number;
+    difficulty: string;
+    image: string;
+    exercises: number;
+  };
+  index: number;
+  onPress: () => void;
+}
+
+export default function WorkoutCard({
+  item,
+  index,
+  onPress,
+}: WorkoutCardProps) {
+  return (
+    <Animated.View
+      entering={FadeInRight.delay(index * 100).springify()}
+      className="mr-5 w-72 h-44 rounded-3xl overflow-hidden"
+    >
+      <TouchableOpacity
+        activeOpacity={0.9}
+        onPress={onPress}
+        className="flex-1"
+      >
+        <ImageBackground
+          source={{ uri: item.image }}
+          className="flex-1 justify-end p-4"
+          resizeMode="cover"
+        >
+          <LinearGradient
+            colors={['transparent', 'rgba(0,0,0,0.8)']}
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: '70%',
+            }}
+          />
+
+          <View className="flex-row justify-between items-start mb-auto">
+            <View className="bg-black/40 px-3 py-1.5 rounded-full backdrop-blur-md border border-white/10">
+              <Text className="text-xs font-bold text-white uppercase tracking-wider">
+                {item.difficulty}
+              </Text>
+            </View>
+          </View>
+
+          <View>
+            <Text className="text-white font-bold text-xl mb-1">
+              {item.title}
+            </Text>
+            <View className="flex-row items-center space-x-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="time-outline"
+                  size={14}
+                  color={FITNESS_COLORS.textMuted}
+                />
+                <Text className="text-gray-300 text-xs ml-1 font-medium">
+                  {item.duration}
+                </Text>
+              </View>
+              <View className="flex-row items-center ml-4">
+                <Ionicons
+                  name="flame-outline"
+                  size={14}
+                  color={FITNESS_COLORS.orange}
+                />
+                <Text className="text-gray-300 text-xs ml-1 font-medium">
+                  {item.cals} kCal
+                </Text>
+              </View>
+              <View className="flex-row items-center ml-4">
+                <Ionicons
+                  name="barbell-outline"
+                  size={14}
+                  color={FITNESS_COLORS.accent}
+                />
+                <Text className="text-gray-300 text-xs ml-1 font-medium">
+                  {item.exercises} Exercises
+                </Text>
+              </View>
+            </View>
+          </View>
+        </ImageBackground>
+      </TouchableOpacity>
+    </Animated.View>
+  );
+}

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/constants.ts

@@ -0,0 +1,189 @@
+import type { Ionicons } from '@expo/vector-icons';
+
+export const FITNESS_COLORS = {
+  primary: '#CCF381', // Neon Lime (Keep as brand)
+  background: '#09090b', // Zinc 950
+  card: '#18181b', // Zinc 900
+  text: '#ffffff',
+  textMuted: '#a1a1aa', // Zinc 400
+  accent: '#4834d4', // Deep Blue
+  success: '#6ab04c', // Grass Green
+  warning: '#f0932b', // Orange
+  danger: '#eb4d4b', // Red
+  ring1: '#ff0055', // Neon Red/Pink
+  ring2: '#00ccff', // Neon Cyan
+  ring3: '#ccf381', // Neon Lime (Matches Primary)
+  orange: '#f0932b',
+  // Timer-specific colors
+  work: '#CCF381', // Lime for work phase
+  rest: '#00ccff', // Cyan for rest phase
+  getReady: '#f0932b', // Orange for countdown
+  complete: '#6ab04c', // Green for completion
+};
+
+// Timer Types
+export type TimerMode = 'countdown' | 'interval' | 'tabata' | 'emom';
+export type TimerPhase = 'idle' | 'getReady' | 'work' | 'rest' | 'complete';
+
+export type Exercise = {
+  id: string;
+  name: string;
+  duration: number; // in seconds
+  icon: keyof typeof Ionicons.glyphMap;
+  tip: string;
+};
+
+export type TimerPreset = {
+  id: string;
+  name: string;
+  mode: TimerMode;
+  icon: keyof typeof Ionicons.glyphMap;
+  workDuration: number;
+  restDuration: number;
+  rounds: number;
+  description: string;
+};
+
+// Timer mode presets
+export const TIMER_PRESETS: TimerPreset[] = [
+  {
+    id: 'countdown',
+    name: 'Countdown',
+    mode: 'countdown',
+    icon: 'timer-outline',
+    workDuration: 60,
+    restDuration: 0,
+    rounds: 1,
+    description: 'Simple countdown timer',
+  },
+  {
+    id: 'interval',
+    name: 'Intervals',
+    mode: 'interval',
+    icon: 'repeat',
+    workDuration: 45,
+    restDuration: 15,
+    rounds: 8,
+    description: 'Work/rest intervals',
+  },
+  {
+    id: 'tabata',
+    name: 'Tabata',
+    mode: 'tabata',
+    icon: 'flash',
+    workDuration: 20,
+    restDuration: 10,
+    rounds: 8,
+    description: '20s work / 10s rest × 8',
+  },
+  {
+    id: 'emom',
+    name: 'EMOM',
+    mode: 'emom',
+    icon: 'stopwatch',
+    workDuration: 60,
+    restDuration: 0,
+    rounds: 10,
+    description: 'Every Minute on the Minute',
+  },
+];
+
+// Sample exercise queue
+export const SAMPLE_EXERCISES: Exercise[] = [
+  {
+    id: '1',
+    name: 'High Knees',
+    duration: 45,
+    icon: 'body',
+    tip: 'Keep your core tight and maintain a steady pace.',
+  },
+  {
+    id: '2',
+    name: 'Burpees',
+    duration: 45,
+    icon: 'fitness',
+    tip: 'Explode up from the ground with power.',
+  },
+  {
+    id: '3',
+    name: 'Mountain Climbers',
+    duration: 45,
+    icon: 'walk',
+    tip: 'Drive your knees toward your chest rapidly.',
+  },
+  {
+    id: '4',
+    name: 'Jump Squats',
+    duration: 45,
+    icon: 'trending-up',
+    tip: 'Land softly and immediately sink into the next squat.',
+  },
+  {
+    id: '5',
+    name: 'Plank Hold',
+    duration: 60,
+    icon: 'body',
+    tip: 'Keep your body in a straight line from head to heels.',
+  },
+];
+
+// Phase colors mapping
+export const PHASE_COLORS: Record<TimerPhase, string> = {
+  idle: FITNESS_COLORS.textMuted,
+  getReady: FITNESS_COLORS.getReady,
+  work: FITNESS_COLORS.work,
+  rest: FITNESS_COLORS.rest,
+  complete: FITNESS_COLORS.complete,
+};
+
+// Phase labels
+export const PHASE_LABELS: Record<TimerPhase, string> = {
+  idle: 'READY',
+  getReady: 'GET READY',
+  work: 'WORK',
+  rest: 'REST',
+  complete: 'COMPLETE',
+};
+
+export const MOCK_WORKOUTS = [
+  {
+    id: '1',
+    title: 'Full Body Crush',
+    duration: '45 min',
+    cals: 320,
+    difficulty: 'Advanced',
+    image:
+      'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800&q=80',
+    exercises: 8,
+  },
+  {
+    id: '2',
+    title: 'Morning Yoga Flow',
+    duration: '20 min',
+    cals: 120,
+    difficulty: 'Beginner',
+    image:
+      'https://images.unsplash.com/photo-1544367563-121955375ebb?w=800&q=80',
+    exercises: 5,
+  },
+  {
+    id: '3',
+    title: 'HIIT Cardio',
+    duration: '30 min',
+    cals: 450,
+    difficulty: 'Intermediate',
+    image:
+      'https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?w=800&q=80',
+    exercises: 12,
+  },
+];
+
+export const WEEKLY_STATS = [
+  { day: 'M', value: 350, active: false },
+  { day: 'T', value: 820, active: true },
+  { day: 'W', value: 610, active: false },
+  { day: 'T', value: 950, active: true },
+  { day: 'F', value: 880, active: true },
+  { day: 'S', value: 320, active: false },
+  { day: 'S', value: 540, active: false },
+];