vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,313 +0,0 @@
-import type React from 'react';
-import {
-  cloneElement,
-  createContext,
-  isValidElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Dimensions, Modal, View } from 'react-native';
-
-import { Pressable } from './core/pressable';
-
-type Anchor = { x: number; y: number; width: number; height: number };
-type TriggerEntry = { rect: Anchor; openExternal: () => void };
-
-const getGlobalRegistry = () => {
-  const globalObj = global as any;
-  if (!globalObj.__POPOVER_TRIGGER_REG__) {
-    globalObj.__POPOVER_TRIGGER_REG__ = new Map<number, TriggerEntry>();
-    globalObj.__POPOVER_TRIGGER_ID__ = 1;
-  }
-  return {
-    REG: globalObj.__POPOVER_TRIGGER_REG__ as Map<number, TriggerEntry>,
-    nextId: () => {
-      const id = globalObj.__POPOVER_TRIGGER_ID__;
-      globalObj.__POPOVER_TRIGGER_ID__ += 1;
-      return id;
-    },
-  };
-};
-
-const setRef = <T,>(ref: React.Ref<T> | undefined, value: T | null) => {
-  if (!ref) return;
-  if (typeof ref === 'function') {
-    ref(value);
-    return;
-  }
-  try {
-    (ref as React.MutableRefObject<T | null>).current = value;
-  } catch {
-    // Some refs might be read-only (e.g. from memoized components)
-  }
-};
-
-const composeEventHandlers = <E,>(
-  original?: ((event: E) => void) | undefined,
-  next?: (event: E) => void,
-) => {
-  return (event: E) => {
-    original?.(event);
-    next?.(event);
-  };
-};
-type Ctx = {
-  open: boolean;
-  setOpen: (v: boolean) => void;
-  anchor: Anchor;
-  setAnchor: (a: Anchor) => void;
-  activeTriggerId: number | null;
-  setActiveTriggerId: React.Dispatch<React.SetStateAction<number | null>>;
-};
-const PopoverCtx = createContext<Ctx | null>(null);
-
-export type PopoverProps = { children: React.ReactNode };
-export function Popover({ children }: PopoverProps) {
-  const [open, setOpen] = useState(false);
-  const [anchor, setAnchor] = useState<Anchor>({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
-  const [activeTriggerId, setActiveTriggerId] = useState<number | null>(null);
-  return (
-    <PopoverCtx.Provider
-      value={{
-        open,
-        setOpen,
-        anchor,
-        setAnchor,
-        activeTriggerId,
-        setActiveTriggerId,
-      }}
-    >
-      {children}
-    </PopoverCtx.Provider>
-  );
-}
-
-export type PopoverTriggerProps = {
-  children: React.ReactNode;
-  asChild?: boolean;
-};
-export function PopoverTrigger({ children, asChild }: PopoverTriggerProps) {
-  const ctx = useContext(PopoverCtx);
-  if (!ctx) throw new Error('PopoverTrigger must be used within Popover');
-  const triggerRef = useRef<View>(null);
-
-  const { REG, nextId } = getGlobalRegistry();
-  const idRef = useRef<number>(nextId());
-
-  // Ensure this trigger id is known to its Popover context
-  const { open, setOpen, setAnchor, activeTriggerId, setActiveTriggerId } = ctx;
-
-  useEffect(() => {
-    const currentId = idRef.current;
-    setActiveTriggerId(currentId);
-    return () => {
-      setActiveTriggerId((prev) => (prev === currentId ? null : prev));
-    };
-  }, [setActiveTriggerId]);
-
-  const measureAndSetAnchor = useCallback(
-    (cb?: () => void) => {
-      const node = triggerRef.current as any;
-      if (node && node.measureInWindow) {
-        node.measureInWindow(
-          (x: number, y: number, width: number, height: number) => {
-            const rect = { x, y, width, height } as Anchor;
-            setAnchor(rect);
-            // update registry with latest rect
-            const entry = REG.get(idRef.current);
-            if (entry) entry.rect = rect;
-            cb?.();
-          },
-        );
-      } else {
-        cb?.();
-      }
-    },
-    [REG, setAnchor],
-  );
-
-  // Register in global registry for external open (used when tapping another trigger while a popover is open)
-  useEffect(() => {
-    const openExternal = () => {
-      measureAndSetAnchor(() => setOpen(true));
-    };
-    const currentId = idRef.current;
-    REG.set(currentId, {
-      rect: { x: 0, y: 0, width: 0, height: 0 },
-      openExternal,
-    });
-    return () => {
-      REG.delete(currentId);
-    };
-  }, [REG, measureAndSetAnchor, setOpen]);
-
-  const onPress = () => {
-    // Toggle if pressing the same trigger; otherwise open this one
-    measureAndSetAnchor(() => {
-      if (open && activeTriggerId === idRef.current) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    });
-  };
-
-  const onLayout = () => {
-    // keep registry rect fresh for hit-testing under overlay
-    measureAndSetAnchor();
-  };
-  if (asChild && isValidElement(children)) {
-    type ChildProps = {
-      onPress?: (event: any) => void;
-      onLayout?: (event: any) => void;
-      accessibilityRole?: string;
-      ref?: React.Ref<View>;
-    };
-    const child = children as React.ReactElement<ChildProps>;
-    const childRef =
-      (child as typeof child & { ref?: React.Ref<View> }).ref || undefined;
-    return cloneElement(child as any, {
-      ref: (node: View | null) => {
-        triggerRef.current = node;
-        setRef(childRef, node);
-      },
-      onPress: composeEventHandlers(child.props?.onPress, () => onPress()),
-      onLayout: composeEventHandlers(child.props?.onLayout, () => onLayout()),
-      accessibilityRole: child.props?.accessibilityRole ?? 'button',
-    });
-  }
-  return (
-    <Pressable
-      ref={triggerRef as any}
-      onPress={onPress}
-      onLayout={onLayout}
-      accessibilityRole="button"
-    >
-      {children}
-    </Pressable>
-  );
-}
-
-export type PopoverContentProps = {
-  children: React.ReactNode;
-  className?: string;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  align?: 'start' | 'center' | 'end';
-};
-export function PopoverContent({
-  children,
-  className = '',
-}: PopoverContentProps) {
-  const ctx = useContext(PopoverCtx);
-  if (!ctx) throw new Error('PopoverContent must be used within Popover');
-  const switchedRef = useRef(false);
-  const { open, anchor, setOpen, activeTriggerId } = ctx;
-  if (!open) return null;
-  const { width: screenW } = Dimensions.get('window');
-  const left = Math.min(Math.max(8, anchor.x), screenW - 240); // clamp simple width
-  const top = anchor.y + anchor.height + 8;
-  const { REG } = getGlobalRegistry();
-
-  const trySwitchToTriggerAt = (x: number, y: number) => {
-    let targetId: number | null = null;
-    for (const [id, entry] of REG.entries()) {
-      const r = entry.rect;
-      const within =
-        x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height;
-      if (within) {
-        targetId = id;
-        break;
-      }
-    }
-    if (targetId && targetId !== activeTriggerId) {
-      const entry = REG.get(targetId);
-      if (entry) {
-        // Close current, then open target on next tick so the Modal unmounts first
-        setOpen(false);
-        setTimeout(() => entry.openExternal(), 0);
-        return true;
-      }
-    }
-    return false;
-  };
-
-  const attemptSwitch = (event: any) => {
-    const { pageX, pageY } = event?.nativeEvent || {};
-    if (typeof pageX === 'number' && typeof pageY === 'number') {
-      const switched = trySwitchToTriggerAt(pageX, pageY);
-      switchedRef.current = switched;
-      return switched;
-    }
-    switchedRef.current = false;
-    return false;
-  };
-
-  const handleBackdropPress = (event: any) => {
-    if (switchedRef.current) {
-      switchedRef.current = false;
-      return;
-    }
-    if (attemptSwitch(event)) return;
-    setOpen(false);
-  };
-
-  return (
-    <Modal
-      transparent
-      visible
-      animationType="fade"
-      onRequestClose={() => setOpen(false)}
-    >
-      <Pressable
-        onPressIn={attemptSwitch}
-        onPress={handleBackdropPress}
-        accessibilityLabel="Close popover"
-        style={{ flex: 1 }}
-        testID="popover-backdrop"
-      >
-        <View style={{ flex: 1 }}>
-          <View
-            style={{ position: 'absolute', top, left }}
-            className={`z-10 rounded-xl border border-neutral-200 bg-white p-3 shadow dark:border-neutral-700 dark:bg-neutral-900 ${className}`}
-          >
-            {children}
-          </View>
-        </View>
-      </Pressable>
-    </Modal>
-  );
-}
-
-export type PopoverCloseProps = {
-  children: React.ReactNode;
-  asChild?: boolean;
-};
-export function PopoverClose({ children, asChild }: PopoverCloseProps) {
-  const ctx = useContext(PopoverCtx);
-  if (!ctx) throw new Error('PopoverClose must be used within Popover');
-  const { setOpen } = ctx;
-  const close = () => setOpen(false);
-  if (asChild && isValidElement(children)) {
-    return cloneElement(children as any, {
-      onPress: (...args: any[]) => {
-        (children as any).props?.onPress?.(...args);
-        close();
-      },
-    });
-  }
-  return (
-    <Pressable onPress={close} accessibilityRole="button">
-      {children}
-    </Pressable>
-  );
-}
-
-export default Popover;

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

@@ -1,38 +0,0 @@
-// React Native basic components
-export {
-  ActivityIndicator,
-  SafeAreaView,
-  ScrollView,
-  View,
-} from 'react-native';
-
-// Custom components
-export * from '../accordion';
-export * from '../avatar';
-export * from '../badge';
-export * from '../bottom-sheet';
-export { default as colors } from '../colors';
-export * from '../core/button';
-export * from '../core/checkbox';
-export * from '../core/image';
-export * from '../core/inputs/floating-text-input';
-export * from '../core/inputs/input';
-export * from '../core/inputs/input-otp';
-export * from '../core/list';
-export * from '../core/pagination-dots';
-export * from '../core/pressable';
-export * from '../core/select';
-export * from '../core/spinner';
-export * from '../core/text';
-export * from '../custom-switch';
-export * from '../date-time-picker';
-// Note: Switch export conflicts with core/checkbox, so re-export with alias
-export * from '../extras/handle-error';
-export * from '../extras/icon';
-export * from '../picker';
-export * from '../popover';
-export * from '../radio-group';
-export * from '../searchbar';
-export { default as SwitchToggle } from '../switch';
-export * from '../toggle';
-export * from '../utils';

package/2/apps/native/src/components/ui/radio-group.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Radio } from './core/checkbox';
-import { Text } from './core/text';
-
-export type RadioOption = {
-  label: string;
-  value: string;
-  disabled?: boolean;
-};
-
-export type RadioGroupProps = {
-  options: RadioOption[];
-  value: string;
-  onValueChange: (v: string) => void;
-  disabled?: boolean;
-  label?: string;
-};
-
-export function RadioGroup({
-  options,
-  value,
-  onValueChange,
-  disabled,
-  label,
-}: RadioGroupProps) {
-  return (
-    <View style={{ gap: 12 }}>
-      {label ? <Text className="font-medium">{label}</Text> : null}
-      <View style={{ gap: 12 }}>
-        {options.map((opt) => (
-          <Radio
-            key={opt.value}
-            checked={value === opt.value}
-            onChange={(checked) => checked && onValueChange(opt.value)}
-            label={opt.label}
-            disabled={disabled || opt.disabled}
-            accessibilityLabel={opt.label}
-          />
-        ))}
-      </View>
-    </View>
-  );
-}
-
-export default RadioGroup;

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import { TextInput, View } from 'react-native';
-
-import { Pressable } from './core/pressable';
-import { Text } from './core/text';
-import { Icon } from './extras/icon';
-
-export type SearchbarProps = {
-  value: string;
-  onChangeText: (t: string) => void;
-  placeholder?: string;
-  onClear?: () => void;
-  onSubmit?: (query: string) => void;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  showClearButton?: boolean;
-  keepFocusOnChange?: boolean;
-};
-
-export function Searchbar({
-  value,
-  onChangeText,
-  placeholder = 'Search',
-  onClear,
-  onSubmit,
-  leftIcon,
-  rightIcon,
-  showClearButton = true,
-  keepFocusOnChange = false,
-}: SearchbarProps) {
-  const inputRef = React.useRef<TextInput>(null);
-  const handleSubmit = () => onSubmit?.(value);
-  const handleClear = () => {
-    if (onClear) onClear();
-    else onChangeText('');
-  };
-  const handleChange = (t: string) => {
-    onChangeText(t);
-    if (keepFocusOnChange) {
-      // Defer to next tick to avoid focus conflicts during re-render
-      setTimeout(() => inputRef.current?.focus(), 0);
-    }
-  };
-
-  return (
-    <View className="h-14 flex-row items-center gap-2 rounded-2xl border border-neutral-300 bg-muted px-3 dark:border-neutral-700">
-      {leftIcon ?? <Icon name="search-outline" size={20} />}
-      <TextInput
-        ref={inputRef}
-        value={value}
-        onChangeText={handleChange}
-        placeholder={placeholder}
-        onSubmitEditing={handleSubmit}
-        blurOnSubmit={false}
-        autoCapitalize="none"
-        autoCorrect={false}
-        returnKeyType="search"
-        className="h-full flex-1 py-0 text-base text-black dark:text-white"
-        multiline={false}
-        numberOfLines={1}
-        placeholderTextColor={undefined}
-        style={{
-          paddingVertical: 0,
-          textAlignVertical: 'center' as any,
-          includeFontPadding: false as any,
-          // Keep lineHeight equal to font size to align with icons
-          fontSize: 16,
-          lineHeight: 18,
-        }}
-      />
-      {rightIcon}
-      {showClearButton && value?.length > 0 && (
-        <Pressable
-          onPress={handleClear}
-          accessibilityRole="button"
-          accessibilityLabel="Clear search"
-        >
-          <Text className="text-neutral-500">Clear</Text>
-        </Pressable>
-      )}
-    </View>
-  );
-}
-
-export type SearchBarWithSuggestionsProps = Omit<SearchbarProps, 'onSubmit'> & {
-  suggestions: string[];
-  onSuggestionPress?: (s: string) => void;
-  maxSuggestions?: number;
-};
-
-export function SearchBarWithSuggestions({
-  suggestions,
-  onSuggestionPress,
-  maxSuggestions = 6,
-  ...props
-}: SearchBarWithSuggestionsProps) {
-  const list = suggestions.slice(0, maxSuggestions);
-  return (
-    <View className="gap-2">
-      <Searchbar {...props} />
-      {props.value?.length > 0 && (
-        <View className="rounded-xl border border-neutral-200 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900">
-          {list.map((s) => (
-            <Pressable
-              key={s}
-              className="p-2"
-              onPress={() => onSuggestionPress?.(s)}
-            >
-              <Text className="text-base">{s}</Text>
-            </Pressable>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-}
-
-export default Searchbar;

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Modal, Pressable, View } from 'react-native';
-
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import { Text } from './core/text';
-
-export type SheetProps = {
-  open?: boolean;
-  onOpenChange?: (v: boolean) => void;
-  children: React.ReactNode;
-};
-
-const SheetCtx = React.createContext<{
-  open: boolean;
-  setOpen: (v: boolean) => void;
-} | null>(null);
-
-export function Sheet({ open: o, onOpenChange, children }: SheetProps) {
-  const [open, setOpen] = React.useState(!!o);
-  React.useEffect(() => {
-    if (o !== undefined) setOpen(!!o);
-  }, [o]);
-  const set = (v: boolean) => {
-    setOpen(v);
-    onOpenChange?.(v);
-  };
-  return (
-    <SheetCtx.Provider value={{ open, setOpen: set }}>
-      {children}
-    </SheetCtx.Provider>
-  );
-}
-
-export function SheetTrigger({ children }: { children: React.ReactNode }) {
-  const ctx = React.useContext(SheetCtx)!;
-  return (
-    <Pressable onPress={() => ctx.setOpen(true)} accessibilityRole="button">
-      {children}
-    </Pressable>
-  );
-}
-
-export function SheetContent({ children }: { children: React.ReactNode }) {
-  const ctx = React.useContext(SheetCtx)!;
-  const theme = useThemeConfig();
-  if (!ctx.open) return null;
-  return (
-    <Modal
-      transparent
-      visible
-      animationType="slide"
-      onRequestClose={() => ctx.setOpen(false)}
-    >
-      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
-        <Pressable
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(0,0,0,0.25)',
-          }}
-          onPress={() => ctx.setOpen(false)}
-        />
-        <View
-          style={{
-            backgroundColor: theme.colors.card,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            padding: 16,
-            maxHeight: '80%',
-          }}
-        >
-          {children}
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-export function SheetHeader({ children }: { children: React.ReactNode }) {
-  return <View style={{ marginBottom: 12 }}>{children}</View>;
-}
-export function SheetTitle({ children }: { children: React.ReactNode }) {
-  return <Text className="text-lg font-semibold">{children}</Text>;
-}
-export function SheetDescription({ children }: { children: React.ReactNode }) {
-  return <Text className="opacity-70">{children}</Text>;
-}
-
-export default Sheet;

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import {
-  Switch as RNSwitch,
-  type SwitchProps as RNSwitchProps,
-} from 'react-native';
-
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export type SwitchProps = RNSwitchProps;
-
-export const Switch = React.forwardRef<
-  React.ComponentRef<typeof RNSwitch>,
-  SwitchProps
->(({ trackColor, thumbColor, ios_backgroundColor, ...props }, ref) => {
-  const theme = useThemeConfig();
-  const track = trackColor ?? {
-    false: theme.colors.neutral?.[300] ?? '#CBD5E1',
-    true: theme.colors.primary ?? '#64748B',
-  };
-  const thumb = thumbColor ?? theme.colors.white ?? '#fff';
-
-  return (
-    <RNSwitch
-      {...props}
-      ref={ref}
-      trackColor={track}
-      thumbColor={thumb}
-      ios_backgroundColor={
-        ios_backgroundColor ?? theme.colors.neutral?.[300] ?? '#CBD5E1'
-      }
-    />
-  );
-});
-
-Switch.displayName = 'Switch';
-
-export default Switch;