vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,138 +0,0 @@
-import type React from 'react';
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { View } from 'react-native';
-
-import { ArrowRight } from '@/components/ui/icons';
-
-import { Pressable } from './core/pressable';
-import { Text } from './core/text';
-
-type AccordionValue = string | string[];
-
-type AccordionContextType = {
-  type: 'single' | 'multiple';
-  collapsible?: boolean;
-  value: AccordionValue;
-  onValueChange: (value: AccordionValue) => void;
-};
-
-const AccordionContext = createContext<AccordionContextType | null>(null);
-
-export type AccordionProps = {
-  type: 'single' | 'multiple';
-  collapsible?: boolean;
-  defaultValue?: AccordionValue;
-  value?: AccordionValue;
-  onValueChange?: (value: AccordionValue) => void;
-  children: React.ReactNode;
-};
-
-export function Accordion({
-  type,
-  collapsible = false,
-  defaultValue,
-  value: controlled,
-  onValueChange,
-  children,
-}: AccordionProps) {
-  const [internal, setInternal] = useState<AccordionValue>(
-    defaultValue ?? (type === 'multiple' ? [] : ''),
-  );
-
-  const value = controlled ?? internal;
-
-  const handleChange = useCallback(
-    (next: AccordionValue) => {
-      if (controlled === undefined) setInternal(next);
-      onValueChange?.(next);
-    },
-    [controlled, onValueChange],
-  );
-
-  const ctx = useMemo<AccordionContextType>(
-    () => ({ type, collapsible, value, onValueChange: handleChange }),
-    [type, collapsible, value, handleChange],
-  );
-
-  return (
-    <AccordionContext.Provider value={ctx}>
-      {children}
-    </AccordionContext.Provider>
-  );
-}
-
-type ItemCtx = { value: string; isOpen: boolean; toggle: () => void };
-const AccordionItemContext = createContext<ItemCtx | null>(null);
-
-export type AccordionItemProps = { value: string; children: React.ReactNode };
-export function AccordionItem({ value, children }: AccordionItemProps) {
-  const ctx = useContext(AccordionContext);
-  if (!ctx) throw new Error('AccordionItem must be used within Accordion');
-
-  const isOpen = Array.isArray(ctx.value)
-    ? ctx.value.includes(value)
-    : ctx.value === value;
-
-  const toggle = () => {
-    if (ctx.type === 'single') {
-      const next = isOpen && ctx.collapsible ? '' : value;
-      ctx.onValueChange(next);
-    } else {
-      const current = Array.isArray(ctx.value) ? ctx.value : [];
-      const next = isOpen
-        ? current.filter((v) => v !== value)
-        : [...current, value];
-      ctx.onValueChange(next);
-    }
-  };
-
-  return (
-    <AccordionItemContext.Provider value={{ value, isOpen, toggle }}>
-      <View className="w-full py-2">{children}</View>
-    </AccordionItemContext.Provider>
-  );
-}
-
-export type AccordionTriggerProps = { children: React.ReactNode };
-export function AccordionTrigger({ children }: AccordionTriggerProps) {
-  const ctx = useContext(AccordionItemContext);
-  if (!ctx)
-    throw new Error('AccordionTrigger must be used within AccordionItem');
-
-  return (
-    <Pressable
-      onPress={ctx.toggle}
-      className="flex-row items-center justify-between py-2"
-      accessibilityRole="button"
-      accessibilityLabel={typeof children === 'string' ? children : undefined}
-    >
-      <Text className="text-base font-semibold">{children}</Text>
-      <View style={{ transform: [{ rotate: ctx.isOpen ? '90deg' : '0deg' }] }}>
-        <ArrowRight />
-      </View>
-    </Pressable>
-  );
-}
-
-export type AccordionContentProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-export function AccordionContent({
-  children,
-  className,
-}: AccordionContentProps) {
-  const ctx = useContext(AccordionItemContext);
-  if (!ctx)
-    throw new Error('AccordionContent must be used within AccordionItem');
-  if (!ctx.isOpen) return null;
-  return <View className={`pb-4 pl-0 ${className ?? ''}`}>{children}</View>;
-}
-
-export default Accordion;

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

