vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/components/ui/icons/style.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
-
-export const Style = ({ color = '#000', ...props }: SvgProps) => (
-  <Svg width={25} height={24} fill="none" viewBox="0 0 25 24" {...props}>
-    <G
-      clipPath="url(#style)"
-      stroke={color}
-      strokeWidth={2.438}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <Path d="M6.94 10.125a3.188 3.188 0 1 0 0-6.375 3.188 3.188 0 0 0 0 6.375ZM17.064 10.125a3.188 3.188 0 1 0 0-6.375 3.188 3.188 0 0 0 0 6.375ZM6.94 20.25a3.188 3.188 0 1 0 0-6.375 3.188 3.188 0 0 0 0 6.375ZM17.064 20.25a3.188 3.188 0 1 0 0-6.375 3.188 3.188 0 0 0 0 6.375Z" />
-    </G>
-    <Defs>
-      <ClipPath id="style">
-        <Path fill="#fff" transform="translate(.002)" d="M0 0h24v24H0z" />
-      </ClipPath>
-    </Defs>
-  </Svg>
-);

package/2/apps/native/src/components/ui/icons/support.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
-
-import colors from '../colors';
-
-export const Support = ({
-  color = colors.neutral[500],
-  ...props
-}: SvgProps) => (
-  <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
-    <G clipPath="url(#a)">
-      <Path
-        d="m12.533 19.866 7.594-7.594c1.865-1.875 2.137-4.94.375-6.9a4.875 4.875 0 0 0-7.078-.197L11.999 6.61 10.77 5.372c-1.874-1.866-4.94-2.137-6.9-.375a4.875 4.875 0 0 0-.196 7.078l7.79 7.79a.76.76 0 0 0 1.069 0v0Z"
-        stroke={color}
-        strokeWidth={1.219}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </G>
-    <Defs>
-      <ClipPath id="a">
-        <Path fill="#fff" d="M0 0h24v24H0z" />
-      </ClipPath>
-    </Defs>
-  </Svg>
-);

package/2/apps/native/src/components/ui/icons/trash2.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Line, Path } from 'react-native-svg';
-
-export const Trash2 = ({ color = '#000', ...props }: SvgProps) => (
-  <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
-    <Path
-      d="M3 6h18l-2 13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L3 6Z"
-      stroke={color}
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-      stroke={color}
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Line
-      x1="10"
-      x2="10"
-      y1="11"
-      y2="17"
-      stroke={color}
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Line
-      x1="14"
-      x2="14"
-      y1="11"
-      y2="17"
-      stroke={color}
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);

package/2/apps/native/src/components/ui/icons/user.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-
-export const User = ({ color = '#000', ...props }: SvgProps) => (
-  <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
-    <Path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-      fill={color}
-    />
-  </Svg>
-);

package/2/apps/native/src/components/ui/icons/website.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
-
-import colors from '../colors';
-
-export const Website = ({
-  color = colors.neutral[500],
-  ...props
-}: SvgProps) => (
-  <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
-    <G
-      clipPath="url(#a)"
-      stroke={color}
-      strokeWidth={1.219}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <Path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18" />
-      <Path d="M12 20.756c2.07 0 3.75-3.92 3.75-8.756S14.07 3.244 12 3.244c-2.071 0-3.75 3.92-3.75 8.756s1.679 8.756 3.75 8.756Z" />
-    </G>
-    <Defs>
-      <ClipPath id="a">
-        <Path fill="#fff" d="M0 0h24v24H0z" />
-      </ClipPath>
-    </Defs>
-  </Svg>
-);

package/2/apps/native/src/components/ui/icons/wifi-off.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-
-export function WifiOff({ color = '#000', ...props }: SvgProps) {
-  return (
-    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
-      <Path
-        d="M12 20h.01M8.5 16.429a5 5 0 0 1 7 0M5 12.859a10 10 0 0 1 5.17-2.69M19 12.859a10 10 0 0 0-2.007-1.523M2 2l20 20M22 12.859a15.91 15.91 0 0 0-6.435-2.239"
-        stroke={color}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Svg>
-  );
-}

package/2/apps/native/src/components/ui/index.tsx

@@ -1,14 +0,0 @@
-import { cssInterop } from 'nativewind';
-import * as RNSvg from 'react-native-svg';
-
-export * from './debug';
-export * from './patterns';
-export * from './primitives';
-
-// Guard: react-native-svg default export may vary; avoid undefined.displayName
-const SvgComponent = (RNSvg as any)?.default || (RNSvg as any)?.Svg;
-if (SvgComponent) {
-  cssInterop(SvgComponent, {
-    className: { target: 'style' },
-  });
-}

