vibefast-cli 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefast-cli",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "CLI for installing VibeFast features into your monorepo",
   "type": "module",
   "bin": {

package/recipes/0/apps/native/src/components/advanced-ui/timeline/demo.tsx

@@ -0,0 +1,444 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import { Timeline } from './timeline-view';
+import type { TimelineItem } from './types';
+
+const ShippingDetailsComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>📦 Shipping Information</Text>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Carrier</Text>
+        <Text style={styles.detailsValue}>FedEx Express</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Tracking ID</Text>
+        <Text style={styles.detailsValue}>1Z999AA1234567890</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Est. Delivery</Text>
+        <Text style={styles.detailsValue}>May 10, 6:00 PM</Text>
+      </View>
+    </View>
+  );
+};
+
+const ProjectMilestoneComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>🎯 Milestone Details</Text>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Deliverables</Text>
+        <Text style={styles.detailsValue}>Design v2</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Team Size</Text>
+        <Text style={styles.detailsValue}>5 Designers</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Budget</Text>
+        <Text style={styles.detailsValue}>$24,500</Text>
+      </View>
+    </View>
+  );
+};
+
+const DevelopmentStatusComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>⚡ Development Progress</Text>
+      <View style={styles.progressRow}>
+        <Text style={styles.progressLabel}>Frontend</Text>
+        <View style={styles.progressBar}>
+          <View style={[styles.progressFill, { width: '85%' }]} />
+        </View>
+        <Text style={styles.progressValue}>85%</Text>
+      </View>
+      <View style={styles.progressRow}>
+        <Text style={styles.progressLabel}>Backend</Text>
+        <View style={styles.progressBar}>
+          <View
+            style={[
+              styles.progressFill,
+              { width: '92%', backgroundColor: colors.success },
+            ]}
+          />
+        </View>
+        <Text style={styles.progressValue}>92%</Text>
+      </View>
+    </View>
+  );
+};
+
+const TimelineDemo = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+
+  const orderTimelineItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Order Placed',
+      description: "We've received your order and will begin processing it.",
+      timestamp: 'May 7, 10:23 AM',
+      icon: 'shopping-bag',
+      status: 'complete',
+      meta: 'Order #38492',
+    },
+    {
+      id: 2,
+      title: 'Order Confirmed',
+      description: 'Your order is confirmed and ready to ship.',
+      timestamp: 'May 7, 11:05 AM',
+      icon: 'check-circle',
+      status: 'complete',
+      meta: 'Ready for shipment',
+    },
+    {
+      id: 3,
+      title: 'Shipped',
+      description: 'The package has left our facility and is on its way.',
+      timestamp: 'May 8, 9:15 AM',
+      icon: 'package',
+      status: 'complete',
+      children: <ShippingDetailsComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'In Transit',
+    },
+    {
+      id: 4,
+      title: 'Delivered',
+      timestamp: 'Est. May 10, by 6:00 PM',
+      icon: 'home',
+      status: 'upcoming',
+      meta: 'Pending delivery',
+      description: 'Your order will be delivered to your doorstep.',
+    },
+  ];
+
+  const projectTimelineItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Project Kickoff',
+      description: 'Initial meeting with stakeholders and team formation.',
+      timestamp: 'Jan 15, 2024',
+      icon: 'play-circle',
+      status: 'complete',
+      meta: 'Team assembled',
+    },
+    {
+      id: 2,
+      title: 'Design Phase',
+      description: 'UI/UX design, prototyping, and design system creation.',
+      timestamp: 'Feb 12, 2024',
+      icon: 'edit-3',
+      status: 'complete',
+      children: <ProjectMilestoneComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'Design system v2.0',
+    },
+    {
+      id: 3,
+      title: 'Development Sprint',
+      description: 'Frontend and backend development in parallel tracks.',
+      timestamp: 'Mar 5, 2024',
+      icon: 'code',
+      status: 'current',
+      children: <DevelopmentStatusComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'In Progress',
+    },
+    {
+      id: 4,
+      title: 'Launch',
+      description: 'Production deployment and go-live celebration.',
+      timestamp: 'Apr 15, 2024',
+      icon: 'zap',
+      status: 'upcoming',
+      meta: 'Launch day',
+    },
+  ];
+
+  const userJourneyItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Account Created',
+      description: 'User registered with email verification.',
+      timestamp: '2 hours ago',
+      icon: 'user-plus',
+      status: 'complete',
+      meta: 'sarah.johnson@email.com',
+    },
+    {
+      id: 2,
+      title: 'First Purchase',
+      description: 'Completed their first transaction successfully.',
+      timestamp: '45 minutes ago',
+      icon: 'shopping-cart',
+      status: 'complete',
+      meta: '$127.50',
+    },
+    {
+      id: 3,
+      title: 'App Downloaded',
+      description: 'Downloaded and logged into mobile application.',
+      timestamp: '12 minutes ago',
+      icon: 'smartphone',
+      status: 'current',
+      meta: 'iOS App',
+    },
+  ];
+
+  const handleItemPress = (item: TimelineItem) => {
+    console.log('Timeline item pressed:', item.title);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+        contentInsetAdjustmentBehavior="always"
+        scrollEnabled
+      >
+        <View style={styles.header}>
+          <View style={styles.iconContainer}>
+            <MaterialIcons name="timeline" size={32} color={colors.primary} />
+          </View>
+          <Text style={styles.headerTitle}>Timeline Component Demo</Text>
+          <Text style={styles.subtitle}>
+            Beautiful timelines with various styles and interactive features
+          </Text>
+        </View>
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>🧾 Order Timeline</Text>
+            <Text style={styles.sectionSubtitle}>
+              Follow your delivery journey
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={styles.metaContainer}
+              animationType="rotate"
+              items={orderTimelineItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.primary}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>🚀 Project Timeline</Text>
+            <Text style={styles.sectionSubtitle}>
+              Development milestones and progress
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={[
+                styles.metaContainer,
+                { backgroundColor: colors.card },
+              ]}
+              animationType="fade"
+              items={projectTimelineItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.success}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>👤 User Journey</Text>
+            <Text style={styles.sectionSubtitle}>
+              Real-time user activity tracking
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={[
+                styles.metaContainer,
+                { backgroundColor: colors.background },
+              ]}
+              animationType="scale"
+              items={userJourneyItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.destructive}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const createDemoStyles = (colors: any) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    content: {
+      padding: 24,
+      paddingBottom: 48,
+    },
+    header: {
+      alignItems: 'center',
+      marginBottom: 32,
+      paddingTop: 20,
+    },
+    iconContainer: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: colors.card,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    headerTitle: {
+      fontSize: 28,
+      fontWeight: '700',
+      color: colors.foreground,
+      textAlign: 'center',
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.mutedForeground,
+      textAlign: 'center',
+      lineHeight: 24,
+      maxWidth: 320,
+    },
+    section: {
+      marginBottom: 32,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.foreground,
+      marginBottom: 16,
+      marginLeft: 4,
+    },
+    sectionHeader: {
+      marginBottom: 16,
+    },
+    sectionSubtitle: {
+      fontSize: 14,
+      color: colors.mutedForeground,
+      marginTop: 4,
+      marginLeft: 4,
+    },
+    timelineWrapper: {
+      backgroundColor: colors.card,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 12,
+      padding: 16,
+    },
+    metaContainer: {
+      backgroundColor: colors.background,
+      borderRadius: 8,
+      padding: 8,
+    },
+    timelineTitle: {
+      color: colors.foreground,
+      fontWeight: '600',
+    },
+    timelineDescription: {
+      color: colors.mutedForeground,
+    },
+    timelineTimestamp: {
+      color: colors.mutedForeground,
+    },
+    timelineMeta: {
+      color: colors.foreground,
+    },
+    detailsCard: {
+      backgroundColor: colors.background,
+      borderRadius: 12,
+      padding: 12,
+      marginTop: 8,
+    },
+    detailsTitle: {
+      fontSize: 14,
+      color: colors.foreground,
+      fontWeight: '500',
+      marginBottom: 8,
+    },
+    detailsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 6,
+    },
+    detailsLabel: {
+      fontSize: 13,
+      color: colors.mutedForeground,
+    },
+    detailsValue: {
+      fontSize: 13,
+      color: colors.foreground,
+      fontWeight: '500',
+    },
+    progressRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    progressLabel: {
+      fontSize: 12,
+      color: colors.mutedForeground,
+      width: 60,
+    },
+    progressBar: {
+      flex: 1,
+      height: 6,
+      backgroundColor: colors.border,
+      borderRadius: 3,
+      marginHorizontal: 12,
+    },
+    progressFill: {
+      height: 6,
+      backgroundColor: colors.primary,
+      borderRadius: 3,
+    },
+    progressValue: {
+      fontSize: 12,
+      color: colors.foreground,
+      fontWeight: '500',
+      width: 35,
+      textAlign: 'right',
+    },
+  });
+
+export default TimelineDemo;

