vibefast-cli 0.2.3 → 0.3.0

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

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

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

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

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

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

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