panelui-native 0.1.0

package/src/components/switch/index.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const SPRING = { damping: 18, stiffness: 250, mass: 0.5 } as const;
+
+const switchVariants = tv({
+  slots: {
+    track: 'justify-center rounded-full border border-transparent bg-input p-[3px]',
+    activeTrack: 'absolute inset-0 rounded-full bg-primary',
+    thumb: 'rounded-full bg-white shadow-sm',
+  },
+  variants: {
+    size: {
+      sm: { track: 'h-6 w-10', thumb: 'h-4 w-4' },
+      md: { track: 'h-7 w-12', thumb: 'h-5 w-5' },
+    },
+    disabled: {
+      true: { track: 'opacity-50' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const TRAVEL: Record<'sm' | 'md', number> = { sm: 16, md: 20 };
+
+export interface SwitchProps extends VariantProps<typeof switchVariants> {
+  className?: string;
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Animated switch. Thumb position and active-track opacity are driven on the
+ * UI thread; toggling never re-renders beyond the value change itself.
+ */
+export const Switch = forwardRef<View, SwitchProps>(
+  ({ className, value, onValueChange, disabled, size = 'md' }, ref) => {
+    const progress = useSharedValue(value ? 1 : 0);
+    const slots = switchVariants({ size, disabled: !!disabled });
+
+    useEffect(() => {
+      progress.value = withSpring(value ? 1 : 0, SPRING);
+    }, [value, progress]);
+
+    const thumbStyle = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: interpolate(progress.value, [0, 1], [0, TRAVEL[size]]) },
+      ],
+    }));
+
+    const activeTrackStyle = useAnimatedStyle(() => ({
+      opacity: progress.value,
+    }));
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: value, disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => onValueChange?.(!value)}
+        hitSlop={8}
+      >
+        <View className={slots.track({ className })}>
+          <Animated.View style={activeTrackStyle} className={slots.activeTrack()} />
+          <Animated.View style={thumbStyle} className={slots.thumb()} />
+        </View>
+      </Pressable>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

package/src/components/tabs/index.tsx

@@ -0,0 +1,208 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  FadeIn,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+
+const SPRING = { damping: 24, stiffness: 300, mass: 0.7 } as const;
+
+interface TabLayout {
+  x: number;
+  width: number;
+}
+
+interface TabsContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  registerLayout: (value: string, layout: TabLayout) => void;
+  layouts: Record<string, TabLayout>;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabs(component: string): TabsContextValue {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Tabs>`);
+  }
+  return context;
+}
+
+export interface TabsProps extends ViewProps {
+  className?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  defaultValue: string;
+  children: ReactNode;
+}
+
+function TabsRoot({
+  className,
+  value,
+  onValueChange,
+  defaultValue,
+  children,
+  ...props
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [layouts, setLayouts] = useState<Record<string, TabLayout>>({});
+  const isControlled = value !== undefined;
+  const resolvedValue = isControlled ? value : internalValue;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+
+  const registerLayout = useCallback((tab: string, layout: TabLayout) => {
+    setLayouts((current) => {
+      const existing = current[tab];
+      if (existing && existing.x === layout.x && existing.width === layout.width) {
+        return current;
+      }
+      return { ...current, [tab]: layout };
+    });
+  }, []);
+
+  const context = useMemo(
+    () => ({ value: resolvedValue, setValue, registerLayout, layouts }),
+    [resolvedValue, setValue, registerLayout, layouts]
+  );
+
+  return (
+    <TabsContext.Provider value={context}>
+      <View className={cn('gap-3', className)} {...props}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+}
+
+function TabsIndicator() {
+  const { value, layouts } = useTabs('Tabs.List');
+  const x = useSharedValue(0);
+  const width = useSharedValue(0);
+  const initialized = useSharedValue(0);
+
+  const layout = layouts[value];
+  if (layout) {
+    if (initialized.value === 0) {
+      x.value = layout.x;
+      width.value = layout.width;
+      initialized.value = 1;
+    } else {
+      x.value = withSpring(layout.x, SPRING);
+      width.value = withSpring(layout.width, SPRING);
+    }
+  }
+
+  const style = useAnimatedStyle(() => ({
+    opacity: initialized.value,
+    transform: [{ translateX: x.value }],
+    width: width.value,
+  }));
+
+  return (
+    <Animated.View
+      style={style}
+      className="absolute bottom-1 top-1 left-0 rounded-md bg-popover shadow-sm"
+    />
+  );
+}
+
+export interface TabsListProps extends ViewProps {
+  className?: string;
+  children: ReactNode;
+}
+
+function TabsList({ className, children, ...props }: TabsListProps) {
+  return (
+    <View
+      accessibilityRole="tablist"
+      className={cn('flex-row rounded-lg bg-muted p-1', className)}
+      {...props}
+    >
+      <TabsIndicator />
+      {children}
+    </View>
+  );
+}
+
+export interface TabsTriggerProps {
+  className?: string;
+  value: string;
+  children: ReactNode;
+}
+
+function TabsTrigger({ className, value, children }: TabsTriggerProps) {
+  const context = useTabs('Tabs.Trigger');
+  const active = context.value === value;
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { x, width } = event.nativeEvent.layout;
+      context.registerLayout(value, { x, width });
+    },
+    [context, value]
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      onPress={() => context.setValue(value)}
+      onLayout={handleLayout}
+      className={cn('flex-1 items-center justify-center rounded-md py-1.5', className)}
+    >
+      {typeof children === 'string' ? (
+        <Text
+          size="sm"
+          weight="medium"
+          className={active ? 'text-foreground' : 'text-muted-foreground'}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+export interface TabsContentProps extends ViewProps {
+  className?: string;
+  value: string;
+  children: ReactNode;
+}
+
+function TabsContent({ className, value, children, ...props }: TabsContentProps) {
+  const context = useTabs('Tabs.Content');
+  if (context.value !== value) return null;
+
+  return (
+    <Animated.View entering={FadeIn.duration(150)} className={className} {...props}>
+      {children}
+    </Animated.View>
+  );
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+});

package/src/icons/index.tsx

@@ -0,0 +1,48 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+export interface IconProps extends SvgProps {
+  size?: number;
+  color?: string;
+}
+
+export function CheckIcon({ size = 14, color = '#fff', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M20 6 9 17l-5-5"
+        stroke={color}
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function ChevronDownIcon({ size = 16, color = '#737373', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m6 9 6 6 6-6"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function XIcon({ size = 16, color = '#737373', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M18 6 6 18M6 6l12 12"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,54 @@
+// Providers
+export { PanelUIProvider, type PanelUIProviderProps } from './providers/panel-ui-provider';
+
+// Theme
+export { useTheme, type ThemeName } from './theme/use-theme';
+
+// Primitives
+export { Portal, PortalHost, PortalProvider } from './primitives/portal';
+export { Text, type TextProps } from './primitives/text';
+export {
+  AnimatedPressable,
+  type AnimatedPressableProps,
+} from './primitives/animated-pressable';
+
+// Components
+export { Alert, type AlertProps } from './components/alert';
+export { Avatar, type AvatarProps } from './components/avatar';
+export { Badge, type BadgeProps } from './components/badge';
+export {
+  BottomSheet,
+  type BottomSheetProps,
+  type BottomSheetContentProps,
+} from './components/bottom-sheet';
+export { Button, type ButtonProps } from './components/button';
+export {
+  Dialog,
+  type DialogProps,
+  type DialogContentProps,
+} from './components/dialog';
+export { Select, type SelectProps, type SelectItemProps } from './components/select';
+export {
+  Tabs,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+} from './components/tabs';
+export { Card, type CardProps } from './components/card';
+export { Checkbox, type CheckboxProps } from './components/checkbox';
+export { Input, type InputProps } from './components/input';
+export {
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioGroupItemProps,
+} from './components/radio-group';
+export { Skeleton, type SkeletonProps } from './components/skeleton';
+export { Spinner, type SpinnerProps } from './components/spinner';
+export { Switch, type SwitchProps } from './components/switch';
+
+// Icons
+export { CheckIcon, ChevronDownIcon, XIcon, type IconProps } from './icons';
+
+// Utils
+export { cn } from './utils/cn';

package/src/primitives/animated-pressable.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, useCallback } from 'react';
+import {
+  Pressable,
+  type GestureResponderEvent,
+  type PressableProps,
+  type View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AnimatedPressableBase = Animated.createAnimatedComponent(Pressable);
+
+const SPRING_CONFIG = { damping: 20, stiffness: 300, mass: 0.4 } as const;
+
+export interface AnimatedPressableProps extends PressableProps {
+  className?: string;
+  /** Scale applied while pressed. Set to 1 to disable. Default 0.97. */
+  pressScale?: number;
+  /** Opacity applied while pressed. Set to 1 to disable. Default 1. */
+  pressOpacity?: number;
+}
+
+/**
+ * Pressable with UI-thread press feedback (scale/opacity via Reanimated).
+ * The shared base for every interactive PanelUI component.
+ */
+export const AnimatedPressable = forwardRef<View, AnimatedPressableProps>(
+  (
+    { pressScale = 0.97, pressOpacity = 1, onPressIn, onPressOut, style, ...props },
+    ref
+  ) => {
+    const pressed = useSharedValue(0);
+
+    const handlePressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        pressed.value = withTiming(1, { duration: 80 });
+        onPressIn?.(event);
+      },
+      [onPressIn, pressed]
+    );
+
+    const handlePressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        pressed.value = withSpring(0, SPRING_CONFIG);
+        onPressOut?.(event);
+      },
+      [onPressOut, pressed]
+    );
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: 1 + pressed.value * (pressScale - 1) }],
+      opacity: 1 + pressed.value * (pressOpacity - 1),
+    }));
+
+    return (
+      <AnimatedPressableBase
+        ref={ref}
+        style={[animatedStyle, style as never]}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      />
+    );
+  }
+);
+
+AnimatedPressable.displayName = 'AnimatedPressable';

package/src/primitives/portal.tsx

@@ -0,0 +1,90 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
+
+type PortalMap = ReadonlyMap<string, ReactNode>;
+
+class PortalStore {
+  private portals = new Map<string, ReactNode>();
+  private snapshot: PortalMap = this.portals;
+  private listeners = new Set<() => void>();
+
+  mount = (key: string, node: ReactNode) => {
+    this.portals.set(key, node);
+    this.emit();
+  };
+
+  unmount = (key: string) => {
+    this.portals.delete(key);
+    this.emit();
+  };
+
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  getSnapshot = (): PortalMap => this.snapshot;
+
+  private emit() {
+    this.snapshot = new Map(this.portals);
+    this.listeners.forEach((listener) => listener());
+  }
+}
+
+const PortalContext = createContext<PortalStore | null>(null);
+
+export function PortalProvider({ children }: { children: ReactNode }) {
+  const storeRef = useRef<PortalStore | null>(null);
+  storeRef.current ??= new PortalStore();
+  return (
+    <PortalContext.Provider value={storeRef.current}>
+      {children}
+    </PortalContext.Provider>
+  );
+}
+
+function usePortalStore(component: string): PortalStore {
+  const store = useContext(PortalContext);
+  if (!store) {
+    throw new Error(`${component} must be used within a <PanelUIProvider>`);
+  }
+  return store;
+}
+
+/** Renders children into the nearest PortalHost (above everything else). */
+export function Portal({ children }: { children: ReactNode }) {
+  const store = usePortalStore('Portal');
+  const key = useId();
+
+  useEffect(() => {
+    store.mount(key, children);
+    return () => store.unmount(key);
+  }, [store, key, children]);
+
+  return null;
+}
+
+/** Mount point for portaled content. PanelUIProvider renders one automatically. */
+export function PortalHost() {
+  const store = usePortalStore('PortalHost');
+  const portals = useSyncExternalStore(store.subscribe, store.getSnapshot);
+
+  return (
+    <>
+      {Array.from(portals.entries(), ([key, node]) => (
+        <PortalFragment key={key}>{node}</PortalFragment>
+      ))}
+    </>
+  );
+}
+
+function PortalFragment({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/primitives/text.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from 'react';
+import { Text as RNText, type Text as RNTextType, type TextProps as RNTextProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const textVariants = tv({
+  base: 'text-foreground',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    muted: {
+      true: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    weight: 'normal',
+  },
+});
+
+export interface TextProps extends RNTextProps, VariantProps<typeof textVariants> {
+  className?: string;
+}
+
+export const Text = forwardRef<RNTextType, TextProps>(
+  ({ className, size, weight, muted, ...props }, ref) => (
+    <RNText
+      ref={ref}
+      className={textVariants({ size, weight, muted, className })}
+      {...props}
+    />
+  )
+);
+
+Text.displayName = 'Text';

package/src/providers/panel-ui-provider.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { PortalHost, PortalProvider } from '../primitives/portal';
+
+export interface PanelUIProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Root provider for PanelUI. Wraps the app with the gesture handler root and
+ * the portal host used by overlay components (Dialog, BottomSheet, Select).
+ *
+ * Theme switching is handled natively by Uniwind — use `Uniwind.setTheme()`
+ * or the `useTheme()` hook exported from panelui-native.
+ */
+export function PanelUIProvider({ children }: PanelUIProviderProps) {
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <PortalProvider>
+        {children}
+        <PortalHost />
+      </PortalProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});

package/src/theme/use-theme.ts

@@ -0,0 +1,18 @@
+import { Uniwind, useUniwind } from 'uniwind';
+
+export type ThemeName = 'light' | 'dark' | 'system';
+
+/**
+ * Reactive access to the current Uniwind theme plus a setter.
+ * Theme changes are applied natively by Uniwind without re-rendering the tree.
+ */
+export function useTheme() {
+  const { theme } = useUniwind();
+
+  return {
+    /** Currently resolved theme ('light' or 'dark'). */
+    theme,
+    /** Switch theme: 'light', 'dark', or 'system' (follows device). */
+    setTheme: (name: ThemeName) => Uniwind.setTheme(name),
+  };
+}

package/src/uniwind-env.d.ts

@@ -0,0 +1 @@
+import 'uniwind/types';

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}