@lunar-kit/core 0.1.0

package/src/components/v1/date-picker.tsx

@@ -0,0 +1,135 @@
+// components/ui/date-picker.tsx
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from './dialog';
+import { Calendar } from './calendar';
+import dayjs from 'dayjs';
+
+type DatePickerVariant = 'date' | 'month' | 'year';
+
+interface DatePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date) => void;
+    children: React.ReactNode;
+    variant?: DatePickerVariant;
+    minDate?: Date;
+    maxDate?: Date;
+}
+
+interface DatePickerTriggerProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+interface DatePickerContentProps {
+    className?: string;
+}
+
+const DatePickerContext = React.createContext<{
+    value?: Date;
+    onValueChange?: (date: Date) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    variant: DatePickerVariant;
+    minDate?: Date;
+    maxDate?: Date;
+} | null>(null);
+
+function useDatePicker() {
+    const context = React.useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePicker components must be used within DatePicker');
+    }
+    return context;
+}
+
+export function DatePicker({
+    value,
+    onValueChange,
+    children,
+    variant = 'date',
+    minDate,
+    maxDate,
+}: DatePickerProps) {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <DatePickerContext.Provider
+            value={{
+                value,
+                onValueChange,
+                open,
+                setOpen,
+                variant,
+                minDate,
+                maxDate,
+            }}
+        >
+            <Dialog open={open} onOpenChange={setOpen}>
+                {children}
+            </Dialog>
+        </DatePickerContext.Provider>
+    );
+}
+
+export function DatePickerTrigger({ className, children }: DatePickerTriggerProps) {
+    const { setOpen } = useDatePicker();
+
+    return (
+        <Pressable
+            onPress={() => setOpen(true)}
+            className={cn(
+                'flex-row items-center justify-between px-4 py-3 border border-slate-300 rounded-lg bg-white',
+                className
+            )}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+export function DatePickerContent({ className }: DatePickerContentProps) {
+    const { value, onValueChange, setOpen, variant, minDate, maxDate } = useDatePicker();
+
+    const handleValueChange = (date: Date) => {
+        onValueChange?.(date);
+        setOpen(false);
+    };
+
+    return (
+        <DialogContent className={cn('p-4', className)}>
+            <Calendar
+                value={value}
+                onValueChange={handleValueChange}
+                variant={variant}
+                minDate={minDate}
+                maxDate={maxDate}
+            />
+        </DialogContent>
+    );
+}
+
+export function DatePickerValue({
+    placeholder = 'Select date',
+    format = 'MMM DD, YYYY',
+    className,
+}: {
+    placeholder?: string;
+    format?: string;
+    className?: string;
+}) {
+    const { value } = useDatePicker();
+
+    return (
+        <Text
+            className={cn(
+                'flex-1 text-sm',
+                value ? 'text-slate-900' : 'text-slate-400',
+                className
+            )}
+        >
+            {value ? dayjs(value).format(format) : placeholder}
+        </Text>
+    );
+}

package/src/components/v1/date-range-picker.tsx

@@ -0,0 +1,218 @@
+// components/ui/date-range-picker.tsx
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from './dialog';
+import { Calendar } from './calendar';
+import dayjs from 'dayjs';
+
+interface DateRangePickerProps {
+    startDate?: Date;
+    endDate?: Date;
+    onRangeChange?: (startDate: Date | undefined, endDate: Date | undefined) => void;
+    children: React.ReactNode;
+    minDate?: Date;
+    maxDate?: Date;
+    maxDays?: number;
+}
+
+interface DateRangePickerTriggerProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+interface DateRangePickerContentProps {
+    className?: string;
+}
+
+const DateRangePickerContext = React.createContext<{
+    startDate?: Date;
+    endDate?: Date;
+    onRangeChange?: (startDate: Date | undefined, endDate: Date | undefined) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    maxDays?: number;
+} | null>(null);
+
+function useDateRangePicker() {
+    const context = React.useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error('DateRangePicker components must be used within DateRangePicker');
+    }
+    return context;
+}
+
+export function DateRangePicker({
+    startDate,
+    endDate,
+    onRangeChange,
+    children,
+    minDate,
+    maxDate,
+    maxDays,
+}: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <DateRangePickerContext.Provider
+            value={{
+                startDate,
+                endDate,
+                onRangeChange,
+                open,
+                setOpen,
+                minDate,
+                maxDate,
+                maxDays,
+            }}
+        >
+            <Dialog open={open} onOpenChange={setOpen}>
+                {children}
+            </Dialog>
+        </DateRangePickerContext.Provider>
+    );
+}
+
+export function DateRangePickerTrigger({ className, children }: DateRangePickerTriggerProps) {
+    const { setOpen } = useDateRangePicker();
+
+    return (
+        <Pressable
+            onPress={() => setOpen(true)}
+            className={cn(
+                'flex-row items-center justify-between px-4 py-3 border border-slate-300 rounded-lg bg-white',
+                className
+            )}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+export function DateRangePickerContent({ className }: DateRangePickerContentProps) {
+    const { startDate, endDate, onRangeChange, setOpen, minDate, maxDate, maxDays } =
+        useDateRangePicker();
+
+    const [tempStartDate, setTempStartDate] = React.useState<Date | undefined>(startDate);
+    const [tempEndDate, setTempEndDate] = React.useState<Date | undefined>(endDate);
+
+    const handleRangeChange = (start: Date | undefined, end: Date | undefined) => {
+        setTempStartDate(start);
+        setTempEndDate(end);
+    };
+
+    const handleApply = () => {
+        if (tempStartDate && tempEndDate) {
+            onRangeChange?.(tempStartDate, tempEndDate);
+            setOpen(false);
+        }
+    };
+
+    const handleClear = () => {
+        setTempStartDate(undefined);
+        setTempEndDate(undefined);
+        onRangeChange?.(undefined, undefined);
+    };
+
+    const handleCancel = () => {
+        setTempStartDate(startDate);
+        setTempEndDate(endDate);
+        setOpen(false);
+    };
+
+    return (
+        <DialogContent className={cn('p-4', className)}>
+            <View>
+                {/* Calendar with range mode */}
+                <Calendar
+                    mode="range"
+                    startDate={tempStartDate}
+                    endDate={tempEndDate}
+                    onRangeChange={handleRangeChange}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    maxDays={maxDays}
+                />
+
+                {/* Selected Range Info */}
+                {tempStartDate && (
+                    <View className="mt-4 p-3 bg-blue-50 rounded-lg">
+                        <Text className="text-sm font-medium text-blue-900">
+                            {tempEndDate
+                                ? `${dayjs(tempStartDate).format('MMM DD, YYYY')} - ${dayjs(tempEndDate).format('MMM DD, YYYY')}`
+                                : `Start: ${dayjs(tempStartDate).format('MMM DD, YYYY')} (Select end date)`}
+                        </Text>
+                        {tempStartDate && tempEndDate && (
+                            <Text className="text-xs text-blue-700 mt-1">
+                                {dayjs(tempEndDate).diff(dayjs(tempStartDate), 'day') + 1} days
+                            </Text>
+                        )}
+                    </View>
+                )}
+
+                {/* Action Buttons */}
+                <View className="flex-row gap-2 mt-4">
+                    <Pressable
+                        onPress={handleClear}
+                        className="flex-1 py-2.5 rounded-lg border border-slate-300 items-center"
+                    >
+                        <Text className="text-sm font-medium text-slate-700">Clear</Text>
+                    </Pressable>
+
+                    <Pressable
+                        onPress={handleCancel}
+                        className="flex-1 py-2.5 rounded-lg border border-slate-300 items-center"
+                    >
+                        <Text className="text-sm font-medium text-slate-700">Cancel</Text>
+                    </Pressable>
+
+                    <Pressable
+                        onPress={handleApply}
+                        disabled={!tempStartDate || !tempEndDate}
+                        className={cn(
+                            'flex-1 py-2.5 rounded-lg items-center',
+                            tempStartDate && tempEndDate ? 'bg-blue-600' : 'bg-slate-200'
+                        )}
+                    >
+                        <Text
+                            className={cn(
+                                'text-sm font-medium',
+                                tempStartDate && tempEndDate ? 'text-white' : 'text-slate-400'
+                            )}
+                        >
+                            Apply
+                        </Text>
+                    </Pressable>
+                </View>
+            </View>
+        </DialogContent>
+    );
+}
+
+export function DateRangePickerValue({
+    placeholder = 'Select date range',
+    format = 'MMM DD, YYYY',
+    className,
+}: {
+    placeholder?: string;
+    format?: string;
+    className?: string;
+}) {
+    const { startDate, endDate } = useDateRangePicker();
+
+    return (
+        <Text
+            className={cn(
+                'flex-1 text-sm',
+                startDate && endDate ? 'text-slate-900' : 'text-slate-400',
+                className
+            )}
+        >
+            {startDate && endDate
+                ? `${dayjs(startDate).format(format)} - ${dayjs(endDate).format(format)}`
+                : placeholder}
+        </Text>
+    );
+}

package/src/components/v1/dialog.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { Modal, View, Text, Pressable, Animated } from 'react-native';
+import { cn } from '@/lib/utils';
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+interface DialogContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DialogHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DialogTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DialogDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DialogFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const DialogContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
+
+function useDialog() {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within Dialog');
+  }
+  return context;
+}
+
+export function Dialog({ open: controlledOpen, onOpenChange: controlledOnOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+
+  const hasDialogTrigger = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === DialogTrigger
+  );
+
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const onOpenChange = controlledOnOpenChange || setInternalOpen;
+
+  return (
+    <DialogContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export function DialogTrigger({ children }: { children: React.ReactNode }) {
+  const { onOpenChange } = useDialog();
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onPress: () => onOpenChange(true),
+    });
+  }
+
+  return (
+    <Pressable onPress={() => onOpenChange(true)}>
+      {children}
+    </Pressable>
+  );
+}
+
+export function DialogContent({ children, className }: DialogContentProps) {
+  const { open, onOpenChange } = useDialog();
+
+  // DONE: Track visible state separately for animation
+  const [visible, setVisible] = React.useState(false);
+
+  const scaleAnim = React.useRef(new Animated.Value(0.9)).current;
+  const opacityAnim = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (open) {
+      // Show modal first
+      setVisible(true);
+
+      // Then animate in
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 80,
+          friction: 10,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      // Animate out first
+      Animated.parallel([
+        Animated.timing(scaleAnim, {
+          toValue: 0.9,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        // Then hide modal after animation completes
+        setVisible(false);
+      });
+    }
+  }, [open]);
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        onPress={() => onOpenChange(false)}
+        className="flex-1 bg-black/50 items-center justify-center p-4"
+      >
+        <Animated.View
+          style={{
+            transform: [{ scale: scaleAnim }],
+            opacity: opacityAnim,
+          }}
+          className="w-full max-w-md"
+        >
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            className={cn(
+              'bg-white rounded-lg p-6 shadow-lg',
+              className
+            )}
+          >
+            {children}
+          </Pressable>
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+export function DialogHeader({ children, className }: DialogHeaderProps) {
+  return (
+    <View className={cn('mb-4', className)}>
+      {children}
+    </View>
+  );
+}
+
+export function DialogTitle({ children, className }: DialogTitleProps) {
+  return (
+    <Text className={cn('text-xl font-semibold text-slate-900', className)}>
+      {children}
+    </Text>
+  );
+}
+
+export function DialogDescription({ children, className }: DialogDescriptionProps) {
+  return (
+    <Text className={cn('text-sm text-slate-500 mt-2', className)}>
+      {children}
+    </Text>
+  );
+}
+
+export function DialogFooter({ children, className }: DialogFooterProps) {
+  return (
+    <View className={cn('flex-row justify-end gap-2 mt-6', className)}>
+      {children}
+    </View>
+  );
+}
+
+export function DialogClose({ children }: { children: React.ReactNode }) {
+  const { onOpenChange } = useDialog();
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onPress: () => onOpenChange(false),
+    });
+  }
+
+  return (
+    <Pressable onPress={() => onOpenChange(false)}>
+      {children}
+    </Pressable>
+  );
+}