package/recipes/0/apps/native/src/components/advanced-ui/timeline/timeline-view.tsx

@@ -0,0 +1,355 @@
+/* eslint-disable */
+
+import { Feather } from '@expo/vector-icons';
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  interpolateColor,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import type { TimelineProps } from './types';
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedFeather = Animated.createAnimatedComponent(Feather);
+
+export const Timeline: React.FC<TimelineProps> &
+  React.FunctionComponent<TimelineProps> = ({
+  items = [],
+  activeColor: propsActiveColor,
+  inactiveColor: propsInactiveColor,
+  animated = true,
+  animationType = 'bounce',
+  onItemPress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  timestampStyle,
+  lineWidth = 2,
+  iconSize = 20,
+  metaContainerStyle,
+  metaTextStyle,
+}: TimelineProps): React.ReactNode & React.JSX.Element => {
+  const { colors } = useThemeConfig();
+  const activeColor = propsActiveColor ?? colors.primary;
+  const inactiveColor = propsInactiveColor ?? colors.muted;
+
+  const statusRefs = React.useRef<Record<string | number, string>>({});
+
+  useEffect(() => {
+    items.forEach((item) => {
+      statusRefs.current[item.id] = item.status || 'upcoming';
+    });
+
+    return () => {
+      statusRefs.current = {};
+    };
+  }, [items]);
+
+  if (!items || items.length === 0) {
+    return null as unknown as React.ReactNode & React.JSX.Element;
+  }
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      {items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const isComplete = item.status === 'complete';
+        const isCurrent = item.status === 'current';
+        const isUpcoming = item.status === 'upcoming' || !item.status;
+
+        const prevStatus = statusRefs.current[item.id];
+        const wasComplete = prevStatus === 'complete';
+        const statusChanged = prevStatus && prevStatus !== item.status;
+        statusRefs.current[item.id] = item.status || 'upcoming';
+
+        const dotScale = useSharedValue(statusChanged ? 1.5 : 1);
+        const dotColorAnimated = useSharedValue(
+          isComplete ? 1 : isCurrent ? 0.5 : 0,
+        );
+        const lineProgress = useSharedValue(isComplete ? 1 : 0);
+        const iconRotate = useSharedValue(statusChanged ? 0 : 1);
+
+        useEffect(() => {
+          if (statusChanged) {
+            switch (animationType) {
+              case 'bounce':
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+                break;
+              case 'spring':
+                dotScale.value = withSpring(1.2, { damping: 2, stiffness: 80 });
+                break;
+              case 'rotate':
+                iconRotate.value = withSequence(
+                  withTiming(0, { duration: 10 }),
+                  withTiming(4, { duration: 800 }),
+                );
+                dotScale.value = withSequence(
+                  withTiming(1.6, { duration: 200 }),
+                  withSpring(1),
+                );
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'fade':
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'scale':
+                dotScale.value = withSequence(
+                  withTiming(0.5, { duration: 200 }),
+                  withTiming(1.2, { duration: 200 }),
+                  withTiming(1, { duration: 200 }),
+                );
+                break;
+              default:
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+            }
+
+            dotColorAnimated.value = withTiming(
+              isComplete ? 1 : isCurrent ? 0.5 : 0,
+              { duration: 400 },
+            );
+
+            iconRotate.value = withSequence(
+              withTiming(0, { duration: 10 }),
+              withTiming(1, { duration: 400 }),
+            );
+
+            if (isComplete) {
+              lineProgress.value = withTiming(1, { duration: 600 });
+            } else if (wasComplete) {
+              lineProgress.value = withTiming(0, { duration: 600 });
+            }
+          } else {
+            lineProgress.value = isComplete ? 1 : 0;
+          }
+        }, [
+          item.status,
+          isComplete,
+          isCurrent,
+          animationType,
+          dotColorAnimated,
+          dotScale,
+          iconRotate,
+          lineProgress,
+          statusChanged,
+          wasComplete,
+        ]);
+
+        const dotAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ scale: dotScale.value }],
+            backgroundColor: interpolateColor(
+              dotColorAnimated.value,
+              [0, 0.5, 1],
+              [inactiveColor, activeColor, activeColor],
+            ),
+          };
+        });
+
+        const lineAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            backgroundColor: interpolateColor(
+              lineProgress.value,
+              [0, 1],
+              [inactiveColor, activeColor],
+            ),
+            width: lineWidth,
+            transform: [{ scaleY: lineProgress.value }],
+            opacity: 0.6 + lineProgress.value * 0.4,
+          };
+        });
+
+        const iconAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ rotate: `${iconRotate.value * 360}deg` }],
+            opacity: 0.8 + iconRotate.value * 0.2,
+          };
+        });
+
+        const iconName =
+          item.icon ||
+          (isComplete ? 'check' : isCurrent ? 'activity' : 'circle');
+
+        const textColor =
+          isComplete || isCurrent ? colors.foreground : colors.mutedForeground;
+
+        return (
+          <AnimatedTouchableOpacity
+            key={item.id}
+            style={styles.itemContainer}
+            activeOpacity={onItemPress ? 0.7 : 1}
+            onPress={() => onItemPress && onItemPress(item)}
+            entering={
+              animated ? FadeInDown.delay(index * 100).springify() : undefined
+            }
+            layout={LinearTransition.springify()}
+          >
+            <View style={styles.timelineColumn}>
+              <Animated.View style={[styles.dot, dotAnimatedStyle]}>
+                <Animated.View style={[{}, iconAnimatedStyle]}>
+                  <AnimatedFeather
+                    name={iconName as any}
+                    size={iconSize * 0.7}
+                    color={colors.primaryForeground}
+                  />
+                </Animated.View>
+              </Animated.View>
+
+              {!isLast && (
+                <Animated.View style={[styles.line, lineAnimatedStyle]} />
+              )}
+            </View>
+
+            <View style={styles.contentColumn}>
+              <View style={styles.itemHeader}>
+                <Text style={[styles.title, { color: textColor }, titleStyle]}>
+                  {item.title}
+                </Text>
+
+                {item.timestamp && (
+                  <Text
+                    style={[
+                      styles.timestamp,
+                      { color: colors.mutedForeground },
+                      timestampStyle,
+                    ]}
+                  >
+                    {item.timestamp}
+                  </Text>
+                )}
+              </View>
+
+              {item.description && (
+                <Text
+                  style={[
+                    styles.description,
+                    { color: colors.mutedForeground },
+                    descriptionStyle,
+                  ]}
+                >
+                  {item.description}
+                </Text>
+              )}
+
+              {item.meta && (
+                <View style={[styles.metaContainer, metaContainerStyle]}>
+                  <Text
+                    style={[
+                      styles.metaText,
+                      { color: colors.mutedForeground },
+                      metaTextStyle,
+                    ]}
+                  >
+                    {item.meta}
+                  </Text>
+                </View>
+              )}
+
+              {item.children && (
+                <View
+                  style={[styles.childrenContainer, item.childrenContainer]}
+                >
+                  {item.children}
+                </View>
+              )}
+            </View>
+          </AnimatedTouchableOpacity>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginBottom: 24,
+  },
+  timelineColumn: {
+    alignItems: 'center',
+    width: 40,
+  },
+  contentColumn: {
+    flex: 1,
+    marginLeft: 12,
+    marginTop: -4,
+  },
+  dot: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  line: {
+    flex: 1,
+    marginTop: 4,
+  },
+  itemHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 6,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  timestamp: {
+    fontSize: 12,
+    marginLeft: 8,
+  },
+  metaContainer: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  metaText: {
+    fontSize: 12,
+  },
+  childrenContainer: {
+    padding: 12,
+  },
+});

