@lunar-kit/core 0.1.0

package/src/components/ui/dialog.tsx

@@ -0,0 +1,204 @@
+// components/ui/dialog.tsx
+import * as React from 'react';
+import { Modal, View, Pressable, Animated } from 'react-native';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+
+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 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();
+
+  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) {
+      setVisible(true);
+
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 80,
+          friction: 10,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(scaleAnim, {
+          toValue: 0.9,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        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 dark:bg-black/70 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-background rounded-lg p-6 shadow-lg web:min-w-[400px] border border-border',
+              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 size="xl" variant="title" className={cn(className)}>
+      {children}
+    </Text>
+  );
+}
+
+export function DialogDescription({ children, className }: DialogDescriptionProps) {
+  return (
+    <Text size="sm" className={cn('text-muted-foreground 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/ui/form.tsx

@@ -0,0 +1,139 @@
+// components/ui/form.tsx
+import * as React from 'react';
+import { View } from 'react-native';
+import {
+    Controller,
+    ControllerProps,
+    FieldPath,
+    FieldValues,
+    FormProvider,
+    useFormContext,
+} from 'react-hook-form';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+
+export const Form = FormProvider;
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+    name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+    {} as FormFieldContextValue
+);
+
+export const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+    ...props
+}: ControllerProps<TFieldValues, TName>) => {
+    return (
+        <FormFieldContext.Provider value={{ name: props.name }}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    );
+};
+
+export const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+
+    const fieldState = getFieldState(fieldContext.name, formState);
+
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+
+    const { id } = itemContext;
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+
+type FormItemContextValue = {
+    id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+    {} as FormItemContextValue
+);
+
+export const FormItem = React.forwardRef<
+    View,
+    React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <View ref={ref} className={cn('mb-4', className)} {...props} />
+        </FormItemContext.Provider>
+    );
+});
+FormItem.displayName = 'FormItem';
+
+export const FormLabel = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) => {
+    const { error, formItemId } = useFormField();
+
+    return (
+        <Text
+            size="sm"
+            variant="label"
+            className={cn(
+                'mb-2',
+                error && 'text-destructive',
+                className
+            )}
+            nativeID={formItemId}
+            {...props}
+        />
+    );
+};
+FormLabel.displayName = 'FormLabel';
+
+export const FormDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) => {
+    const { formDescriptionId } = useFormField();
+
+    return (
+        <Text
+            size="sm"
+            nativeID={formDescriptionId}
+            className={cn('text-muted-foreground mt-2', className)}
+            {...props}
+        />
+    );
+};
+FormDescription.displayName = 'FormDescription';
+
+export const FormMessage = ({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof Text>) => {
+    const { error, formMessageId } = useFormField();
+
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+        return null;
+    }
+
+    return (
+        <Text
+            size="sm"
+            nativeID={formMessageId}
+            className={cn('text-destructive mt-1', className)}
+            {...props}
+        >
+            {body}
+        </Text>
+    );
+};
+FormMessage.displayName = 'FormMessage';

package/src/components/ui/input.tsx

