vibefast-cli 0.2.4 → 0.3.1

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

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

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

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

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

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

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

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

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

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

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