package/2/apps/native/src/components/ui/nav-item.tsx

@@ -1,42 +0,0 @@
-import type React from 'react';
-import { View } from 'react-native';
-
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import { Pressable } from './core/pressable';
-import { Text } from './core/text';
-import { ArrowRight } from './icons';
-
-export type NavItemProps = {
-  label: string;
-  onPress?: () => void;
-  right?: React.ReactNode;
-  left?: React.ReactNode;
-  testID?: string;
-};
-
-export function NavItem({ label, onPress, right, left, testID }: NavItemProps) {
-  const isPressable = typeof onPress === 'function';
-  const theme = useThemeConfig();
-  return (
-    <Pressable
-      onPress={onPress}
-      pointerEvents={isPressable ? 'auto' : 'none'}
-      className="mb-3 flex-row items-center justify-between rounded-xl bg-muted p-4"
-      accessibilityRole={isPressable ? 'button' : undefined}
-      accessibilityLabel={label}
-      testID={testID}
-    >
-      <View className="flex-row items-center gap-3">
-        {left}
-        <Text className="text-base font-medium">{label}</Text>
-      </View>
-      <View className="flex-row items-center gap-2">
-        {right}
-        <ArrowRight color={theme.colors.mutedForeground} />
-      </View>
-    </Pressable>
-  );
-}
-
-export default NavItem;

package/2/apps/native/src/components/ui/patterns/index.ts

@@ -1,16 +0,0 @@
-export * from '../core/feature-button';
-export * from '../core/focus-aware-status-bar';
-export * from '../core/navigation/animated-header';
-export * from '../core/navigation/screen-footer';
-export * from '../core/overlays/dropdown';
-export * from '../core/overlays/full-screen-loading';
-export * from '../core/overlays/modal';
-export * from '../extras/network-connectivity-wrapper';
-export * from '../extras/offline-indicator';
-export * from '../extras/social-login-buttons';
-export * from '../file-picker';
-export * from '../gallery';
-export * from '../nav-item';
-export * from '../table';
-export * from '../tabs';
-export * from '../video';

package/2/apps/native/src/components/ui/picker.tsx

