@lunar-kit/core 0.1.0

package/src/components/v0/accordion.tsx

@@ -0,0 +1,199 @@
+
+TODO:
+
+// components/ui/accordion.tsx
+import * as React from 'react';
+import { View, Text, Pressable, Animated, LayoutAnimation, Platform, UIManager } from 'react-native';
+import { cn } from '@/lib/utils';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+type AccordionType = 'single' | 'multiple';
+
+interface AccordionProps {
+    type?: AccordionType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    children: React.ReactNode;
+    className?: string;
+    collapsible?: boolean; // Allow closing open item in single mode
+}
+
+interface AccordionItemProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+interface AccordionTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface AccordionContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AccordionContext = React.createContext<{
+    type: AccordionType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible: boolean;
+} | null>(null);
+
+const AccordionItemContext = React.createContext<{
+    value: string;
+    isOpen: boolean;
+    toggle: () => void;
+    disabled: boolean;
+} | null>(null);
+
+function useAccordion() {
+    const context = React.useContext(AccordionContext);
+    if (!context) {
+        throw new Error('Accordion components must be used within Accordion');
+    }
+    return context;
+}
+
+function useAccordionItem() {
+    const context = React.useContext(AccordionItemContext);
+    if (!context) {
+        throw new Error('AccordionTrigger and AccordionContent must be used within AccordionItem');
+    }
+    return context;
+}
+
+export function Accordion({
+    type = 'single',
+    value,
+    onValueChange,
+    children,
+    className,
+    collapsible = false,
+}: AccordionProps) {
+    return (
+        <AccordionContext.Provider value={{ type, value, onValueChange, collapsible }}>
+            <View className={cn('border border-slate-200 rounded-lg overflow-hidden', className)}>
+                {children}
+            </View>
+        </AccordionContext.Provider>
+    );
+}
+
+export function AccordionItem({ value, children, className, disabled = false }: AccordionItemProps) {
+    const { type, value: accordionValue, onValueChange, collapsible } = useAccordion();
+
+    const isOpen = React.useMemo(() => {
+        if (type === 'single') {
+            return accordionValue === value;
+        } else {
+            return Array.isArray(accordionValue) && accordionValue.includes(value);
+        }
+    }, [type, accordionValue, value]);
+
+    const toggle = () => {
+        if (disabled) return;
+
+        LayoutAnimation.configureNext(
+            LayoutAnimation.create(250, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)
+        );
+
+        if (type === 'single') {
+            // Single mode: only one item can be open
+            if (isOpen && collapsible) {
+                onValueChange?.('');
+            } else {
+                onValueChange?.(value);
+            }
+        } else {
+            // Multiple mode: multiple items can be open
+            const currentValues = (accordionValue as string[]) || [];
+            if (isOpen) {
+                onValueChange?.(currentValues.filter((v) => v !== value));
+            } else {
+                onValueChange?.([...currentValues, value]);
+            }
+        }
+    };
+
+    return (
+        <AccordionItemContext.Provider value={{ value, isOpen, toggle, disabled }}>
+            <View className={cn('border-b border-slate-200 last:border-b-0', className)}>
+                {children}
+            </View>
+        </AccordionItemContext.Provider>
+    );
+}
+
+export function AccordionTrigger({ children, className }: AccordionTriggerProps) {
+    const { isOpen, toggle, disabled } = useAccordionItem();
+
+    return (
+        <Pressable
+            onPress={toggle}
+            disabled={disabled}
+            className={cn(
+                'flex-row items-center justify-between px-4 py-4 bg-white',
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <View className="flex-1 pr-2">{children}</View>
+
+            {/* Chevron Icon */}
+            <Animated.View
+                style={{
+                    transform: [{ rotate: isOpen ? '180deg' : '0deg' }],
+                }}
+            >
+                <Text className="text-slate-500 text-sm">▼</Text>
+            </Animated.View>
+        </Pressable>
+    );
+}
+
+export function AccordionContent({ children, className }: AccordionContentProps) {
+    const { isOpen } = useAccordionItem();
+
+    if (!isOpen) return null;
+
+    return (
+        <View className={cn('px-4 pb-4 bg-slate-50', className)}>
+            {children}
+        </View>
+    );
+}
+
+// Helper components for common patterns
+export function AccordionTriggerText({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <Text className={cn('text-base font-medium text-slate-900', className)}>
+            {children}
+        </Text>
+    );
+}
+
+export function AccordionContentText({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <Text className={cn('text-sm text-slate-600 leading-6', className)}>
+            {children}
+        </Text>
+    );
+}

package/src/components/v1/accordion.tsx

@@ -0,0 +1,234 @@
+// components/ui/accordion.tsx
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+    Easing,
+} from 'react-native-reanimated';
+import { cn } from '@/lib/utils';
+
+type AccordionType = 'single' | 'multiple';
+
+interface AccordionProps {
+    type?: AccordionType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    children: React.ReactNode;
+    className?: string;
+    collapsible?: boolean;
+}
+
+interface AccordionItemProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+interface AccordionTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface AccordionContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AccordionContext = React.createContext<{
+    type: AccordionType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible: boolean;
+} | null>(null);
+
+const AccordionItemContext = React.createContext<{
+    value: string;
+    isOpen: boolean;
+    toggle: () => void;
+    disabled: boolean;
+} | null>(null);
+
+function useAccordion() {
+    const context = React.useContext(AccordionContext);
+    if (!context) {
+        throw new Error('Accordion components must be used within Accordion');
+    }
+    return context;
+}
+
+function useAccordionItem() {
+    const context = React.useContext(AccordionItemContext);
+    if (!context) {
+        throw new Error('AccordionTrigger and AccordionContent must be used within AccordionItem');
+    }
+    return context;
+}
+
+export function Accordion({
+    type = 'single',
+    value,
+    onValueChange,
+    children,
+    className,
+    collapsible = false,
+}: AccordionProps) {
+    return (
+        <AccordionContext.Provider value={{ type, value, onValueChange, collapsible }}>
+            <View className={cn('border border-slate-200 rounded-lg overflow-hidden', className)}>
+                {children}
+            </View>
+        </AccordionContext.Provider>
+    );
+}
+
+export function AccordionItem({ value, children, className, disabled = false }: AccordionItemProps) {
+    const { type, value: accordionValue, onValueChange, collapsible } = useAccordion();
+
+    const isOpen = React.useMemo(() => {
+        if (type === 'single') {
+            return accordionValue === value;
+        } else {
+            return Array.isArray(accordionValue) && accordionValue.includes(value);
+        }
+    }, [type, accordionValue, value]);
+
+    const toggle = () => {
+        if (disabled) return;
+
+        if (type === 'single') {
+            if (isOpen && collapsible) {
+                onValueChange?.('');
+            } else {
+                onValueChange?.(value);
+            }
+        } else {
+            const currentValues = (accordionValue as string[]) || [];
+            if (isOpen) {
+                onValueChange?.(currentValues.filter((v) => v !== value));
+            } else {
+                onValueChange?.([...currentValues, value]);
+            }
+        }
+    };
+
+    return (
+        <AccordionItemContext.Provider value={{ value, isOpen, toggle, disabled }}>
+            <View className={cn('border-b border-slate-200 last:border-b-0', className)}>
+                {children}
+            </View>
+        </AccordionItemContext.Provider>
+    );
+}
+
+export function AccordionTrigger({ children, className }: AccordionTriggerProps) {
+    const { isOpen, toggle, disabled } = useAccordionItem();
+    const rotation = useSharedValue(0);
+
+    React.useEffect(() => {
+        rotation.value = withTiming(isOpen ? 180 : 0, {
+            duration: 200,
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        });
+    }, [isOpen]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    return (
+        <Pressable
+            onPress={toggle}
+            disabled={disabled}
+            className={cn(
+                'flex-row items-center justify-between px-4 py-4 bg-white',
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <View className="flex-1 pr-2">{children}</View>
+
+            <Animated.View style={animatedStyle}>
+                <Text className="text-slate-500 text-sm">▼</Text>
+            </Animated.View>
+        </Pressable>
+    );
+}
+
+export function AccordionContent({ children, className }: AccordionContentProps) {
+    const { isOpen } = useAccordionItem();
+    const height = useSharedValue(0);
+    const opacity = useSharedValue(0);
+    const [measured, setMeasured] = React.useState(false);
+    const [contentHeight, setContentHeight] = React.useState(0);
+
+    React.useEffect(() => {
+        if (measured) {
+            height.value = withTiming(isOpen ? contentHeight : 0, {
+                duration: 250,
+                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+            opacity.value = withTiming(isOpen ? 1 : 0, {
+                duration: 200,
+                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+        }
+    }, [isOpen, measured, contentHeight]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        height: measured ? height.value : undefined,
+        opacity: measured ? opacity.value : 1,
+        overflow: 'hidden',
+    }));
+
+    const contentWrapperStyle = useAnimatedStyle(() => ({
+        // Fix text rewrap: use absolute positioning during animation
+        position: measured && height.value > 0 && height.value < contentHeight ? 'absolute' : 'relative',
+        top: 0,
+        left: 0,
+        right: 0,
+    }));
+
+    return (
+        <Animated.View style={animatedStyle}>
+            <Animated.View
+                style={contentWrapperStyle}
+                onLayout={(event) => {
+                    const h = event.nativeEvent.layout.height;
+                    if (h > 0 && !measured) {
+                        setContentHeight(h);
+                        setMeasured(true);
+                        height.value = isOpen ? h : 0;
+                        opacity.value = isOpen ? 1 : 0;
+                    }
+                }}
+                className={cn('px-4 pb-4 bg-slate-50', className)}
+            >
+                {children}
+            </Animated.View>
+        </Animated.View>
+    );
+}
+
+export function AccordionTriggerText({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return <Text className={cn('text-base font-medium text-slate-900', className)}>{children}</Text>;
+}
+
+export function AccordionContentText({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return <Text className={cn('text-sm text-slate-600 leading-6', className)}>{children}</Text>;
+}
+

package/src/components/v1/avatar.tsx

@@ -0,0 +1,259 @@
+// components/ui/avatar.tsx
+import * as React from 'react';
+import { View, Text, Image, ImageSourcePropType } from 'react-native';
+import { cn } from '../../lib/utils';
+
+interface AvatarProps {
+    source?: ImageSourcePropType;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    className?: string;
+}
+
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+
+interface AvatarImageProps {
+    source: ImageSourcePropType;
+    alt?: string;
+}
+
+interface AvatarFallbackProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AvatarContext = React.createContext<{
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    hasImage: boolean;
+    setHasImage: (value: boolean) => void;
+} | null>(null);
+
+function useAvatar() {
+    const context = React.useContext(AvatarContext);
+    if (!context) {
+        throw new Error('Avatar components must be used within Avatar');
+    }
+    return context;
+}
+
+// Size mappings
+const sizeClasses = {
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16',
+};
+
+const textSizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-xl',
+};
+
+const statusSizeClasses = {
+    sm: 'h-2 w-2',
+    md: 'h-2.5 w-2.5',
+    lg: 'h-3 w-3',
+    xl: 'h-4 w-4',
+};
+
+const statusColors = {
+    online: 'bg-green-500',
+    offline: 'bg-slate-400',
+    away: 'bg-yellow-500',
+    busy: 'bg-red-500',
+};
+
+export function Avatar({
+    source,
+    alt,
+    fallback,
+    size = 'md',
+    status,
+    className
+}: AvatarProps) {
+    const [hasImage, setHasImage] = React.useState(!!source);
+    const [imageError, setImageError] = React.useState(false);
+
+    React.useEffect(() => {
+        setHasImage(!!source && !imageError);
+    }, [source, imageError]);
+
+    // Get initials from fallback text
+    const getInitials = (text?: string) => {
+        if (!text) return '?';
+        const words = text.trim().split(' ');
+        if (words.length >= 2) {
+            return (words[0][0] + words[1][0]).toUpperCase();
+        }
+        return text.substring(0, 2).toUpperCase();
+    };
+
+    return (
+        <AvatarContext.Provider value={{ size, hasImage, setHasImage }}>
+            <View className={cn('relative', className)}>
+                <View
+                    className={cn(
+                        'rounded-full overflow-hidden items-center justify-center bg-slate-200',
+                        sizeClasses[size]
+                    )}
+                >
+                    {source && !imageError ? (
+                        <Image
+                            source={source}
+                            alt={alt}
+                            className="w-full h-full"
+                            onError={() => setImageError(true)}
+                            resizeMode="cover"
+                        />
+                    ) : (
+                        <Text
+                            className={cn(
+                                'font-semibold text-slate-600',
+                                textSizeClasses[size]
+                            )}
+                        >
+                            {getInitials(fallback || alt)}
+                        </Text>
+                    )}
+                </View>
+
+                {/* Status Indicator */}
+                {status && (
+                    <View
+                        className={cn(
+                            'absolute bottom-0 right-0 rounded-full border-2 border-white',
+                            statusSizeClasses[size],
+                            statusColors[status]
+                        )}
+                    />
+                )}
+            </View>
+        </AvatarContext.Provider>
+    );
+}
+
+// Composable Avatar components
+export function AvatarRoot({
+    size = 'md',
+    className,
+    children
+}: {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    children: React.ReactNode;
+}) {
+    const [hasImage, setHasImage] = React.useState(false);
+
+    return (
+        <AvatarContext.Provider value={{ size, hasImage, setHasImage }}>
+            <View
+                className={cn(
+                    'rounded-full overflow-hidden items-center justify-center bg-slate-200',
+                    sizeClasses[size],
+                    className
+                )}
+            >
+                {children}
+            </View>
+        </AvatarContext.Provider>
+    );
+}
+
+export function AvatarImage({ source, alt }: AvatarImageProps) {
+    const { setHasImage } = useAvatar();
+
+    return (
+        <Image
+            source={source}
+            alt={alt}
+            className="w-full h-full"
+            onLoad={() => setHasImage(true)}
+            onError={() => setHasImage(false)}
+            resizeMode="cover"
+        />
+    );
+}
+
+export function AvatarFallback({ children, className }: AvatarFallbackProps) {
+    const { size, hasImage } = useAvatar();
+
+    if (hasImage) return null;
+
+    return (
+        <Text
+            className={cn(
+                'font-semibold text-slate-600',
+                textSizeClasses[size],
+                className
+            )}
+        >
+            {children}
+        </Text>
+    );
+}
+
+// Avatar Group
+export function AvatarGroup({ children, max = 3, size = 'md', className }: AvatarGroupProps) {
+    const avatars = React.Children.toArray(children);
+    const visibleAvatars = avatars.slice(0, max);
+    const remainingCount = avatars.length - max;
+
+    // Overlap offset based on size
+    const overlapOffset = {
+        sm: -8,
+        md: -10,
+        lg: -12,
+        xl: -16,
+    };
+
+    return (
+        <View className={cn('flex-row items-center', className)}>
+            {visibleAvatars.map((avatar, index) => (
+                <View
+                    key={index}
+                    style={{
+                        marginLeft: index > 0 ? overlapOffset[size] : 0,
+                        zIndex: visibleAvatars.length - index,
+                    }}
+                    className="border-2 border-white rounded-full"
+                >
+                    {React.isValidElement(avatar) && avatar.type === Avatar
+                        ? React.cloneElement(avatar as React.ReactElement<AvatarProps>, { size })
+                        : avatar}
+                </View>
+            ))}
+
+            {/* Remaining count badge */}
+            {remainingCount > 0 && (
+                <View
+                    style={{
+                        marginLeft: overlapOffset[size],
+                        zIndex: 0,
+                    }}
+                    className={cn(
+                        'rounded-full bg-slate-300 items-center justify-center border-2 border-white',
+                        sizeClasses[size]
+                    )}
+                >
+                    <Text
+                        className={cn(
+                            'font-semibold text-slate-700',
+                            textSizeClasses[size]
+                        )}
+                    >
+                        +{remainingCount}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
+}