@lunar-kit/core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+declare const REGISTRY_URL = "https://raw.githubusercontent.com/yourusername/lunar-kit/main/packages/core/src/registry";
+declare const LOCAL_REGISTRY_PATH: string;
+declare const LOCAL_COMPONENTS_PATH: string;
+
+export { LOCAL_COMPONENTS_PATH, LOCAL_REGISTRY_PATH, REGISTRY_URL };

package/dist/index.js

@@ -0,0 +1,14 @@
+// src/index.ts
+import path from "path";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var REGISTRY_URL = "https://raw.githubusercontent.com/yourusername/lunar-kit/main/packages/core/src/registry";
+var LOCAL_REGISTRY_PATH = path.join(__dirname, "..", "src", "registry");
+var LOCAL_COMPONENTS_PATH = path.join(__dirname, "..", "src", "components");
+export {
+  LOCAL_COMPONENTS_PATH,
+  LOCAL_REGISTRY_PATH,
+  REGISTRY_URL
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@lunar-kit/core",
+  "version": "0.1.0",
+  "description": "Shared registry and components for Lunar Kit",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "src/registry",
+    "src/components"
+  ],
+  "keywords": [
+    "react-native",
+    "lunar-kit",
+    "components"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  }
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,334 @@
+// components/ui/accordion.tsx
+import * as React from 'react';
+import { View, Pressable } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+    Easing,
+} from 'react-native-reanimated';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react-native';
+import { Text } from './text';
+import { useThemeColors } from '@/hooks/useThemeColors';
+
+type AccordionType = 'single' | 'multiple';
+
+// Accordion Variants
+const accordionVariants = cva(
+    'rounded-lg overflow-hidden',
+    {
+        variants: {
+            variant: {
+                default: 'border border-border',
+                bordered: 'border-2 border-border',
+                separated: 'gap-2',
+                filled: 'bg-muted',
+                ghost: '',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+);
+
+// Accordion Item Variants
+const accordionItemVariants = cva(
+    '',
+    {
+        variants: {
+            variant: {
+                default: 'border-b border-border last:border-b-0',
+                bordered: 'border-b-2 border-border last:border-b-0',
+                separated: 'border border-border rounded-lg mb-2 last:mb-0',
+                filled: 'border-b border-border last:border-b-0',
+                ghost: 'mb-1',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+);
+
+// Accordion Trigger Variants
+const accordionTriggerVariants = cva(
+    'flex-row items-center justify-between px-4 py-4',
+    {
+        variants: {
+            variant: {
+                default: 'bg-card',
+                bordered: 'bg-card',
+                separated: 'bg-card',
+                filled: 'bg-muted',
+                ghost: 'bg-transparent',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+);
+
+// Accordion Content Variants
+const accordionContentVariants = cva(
+    'px-4 pb-4',
+    {
+        variants: {
+            variant: {
+                default: 'bg-card',
+                bordered: 'bg-card',
+                separated: 'bg-card',
+                filled: 'bg-muted',
+                ghost: 'bg-transparent',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+);
+
+interface AccordionProps extends VariantProps<typeof accordionVariants> {
+    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;
+    variant: 'default' | 'bordered' | 'separated' | 'filled' | 'ghost';
+} | 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,
+    variant = 'default',
+}: AccordionProps) {
+    return (
+        <AccordionContext.Provider value={{
+            type,
+            value,
+            onValueChange,
+            collapsible,
+            variant: variant ?? 'default'
+        }}>
+            <View className={cn(accordionVariants({ variant }), className)}>
+                {children}
+            </View>
+        </AccordionContext.Provider>
+    );
+}
+
+export function AccordionItem({ value, children, className, disabled = false }: AccordionItemProps) {
+    const { type, value: accordionValue, onValueChange, collapsible, variant } = 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(accordionItemVariants({ variant }), className)}>
+                {children}
+            </View>
+        </AccordionItemContext.Provider>
+    );
+}
+
+export function AccordionTrigger({ children, className }: AccordionTriggerProps) {
+    const { isOpen, toggle, disabled } = useAccordionItem();
+    const { variant } = useAccordion();
+    const rotation = useSharedValue(0);
+    const { colors } = useThemeColors();
+
+    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(
+                accordionTriggerVariants({ variant }),
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <View className="flex-1 pr-2">{children}</View>
+
+            <Animated.View style={animatedStyle}>
+                <ChevronDown size={20} className="text-muted-foreground" color={colors.mutedForeground} />
+            </Animated.View>
+        </Pressable>
+    );
+}
+
+export function AccordionContent({ children, className }: AccordionContentProps) {
+    const { isOpen } = useAccordionItem();
+    const { variant } = useAccordion();
+    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(() => ({
+        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;
+                    }
+                }}
+            >
+                <View className={cn(accordionContentVariants({ variant }), className)}>
+                    {children}
+                </View>
+            </Animated.View>
+        </Animated.View>
+    );
+}
+
+// Preset Text Components with theme colors
+export function AccordionTriggerText({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <Text variant="title" size="sm" className={className}>
+            {children}
+        </Text>
+    );
+}
+
+export function AccordionContentText({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <Text variant="body" size="sm" className={cn('leading-6', className)}>
+            {children}
+        </Text>
+    );
+}
+

package/src/components/ui/avatar.tsx

@@ -0,0 +1,326 @@
+// components/ui/avatar.tsx
+import * as React from 'react';
+import { View, Image, ImageSourcePropType } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+
+// Avatar Variants
+const avatarVariants = cva(
+    'rounded-full overflow-hidden items-center justify-center',
+    {
+        variants: {
+            variant: {
+                default: 'bg-muted',
+                primary: 'bg-primary',
+                secondary: 'bg-secondary',
+                outline: 'bg-background border-2 border-border',
+            },
+            size: {
+                xs: 'h-6 w-6',
+                sm: 'h-8 w-8',
+                md: 'h-10 w-10',
+                lg: 'h-12 w-12',
+                xl: 'h-16 w-16',
+                '2xl': 'h-20 w-20',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'md',
+        },
+    }
+);
+
+// Text size variants
+const avatarTextVariants = cva(
+    'font-semibold',
+    {
+        variants: {
+            variant: {
+                default: 'text-muted-foreground',
+                primary: 'text-primary-foreground',
+                secondary: 'text-secondary-foreground',
+                outline: 'text-foreground',
+            },
+            size: {
+                xs: 'text-[10px]',
+                sm: 'text-xs',
+                md: 'text-sm',
+                lg: 'text-base',
+                xl: 'text-xl',
+                '2xl': 'text-2xl',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'md',
+        },
+    }
+);
+
+// Status indicator variants
+const statusVariants = cva(
+    'absolute bottom-0 right-0 rounded-full border-2 border-background',
+    {
+        variants: {
+            status: {
+                online: 'bg-green-500',
+                offline: 'bg-muted-foreground',
+                away: 'bg-yellow-500',
+                busy: 'bg-red-500',
+            },
+            size: {
+                xs: 'h-1.5 w-1.5',
+                sm: 'h-2 w-2',
+                md: 'h-2.5 w-2.5',
+                lg: 'h-3 w-3',
+                xl: 'h-4 w-4',
+                '2xl': 'h-5 w-5',
+            },
+        },
+    }
+);
+
+interface AvatarProps extends VariantProps<typeof avatarVariants> {
+    source?: ImageSourcePropType;
+    alt?: string;
+    fallback?: string;
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    className?: string;
+}
+
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    max?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    variant?: 'default' | 'primary' | 'secondary' | 'outline';
+    className?: string;
+}
+
+interface AvatarImageProps {
+    source: ImageSourcePropType;
+    alt?: string;
+}
+
+interface AvatarFallbackProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AvatarContext = React.createContext<{
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    variant: 'default' | 'primary' | 'secondary' | 'outline';
+    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;
+}
+
+// Get initials helper
+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();
+};
+
+// Simple Avatar (All-in-one)
+export function Avatar({
+    source,
+    alt,
+    fallback,
+    size = 'md',
+    variant = 'default',
+    status,
+    className
+}: AvatarProps) {
+    const [hasImage, setHasImage] = React.useState(!!source);
+    const [imageError, setImageError] = React.useState(false);
+
+    React.useEffect(() => {
+        setHasImage(!!source && !imageError);
+    }, [source, imageError]);
+
+    const avatarSize = size ?? 'md';
+    const avatarVariant = variant ?? 'default';
+
+    return (
+        <AvatarContext.Provider value={{
+            size: avatarSize,
+            variant: avatarVariant,
+            hasImage,
+            setHasImage
+        }}>
+            <View className={cn('relative', className)}>
+                <View className={cn(avatarVariants({ variant: avatarVariant, size: avatarSize }))}>
+                    {source && !imageError ? (
+                        <Image
+                            source={source}
+                            alt={alt}
+                            className="w-full h-full"
+                            onError={() => setImageError(true)}
+                            resizeMode="cover"
+                        />
+                    ) : (
+                        <Text className={cn(avatarTextVariants({ variant: avatarVariant, size: avatarSize }))}>
+                            {getInitials(fallback || alt)}
+                        </Text>
+                    )}
+                </View>
+
+                {/* Status Indicator */}
+                {status && (
+                    <View className={cn(statusVariants({ status, size: avatarSize }))} />
+                )}
+            </View>
+        </AvatarContext.Provider>
+    );
+}
+
+// Composable Avatar Root
+export function AvatarRoot({
+    size = 'md',
+    variant = 'default',
+    className,
+    children
+}: {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    variant?: 'default' | 'primary' | 'secondary' | 'outline';
+    className?: string;
+    children: React.ReactNode;
+}) {
+    const [hasImage, setHasImage] = React.useState(false);
+
+    const avatarSize = size ?? 'md';
+    const avatarVariant = variant ?? 'default';
+
+    return (
+        <AvatarContext.Provider value={{
+            size: avatarSize,
+            variant: avatarVariant,
+            hasImage,
+            setHasImage
+        }}>
+            <View className={cn(avatarVariants({ variant: avatarVariant, size: avatarSize }), className)}>
+                {children}
+            </View>
+        </AvatarContext.Provider>
+    );
+}
+
+// Avatar Image
+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"
+        />
+    );
+}
+
+// Avatar Fallback
+export function AvatarFallback({ children, className }: AvatarFallbackProps) {
+    const { size, variant, hasImage } = useAvatar();
+
+    if (hasImage) return null;
+
+    return (
+        <Text className={cn(avatarTextVariants({ variant, size }), className)}>
+            {children}
+        </Text>
+    );
+}
+
+// Avatar Status
+export function AvatarStatus({
+    status
+}: {
+    status: 'online' | 'offline' | 'away' | 'busy'
+}) {
+    const { size } = useAvatar();
+
+    return (
+        <View className={cn(statusVariants({ status, size }))} />
+    );
+}
+
+// Avatar Group
+export function AvatarGroup({
+    children,
+    max = 3,
+    size = 'md',
+    variant = 'default',
+    className
+}: AvatarGroupProps) {
+    const avatars = React.Children.toArray(children);
+    const visibleAvatars = avatars.slice(0, max);
+    const remainingCount = avatars.length - max;
+
+    const avatarSize = size ?? 'md';
+    const avatarVariant = variant ?? 'default';
+
+    // Overlap offset based on size
+    const overlapOffset = {
+        xs: -6,
+        sm: -8,
+        md: -10,
+        lg: -12,
+        xl: -16,
+        '2xl': -20,
+    };
+
+    return (
+        <View className={cn('flex-row items-center', className)}>
+            {visibleAvatars.map((avatar, index) => (
+                <View
+                    key={index}
+                    style={{
+                        marginLeft: index > 0 ? overlapOffset[avatarSize] : 0,
+                        zIndex: visibleAvatars.length - index,
+                    }}
+                    className="border-2 border-background rounded-full"
+                >
+                    {React.isValidElement(avatar) && avatar.type === Avatar
+                        ? React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
+                            size: avatarSize,
+                            variant: avatarVariant
+                        })
+                        : avatar}
+                </View>
+            ))}
+
+            {/* Remaining count badge */}
+            {remainingCount > 0 && (
+                <View
+                    style={{
+                        marginLeft: overlapOffset[avatarSize],
+                        zIndex: 0,
+                    }}
+                    className={cn(
+                        avatarVariants({ variant: 'default', size: avatarSize }),
+                        'border-2 border-background'
+                    )}
+                >
+                    <Text className={cn(avatarTextVariants({ variant: 'default', size: avatarSize }))}>
+                        +{remainingCount}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
+}