package/src/components/v1/radio-group.tsx

@@ -0,0 +1,76 @@
+// components/ui/radio-group.tsx
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+interface RadioGroupProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface RadioGroupItemProps {
+  value: string;
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const RadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+} | null>(null);
+
+function useRadioGroup() {
+  const context = React.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error('RadioGroupItem must be used within RadioGroup');
+  }
+  return context;
+}
+
+export function RadioGroup({ value, onValueChange, children, className }: RadioGroupProps) {
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange }}>
+      <View className={cn('gap-3', className)}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export function RadioGroupItem({ value, id, children, className }: RadioGroupItemProps) {
+  const { value: selectedValue, onValueChange } = useRadioGroup();
+  const isSelected = selectedValue === value;
+
+  return (
+    <Pressable
+      onPress={() => onValueChange?.(value)}
+      className={cn('flex-row items-center gap-3', className)}
+    >
+      {/* Radio Circle */}
+      <View
+        className={cn(
+          'h-5 w-5 rounded-full border-2 items-center justify-center',
+          isSelected ? 'border-blue-600' : 'border-slate-300'
+        )}
+      >
+        {isSelected && (
+          <View className="h-2.5 w-2.5 rounded-full bg-blue-600" />
+        )}
+      </View>
+
+      {/* Label */}
+      {children}
+    </Pressable>
+  );
+}
+
+export function RadioGroupLabel({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <Text className={cn('text-base text-slate-900', className)}>
+      {children}
+    </Text>
+  );
+}