@@ -1,244 +0,0 @@
-import {
-  BottomSheetBackdrop,
-  BottomSheetFlatList,
-  BottomSheetModal,
-  BottomSheetTextInput,
-} from '@gorhom/bottom-sheet';
-import React from 'react';
-import { type ListRenderItemInfo, Pressable, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import { Text } from './core/text';
-
-export type PickerOption = { label: string; value: string };
-
-export type PickerProps = {
-  options: PickerOption[];
-  value: string;
-  onValueChange: (v: string) => void;
-  placeholder?: string;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  modalTitle?: string;
-};
-
-export function Picker({
-  options,
-  value,
-  onValueChange,
-  placeholder = 'Select…',
-  searchable = true,
-  searchPlaceholder = 'Search…',
-  modalTitle = 'Select an option',
-}: PickerProps) {
-  const theme = useThemeConfig();
-  const insets = useSafeAreaInsets();
-
-  const sheetRef = React.useRef<BottomSheetModal>(null);
-  const inputRef = React.useRef<any>(null);
-
-  const [query, setQuery] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false); // guard against accidental re-renders
-
-  const open = React.useCallback(() => {
-    if (isOpen) return;
-    setIsOpen(true);
-    sheetRef.current?.present();
-  }, [isOpen]);
-
-  const close = React.useCallback(() => {
-    if (!isOpen) return;
-    // clear query after closing to avoid remount-flicker on some keyboards
-    sheetRef.current?.dismiss();
-  }, [isOpen]);
-
-  const label = React.useMemo(
-    () => options.find((o) => o.value === value)?.label ?? placeholder,
-    [options, value, placeholder],
-  );
-
-  const filtered = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
-  }, [options, query]);
-
-  // Snap points: short by default, tall when pulled up / typing
-  const snapPoints = React.useMemo(() => ['35%', '80%'], []);
-
-  const renderBackdrop = React.useCallback(
-    (props: any) => (
-      <BottomSheetBackdrop
-        {...props}
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-        pressBehavior="close"
-        opacity={0.25}
-      />
-    ),
-    [],
-  );
-
-  // Focus search when the sheet is opened (after animation)
-  const handleSheetChange = React.useCallback(
-    (index: number) => {
-      if (index === -1) {
-        // closed
-        setIsOpen(false);
-        setQuery('');
-        return;
-      }
-      if (index >= 0 && searchable) {
-        requestAnimationFrame(() => {
-          inputRef.current?.focus?.();
-        });
-      }
-    },
-    [searchable],
-  );
-
-  // Commit selection immediately; dismiss next frame (prevents press-cancel during layout)
-  const handleSelect = React.useCallback(
-    (val: string) => {
-      onValueChange(val);
-      requestAnimationFrame(close);
-    },
-    [close, onValueChange],
-  );
-
-  const renderItem = React.useCallback(
-    ({ item }: ListRenderItemInfo<PickerOption>) => {
-      const selected = item.value === value;
-      return (
-        <Pressable
-          accessibilityRole="button"
-          onPressIn={() => handleSelect(item.value)}
-          hitSlop={8}
-          pressRetentionOffset={{ top: 20, left: 20, bottom: 20, right: 20 }}
-          style={{
-            paddingVertical: 12,
-            paddingHorizontal: 8,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border,
-            backgroundColor: selected ? theme.colors.secondary : 'transparent',
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ fontWeight: selected ? '600' : '400' }}>
-            {item.label}
-          </Text>
-        </Pressable>
-      );
-    },
-    [handleSelect, theme.colors.border, theme.colors.secondary, value],
-  );
-
-  return (
-    <>
-      {/* Trigger */}
-      <Pressable
-        accessibilityRole="button"
-        onPress={open}
-        style={{
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-          backgroundColor: theme.colors.card,
-          paddingHorizontal: 12,
-          paddingVertical: 10,
-          borderRadius: 12,
-        }}
-      >
-        <Text
-          style={{
-            color:
-              label === placeholder
-                ? theme.colors.mutedForeground
-                : theme.colors.foreground,
-          }}
-        >
-          {label}
-        </Text>
-      </Pressable>
-
-      {/* Bottom Sheet Picker (uncontrolled via present/dismiss) */}
-      <BottomSheetModal
-        ref={sheetRef}
-        index={0}
-        snapPoints={snapPoints}
-        enablePanDownToClose
-        // Keyboard handling that "just works"
-        keyboardBehavior="interactive"
-        keyboardBlurBehavior="restore"
-        android_keyboardInputMode="adjustPan"
-        bottomInset={insets.bottom}
-        backdropComponent={renderBackdrop}
-        onChange={handleSheetChange}
-        // THEMING: make it match your design
-        backgroundStyle={{ backgroundColor: theme.colors.card }}
-        handleStyle={{ backgroundColor: theme.colors.card }}
-        handleIndicatorStyle={{ backgroundColor: theme.colors.mutedForeground }}
-        // Stability: don't auto size while typing/filtering
-        enableDynamicSizing={false}
-      >
-        <BottomSheetFlatList
-          data={filtered}
-          keyExtractor={(item) => item.value}
-          renderItem={renderItem}
-          keyboardShouldPersistTaps="always"
-          ListHeaderComponent={
-            <View
-              style={{
-                padding: 12,
-                backgroundColor: theme.colors.card,
-              }}
-            >
-              {modalTitle ? (
-                <Text
-                  className="text-lg font-semibold"
-                  style={{ marginBottom: 8 }}
-                >
-                  {modalTitle}
-                </Text>
-              ) : null}
-
-              {searchable ? (
-                <BottomSheetTextInput
-                  ref={inputRef}
-                  value={query}
-                  onChangeText={setQuery}
-                  placeholder={searchPlaceholder}
-                  placeholderTextColor={theme.colors.mutedForeground}
-                  returnKeyType="search"
-                  clearButtonMode="while-editing"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  style={{
-                    borderWidth: 1,
-                    borderColor: theme.colors.border,
-                    backgroundColor: theme.colors.background,
-                    color: theme.colors.foreground,
-                    paddingHorizontal: 10,
-                    paddingVertical: 8,
-                    borderRadius: 10,
-                  }}
-                />
-              ) : null}
-            </View>
-          }
-          stickyHeaderIndices={searchable ? [0] : []}
-          contentContainerStyle={{
-            paddingHorizontal: 12,
-            paddingBottom: insets.bottom,
-            backgroundColor: theme.colors.card, // keep list background themed
-          }}
-          scrollIndicatorInsets={{ bottom: insets.bottom }}
-          removeClippedSubviews={false}
-        />
-      </BottomSheetModal>
-    </>
-  );
-}
-
-export default Picker;