panelui-native 0.1.0

package/src/components/alert/index.tsx

@@ -0,0 +1,106 @@
+import { createContext, forwardRef, useContext, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { cn } from '../../utils/cn';
+import { Text, type TextProps } from '../../primitives/text';
+
+const alertVariants = tv({
+  slots: {
+    root: 'w-full gap-1 rounded-xl border p-4',
+    title: 'font-semibold',
+    description: 'text-sm',
+  },
+  variants: {
+    variant: {
+      default: {
+        root: 'border-border bg-card',
+        title: 'text-foreground',
+        description: 'text-muted-foreground',
+      },
+      info: {
+        root: 'border-info/32 bg-info/4',
+        title: 'text-foreground',
+        description: 'text-muted-foreground',
+      },
+      success: {
+        root: 'border-success/32 bg-success/4',
+        title: 'text-foreground',
+        description: 'text-muted-foreground',
+      },
+      warning: {
+        root: 'border-warning/32 bg-warning/4',
+        title: 'text-foreground',
+        description: 'text-muted-foreground',
+      },
+      destructive: {
+        root: 'border-destructive/32 bg-destructive/4',
+        title: 'text-foreground',
+        description: 'text-muted-foreground',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+
+const AlertContext = createContext<AlertVariant>('default');
+
+export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
+  className?: string;
+  /** Optional leading icon rendered before the content. */
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+const AlertRoot = forwardRef<View, AlertProps>(
+  ({ className, variant = 'default', icon, children, ...props }, ref) => {
+    const { root } = alertVariants({ variant });
+
+    return (
+      <AlertContext.Provider value={variant}>
+        <View
+          ref={ref}
+          accessibilityRole="alert"
+          className={root({ className })}
+          {...props}
+        >
+          {icon ? (
+            <View className="flex-row items-start gap-3">
+              <View className="mt-0.5">{icon}</View>
+              <View className="flex-1 gap-1">{children}</View>
+            </View>
+          ) : (
+            children
+          )}
+        </View>
+      </AlertContext.Provider>
+    );
+  }
+);
+AlertRoot.displayName = 'Alert';
+
+const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { title } = alertVariants({ variant });
+    return <Text ref={ref} className={cn(title(), className)} {...props} />;
+  }
+);
+AlertTitle.displayName = 'Alert.Title';
+
+const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { description } = alertVariants({ variant });
+    return <Text ref={ref} className={cn(description(), className)} {...props} />;
+  }
+);
+AlertDescription.displayName = 'Alert.Description';
+
+export const Alert = Object.assign(AlertRoot, {
+  Title: AlertTitle,
+  Description: AlertDescription,
+});

package/src/components/avatar/index.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useState } from 'react';
+import {
+  Image,
+  View,
+  type ImageProps,
+  type ImageSourcePropType,
+  type ViewProps,
+} from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { Text } from '../../primitives/text';
+
+const avatarVariants = tv({
+  slots: {
+    root: 'items-center justify-center overflow-hidden rounded-full border border-border bg-muted',
+    image: 'h-full w-full',
+    fallback: 'font-medium text-muted-foreground',
+  },
+  variants: {
+    size: {
+      sm: { root: 'h-8 w-8', fallback: 'text-xs' },
+      md: { root: 'h-10 w-10', fallback: 'text-sm' },
+      lg: { root: 'h-14 w-14', fallback: 'text-lg' },
+      xl: { root: 'h-20 w-20', fallback: 'text-2xl' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVariants> {
+  className?: string;
+  /** Image source; falls back to initials when missing or on load error. */
+  source?: ImageSourcePropType;
+  /** Fallback text, e.g. initials ("KA"). */
+  fallback?: string;
+  imageProps?: Omit<ImageProps, 'source'>;
+}
+
+export const Avatar = forwardRef<View, AvatarProps>(
+  ({ className, size, source, fallback, imageProps, ...props }, ref) => {
+    const [errored, setErrored] = useState(false);
+    const { root, image, fallback: fallbackSlot } = avatarVariants({ size });
+    const showImage = !!source && !errored;
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="image"
+        className={root({ className })}
+        {...props}
+      >
+        {showImage ? (
+          <Image
+            source={source}
+            onError={() => setErrored(true)}
+            className={image()}
+            {...imageProps}
+          />
+        ) : (
+          <Text className={fallbackSlot()}>{fallback ?? '?'}</Text>
+        )}
+      </View>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/src/components/badge/index.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { Text } from '../../primitives/text';
+
+const badgeVariants = tv({
+  slots: {
+    root: 'flex-row items-center justify-center gap-1 self-start rounded-sm border border-transparent px-2 py-0.5',
+    label: 'text-xs font-medium',
+  },
+  variants: {
+    variant: {
+      default: { root: 'bg-primary', label: 'text-primary-foreground' },
+      secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
+      outline: { root: 'border-border bg-transparent', label: 'text-foreground' },
+      destructive: { root: 'bg-destructive', label: 'text-white' },
+      success: { root: 'bg-success/8 dark:bg-success/16', label: 'text-success-foreground' },
+      warning: { root: 'bg-warning/8 dark:bg-warning/16', label: 'text-warning-foreground' },
+      info: { root: 'bg-info/8 dark:bg-info/16', label: 'text-info-foreground' },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface BadgeProps
+  extends ViewProps,
+    VariantProps<typeof badgeVariants> {
+  children?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const Badge = forwardRef<View, BadgeProps>(
+  ({ children, className, labelClassName, variant, ...props }, ref) => {
+    const { root, label } = badgeVariants({ variant });
+
+    return (
+      <View ref={ref} className={root({ className })} {...props}>
+        {typeof children === 'string' ? (
+          <Text className={label({ className: labelClassName })}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/src/components/bottom-sheet/index.tsx

@@ -0,0 +1,186 @@
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Pressable, useWindowDimensions, View, type ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInDown,
+  SlideOutDown,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal } from '../../primitives/portal';
+import { cn } from '../../utils/cn';
+
+const SPRING = { damping: 22, stiffness: 280, mass: 0.7 } as const;
+const DISMISS_DISTANCE = 120;
+const DISMISS_VELOCITY = 800;
+
+interface BottomSheetContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);
+
+function useBottomSheet(component: string): BottomSheetContextValue {
+  const context = useContext(BottomSheetContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <BottomSheet>`);
+  }
+  return context;
+}
+
+export interface BottomSheetProps {
+  children: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+}
+
+function BottomSheetRoot({
+  children,
+  open,
+  onOpenChange,
+  defaultOpen = false,
+}: BottomSheetProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const resolvedOpen = isControlled ? open : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  const context = useMemo(
+    () => ({ open: resolvedOpen, setOpen }),
+    [resolvedOpen, setOpen]
+  );
+
+  return (
+    <BottomSheetContext.Provider value={context}>
+      {children}
+    </BottomSheetContext.Provider>
+  );
+}
+
+interface BottomSheetTriggerProps {
+  children: ReactElement<{ onPress?: (...args: unknown[]) => void }>;
+}
+
+function BottomSheetTrigger({ children }: BottomSheetTriggerProps) {
+  const { setOpen } = useBottomSheet('BottomSheet.Trigger');
+  if (!isValidElement(children)) return children;
+
+  return cloneElement(children, {
+    onPress: (...args: unknown[]) => {
+      children.props.onPress?.(...args);
+      setOpen(true);
+    },
+  });
+}
+
+export interface BottomSheetContentProps extends ViewProps {
+  className?: string;
+  /** Tap on the backdrop closes the sheet. Default true. */
+  dismissible?: boolean;
+  children?: ReactNode;
+}
+
+function BottomSheetContent({
+  className,
+  dismissible = true,
+  children,
+  ...props
+}: BottomSheetContentProps) {
+  const { open, setOpen } = useBottomSheet('BottomSheet.Content');
+  const { height: screenHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const translateY = useSharedValue(0);
+
+  const close = useCallback(() => setOpen(false), [setOpen]);
+
+  const pan = Gesture.Pan()
+    .onChange((event) => {
+      // Rubber-band when dragging upward, follow the finger downward.
+      const next = translateY.value + event.changeY;
+      translateY.value = next > 0 ? next : next / 3;
+    })
+    .onEnd((event) => {
+      if (
+        translateY.value > DISMISS_DISTANCE ||
+        event.velocityY > DISMISS_VELOCITY
+      ) {
+        translateY.value = withTiming(screenHeight, { duration: 200 }, () => {
+          runOnJS(close)();
+        });
+      } else {
+        translateY.value = withSpring(0, SPRING);
+      }
+    });
+
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  if (!open) return null;
+
+  return (
+    <Portal>
+      <View className="absolute inset-0 justify-end">
+        <Animated.View
+          entering={FadeIn.duration(180)}
+          exiting={FadeOut.duration(180)}
+          className="absolute inset-0"
+        >
+          <Pressable
+            accessibilityLabel="Close sheet"
+            className="flex-1 bg-black/50"
+            onPress={dismissible ? close : undefined}
+          />
+        </Animated.View>
+        <GestureDetector gesture={pan}>
+          <Animated.View
+            entering={SlideInDown.springify().damping(22).stiffness(240).mass(0.8)}
+            exiting={SlideOutDown.duration(200)}
+            style={[sheetStyle, { paddingBottom: Math.max(insets.bottom, 16) }]}
+            accessibilityViewIsModal
+            className={cn(
+              'rounded-t-3xl border border-b-0 border-border bg-popover px-5 pt-2 shadow-lg',
+              className
+            )}
+            {...props}
+          >
+            <View className="mb-3 self-center">
+              <View className="h-1 w-10 rounded-full bg-muted-foreground/30" />
+            </View>
+            {children}
+          </Animated.View>
+        </GestureDetector>
+      </View>
+    </Portal>
+  );
+}
+
+export const BottomSheet = Object.assign(BottomSheetRoot, {
+  Trigger: BottomSheetTrigger,
+  Content: BottomSheetContent,
+});

package/src/components/button/index.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, isValidElement, type ReactNode } from 'react';
+import type { View } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import {
+  AnimatedPressable,
+  type AnimatedPressableProps,
+} from '../../primitives/animated-pressable';
+import { Text } from '../../primitives/text';
+
+const buttonVariants = tv({
+  slots: {
+    root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
+    label: 'font-medium',
+  },
+  variants: {
+    variant: {
+      primary: {
+        root: 'border-primary bg-primary shadow-sm',
+        label: 'text-primary-foreground',
+      },
+      secondary: {
+        root: 'bg-secondary',
+        label: 'text-secondary-foreground',
+      },
+      outline: {
+        root: 'border-input bg-popover shadow-sm',
+        label: 'text-foreground',
+      },
+      ghost: {
+        root: 'bg-transparent',
+        label: 'text-foreground',
+      },
+      destructive: {
+        root: 'border-destructive bg-destructive shadow-sm',
+        label: 'text-white',
+      },
+    },
+    size: {
+      sm: { root: 'h-9 gap-1.5 px-2.5', label: 'text-sm' },
+      md: { root: 'h-11 px-4', label: 'text-base' },
+      lg: { root: 'h-12 px-6', label: 'text-lg' },
+      icon: { root: 'h-11 w-11 px-0' },
+    },
+    disabled: {
+      true: { root: 'opacity-[0.64]' },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+});
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps
+  extends Omit<AnimatedPressableProps, 'children' | 'disabled'>,
+    Omit<ButtonVariantProps, 'disabled'> {
+  children?: ReactNode;
+  disabled?: boolean;
+  /** Extra classes for the label when children is a string. */
+  labelClassName?: string;
+}
+
+export const Button = forwardRef<View, ButtonProps>(
+  (
+    { children, className, labelClassName, variant, size, disabled, ...props },
+    ref
+  ) => {
+    const { root, label } = buttonVariants({ variant, size, disabled: !!disabled });
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled }}
+        disabled={disabled}
+        className={root({ className })}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={label({ className: labelClassName })}>{children}</Text>
+        ) : isValidElement(children) ? (
+          children
+        ) : (
+          children
+        )}
+      </AnimatedPressable>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/card/index.tsx

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../utils/cn';
+import { Text, type TextProps } from '../../primitives/text';
+
+export interface CardProps extends ViewProps {
+  className?: string;
+}
+
+const CardRoot = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn('rounded-xl border border-border bg-card shadow-sm', className)}
+    {...props}
+  />
+));
+CardRoot.displayName = 'Card';
+
+const CardHeader = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('gap-1.5 p-4', className)} {...props} />
+));
+CardHeader.displayName = 'Card.Header';
+
+const CardTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      size="lg"
+      weight="semibold"
+      className={cn('text-card-foreground', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'Card.Title';
+
+const CardDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} size="sm" muted className={className} {...props} />
+  )
+);
+CardDescription.displayName = 'Card.Description';
+
+const CardContent = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'Card.Content';
+
+const CardFooter = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn('flex-row items-center gap-2 p-4 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'Card.Footer';
+
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter,
+});

package/src/components/checkbox/index.tsx

@@ -0,0 +1,79 @@
+import { forwardRef, useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+
+const checkboxVariants = tv({
+  slots: {
+    row: 'flex-row items-center gap-2.5',
+    box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
+    fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
+    label: 'text-sm text-foreground',
+  },
+  variants: {
+    disabled: {
+      true: { row: 'opacity-50' },
+    },
+  },
+});
+
+export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
+  className?: string;
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Optional label rendered next to the box; pressing it also toggles. */
+  label?: string;
+}
+
+export const Checkbox = forwardRef<View, CheckboxProps>(
+  ({ className, checked, onCheckedChange, disabled, label }, ref) => {
+    const progress = useSharedValue(checked ? 1 : 0);
+    const slots = checkboxVariants({ disabled: !!disabled });
+    const checkColor = useCSSVariable('--primary-foreground');
+
+    useEffect(() => {
+      progress.value = checked
+        ? withSpring(1, { damping: 15, stiffness: 300, mass: 0.5 })
+        : withTiming(0, { duration: 120 });
+    }, [checked, progress]);
+
+    const fillStyle = useAnimatedStyle(() => ({
+      opacity: progress.value,
+      transform: [{ scale: 0.6 + progress.value * 0.4 }],
+    }));
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked, disabled: !!disabled }}
+        accessibilityLabel={label}
+        disabled={disabled}
+        onPress={() => onCheckedChange?.(!checked)}
+        hitSlop={8}
+        className={slots.row({ className })}
+      >
+        <View className={slots.box()}>
+          <Animated.View style={fillStyle} className={slots.fill()}>
+            <CheckIcon
+              size={12}
+              color={typeof checkColor === 'string' ? checkColor : '#fff'}
+            />
+          </Animated.View>
+        </View>
+        {label ? <Text className={slots.label()}>{label}</Text> : null}
+      </Pressable>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';