panelui-native 0.1.0

package/src/components/dialog/index.tsx

@@ -0,0 +1,180 @@
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type ViewProps } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
+import { Portal } from '../../primitives/portal';
+import { Text, type TextProps } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+
+interface DialogContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+function useDialog(component: string): DialogContextValue {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Dialog>`);
+  }
+  return context;
+}
+
+export interface DialogProps {
+  children: ReactNode;
+  /** Controlled open state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Initial state when uncontrolled. */
+  defaultOpen?: boolean;
+}
+
+function DialogRoot({ children, open, onOpenChange, defaultOpen = false }: DialogProps) {
+  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 <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;
+}
+
+interface DialogTriggerProps {
+  children: ReactElement<{ onPress?: (...args: unknown[]) => void }>;
+}
+
+/** Wraps its child and opens the dialog on press. */
+function DialogTrigger({ children }: DialogTriggerProps) {
+  const { setOpen } = useDialog('Dialog.Trigger');
+  if (!isValidElement(children)) return children;
+
+  return cloneElement(children, {
+    onPress: (...args: unknown[]) => {
+      children.props.onPress?.(...args);
+      setOpen(true);
+    },
+  });
+}
+
+export interface DialogContentProps extends ViewProps {
+  className?: string;
+  /** Tap on the backdrop closes the dialog. Default true. */
+  dismissible?: boolean;
+  children?: ReactNode;
+}
+
+function DialogContent({
+  className,
+  dismissible = true,
+  children,
+  ...props
+}: DialogContentProps) {
+  const { open, setOpen } = useDialog('Dialog.Content');
+
+  if (!open) return null;
+
+  return (
+    <Portal>
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        className="absolute inset-0 items-center justify-center p-6"
+      >
+        <Pressable
+          accessibilityLabel="Close dialog"
+          className="absolute inset-0 bg-black/50"
+          onPress={dismissible ? () => setOpen(false) : undefined}
+        />
+        <Animated.View
+          entering={ZoomIn.springify().damping(18).stiffness(250).mass(0.6)}
+          exiting={FadeOut.duration(120)}
+          accessibilityViewIsModal
+          className={cn(
+            'w-full max-w-sm gap-1.5 rounded-2xl border border-border bg-popover p-5 shadow-lg',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </Portal>
+  );
+}
+
+const DialogTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      size="lg"
+      weight="semibold"
+      className={cn('text-popover-foreground', className)}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = 'Dialog.Title';
+
+const DialogDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} size="sm" muted className={className} {...props} />
+  )
+);
+DialogDescription.displayName = 'Dialog.Description';
+
+function DialogFooter({ className, ...props }: ViewProps & { className?: string }) {
+  return (
+    <View
+      className={cn('mt-4 flex-row items-center justify-end gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+interface DialogCloseProps {
+  children: ReactElement<{ onPress?: (...args: unknown[]) => void }>;
+}
+
+/** Wraps its child and closes the dialog on press. */
+function DialogClose({ children }: DialogCloseProps) {
+  const { setOpen } = useDialog('Dialog.Close');
+  if (!isValidElement(children)) return children;
+
+  return cloneElement(children, {
+    onPress: (...args: unknown[]) => {
+      children.props.onPress?.(...args);
+      setOpen(false);
+    },
+  });
+}
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Close: DialogClose,
+});

package/src/components/input/index.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useCallback, useState } from 'react';
+import { TextInput, View, type TextInputProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { Text } from '../../primitives/text';
+
+const inputVariants = tv({
+  slots: {
+    container: 'w-full gap-1.5',
+    field:
+      'h-11 w-full rounded-lg border border-input bg-background px-3 text-base text-foreground',
+    label: 'text-sm font-medium text-foreground',
+    description: 'text-sm text-muted-foreground',
+    error: 'text-sm text-destructive',
+  },
+  variants: {
+    focused: {
+      true: { field: 'border-ring' },
+    },
+    invalid: {
+      true: { field: 'border-destructive/40' },
+    },
+    disabled: {
+      true: { field: 'opacity-[0.64]' },
+    },
+  },
+});
+
+export interface InputProps extends TextInputProps {
+  className?: string;
+  containerClassName?: string;
+  label?: string;
+  description?: string;
+  /** Error message. When set, the field renders in its invalid state. */
+  errorMessage?: string;
+  disabled?: boolean;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      className,
+      containerClassName,
+      label,
+      description,
+      errorMessage,
+      disabled,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const [focused, setFocused] = useState(false);
+    const placeholderColor = useCSSVariable('--muted-foreground');
+    const slots = inputVariants({
+      focused,
+      invalid: !!errorMessage,
+      disabled: !!disabled,
+    });
+
+    const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
+      (event) => {
+        setFocused(true);
+        onFocus?.(event);
+      },
+      [onFocus]
+    );
+
+    const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(
+      (event) => {
+        setFocused(false);
+        onBlur?.(event);
+      },
+      [onBlur]
+    );
+
+    return (
+      <View className={slots.container({ className: containerClassName })}>
+        {label ? <Text className={slots.label()}>{label}</Text> : null}
+        <TextInput
+          ref={ref}
+          editable={!disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          accessibilityLabel={label}
+          accessibilityState={{ disabled: !!disabled }}
+          className={slots.field({ className })}
+          placeholderTextColor={
+            typeof placeholderColor === 'string' ? placeholderColor : undefined
+          }
+          {...props}
+        />
+        {errorMessage ? (
+          <Text className={slots.error()}>{errorMessage}</Text>
+        ) : description ? (
+          <Text className={slots.description()}>{description}</Text>
+        ) : null}
+      </View>
+    );
+  }
+);
+
+Input.displayName = 'Input';

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

@@ -0,0 +1,118 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../../utils/cn';
+import { Text } from '../../primitives/text';
+
+interface RadioGroupContextValue {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export interface RadioGroupProps extends ViewProps {
+  className?: string;
+  value?: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
+  ({ className, value, onValueChange, disabled, children, ...props }, ref) => {
+    const context = useMemo(
+      () => ({ value, onValueChange, disabled }),
+      [value, onValueChange, disabled]
+    );
+
+    return (
+      <RadioGroupContext.Provider value={context}>
+        <View
+          ref={ref}
+          accessibilityRole="radiogroup"
+          className={cn('gap-3', className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+RadioGroupRoot.displayName = 'RadioGroup';
+
+export interface RadioGroupItemProps {
+  className?: string;
+  value: string;
+  label?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
+  ({ className, value, label, disabled: itemDisabled, children }, ref) => {
+    const context = useContext(RadioGroupContext);
+    if (!context) {
+      throw new Error('RadioGroup.Item must be used within a <RadioGroup>');
+    }
+
+    const selected = context.value === value;
+    const disabled = itemDisabled || context.disabled;
+    const progress = useSharedValue(selected ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = selected
+        ? withSpring(1, { damping: 15, stiffness: 300, mass: 0.5 })
+        : withTiming(0, { duration: 120 });
+    }, [selected, progress]);
+
+    const dotStyle = useAnimatedStyle(() => ({
+      opacity: progress.value,
+      transform: [{ scale: progress.value }],
+    }));
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="radio"
+        accessibilityState={{ selected, disabled: !!disabled }}
+        accessibilityLabel={label}
+        disabled={disabled}
+        onPress={() => context.onValueChange(value)}
+        hitSlop={8}
+        className={cn(
+          'flex-row items-center gap-2.5',
+          disabled && 'opacity-50',
+          className
+        )}
+      >
+        <View className="h-5 w-5 items-center justify-center rounded-full border border-input bg-background">
+          <Animated.View
+            style={dotStyle}
+            className="h-2.5 w-2.5 rounded-full bg-primary"
+          />
+        </View>
+        {label ? <Text className="text-sm text-foreground">{label}</Text> : children}
+      </Pressable>
+    );
+  }
+);
+RadioGroupItem.displayName = 'RadioGroup.Item';
+
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupItem,
+});

package/src/components/select/index.tsx

@@ -0,0 +1,165 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon, ChevronDownIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+import { BottomSheet } from '../bottom-sheet';
+
+const selectVariants = tv({
+  slots: {
+    trigger:
+      'h-11 w-full flex-row items-center justify-between rounded-lg border border-input bg-background px-3',
+    triggerLabel: 'text-base text-foreground',
+    placeholder: 'text-base text-muted-foreground',
+    item: 'flex-row items-center justify-between rounded-lg px-3 py-3.5',
+    itemLabel: 'text-base text-foreground',
+  },
+  variants: {
+    selected: {
+      true: { item: 'bg-accent', itemLabel: 'font-medium' },
+    },
+    disabled: {
+      true: { trigger: 'opacity-50' },
+    },
+  },
+});
+
+interface SelectContextValue {
+  value: string | undefined;
+  onSelect: (value: string) => void;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+export interface SelectItemProps {
+  value: string;
+  label: string;
+}
+
+/** Declarative option. Rendered inside the picker sheet. */
+function SelectItem({ value, label }: SelectItemProps) {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select.Item must be used within a <Select>');
+  }
+
+  const selected = context.value === value;
+  const { item, itemLabel } = selectVariants({ selected });
+  const checkColor = useCSSVariable('--muted-foreground');
+
+  return (
+    <Pressable
+      accessibilityRole="menuitem"
+      accessibilityState={{ selected }}
+      onPress={() => context.onSelect(value)}
+      className={item()}
+    >
+      <Text className={itemLabel()}>{label}</Text>
+      {selected ? (
+        <CheckIcon
+          size={16}
+          color={typeof checkColor === 'string' ? checkColor : '#737373'}
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+
+export interface SelectProps {
+  className?: string;
+  value?: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  /** Sheet title shown above the options. */
+  title?: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+function SelectRoot({
+  className,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  title,
+  disabled,
+  children,
+}: SelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedLabel = useMemo(() => {
+    let label: string | undefined;
+    Children.forEach(children, (child) => {
+      if (
+        isValidElement<SelectItemProps>(child) &&
+        child.props.value === value
+      ) {
+        label = child.props.label;
+      }
+    });
+    return label;
+  }, [children, value]);
+
+  const context = useMemo<SelectContextValue>(
+    () => ({
+      value,
+      onSelect: (next) => {
+        onValueChange(next);
+        setOpen(false);
+      },
+    }),
+    [value, onValueChange]
+  );
+
+  const { trigger, triggerLabel, placeholder: placeholderSlot } = selectVariants({
+    disabled: !!disabled,
+  });
+  const chevronColor = useCSSVariable('--muted-foreground');
+
+  return (
+    <SelectContext.Provider value={context}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled, expanded: open }}
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        className={trigger({ className })}
+      >
+        {selectedLabel ? (
+          <Text className={triggerLabel()}>{selectedLabel}</Text>
+        ) : (
+          <Text className={placeholderSlot()}>{placeholder}</Text>
+        )}
+        <ChevronDownIcon
+          color={typeof chevronColor === 'string' ? chevronColor : '#737373'}
+        />
+      </Pressable>
+      <BottomSheet open={open} onOpenChange={setOpen}>
+        <BottomSheet.Content>
+          {title ? (
+            <Text size="lg" weight="semibold" className="mb-2 px-3">
+              {title}
+            </Text>
+          ) : null}
+          <ScrollView bounces={false} className="max-h-96">
+            <View className="gap-1 pb-2">{children}</View>
+          </ScrollView>
+        </BottomSheet.Content>
+      </BottomSheet>
+    </SelectContext.Provider>
+  );
+}
+
+export const Select = Object.assign(SelectRoot, {
+  Item: SelectItem,
+});

package/src/components/skeleton/index.tsx

@@ -0,0 +1,34 @@
+import { memo, useEffect } from 'react';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../../utils/cn';
+
+export interface SkeletonProps {
+  className?: string;
+}
+
+/** Pulsing placeholder. Opacity animation runs on the UI thread. */
+export const Skeleton = memo(function Skeleton({ className }: SkeletonProps) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(0.45, { duration: 700 }), -1, true);
+    return () => cancelAnimation(opacity);
+  }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className={cn('rounded-md bg-foreground/8', className)}
+    />
+  );
+});

package/src/components/spinner/index.tsx

@@ -0,0 +1,53 @@
+import { memo, useEffect } from 'react';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const spinnerVariants = tv({
+  base: 'rounded-full border-2 border-foreground/15 border-t-primary',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-6 w-6',
+      lg: 'h-8 w-8 border-[3px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
+  className?: string;
+}
+
+/** Rotating ring spinner. Animation runs entirely on the UI thread. */
+export const Spinner = memo(function Spinner({ className, size }: SpinnerProps) {
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 800, easing: Easing.linear }),
+      -1
+    );
+    return () => cancelAnimation(rotation);
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      accessibilityRole="progressbar"
+      style={animatedStyle}
+      className={spinnerVariants({ size, className })}
+    />
+  );
+});