@lunar-kit/core 0.1.0

package/src/components/ui/tabs.tsx

@@ -0,0 +1,254 @@
+// components/ui/tabs.tsx
+import * as React from 'react';
+import { View, Pressable, Animated, LayoutChangeEvent } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+
+// Context untuk share state
+interface TabsContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    variant?: 'pill' | 'underline';
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+const useTabsContext = () => {
+    const context = React.useContext(TabsContext);
+    if (!context) {
+        throw new Error('Tabs components must be used within Tabs');
+    }
+    return context;
+};
+
+// Props Types
+export interface TabsProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: React.ReactNode;
+    variant?: 'pill' | 'underline';
+    className?: string;
+}
+
+export interface TabsListProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export interface TabsTriggerProps {
+    value: string;
+    children: string;
+    className?: string;
+    disabled?: boolean;
+}
+
+export interface TabsContentProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface TabLayout {
+    x: number;
+    width: number;
+    height: number;
+}
+
+// Extended Context for pill animation
+interface TabsListContextValue extends TabsContextValue {
+    registerTab: (value: string, layout: TabLayout) => void;
+    tabLayouts: Map<string, TabLayout>;
+}
+
+const TabsListContext = React.createContext<TabsListContextValue | null>(null);
+
+const useTabsListContext = () => {
+    const context = React.useContext(TabsListContext);
+    if (!context) {
+        throw new Error('TabsTrigger must be used within TabsList');
+    }
+    return context;
+};
+
+// Tabs Root Component
+export function Tabs({
+    value,
+    onValueChange,
+    children,
+    variant = 'underline',
+    className,
+}: TabsProps) {
+    const contextValue: TabsContextValue = {
+        value,
+        onValueChange,
+        variant,
+    };
+
+    return (
+        <TabsContext.Provider value={contextValue}>
+            <View className={cn('flex', className)}>{children}</View>
+        </TabsContext.Provider>
+    );
+}
+
+// TabsList Component
+export function TabsList({ children, className }: TabsListProps) {
+    const { value, onValueChange, variant } = useTabsContext();
+    const [tabLayouts, setTabLayouts] = React.useState<Map<string, TabLayout>>(new Map());
+
+    const indicatorPosition = React.useRef(new Animated.Value(0)).current;
+    const indicatorWidth = React.useRef(new Animated.Value(0)).current;
+    const indicatorHeight = React.useRef(new Animated.Value(0)).current;
+
+    const registerTab = React.useCallback((tabValue: string, layout: TabLayout) => {
+        setTabLayouts((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(tabValue, layout);
+            return newMap;
+        });
+    }, []);
+
+    // Animate pill indicator when active tab changes
+    React.useEffect(() => {
+        const activeLayout = tabLayouts.get(value);
+        if (activeLayout && variant === 'pill') {
+            Animated.parallel([
+                Animated.spring(indicatorPosition, {
+                    toValue: activeLayout.x,
+                    useNativeDriver: false,
+                    tension: 100,
+                    friction: 10,
+                }),
+                Animated.spring(indicatorWidth, {
+                    toValue: activeLayout.width,
+                    useNativeDriver: false,
+                    tension: 100,
+                    friction: 10,
+                }),
+                Animated.spring(indicatorHeight, {
+                    toValue: activeLayout.height,
+                    useNativeDriver: false,
+                    tension: 100,
+                    friction: 10,
+                }),
+            ]).start();
+        }
+    }, [value, tabLayouts, variant]);
+
+    const contextValue: TabsListContextValue = {
+        value,
+        onValueChange,
+        variant,
+        registerTab,
+        tabLayouts,
+    };
+
+    return (
+        <TabsListContext.Provider value={contextValue}>
+            <View
+                className={cn(
+                    'relative flex-row items-center',
+                    variant === 'pill' && 'bg-muted rounded-lg p-1',
+                    variant === 'underline' && 'border-b border-border',
+                    className
+                )}
+            >
+                {/* Animated Pill Background */}
+                {variant === 'pill' && (
+                    <Animated.View
+                        className="absolute bg-background rounded-md shadow-sm"
+                        style={{
+                            left: indicatorPosition,
+                            width: indicatorWidth,
+                            height: indicatorHeight,
+                        }}
+                    />
+                )}
+
+                {children}
+            </View>
+        </TabsListContext.Provider>
+    );
+}
+
+// TabsTrigger Component
+export function TabsTrigger({ value: triggerValue, children, className, disabled = false }: TabsTriggerProps) {
+    const { value, onValueChange, variant, registerTab } = useTabsListContext();
+    const isActive = value === triggerValue;
+
+    // Animation for underline
+    const scaleAnim = React.useRef(new Animated.Value(isActive ? 1 : 0)).current;
+    const opacityAnim = React.useRef(new Animated.Value(isActive ? 1 : 0)).current;
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+        const { x, width, height } = event.nativeEvent.layout;
+        registerTab(triggerValue, { x, width, height });
+    };
+
+    React.useEffect(() => {
+        if (variant === 'underline') {
+            Animated.parallel([
+                Animated.spring(scaleAnim, {
+                    toValue: isActive ? 1 : 0,
+                    useNativeDriver: true,
+                    tension: 100,
+                    friction: 10,
+                }),
+                Animated.timing(opacityAnim, {
+                    toValue: isActive ? 1 : 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [isActive, variant, scaleAnim, opacityAnim]);
+
+    return (
+        <Pressable
+            onPress={() => onValueChange(triggerValue)}
+            onLayout={handleLayout}
+            disabled={disabled}
+            className={cn(
+                'flex-1 items-center justify-center',
+                variant === 'pill' && 'px-4 py-2 rounded-md z-10',
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <View className="items-center w-full">
+                <Text
+                    size={variant === 'pill' ? 'sm' : 'md'}
+                    variant="label"
+                    className={cn(
+                        isActive ? 'text-foreground' : 'text-muted-foreground'
+                    )}
+                >
+                    {children}
+                </Text>
+
+                {/* Animated Underline Indicator */}
+                {variant === 'underline' && (
+                    <Animated.View
+                        className="h-0.5 mt-3 rounded-full bg-primary border-b-2 border-primary"
+                        style={{
+                            width: '100%',
+                            transform: [{ scaleX: scaleAnim }],
+                            opacity: opacityAnim,
+                        }}
+                    />
+                )}
+            </View>
+        </Pressable>
+    );
+}
+
+// TabsContent Component
+export function TabsContent({ value: contentValue, children, className }: TabsContentProps) {
+    const { value } = useTabsContext();
+
+    if (value !== contentValue) {
+        return null;
+    }
+
+    return <View className={cn('pt-4', className)}>{children}</View>;
+}

package/src/components/ui/text.tsx

@@ -0,0 +1,229 @@
+// components/ui/text.tsx
+import React from 'react';
+import { Text as RNText, TextProps as RNTextProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const textVariants = cva(
+    'text-foreground', // base style
+    {
+        variants: {
+            variant: {
+                default: '',
+                header: 'font-bold',
+                title: 'font-semibold',
+                label: 'font-medium',
+                body: 'font-normal',
+                caption: 'font-normal text-muted-foreground',
+                muted: 'text-muted-foreground',
+                error: 'text-destructive',
+                success: 'text-green-600 dark:text-green-400',
+            },
+            size: {
+                sm: '',   // akan di-override di compound variants
+                md: '',   // akan di-override di compound variants
+                lg: '',   // akan di-override di compound variants
+                xl: '',   // akan di-override di compound variants
+            },
+            align: {
+                left: 'text-left',
+                center: 'text-center',
+                right: 'text-right',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'md',
+            align: 'left',
+        },
+        // Compound variants - setiap variant punya size mapping sendiri
+        compoundVariants: [
+            // HEADER sizes
+            {
+                variant: 'header',
+                size: 'sm',
+                class: 'text-2xl', // 24px
+            },
+            {
+                variant: 'header',
+                size: 'md',
+                class: 'text-3xl', // 30px
+            },
+            {
+                variant: 'header',
+                size: 'lg',
+                class: 'text-4xl', // 36px
+            },
+            {
+                variant: 'header',
+                size: 'xl',
+                class: 'text-5xl', // 48px
+            },
+
+            // TITLE sizes
+            {
+                variant: 'title',
+                size: 'sm',
+                class: 'text-lg', // 18px
+            },
+            {
+                variant: 'title',
+                size: 'md',
+                class: 'text-xl', // 20px
+            },
+            {
+                variant: 'title',
+                size: 'lg',
+                class: 'text-2xl', // 24px
+            },
+            {
+                variant: 'title',
+                size: 'xl',
+                class: 'text-3xl', // 30px
+            },
+
+            // LABEL sizes
+            {
+                variant: 'label',
+                size: 'sm',
+                class: 'text-xs uppercase tracking-wider', // 12px
+            },
+            {
+                variant: 'label',
+                size: 'md',
+                class: 'text-sm uppercase tracking-wide', // 14px
+            },
+            {
+                variant: 'label',
+                size: 'lg',
+                class: 'text-base uppercase tracking-wide', // 16px
+            },
+
+            // BODY sizes
+            {
+                variant: 'body',
+                size: 'sm',
+                class: 'text-sm', // 14px
+            },
+            {
+                variant: 'body',
+                size: 'md',
+                class: 'text-base', // 16px
+            },
+            {
+                variant: 'body',
+                size: 'lg',
+                class: 'text-lg', // 18px
+            },
+
+            // CAPTION sizes
+            {
+                variant: 'caption',
+                size: 'sm',
+                class: 'text-xs', // 12px
+            },
+            {
+                variant: 'caption',
+                size: 'md',
+                class: 'text-sm', // 14px
+            },
+            {
+                variant: 'caption',
+                size: 'lg',
+                class: 'text-base', // 16px
+            },
+
+            // MUTED sizes (sama dengan body)
+            {
+                variant: 'muted',
+                size: 'sm',
+                class: 'text-sm',
+            },
+            {
+                variant: 'muted',
+                size: 'md',
+                class: 'text-base',
+            },
+            {
+                variant: 'muted',
+                size: 'lg',
+                class: 'text-lg',
+            },
+
+            // ERROR sizes (sama dengan body)
+            {
+                variant: 'error',
+                size: 'sm',
+                class: 'text-sm',
+            },
+            {
+                variant: 'error',
+                size: 'md',
+                class: 'text-base',
+            },
+            {
+                variant: 'error',
+                size: 'lg',
+                class: 'text-lg',
+            },
+
+            // SUCCESS sizes (sama dengan body)
+            {
+                variant: 'success',
+                size: 'sm',
+                class: 'text-sm',
+            },
+            {
+                variant: 'success',
+                size: 'md',
+                class: 'text-base',
+            },
+            {
+                variant: 'success',
+                size: 'lg',
+                class: 'text-lg',
+            },
+
+            // DEFAULT sizes
+            {
+                variant: 'default',
+                size: 'sm',
+                class: 'text-sm',
+            },
+            {
+                variant: 'default',
+                size: 'md',
+                class: 'text-base',
+            },
+            {
+                variant: 'default',
+                size: 'lg',
+                class: 'text-lg',
+            },
+        ],
+    }
+);
+
+export interface TextProps
+    extends RNTextProps,
+    VariantProps<typeof textVariants> {
+    className?: string;
+    variant?: 'default' | 'header' | 'title' | 'label' | 'body' | 'caption' | 'muted' | 'error' | 'success';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'left' | 'center' | 'right';
+}
+
+export function Text({
+    variant,
+    size,
+    align,
+    className,
+    ...props
+}: TextProps) {
+    return (
+        <RNText
+            className={cn(textVariants({ variant, size, align }), className)}
+            {...props}
+        />
+    );
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,77 @@
+// components/ui/textarea.tsx
+import * as React from 'react';
+import { TextInput, View } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+import { useThemeColors } from '@/hooks/useThemeColors';
+
+export interface TextareaProps extends React.ComponentPropsWithoutRef<typeof TextInput> {
+    label?: string;
+    error?: string;
+    containerClassName?: string;
+    rows?: number;
+}
+
+export const Textarea = React.forwardRef<TextInput, TextareaProps>(
+    (
+        {
+            className,
+            containerClassName,
+            label,
+            error,
+            editable = true,
+            rows = 4,
+            ...props
+        },
+        ref
+    ) => {
+        const { colors } = useThemeColors();
+
+        return (
+            <View className={cn('w-full', containerClassName)}>
+                {label && (
+                    <Text
+                        size="sm"
+                        variant="label"
+                        className={cn(
+                            'mb-2',
+                            error && 'text-destructive'
+                        )}
+                    >
+                        {label}
+                    </Text>
+                )}
+
+                <TextInput
+                    ref={ref}
+                    className={cn(
+                        'border rounded-lg bg-background px-3 py-3 text-base text-foreground',
+                        error ? 'border-destructive' : 'border-input',
+                        'focus:border-ring',
+                        !editable && 'bg-muted opacity-60',
+                        className
+                    )}
+                    placeholderTextColor={colors.mutedForeground}
+                    multiline
+                    numberOfLines={rows}
+                    textAlignVertical="top"
+                    editable={editable}
+                    style={[
+                        {
+                            minHeight: rows * 24,
+                            color: colors.foreground,
+                        }
+                    ]}
+                    {...props}
+                />
+
+                {error && (
+                    <Text size="sm" className="text-destructive mt-2">
+                        {error}
+                    </Text>
+                )}
+            </View>
+        );
+    }
+);
+Textarea.displayName = 'Textarea';