@lunar-kit/core 0.1.0

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,129 @@
+// components/ui/checkbox.tsx
+import * as React from 'react';
+import { View, Pressable } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+import { Check, Minus } from 'lucide-react-native';
+import { useThemeColors } from '@/hooks/useThemeColors';
+
+// Checkbox Variants
+const checkboxVariants = cva(
+    'flex-row items-center',
+    {
+        variants: {
+            size: {
+                sm: 'gap-2',
+                md: 'gap-3',
+                lg: 'gap-4',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }
+);
+
+// Checkbox Box Variants
+const checkboxBoxVariants = cva(
+    'rounded border-2 items-center justify-center',
+    {
+        variants: {
+            size: {
+                sm: 'h-4 w-4 border',
+                md: 'h-5 w-5 border-2',
+                lg: 'h-6 w-6 border-2',
+            },
+            checked: {
+                true: 'bg-primary border-primary',
+                false: 'border-input',
+            },
+            disabled: {
+                true: 'opacity-50',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+            checked: false,
+            disabled: false,
+        },
+    }
+);
+
+interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+
+interface CheckboxLabelProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface CheckboxDescriptionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function Checkbox({
+    checked = false,
+    onCheckedChange,
+    children,
+    className,
+    size = 'md',
+    disabled = false,
+    indeterminate = false,
+}: CheckboxProps) {
+    const { colors } = useThemeColors();
+
+    const iconSize = size === 'sm' ? 12 : size === 'lg' ? 18 : 14;
+
+    return (
+        <Pressable
+            onPress={() => !disabled && onCheckedChange?.(!checked)}
+            className={cn(checkboxVariants({ size }), className)}
+            disabled={disabled}
+        >
+            {/* Checkbox Square */}
+            <View
+                className={cn(
+                    checkboxBoxVariants({
+                        size,
+                        checked: checked || indeterminate,
+                        disabled
+                    })
+                )}
+            >
+                {indeterminate ? (
+                    <Minus size={iconSize} color={colors.primaryForeground} strokeWidth={3} />
+                ) : checked ? (
+                    <Check size={iconSize} color={colors.primaryForeground} strokeWidth={3} />
+                ) : null}
+            </View>
+
+            {/* Label */}
+            {children}
+        </Pressable>
+    );
+}
+
+export function CheckboxLabel({ children, className }: CheckboxLabelProps) {
+    return (
+        <Text variant="body" size="sm" className={className}>
+            {children}
+        </Text>
+    );
+}
+
+export function CheckboxDescription({ children, className }: CheckboxDescriptionProps) {
+    return (
+        <Text variant="muted" size="sm" className={cn('mt-0.5', className)}>
+            {children}
+        </Text>
+    );
+}

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

@@ -0,0 +1,190 @@
+// components/ui/date-picker.tsx
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+import { Dialog, DialogContent } from './dialog';
+import { Calendar } from './calendar';
+import { CalendarDays } from 'lucide-react-native';
+import { useThemeColors } from '@/hooks/useThemeColors';
+import dayjs from 'dayjs';
+
+type DatePickerVariant = 'date' | 'month' | 'year';
+
+// Date Picker Trigger Variants
+const datePickerTriggerVariants = cva(
+    'flex-row items-center justify-between rounded-lg border',
+    {
+        variants: {
+            variant: {
+                default: 'border-input bg-background',
+                outline: 'border-input bg-transparent',
+                filled: 'border-transparent bg-muted',
+            },
+            size: {
+                sm: 'px-3 py-2',
+                md: 'px-4 py-3',
+                lg: 'px-5 py-4',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'md',
+        },
+    }
+);
+
+type TriggerVariant = 'default' | 'outline' | 'filled';
+type TriggerSize = 'sm' | 'md' | 'lg';
+
+interface DatePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date) => void;
+    children: React.ReactNode;
+    variant?: DatePickerVariant;
+    minDate?: Date;
+    maxDate?: Date;
+    triggerVariant?: TriggerVariant;
+    triggerSize?: TriggerSize;
+}
+
+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;
+    triggerVariant: TriggerVariant;
+    triggerSize: TriggerSize;
+} | 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,
+    triggerVariant = 'default',
+    triggerSize = 'md',
+}: DatePickerProps) {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <DatePickerContext.Provider
+            value={{
+                value,
+                onValueChange,
+                open,
+                setOpen,
+                variant,
+                minDate,
+                maxDate,
+                triggerVariant,
+                triggerSize,
+            }}
+        >
+            <Dialog open={open} onOpenChange={setOpen}>
+                {children}
+            </Dialog>
+        </DatePickerContext.Provider>
+    );
+}
+
+export function DatePickerTrigger({ className, children }: DatePickerTriggerProps) {
+    const { setOpen, triggerVariant, triggerSize } = useDatePicker();
+
+    return (
+        <Pressable
+            onPress={() => setOpen(true)}
+            className={cn(
+                datePickerTriggerVariants({
+                    variant: triggerVariant,
+                    size: triggerSize
+                }),
+                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-0', className)}>
+            <Calendar
+                value={value}
+                onValueChange={handleValueChange}
+                variant={variant}
+                minDate={minDate}
+                maxDate={maxDate}
+            />
+        </DialogContent>
+    );
+}
+
+export function DatePickerValue({
+    placeholder = 'Select date',
+    format = 'MMM DD, YYYY',
+    className,
+    showIcon = true,
+}: {
+    placeholder?: string;
+    format?: string;
+    className?: string;
+    showIcon?: boolean;
+}) {
+    const { value } = useDatePicker();
+    const { colors } = useThemeColors();
+
+    const hasValue = !!value;
+
+    return (
+        <>
+            <Text
+                size="sm"
+                className={cn(
+                    'flex-1',
+                    hasValue ? 'text-foreground' : 'text-muted-foreground',
+                    className
+                )}
+            >
+                {value ? dayjs(value).format(format) : placeholder}
+            </Text>
+            {showIcon && (
+                <CalendarDays
+                    size={18}
+                    color={hasValue ? colors.foreground : colors.mutedForeground}
+                />
+            )}
+        </>
+    );
+}

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

@@ -0,0 +1,262 @@
+// components/ui/date-range-picker.tsx
+import * as React from 'react';
+import { View, Pressable } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+import { Button } from './button';
+import { Dialog, DialogContent } from './dialog';
+import { Calendar } from './calendar';
+import { CalendarDays } from 'lucide-react-native';
+import { useThemeColors } from '@/hooks/useThemeColors';
+import dayjs from 'dayjs';
+
+// Date Range Picker Trigger Variants
+const dateRangePickerTriggerVariants = cva(
+    'flex-row items-center justify-between rounded-lg border',
+    {
+        variants: {
+            variant: {
+                default: 'border-input bg-background',
+                outline: 'border-input bg-transparent',
+                filled: 'border-transparent bg-muted',
+            },
+            size: {
+                sm: 'px-3 py-2',
+                md: 'px-4 py-3',
+                lg: 'px-5 py-4',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'md',
+        },
+    }
+);
+
+interface DateRangePickerProps extends VariantProps<typeof dateRangePickerTriggerVariants> {
+    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;
+    variant: 'default' | 'outline' | 'filled';
+    size: 'sm' | 'md' | 'lg';
+} | 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,
+    variant = 'default',
+    size = 'md',
+}: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <DateRangePickerContext.Provider
+            value={{
+                startDate,
+                endDate,
+                onRangeChange,
+                open,
+                setOpen,
+                minDate,
+                maxDate,
+                maxDays,
+                variant: variant ?? 'default',
+                size: size ?? 'md',
+            }}
+        >
+            <Dialog open={open} onOpenChange={setOpen}>
+                {children}
+            </Dialog>
+        </DateRangePickerContext.Provider>
+    );
+}
+
+export function DateRangePickerTrigger({ className, children }: DateRangePickerTriggerProps) {
+    const { setOpen, variant, size } = useDateRangePicker();
+
+    return (
+        <Pressable
+            onPress={() => setOpen(true)}
+            className={cn(
+                dateRangePickerTriggerVariants({ variant, size }),
+                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-0', 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-2 mx-4 p-3 bg-accent rounded-lg">
+                        <Text variant="body" size="sm" className="font-medium">
+                            {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 variant="muted" size="sm" className="mt-1">
+                                {dayjs(tempEndDate).diff(dayjs(tempStartDate), 'day') + 1} days
+                            </Text>
+                        )}
+                    </View>
+                )}
+
+                {/* Action Buttons */}
+                <View className="flex-row gap-2 m-4">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onPress={handleClear}
+                        className="flex-1"
+                    >
+                        Clear
+                    </Button>
+
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onPress={handleCancel}
+                        className="flex-1"
+                    >
+                        Cancel
+                    </Button>
+
+                    <Button
+                        variant="default"
+                        size="sm"
+                        onPress={handleApply}
+                        disabled={!tempStartDate || !tempEndDate}
+                        className="flex-1"
+                    >
+                        Apply
+                    </Button>
+                </View>
+            </View>
+        </DialogContent>
+    );
+}
+
+export function DateRangePickerValue({
+    placeholder = 'Select date range',
+    format = 'MMM DD, YYYY',
+    className,
+    showIcon = true,
+}: {
+    placeholder?: string;
+    format?: string;
+    className?: string;
+    showIcon?: boolean;
+}) {
+    const { startDate, endDate } = useDateRangePicker();
+    const { colors } = useThemeColors();
+
+    const hasValue = startDate && endDate;
+
+    return (
+        <>
+            <Text
+                size="sm"
+                className={cn(
+                    'flex-1',
+                    hasValue ? 'text-foreground' : 'text-muted-foreground',
+                    className
+                )}
+            >
+                {hasValue
+                    ? `${dayjs(startDate).format(format)} - ${dayjs(endDate).format(format)}`
+                    : placeholder}
+            </Text>
+            {showIcon && (
+                <CalendarDays
+                    size={18}
+                    color={hasValue ? colors.foreground : colors.mutedForeground}
+                />
+            )}
+        </>
+    );
+}