@@ -1,66 +0,0 @@
-import type { ImageProps, ImageSource } from 'expo-image';
-import type React from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import { View } from 'react-native';
-
-import { Image } from './core/image';
-import { Text } from './core/text';
-
-export type AvatarProps = {
-  children: React.ReactNode;
-  size?: number;
-  style?: ViewStyle;
-};
-
-export function Avatar({ children, size = 40, style }: AvatarProps) {
-  return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          overflow: 'hidden',
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
-  );
-}
-
-export type AvatarImageProps = {
-  source: ImageSource;
-  style?: ImageProps['style'];
-};
-export function AvatarImage({ source, style }: AvatarImageProps) {
-  return <Image source={source} style={style} />;
-}
-
-export type AvatarFallbackProps = {
-  children: React.ReactNode;
-  style?: ViewStyle;
-  textStyle?: TextStyle;
-};
-export function AvatarFallback({
-  children,
-  style,
-  textStyle,
-}: AvatarFallbackProps) {
-  return (
-    <View
-      className="size-full items-center justify-center bg-neutral-200 dark:bg-neutral-800"
-      style={style}
-    >
-      <Text
-        className="text-base font-medium text-neutral-700 dark:text-neutral-200"
-        style={textStyle}
-      >
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-export default Avatar;

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

@@ -1,68 +0,0 @@
-import type React from 'react';
-import { View } from 'react-native';
-import type { VariantProps } from 'tailwind-variants';
-import { tv } from 'tailwind-variants';
-
-import { Text } from './core/text';
-
-const badge = tv({
-  slots: {
-    container:
-      'flex flex-row items-center justify-center rounded-full px-3 py-1.5',
-    label: 'text-sm font-medium',
-  },
-  variants: {
-    variant: {
-      default: {
-        container: 'bg-primary-600',
-        label: 'text-white',
-      },
-      secondary: {
-        container: 'bg-neutral-100 dark:bg-neutral-800',
-        label: 'text-neutral-900 dark:text-neutral-100',
-      },
-      destructive: {
-        container: 'bg-red-600',
-        label: 'text-white',
-      },
-      outline: {
-        container: 'border border-neutral-300 dark:border-neutral-600',
-        label: 'text-neutral-900 dark:text-neutral-100',
-      },
-      success: {
-        container: 'bg-green-600',
-        label: 'text-white',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-export type BadgeVariant = VariantProps<typeof badge>['variant'];
-
-export type BadgeProps = {
-  children: React.ReactNode;
-  variant?: BadgeVariant;
-  className?: string;
-  textClassName?: string;
-};
-
-export function Badge({
-  children,
-  variant = 'default',
-  className,
-  textClassName,
-}: BadgeProps) {
-  const styles = badge({ variant });
-  return (
-    <View className={styles.container({ className })} accessibilityRole="text">
-      <Text className={styles.label({ className: textClassName })}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-export default Badge;

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

@@ -1,61 +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 BottomSheetProps = {
-  isVisible: boolean;
-  onClose: () => void;
-  title?: string;
-  snapPoints?: number[]; // ignored in this simple impl
-  children: React.ReactNode;
-};
-
-export function BottomSheet({
-  isVisible,
-  onClose,
-  title,
-  children,
-}: BottomSheetProps) {
-  const theme = useThemeConfig();
-  return (
-    <Modal
-      transparent
-      visible={isVisible}
-      animationType="slide"
-      onRequestClose={onClose}
-    >
-      <Pressable
-        style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.25)' }}
-        onPress={onClose}
-      />
-      <View
-        style={{
-          backgroundColor: theme.colors.card,
-          borderTopLeftRadius: 20,
-          borderTopRightRadius: 20,
-          padding: 16,
-          maxHeight: '80%',
-        }}
-      >
-        {title ? (
-          <Text className="mb-3 text-lg font-semibold">{title}</Text>
-        ) : null}
-        <View style={{ flex: 1 }}>{children}</View>
-      </View>
-    </Modal>
-  );
-}
-
-export function useBottomSheet() {
-  const [isVisible, setIsVisible] = React.useState(false);
-  return {
-    isVisible,
-    open: () => setIsVisible(true),
-    close: () => setIsVisible(false),
-  };
-}
-
-export default BottomSheet;

package/2/apps/native/src/components/ui/colors.js

@@ -1,290 +0,0 @@
-module.exports = {
-  white: '#ffffff',
-  black: '#000000',
-  charcoal: {
-    50: '#F2F2F2',
-    100: '#E5E5E5',
-    200: '#C9C9C9',
-    300: '#B0B0B0',
-    400: '#969696',
-    500: '#7D7D7D',
-    600: '#616161',
-    700: '#474747',
-    800: '#383838',
-    850: '#2E2E2E',
-    900: '#1E1E1E',
-    950: '#111111',
-  },
-  neutral: {
-    50: '#FAFAFA',
-    100: '#F5F5F5',
-    200: '#F0EFEE',
-    300: '#D4D4D4',
-    400: '#A3A3A3',
-    500: '#737373',
-    600: '#525252',
-    700: '#404040',
-    800: '#262626',
-    900: '#171717',
-    950: '#0a0a0a',
-  },
-  primary: {
-    50: '#FFE2CC',
-    100: '#FFC499',
-    200: '#FFA766',
-    300: '#FF984C',
-    400: '#FF8933',
-    500: '#FF7B1A',
-    600: '#FF6C00',
-    700: '#E56100',
-    800: '#CC5600',
-    900: '#B24C00',
-  },
-  success: {
-    50: '#F0FDF4',
-    100: '#DCFCE7',
-    200: '#BBF7D0',
-    300: '#86EFAC',
-    400: '#4ADE80',
-    500: '#22C55E',
-    600: '#16A34A',
-    700: '#15803D',
-    800: '#166534',
-    900: '#14532D',
-  },
-  warning: {
-    50: '#FFFBEB',
-    100: '#FEF3C7',
-    200: '#FDE68A',
-    300: '#FCD34D',
-    400: '#FBBF24',
-    500: '#F59E0B',
-    600: '#D97706',
-    700: '#B45309',
-    800: '#92400E',
-    900: '#78350F',
-  },
-  danger: {
-    50: '#FEF2F2',
-    100: '#FEE2E2',
-    200: '#FECACA',
-    300: '#FCA5A5',
-    400: '#F87171',
-    500: '#EF4444',
-    600: '#DC2626',
-    700: '#B91C1C',
-    800: '#991B1B',
-    900: '#7F1D1D',
-  },
-  // Slate palette (commonly used alternative to neutral/charcoal)
-  slate: {
-    50: '#F8FAFC',
-    100: '#F1F5F9',
-    200: '#E2E8F0',
-    300: '#CBD5E1',
-    400: '#94A3B8',
-    500: '#64748B',
-    600: '#475569',
-    700: '#334155',
-    800: '#1E293B',
-    850: '#1A202C',
-    900: '#0F172A',
-    950: '#020617',
-  },
-  // Blue palette for UI elements
-  blue: {
-    50: '#EFF6FF',
-    100: '#DBEAFE',
-    200: '#BFDBFE',
-    300: '#93C5FD',
-    400: '#60A5FA',
-    500: '#3B82F6',
-    600: '#2563EB',
-    700: '#1D4ED8',
-    800: '#1E40AF',
-    900: '#1E3A8A',
-    950: '#172554',
-  },
-  // Indigo palette
-  indigo: {
-    50: '#EEF2FF',
-    100: '#E0E7FF',
-    200: '#C7D2FE',
-    300: '#A5B4FC',
-    400: '#818CF8',
-    500: '#6366F1',
-    600: '#4F46E5',
-    700: '#4338CA',
-    800: '#3730A3',
-    900: '#312E81',
-    950: '#1E1B4B',
-  },
-  // Violet palette
-  violet: {
-    50: '#F5F3FF',
-    100: '#EDE9FE',
-    200: '#DDD6FE',
-    300: '#C4B5FD',
-    400: '#A78BFA',
-    500: '#8B5CF6',
-    600: '#7C3AED',
-    700: '#6D28D9',
-    800: '#5B21B6',
-    900: '#4C1D95',
-    950: '#2E1065',
-  },
-  // Purple palette
-  purple: {
-    50: '#FAF5FF',
-    100: '#F3E8FF',
-    200: '#E9D5FF',
-    300: '#D8B4FE',
-    400: '#C084FC',
-    500: '#A855F7',
-    600: '#9333EA',
-    700: '#7E22CE',
-    800: '#6B21A8',
-    900: '#581C87',
-    950: '#3B0764',
-  },
-  // Pink palette
-  pink: {
-    50: '#FDF2F8',
-    100: '#FCE7F3',
-    200: '#FBCFE8',
-    300: '#F9A8D4',
-    400: '#F472B6',
-    500: '#EC4899',
-    600: '#DB2777',
-    700: '#BE185D',
-    800: '#9D174D',
-    900: '#831843',
-    950: '#500724',
-  },
-  // Rose palette
-  rose: {
-    50: '#FFF1F2',
-    100: '#FFE4E6',
-    200: '#FECDD3',
-    300: '#FDA4AF',
-    400: '#FB7185',
-    500: '#F43F5E',
-    600: '#E11D48',
-    700: '#BE123C',
-    800: '#9F1239',
-    900: '#881337',
-    950: '#4C0519',
-  },
-  // Fuchsia palette
-  fuchsia: {
-    50: '#FDF4FF',
-    100: '#FAE8FF',
-    200: '#F5D0FE',
-    300: '#F0ABFC',
-    400: '#E879F9',
-    500: '#D946EF',
-    600: '#C026D3',
-    700: '#A21CAF',
-    800: '#86198F',
-    900: '#701A75',
-    950: '#4A044E',
-  },
-  // Sky palette
-  sky: {
-    50: '#F0F9FF',
-    100: '#E0F2FE',
-    200: '#BAE6FD',
-    300: '#7DD3FC',
-    400: '#38BDF8',
-    500: '#0EA5E9',
-    600: '#0284C7',
-    700: '#0369A1',
-    800: '#075985',
-    900: '#0C4A6E',
-    950: '#082F49',
-  },
-  // Cyan palette
-  cyan: {
-    50: '#ECFEFF',
-    100: '#CFFAFE',
-    200: '#A5F3FC',
-    300: '#67E8F9',
-    400: '#22D3EE',
-    500: '#06B6D4',
-    600: '#0891B2',
-    700: '#0E7490',
-    800: '#155E75',
-    900: '#164E63',
-    950: '#083344',
-  },
-  // Teal palette
-  teal: {
-    50: '#F0FDFA',
-    100: '#CCFBF1',
-    200: '#99F6E4',
-    300: '#5EEAD4',
-    400: '#2DD4BF',
-    500: '#14B8A6',
-    600: '#0D9488',
-    700: '#0F766E',
-    800: '#115E59',
-    900: '#134E4A',
-    950: '#042F2E',
-  },
-  // Emerald palette
-  emerald: {
-    50: '#ECFDF5',
-    100: '#D1FAE5',
-    200: '#A7F3D0',
-    300: '#6EE7B7',
-    400: '#34D399',
-    500: '#10B981',
-    600: '#059669',
-    700: '#047857',
-    800: '#065F46',
-    900: '#064E3B',
-    950: '#022C22',
-  },
-  // Lime palette
-  lime: {
-    50: '#F7FEE7',
-    100: '#ECFCCB',
-    200: '#D9F99D',
-    300: '#BEF264',
-    400: '#A3E635',
-    500: '#84CC16',
-    600: '#65A30D',
-    700: '#4D7C0F',
-    800: '#365314',
-    900: '#1A2E05',
-    950: '#052E16',
-  },
-  // Yellow palette
-  yellow: {
-    50: '#FEFCE8',
-    100: '#FEF9C3',
-    200: '#FEF08A',
-    300: '#FDE047',
-    400: '#FACC15',
-    500: '#EAB308',
-    600: '#CA8A04',
-    700: '#A16207',
-    800: '#854D0E',
-    900: '#713F12',
-    950: '#422006',
-  },
-  // Amber palette
-  amber: {
-    50: '#FFFBEB',
-    100: '#FEF3C7',
-    200: '#FDE68A',
-    300: '#FCD34D',
-    400: '#FBBF24',
-    500: '#F59E0B',
-    600: '#D97706',
-    700: '#B45309',
-    800: '#92400E',
-    900: '#78350F',
-    950: '#451A03',
-  },
-};