@@ -0,0 +1,107 @@
+// components/ui/input.tsx
+import React, { forwardRef, useState } from 'react';
+import { View, TextInput, Platform, type TextInputProps } from 'react-native';
+import { cn } from '@/lib/utils';
+import { useThemeColors } from '@/hooks/useThemeColors';
+
+export interface InputProps extends TextInputProps {
+    variant?: 'outline' | 'underline';
+    size?: 'sm' | 'md' | 'lg';
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    error?: boolean;
+    containerClassName?: string;
+    inputClassName?: string;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+    (
+        {
+            variant = 'outline',
+            size = 'md',
+            prefix,
+            suffix,
+            error = false,
+            containerClassName,
+            inputClassName,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const [isFocused, setIsFocused] = useState(false);
+        const { colors } = useThemeColors();
+        const isOutline = variant === 'outline';
+
+        const sizeStyles = {
+            sm: 'web:h-9 h-10',
+            md: 'web:h-10 h-11',
+            lg: 'web:h-12 h-13',
+        };
+
+        const handleFocus = (e: any) => {
+            setIsFocused(true);
+            props.onFocus?.(e);
+        };
+
+        const handleBlur = (e: any) => {
+            setIsFocused(false);
+            props.onBlur?.(e);
+        };
+
+        return (
+            <View
+                className={cn(
+                    'flex-row items-center bg-background',
+                    sizeStyles[size],
+                    isOutline && 'border rounded-lg px-3',
+                    !isOutline && 'border-b',
+                    isOutline && !error && !isFocused && 'border-input',
+                    isOutline && !error && isFocused && 'border-ring',
+                    isOutline && error && 'border-destructive',
+                    !isOutline && !error && !isFocused && 'border-input',
+                    !isOutline && !error && isFocused && 'border-ring',
+                    !isOutline && error && 'border-destructive',
+                    containerClassName
+                )}
+            >
+                {prefix && <View className="mr-3">{prefix}</View>}
+
+                <TextInput
+                    ref={ref}
+                    {...props}
+                    style={[
+                        {
+                            flex: 1,
+                            fontSize: 16,
+                            color: colors.foreground,
+                            padding: 0,
+                            paddingVertical: 0,
+                            paddingHorizontal: 0,
+                            margin: 0,
+                            height: '100%',
+                            textAlignVertical: 'center',
+                            outlineWidth: 0,
+                            ...(Platform.OS === 'ios' && {
+                                lineHeight: 20,
+                            }),
+                            ...(Platform.OS === 'android' && {
+                                textAlignVertical: 'center',
+                            }),
+                        },
+                        style,
+                    ]}
+                    className={cn('text-foreground outline-none', inputClassName)}
+                    placeholderTextColor={colors.mutedForeground}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    underlineColorAndroid="transparent"
+                />
+
+                {suffix && <View className="ml-3">{suffix}</View>}
+            </View>
+        );
+    }
+);
+
+Input.displayName = 'Input';

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

@@ -0,0 +1,123 @@
+// components/ui/radio-group.tsx
+import * as React from 'react';
+import { View } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from './text';
+import { Radio } from './radio';
+
+// Radio Group Variants
+const radioGroupVariants = cva(
+  '',
+  {
+    variants: {
+      orientation: {
+        vertical: 'gap-3',
+        horizontal: 'flex-row gap-4',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  }
+);
+
+interface RadioGroupProps extends VariantProps<typeof radioGroupVariants> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+interface RadioGroupItemProps {
+  value: string;
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+interface RadioGroupLabelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const RadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  size: 'sm' | 'md' | 'lg';
+} | 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,
+  orientation,
+  disabled = false,
+  size = 'md',
+}: RadioGroupProps) {
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange, disabled, size }}>
+      <View className={cn(radioGroupVariants({ orientation }), className)}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export function RadioGroupItem({
+  value,
+  id,
+  children,
+  className,
+  disabled: itemDisabled,
+}: RadioGroupItemProps) {
+  const { value: selectedValue, onValueChange, disabled: groupDisabled, size } = useRadioGroup();
+  const isSelected = selectedValue === value;
+  const isDisabled = groupDisabled || itemDisabled;
+
+  return (
+    <Radio
+      checked={isSelected}
+      onCheckedChange={() => !isDisabled && onValueChange?.(value)}
+      disabled={isDisabled}
+      size={size}
+      value={value}
+      className={className}
+    >
+      {children}
+    </Radio>
+  );
+}
+
+export function RadioGroupLabel({ children, className }: RadioGroupLabelProps) {
+  const { size } = useRadioGroup();
+
+  const textSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
+
+  return (
+    <Text variant="body" size={textSize} className={className}>
+      {children}
+    </Text>
+  );
+}
+
+export function RadioGroupDescription({ children, className }: RadioGroupLabelProps) {
+  return (
+    <Text variant="muted" size="sm" className={cn('mt-0.5', className)}>
+      {children}
+    </Text>
+  );
+}

package/src/components/ui/radio.tsx

@@ -0,0 +1,109 @@
+// components/ui/radio.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';
+
+// Radio Circle Variants
+const radioCircleVariants = cva(
+    'rounded-full 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: 'border-primary',
+                false: 'border-input',
+            },
+            disabled: {
+                true: 'opacity-50',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+            checked: false,
+            disabled: false,
+        },
+    }
+);
+
+// Radio Dot Variants
+const radioDotVariants = cva(
+    'rounded-full bg-primary',
+    {
+        variants: {
+            size: {
+                sm: 'h-1.5 w-1.5',
+                md: 'h-2.5 w-2.5',
+                lg: 'h-3 w-3',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }
+);
+
+// Radio Container Variants
+const radioContainerVariants = cva(
+    'flex-row items-center',
+    {
+        variants: {
+            size: {
+                sm: 'gap-2',
+                md: 'gap-3',
+                lg: 'gap-4',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }
+);
+
+interface RadioProps extends VariantProps<typeof radioCircleVariants> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    value?: string;
+}
+
+export function Radio({
+    checked = false,
+    onCheckedChange,
+    children,
+    className,
+    size = 'md',
+    disabled = false,
+    value,
+}: RadioProps) {
+    return (
+        <Pressable
+            onPress={() => !disabled && onCheckedChange?.(!checked)}
+            disabled={disabled}
+            className={cn(radioContainerVariants({ size }), className)}
+        >
+            {/* Radio Circle */}
+            <View
+                className={cn(
+                    radioCircleVariants({
+                        size,
+                        checked,
+                        disabled,
+                    })
+                )}
+            >
+                {checked && <View className={cn(radioDotVariants({ size }))} />}
+            </View>
+
+            {/* Label */}
+            {children}
+        </Pressable>
+    );
+}