vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/components/advanced-ui/stepper/context/types.ts

@@ -0,0 +1,9 @@
+export interface StepperContextProps {
+  value: number;
+  onChange: (newValue: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  variant?: 'light' | 'dark';
+}

package/2/apps/native/src/components/advanced-ui/stepper/demo.tsx

@@ -0,0 +1,346 @@
+import type React from 'react';
+import { useState } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { Stepper, StepperButton, StepperContent, StepperValue } from './index';
+
+const StepperDemo: React.FC = () => {
+  const { colors } = useThemeConfig();
+  const [quantity, setQuantity] = useState(1);
+  const [temperature, setTemperature] = useState(20);
+  const [volume, setVolume] = useState(50);
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    contentContainer: {
+      flexGrow: 1,
+    },
+    safeArea: {
+      flex: 1,
+    },
+    content: {
+      flex: 1,
+      paddingHorizontal: 24,
+      paddingVertical: 32,
+    },
+    header: {
+      marginBottom: 48,
+    },
+    title: {
+      color: colors.foreground,
+      fontSize: 32,
+      fontWeight: '700',
+      marginBottom: 8,
+    },
+    subtitle: {
+      color: colors.mutedForeground,
+      fontSize: 16,
+    },
+    sectionsContainer: {
+      gap: 48,
+    },
+    section: {
+      gap: 16,
+    },
+    sectionHeader: {},
+    sectionTitle: {
+      color: colors.foreground,
+      fontSize: 20,
+      fontWeight: '600',
+      marginBottom: 8,
+    },
+    sectionSubtitle: {
+      color: colors.mutedForeground,
+      fontSize: 14,
+    },
+    stepperContainer: {
+      // backgroundColor: colors.card,
+      // borderRadius: 12,
+      // borderWidth: 1,
+      // borderColor: colors.border,
+      // padding: 4,
+    },
+    stepperContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 0,
+    },
+    stepperButton: {
+      width: 44,
+      height: 44,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    stepperValue: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.foreground,
+      minWidth: 60,
+      textAlign: 'center',
+      lineHeight: 44,
+    },
+    temperatureStepperContainer: {
+      padding: 6,
+    },
+    temperatureButton: {
+      width: 40,
+      height: 40,
+    },
+    temperatureValueContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: 80,
+      height: 40,
+    },
+    temperatureValue: {
+      fontSize: 24,
+      fontWeight: '700',
+      color: colors.foreground,
+      textAlign: 'center',
+      lineHeight: 28,
+    },
+    temperatureUnit: {
+      fontSize: 12,
+      color: colors.mutedForeground,
+      marginTop: -2,
+    },
+    volumeStepperContainer: {
+      // backgroundColor: colors.input,
+      borderRadius: 16,
+      // borderColor: colors.border,
+      padding: 8,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+    volumeButton: {
+      width: 48,
+      height: 48,
+    },
+    volumeValueContainer: {
+      minWidth: 90,
+      height: 48,
+    },
+    volumeValue: {
+      fontSize: 28,
+      fontWeight: '800',
+      lineHeight: 32,
+    },
+    volumeLabel: {
+      fontWeight: '500',
+      marginTop: -4,
+    },
+    ratingStepperContainer: {
+      backgroundColor: '#0f0f0f', // custom dark
+      borderRadius: 8,
+      padding: 10,
+    },
+    ratingButton: {
+      width: 36,
+      height: 36,
+    },
+    ratingValue: {
+      minWidth: 40,
+      lineHeight: 36,
+    },
+    summaryCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.border,
+      padding: 20,
+    },
+    summaryTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.foreground,
+      marginBottom: 16,
+    },
+    summaryRows: {
+      gap: 8,
+    },
+    summaryRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    summaryLabel: {
+      color: colors.mutedForeground,
+    },
+    summaryValue: {
+      color: colors.foreground,
+      fontWeight: '500',
+    },
+  });
+
+  return (
+    <ScrollView
+      style={styles.container}
+      scrollEnabled={true}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior="always"
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Stepper Components</Text>
+            <Text style={styles.subtitle}>
+              Beautiful, accessible stepper components built with shadcn/ui
+              design principles.
+            </Text>
+          </View>
+
+          <View style={styles.sectionsContainer}>
+            <View style={styles.section}>
+              <View style={styles.sectionHeader}>
+                <Text style={styles.sectionTitle}>Quantity</Text>
+                <Text style={styles.sectionSubtitle}>
+                  Select the number of items
+                </Text>
+              </View>
+
+              <Stepper
+                containerStyle={styles.stepperContainer}
+                defaultValue={1}
+                disabled={false}
+                max={99}
+                min={1}
+                onChange={setQuantity}
+                step={1}
+                value={quantity}
+                variant="dark"
+              >
+                <StepperContent style={styles.stepperContent}>
+                  <StepperButton
+                    type="decrement"
+                    style={styles.stepperButton}
+                  />
+                  <StepperValue style={styles.stepperValue} />
+                  <StepperButton
+                    type="increment"
+                    style={styles.stepperButton}
+                  />
+                </StepperContent>
+              </Stepper>
+            </View>
+
+            <View style={styles.section}>
+              <View style={styles.sectionHeader}>
+                <Text style={styles.sectionTitle}>Temperature</Text>
+                <Text style={styles.sectionSubtitle}>
+                  Adjust the temperature in celsius
+                </Text>
+              </View>
+
+              <Stepper
+                containerStyle={[
+                  styles.stepperContainer,
+                  styles.temperatureStepperContainer,
+                ]}
+                defaultValue={20}
+                disabled={false}
+                max={35}
+                min={10}
+                onChange={setTemperature}
+                step={1}
+                value={temperature}
+                variant="dark"
+              >
+                <StepperContent style={styles.stepperContent}>
+                  <StepperButton
+                    type="decrement"
+                    style={[styles.stepperButton, styles.temperatureButton]}
+                  />
+                  <View style={styles.temperatureValueContainer}>
+                    <StepperValue style={styles.temperatureValue} />
+                    <Text style={styles.temperatureUnit}>°C</Text>
+                  </View>
+                  <StepperButton
+                    type="increment"
+                    style={[styles.stepperButton, styles.temperatureButton]}
+                  />
+                </StepperContent>
+              </Stepper>
+            </View>
+
+            <View style={styles.section}>
+              <View style={styles.sectionHeader}>
+                <Text style={styles.sectionTitle}>Volume</Text>
+                <Text style={styles.sectionSubtitle}>
+                  Control audio volume level
+                </Text>
+              </View>
+
+              <Stepper
+                containerStyle={[
+                  styles.stepperContainer,
+                  styles.volumeStepperContainer,
+                ]}
+                defaultValue={50}
+                disabled={false}
+                max={100}
+                min={0}
+                onChange={setVolume}
+                step={5}
+                value={volume}
+                variant="dark"
+              >
+                <StepperContent style={styles.stepperContent}>
+                  <StepperButton
+                    type="decrement"
+                    style={[styles.stepperButton, styles.volumeButton]}
+                  />
+                  <View
+                    style={[
+                      styles.temperatureValueContainer,
+                      styles.volumeValueContainer,
+                    ]}
+                  >
+                    <StepperValue
+                      style={[styles.temperatureValue, styles.volumeValue]}
+                    />
+                    <Text style={[styles.temperatureUnit, styles.volumeLabel]}>
+                      Volume
+                    </Text>
+                  </View>
+                  <StepperButton
+                    type="increment"
+                    style={[styles.stepperButton, styles.volumeButton]}
+                  />
+                </StepperContent>
+              </Stepper>
+            </View>
+            <View style={styles.summaryCard}>
+              <Text style={styles.summaryTitle}>Current Values</Text>
+              <View style={styles.summaryRows}>
+                <View style={styles.summaryRow}>
+                  <Text style={styles.summaryLabel}>Quantity:</Text>
+                  <Text style={styles.summaryValue}>{quantity}</Text>
+                </View>
+                <View style={styles.summaryRow}>
+                  <Text style={styles.summaryLabel}>Temperature:</Text>
+                  <Text style={styles.summaryValue}>{temperature}°C</Text>
+                </View>
+                <View style={styles.summaryRow}>
+                  <Text style={styles.summaryLabel}>Volume:</Text>
+                  <Text style={styles.summaryValue}>{volume}%</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </SafeAreaView>
+    </ScrollView>
+  );
+};
+
+export default StepperDemo;

