vibefast-cli 0.2.4 → 0.3.0

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

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

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

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

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

@@ -0,0 +1,290 @@
+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',
+  },
+};