package/recipes/0/apps/native/src/components/advanced-ui/timeline/types.ts

@@ -0,0 +1,31 @@
+import type { Feather } from '@expo/vector-icons';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface TimelineItem {
+  id: string | number;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  icon?: keyof typeof Feather.glyphMap;
+  status?: 'complete' | 'current' | 'upcoming';
+  meta?: string;
+  children?: React.ReactNode;
+  childrenContainer?: StyleProp<ViewStyle>;
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  activeColor?: string;
+  inactiveColor?: string;
+  animated?: boolean;
+  animationType?: 'bounce' | 'spring' | 'rotate' | 'fade' | 'scale';
+  onItemPress?: (item: TimelineItem) => void;
+  containerStyle?: ViewStyle;
+  metaContainerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  timestampStyle?: TextStyle;
+  lineWidth?: number;
+  iconSize?: number;
+  metaTextStyle?: StyleProp<TextStyle>;
+}

package/recipes/0/recipe.json

@@ -0,0 +1,18 @@
+{
+  "name": "0",
+  "version": "1.0.0",
+  "description": "Advanced UI component: 0",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/timeline",
+      "to": "apps/native/src/components/advanced-ui/timeline"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
+  }
+}

package/recipes/glowing-button/apps/native/src/components/advanced-ui/buttons/glowing-button.tsx