package/2/apps/native/src/components/advanced-ui/stepper/index.ts

@@ -0,0 +1,4 @@
+export * from './children/button/stepper-button';
+export * from './children/content/stepper-content';
+export * from './children/value/stepper-value';
+export * from './stepper';

package/2/apps/native/src/components/advanced-ui/stepper/stepper.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import { StepperContext } from './context/stepper-context';
+import type { StepperProps } from './types';
+
+export const Stepper: React.FC<StepperProps> = ({
+  children,
+  value: controlledValue,
+  onChange: controlledOnChange,
+  defaultValue = 0,
+  min = 0,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  disabled = false,
+  variant = 'light',
+  style,
+  containerStyle,
+}: StepperProps): React.ReactNode => {
+  const { colors } = useThemeConfig();
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleChange = useCallback(
+    (newValue: number) => {
+      const clampedValue = Math.min(Math.max(newValue, min), max);
+
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+
+      controlledOnChange?.(clampedValue);
+    },
+    [min, max, isControlled, controlledOnChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      value,
+      onChange: handleChange,
+      min,
+      max,
+      step,
+      disabled,
+      variant,
+    }),
+    [value, handleChange, min, max, step, disabled, variant],
+  );
+
+  const isDarkMode = variant === 'dark';
+  const stepperStyle = [
+    styles.stepper,
+    {
+      borderColor: isDarkMode ? colors.border : 'rgba(0, 0, 0, 0.1)',
+      backgroundColor: isDarkMode ? colors.card : 'transparent',
+    },
+    style,
+  ];
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <Animated.View
+        style={[styles.container, containerStyle]}
+        layout={LinearTransition.springify().damping(14).stiffness(100)}
+      >
+        <Animated.View
+          layout={LinearTransition.springify().damping(14).stiffness(100)}
+          style={stepperStyle}
+        >
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </StepperContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 28,
+    borderWidth: 1,
+    overflow: 'hidden',
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+});

package/2/apps/native/src/components/advanced-ui/stepper/types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { StepperContextProps } from './context/types';
+
+export interface StepperProps extends Partial<StepperContextProps> {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+}