@lunar-kit/core 0.1.0

package/src/components/v1/select.tsx

@@ -0,0 +1,217 @@
+// components/ui/select.tsx
+import * as React from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from './dialog';
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+
+interface SelectProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+
+interface SelectTriggerProps {
+    className?: string;
+    children?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+interface SelectValueProps {
+    placeholder?: string;
+    className?: string;
+}
+
+interface SelectContentProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+interface SelectItemProps {
+    value: string;
+    label: string;
+    className?: string;
+    disabled?: boolean;
+}
+
+interface SelectGroupProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+interface SelectLabelProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+interface SelectSeparatorProps {
+    className?: string;
+}
+
+const SelectContext = React.createContext<{
+    value?: string;
+    onValueChange?: (value: string) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    disabled?: boolean;
+    options: Map<string, string>;
+    registerOption: (value: string, label: string) => void;
+} | null>(null);
+
+function useSelect() {
+    const context = React.useContext(SelectContext);
+    if (!context) {
+        throw new Error('Select components must be used within Select');
+    }
+    return context;
+}
+
+export function Select({ value, onValueChange, children, disabled = false }: SelectProps) {
+    const [open, setOpen] = React.useState(false);
+    const [options] = React.useState(() => new Map<string, string>());
+
+    const registerOption = React.useCallback((val: string, label: string) => {
+        options.set(val, label);
+    }, [options]);
+
+    return (
+        <SelectContext.Provider
+            value={{
+                value,
+                onValueChange,
+                open,
+                setOpen: (val) => !disabled && setOpen(val),
+                disabled,
+                options,
+                registerOption,
+            }}
+        >
+            <Dialog open={open} onOpenChange={setOpen}>
+                {children}
+            </Dialog>
+        </SelectContext.Provider>
+    );
+}
+
+export function SelectTrigger({ className, children, size = 'md' }: SelectTriggerProps) {
+    const { setOpen, disabled } = useSelect();
+
+    const sizeStyles = {
+        sm: 'h-9 px-3 py-2',
+        md: 'h-10 px-4 py-3',
+        lg: 'h-12 px-4 py-3.5',
+    };
+
+    return (
+        <Pressable
+            onPress={() => setOpen(true)}
+            disabled={disabled}
+            className={cn(
+                'flex-row items-center justify-between gap-2 rounded-lg border border-slate-300 bg-white shadow-sm',
+                sizeStyles[size],
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            {children}
+            <Text className="text-slate-500 text-xs">▼</Text>
+        </Pressable>
+    );
+}
+
+export function SelectValue({ placeholder = 'Select...', className }: SelectValueProps) {
+    const { value, options } = useSelect();
+    const displayValue = value ? options.get(value) : null;
+
+    return (
+        <Text
+            className={cn(
+                'flex-1 text-sm',
+                displayValue ? 'text-slate-900' : 'text-slate-400',
+                className
+            )}
+        >
+            {displayValue || placeholder}
+        </Text>
+    );
+}
+
+export function SelectContent({ className, children }: SelectContentProps) {
+    return (
+        <DialogContent className={cn('p-0 max-h-96', className)}>
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                bounces={false}
+                className="max-h-96"
+            >
+                <View className="py-1">{children}</View>
+            </ScrollView>
+        </DialogContent>
+    );
+}
+
+export function SelectItem({ value, label, className, disabled = false }: SelectItemProps) {
+    const { value: selectedValue, onValueChange, setOpen, registerOption } = useSelect();
+    const isSelected = selectedValue === value;
+
+    React.useEffect(() => {
+        registerOption(value, label);
+    }, [value, label, registerOption]);
+
+    const handleSelect = () => {
+        if (disabled) return;
+        onValueChange?.(value);
+        setOpen(false);
+    };
+
+    return (
+        <Pressable
+            onPress={handleSelect}
+            disabled={disabled}
+            className={cn(
+                'flex-row items-center justify-between px-4 py-3 border-b border-slate-100 active:bg-blue-50',
+                isSelected && 'bg-blue-50',
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <Text
+                className={cn(
+                    'flex-1 text-sm',
+                    isSelected ? 'text-blue-600 font-semibold' : 'text-slate-900'
+                )}
+            >
+                {label}
+            </Text>
+
+            {isSelected && (
+                <Text className="text-blue-600 font-bold text-sm ml-2">✓</Text>
+            )}
+        </Pressable>
+    );
+}
+
+export function SelectGroup({ className, children }: SelectGroupProps) {
+    return <View className={cn('py-1', className)}>{children}</View>;
+}
+
+export function SelectLabel({ className, children }: SelectLabelProps) {
+    return (
+        <View className={cn('px-4 py-2', className)}>
+            <Text className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                {children}
+            </Text>
+        </View>
+    );
+}
+
+export function SelectSeparator({ className }: SelectSeparatorProps) {
+    return <View className={cn('h-px bg-slate-200 my-1 mx-2', className)} />;
+}
+
+export type { SelectOption };

package/src/components/v1/tabs.tsx

@@ -0,0 +1,253 @@
+// components/ui/tabs.tsx
+import * as React from 'react';
+import { View, Text, Pressable, Animated, LayoutChangeEvent } from 'react-native';
+import { cn } from '@/lib/utils';
+
+// 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-slate-200 rounded-lg p-1',
+                    variant === 'underline' && 'border-b border-slate-300',
+                    className
+                )}
+            >
+                {/* Animated Pill Background */}
+                {variant === 'pill' && (
+                    <Animated.View
+                        className="absolute bg-white 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 rounded-md z-10',
+                disabled && 'opacity-50',
+                className
+            )}
+        >
+            <View className="items-center w-full">
+                <Text
+                    className={cn(
+                        'text-base font-medium',
+                        isActive ? 'text-slate-900' : 'text-slate-400',
+                        variant === 'pill' && 'text-sm py-1'
+                    )}
+                >
+                    {children}
+                </Text>
+
+                {/* Animated Underline Indicator */}
+                {variant === 'underline' && (
+                    <Animated.View
+                        className="h-0.5 mt-3 rounded-full bg-slate-900 border-b-2 border-slate-900"
+                        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/registry/ui/accordion.json

@@ -0,0 +1,30 @@
+{
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [],
+  "devDependencies": [],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "/src/components/ui/accordion.tsx",
+      "type": "component"
+    }
+  ],
+  "meta": {
+    "description": "A vertically stacked set of interactive headings that reveal or hide associated sections of content. Supports single and multiple expansion modes.",
+    "features": [
+      "Single mode: only one item can be open at a time",
+      "Multiple mode: multiple items can be open simultaneously",
+      "Collapsible option for single mode",
+      "Smooth animations with LayoutAnimation",
+      "Animated chevron rotation indicator",
+      "Disabled state support",
+      "Helper text components for common patterns",
+      "Custom content support",
+      "Accessible keyboard navigation",
+      "Perfect for FAQs, settings panels, and navigation menus"
+    ]
+  }
+}

package/src/registry/ui/avatar.json

@@ -0,0 +1,41 @@
+{
+  "name": "avatar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "devDependencies": [],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "/src/components/ui/avatar.tsx",
+      "type": "component"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "slate": {
+              "200": "#e2e8f0",
+              "300": "#cbd5e1",
+              "400": "#94a3b8",
+              "600": "#475569",
+              "700": "#334155"
+            },
+            "green": {
+              "500": "#22c55e"
+            },
+            "yellow": {
+              "500": "#eab308"
+            },
+            "red": {
+              "500": "#ef4444"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/registry/ui/badge.json

@@ -0,0 +1,26 @@
+{
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [],
+  "devDependencies": [],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "/src/components/ui/badge.tsx",
+      "type": "component"
+    }
+  ],
+  "meta": {
+    "description": "A small badge component used to display status, counts, or labels. Can be used standalone or in conjunction with other UI elements.",
+    "features": [
+      "Multiple preset colors for different contexts (e.g., success, warning, error)",
+      "Customizable sizes (small, medium, large)",
+      "Optional icons to enhance visual representation",
+      "Supports text truncation for long content",
+      "Accessible with proper ARIA attributes",
+      "Lightweight and easy to integrate into existing designs"
+    ]
+  }
+}

package/src/registry/ui/banner.json

@@ -0,0 +1,27 @@
+{
+  "name": "banner",
+  "type": "registry:ui",
+  "dependencies": [],
+  "devDependencies": [],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "/src/components/ui/banner.tsx",
+      "type": "component"
+    }
+  ],
+  "meta": {
+    "description": "A banner component used to display important messages or alerts to users. Can be used for notifications, warnings, or informational messages.",
+    "features": [
+      "Multiple preset styles for different contexts (e.g., info, success, warning, error)",
+      "Customizable icons to enhance visual representation",
+      "Optional action buttons for user interaction",
+      "Dismissible banners with smooth animations",
+      "Supports text truncation for long content",
+      "Accessible with proper ARIA attributes",
+      "Lightweight and easy to integrate into existing designs"
+    ]
+  }
+}

package/src/registry/ui/bottom-sheet.json

@@ -0,0 +1,29 @@
+{
+  "name": "bottom-sheet",
+  "type": "registry:ui",
+  "description": "A draggable bottom sheet component with snap points",
+  "files": [
+    {
+      "path": "/src/components/ui/bottom-sheet.tsx",
+      "type": "registry:ui"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "text",
+    "radio",
+    "checkbox"
+  ],
+  "meta": {
+    "description": "A draggable bottom sheet component with snap points, smooth gestures, and list variants.",
+    "features": [
+      "Multiple snap points support",
+      "Smooth drag gestures with PanResponder",
+      "Scrollable body with fixed header and footer",
+      "List variants (plain, single-select, multi-select)",
+      "Auto-height animation with LayoutAnimation",
+      "Backdrop with opacity animation"
+    ]
+  }
+}
+

package/src/registry/ui/button.json

@@ -0,0 +1,24 @@
+{
+  "name": "button",
+  "type": "registry:ui",
+  "description": "A customizable button component",
+  "files": [
+    {
+      "path": "/src/components/ui/button.tsx",
+      "type": "component"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [],
+  "meta": {
+    "description": "A customizable button component with various styles and states.",
+    "features": [
+      "Multiple preset styles (primary, secondary, danger, etc.)",
+      "Customizable sizes (small, medium, large)",
+      "Supports icons on the left or right side",
+      "Disabled and loading states",
+      "Accessible with proper ARIA attributes",
+      "Lightweight and easy to integrate into existing designs"
+    ]
+  }
+}

package/src/registry/ui/calendar.json

@@ -0,0 +1,29 @@
+{
+  "name": "calendar",
+  "type": "registry:ui",
+  "dependencies": [
+    "dayjs"
+  ],
+  "devDependencies": [],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "/src/components/ui/calendar.tsx",
+      "type": "component"
+    }
+  ],
+  "meta": {
+    "description": "A reusable calendar component with date, month, and year views. Supports single selection and range selection modes.",
+    "features": [
+      "Three view modes: date, month, year",
+      "Single and range selection modes",
+      "Smart navigation between views",
+      "Min/max date constraints",
+      "Max days constraint for range mode",
+      "Native device locale support",
+      "Can be used inline or with DatePicker/DateRangePicker"
+    ]
+  }
+}