@@ -0,0 +1,366 @@
+import { Text, View } from 'react-native';
+import AnimatedGlow, { type PresetConfig } from 'react-native-animated-glow';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export type Preset = (typeof presets)[keyof typeof presets];
+
+export const presets = {
+  cosmicNebula: {
+    cornerRadius: 70,
+    outlineWidth: 3,
+    borderColor: [
+      'rgba(255, 171, 203, 1)',
+      'rgba(112, 49, 164, 1)',
+      'rgba(35, 21, 50, 1)',
+    ],
+    backgroundColor: '#222',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#483D8B', '#8A2BE2', '#9370DB'],
+        glowSize: 20,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 185, 250, 1)',
+          'rgba(199, 129, 199, 1)',
+          'rgba(77, 61, 175, 1)',
+        ],
+        glowSize: [2, 6],
+        opacity: 0.6,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(225, 133, 242, 1)'],
+        glowSize: [0, 12],
+        opacity: 0.05,
+        speedMultiplier: 1.2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(255, 140, 255, 1)'],
+        glowSize: [0, 1],
+        opacity: 1,
+        speedMultiplier: 1.2,
+        coverage: 0.3,
+        relativeOffset: 0.9,
+      },
+    ],
+  },
+  oceanSunset: {
+    cornerRadius: 70,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(255, 124, 171, 1)',
+      'rgba(63, 100, 199, 1)',
+      'rgba(240, 115, 46, 1)',
+    ],
+    backgroundColor: 'rgba(21, 21, 21, 1)',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#f82fc6', '#5a4ff9', '#ff923e'],
+        glowSize: 15,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(255, 89, 213, 1)',
+          'rgba(63, 89, 255, 1)',
+          'rgba(255, 164, 0, 1)',
+        ],
+        glowSize: 5,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  glowingBorder: {
+    cornerRadius: 70,
+    outlineWidth: 1,
+    borderColor: [
+      'rgba(16, 16, 16, 1)',
+      'rgba(227, 74, 255, 0.3)',
+      'rgba(142, 88, 163, 1)',
+      'rgba(98, 181, 255, 1)',
+      'rgba(199, 208, 255, 1)',
+      'rgba(55, 112, 169, 1)',
+    ],
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 25, 20, 0],
+        opacity: 0.15,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 5, 5, 0],
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(166, 68, 195, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [1, 8],
+        opacity: 0.06,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(225, 102, 235, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(0, 181, 255, 1)'],
+        glowSize: [0, 8],
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 0.3,
+        relativeOffset: 0.4,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(255, 255, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.4,
+      },
+    ],
+  },
+  cyberPink: {
+    cornerRadius: 70,
+    outlineWidth: 8,
+    borderColor: ['rgba(177, 102, 255, 1)', 'rgba(255, 102, 163, 1)'],
+    backgroundColor: 'rgba(27, 0, 25, 1)',
+    animationSpeed: 3,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#FF1493', 'rgba(206, 0, 255, 1)', '#DB7093'],
+        glowSize: 30,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(254, 160, 177, 1)', 'rgba(206, 180, 255, 1)'],
+        glowSize: 12,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(255, 164, 180, 1)', 'rgba(255, 217, 217, 1)'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  defaultRainbow: {
+    cornerRadius: 30,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(238, 255, 0, 1)',
+      'rgba(79, 255, 0, 1)',
+      'rgba(46, 90, 255, 1)',
+      'rgba(254, 0, 255, 1)',
+      'rgba(231, 23, 23, 1)',
+    ],
+    backgroundColor: 'rgba(10, 10, 10, 1)',
+    animationSpeed: 1.2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(205, 201, 35, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 34,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 182, 32, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 6,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF'],
+        glowSize: [2, 8, 8, 2],
+        opacity: 0.2,
+        speedMultiplier: 2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  arcticFreeze: {
+    cornerRadius: 60,
+    outlineWidth: 4,
+    borderColor: 'white',
+    backgroundColor: 'rgba(228, 246, 255, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#00FFFF', '#E0FFFF'],
+        glowSize: 10,
+        opacity: 0.4,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF', '#AFEEEE'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  auroraBorealis: {
+    cornerRadius: 30,
+    outlineWidth: 0,
+    borderColor: 'white',
+    backgroundColor: '#222',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', '#33a0ff', '#f5519f'],
+        glowSize: 30,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 10,
+        opacity: 0.5,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 3,
+        opacity: 1,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+} as const;
+
+interface GlowingButtonProps {
+  preset: keyof typeof presets; // Only allows valid preset keys
+  label: string;
+}
+
+export default function GlowingButton({ preset, label }: GlowingButtonProps) {
+  const theme = useThemeConfig();
+  return (
+    <AnimatedGlow preset={presets[preset] as unknown as PresetConfig}>
+      <View
+        className="rounded-full p-5"
+        style={{ backgroundColor: theme.colors.secondary }}
+      >
+        <Text
+          className="text-center text-base font-semibold"
+          style={{ color: theme.colors.secondaryForeground }}
+        >
+          {label}
+        </Text>
+      </View>
+    </AnimatedGlow>
+  );
+}

package/recipes/glowing-button/recipe.json

@@ -0,0 +1,17 @@
+{
+  "name": "glowing-button",
+  "version": "1.0.0",
+  "description": "Animated glowing button with multiple presets",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/buttons",
+      "to": "apps/native/src/components/advanced-ui/buttons"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated"
+    ]
+  }
+}

package/scripts/create-advanced-ui-recipes.sh

@@ -0,0 +1,57 @@
+#!/bin/bash
+
+# Create advanced UI recipes from monorepo components
+
+RECIPES_DIR="recipes"
+MONOREPO="../vibefast-monorepo"
+
+# Define advanced UI components
+declare -A COMPONENTS=(
+  ["glowing-button"]="buttons"
+  ["animated-chip"]="chip"
+  ["number-stepper"]="stepper"
+  ["animated-switch"]="switch"
+  ["progress-circle"]="progress-bars"
+  ["swipe-slider"]="sliders"
+  ["timeline"]="timeline"
+)
+
+for component in "${!COMPONENTS[@]}"; do
+  folder="${COMPONENTS[$component]}"
+  echo "Creating recipe for $component from $folder..."
+  
+  # Create recipe directory structure
+  mkdir -p "$RECIPES_DIR/$component/apps/native/src/components/advanced-ui/$folder"
+  
+  # Copy component files
+  cp -r "$MONOREPO/apps/native/src/components/advanced-ui/$folder"/* \
+    "$RECIPES_DIR/$component/apps/native/src/components/advanced-ui/$folder/" 2>/dev/null || true
+  
+  # Create recipe.json
+  cat > "$RECIPES_DIR/$component/recipe.json" <<EOF
+{
+  "name": "$component",
+  "version": "1.0.0",
+  "description": "Advanced UI component: $component",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/$folder",
+      "to": "apps/native/src/components/advanced-ui/$folder"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
+  }
+}
+EOF
+
+  echo "✓ Created $component recipe"
+done
+
+echo ""
+echo "All advanced UI recipes created!"
+echo "Now run: ./recipes/upload-all.sh"