syzygy-ui-rn 2.0.0

package/src/components/inputs/SliderInput.tsx

@@ -0,0 +1,131 @@
+import React, { useRef, useState } from 'react';
+import {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  PanResponder,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+  useColorScheme,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+export interface SliderInputProps {
+  label: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A labeled slider with a live value readout. React Native's core `Slider`
+ * was removed in favor of a community package, so this is a lightweight
+ * `PanResponder`-based implementation with no third-party dependency.
+ */
+export const SliderInput: React.FC<SliderInputProps> = ({
+  label,
+  value,
+  onValueChange,
+  minimumValue = 0,
+  maximumValue = 1,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  const clamp = (v: number) => Math.min(maximumValue, Math.max(minimumValue, v));
+
+  const updateFromLocation = (locationX: number) => {
+    if (trackWidth <= 0) return;
+    const ratio = Math.min(1, Math.max(0, locationX / trackWidth));
+    const raw = minimumValue + ratio * (maximumValue - minimumValue);
+    onValueChange(clamp(raw));
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (evt: GestureResponderEvent) =>
+        updateFromLocation(evt.nativeEvent.locationX),
+      onPanResponderMove: (evt: GestureResponderEvent) =>
+        updateFromLocation(evt.nativeEvent.locationX),
+    })
+  ).current;
+
+  const ratio = (clamp(value) - minimumValue) / (maximumValue - minimumValue);
+
+  const onLayout = (e: LayoutChangeEvent) => setTrackWidth(e.nativeEvent.layout.width);
+
+  return (
+    <View style={style}>
+      <View style={styles.header}>
+        <Text style={{ color: colors.textPrimary, fontSize: fontSizes.sm }}>{label}</Text>
+        <Text style={{ color: colors.textSecondary, fontSize: fontSizes.sm }}>
+          {value.toFixed(2)}
+        </Text>
+      </View>
+      <View
+        onLayout={onLayout}
+        {...panResponder.panHandlers}
+        accessibilityRole="adjustable"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityValue={{ min: minimumValue, max: maximumValue, now: value }}
+        style={[styles.track, { backgroundColor: colors.border }]}
+      >
+        <View
+          style={[
+            styles.fill,
+            { width: `${ratio * 100}%`, backgroundColor: colors.primary },
+          ]}
+        />
+        <View
+          style={[
+            styles.thumb,
+            { left: `${ratio * 100}%`, backgroundColor: colors.primary },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const TRACK_HEIGHT = 4;
+const THUMB_SIZE = 20;
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: spacing.xs,
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    justifyContent: 'center',
+    marginVertical: (44 - TRACK_HEIGHT) / 2,
+  },
+  fill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    position: 'absolute',
+    left: 0,
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    marginLeft: -THUMB_SIZE / 2,
+  },
+});

package/src/components/inputs/TextInput.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  useColorScheme,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+export interface TextInputProps extends Omit<RNTextInputProps, 'style'> {
+  label: string;
+  error?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const TextInput: React.FC<TextInputProps> = ({
+  label,
+  error,
+  style,
+  accessibilityLabel,
+  maxLength,
+  value,
+  ...rest
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const hasError = Boolean(error);
+
+  return (
+    <View style={style}>
+      <Text style={[styles.label, { color: colors.textSecondary }]}>{label}</Text>
+      <RNTextInput
+        accessibilityLabel={accessibilityLabel ?? label}
+        placeholderTextColor={colors.textSecondary}
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.surface,
+            borderColor: hasError ? colors.error : colors.border,
+            color: colors.textPrimary,
+          },
+        ]}
+        maxLength={maxLength}
+        value={value}
+        {...rest}
+      />
+      {hasError ? (
+        <Text style={[styles.error, { color: colors.error }]}>{error}</Text>
+      ) : null}
+      {maxLength != null ? (
+        <Text style={[styles.counter, { color: colors.textSecondary }]}>
+          {`${(value ?? '').length}/${maxLength}`}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.medium,
+    marginBottom: spacing.xs,
+  },
+  input: {
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    fontSize: fontSizes.md,
+  },
+  error: {
+    fontSize: fontSizes.xs,
+    marginTop: spacing.xs,
+  },
+  counter: {
+    fontSize: fontSizes.xs,
+    marginTop: spacing.xs,
+    textAlign: 'right',
+  },
+});

package/src/components/inputs/ToggleSwitch.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Switch, Text, useColorScheme, View, ViewStyle } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+
+export interface ToggleSwitchProps {
+  label: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/** A labeled on/off toggle, wrapping React Native's core `Switch`. */
+export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  label,
+  value,
+  onValueChange,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      <Text style={{ color: colors.textPrimary }}>{label}</Text>
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        trackColor={{ false: colors.disabled, true: colors.primary }}
+        accessibilityLabel={accessibilityLabel ?? label}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing.xs,
+  },
+});

package/src/components/layout/KeyboardAvoidingScrollView.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+
+export interface KeyboardAvoidingScrollViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A scrollable container that automatically insets its content to avoid the
+ * on-screen keyboard, wrapping React Native's core `KeyboardAvoidingView`.
+ */
+export const KeyboardAvoidingScrollView: React.FC<KeyboardAvoidingScrollViewProps> = ({
+  children,
+  style,
+}) => {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.flex}
+    >
+      <ScrollView style={[styles.flex, style]} keyboardShouldPersistTaps="handled">
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});

package/src/components/navigation/AppBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+export interface AppBarProps {
+  title: string;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A top navigation bar with a centered title and optional leading/trailing accessories. */
+export const AppBar: React.FC<AppBarProps> = ({ title, leading, trailing, style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.surface, borderBottomColor: colors.border },
+        style,
+      ]}
+      accessibilityRole="header"
+    >
+      <View style={styles.side}>{leading}</View>
+      <Text style={{ color: colors.textPrimary, fontSize: fontSizes.lg, fontWeight: fontWeights.semibold }}>
+        {title}
+      </Text>
+      <View style={[styles.side, styles.trailing]}>{trailing}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.sm,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  side: {
+    minWidth: 44,
+  },
+  trailing: {
+    alignItems: 'flex-end',
+  },
+});

package/src/components/navigation/BackButton.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+export interface BackButtonProps {
+  onPress: () => void;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({
+  onPress,
+  label = 'Back',
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[styles.container, style]}
+    >
+      <Text style={[styles.arrow, { color: colors.primary }]}>{'‹'}</Text>
+      <Text style={[styles.label, { color: colors.primary }]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    minWidth: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.sm,
+    borderRadius: radius.sm,
+  },
+  arrow: {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.bold,
+    marginRight: spacing.xs,
+  },
+  label: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.medium,
+  },
+});

package/src/components/navigation/BottomNavigationBar.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+
+import { TabBarItem } from './TabBarItem';
+
+export interface BottomNavigationBarProps<T> {
+  items: TabBarItem<T>[];
+  selection: T;
+  onSelectionChange: (tag: T) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A floating, icon-only bottom navigation pill — a visual alternative to
+ * `TabBar` for screens that want a compact, inset navigation surface.
+ */
+export function BottomNavigationBar<T>({
+  items,
+  selection,
+  onSelectionChange,
+  style,
+}: BottomNavigationBarProps<T>) {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.surface }, style]}>
+      {items.map((item, index) => {
+        const selected = item.tag === selection;
+        return (
+          <TouchableOpacity
+            key={index}
+            onPress={() => onSelectionChange(item.tag)}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            accessibilityLabel={item.label}
+            style={[styles.item, selected ? { backgroundColor: colors.primary } : null]}
+          >
+            {item.icon}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+    borderRadius: radius.full,
+    padding: spacing.xs,
+  },
+  item: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/navigation/PagerView.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+export interface PagerViewProps {
+  onPageChange?: (page: number) => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Swipeable, paged content — e.g. onboarding screens or an image carousel.
+ * Distinct from `TabBar`, which is navigation chrome; this has no chrome of
+ * its own, just paged content via a horizontally-paging `ScrollView`.
+ */
+export const PagerView: React.FC<PagerViewProps> = ({ onPageChange, children, style }) => {
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (!onPageChange) return;
+    const { contentOffset, layoutMeasurement } = e.nativeEvent;
+    const page = Math.round(contentOffset.x / layoutMeasurement.width);
+    onPageChange(page);
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      pagingEnabled
+      showsHorizontalScrollIndicator={false}
+      onMomentumScrollEnd={handleScroll}
+      style={[styles.container, style]}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/navigation/TabBar.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+import { TabBarItem } from './TabBarItem';
+
+export interface TabBarProps<T> {
+  items: TabBarItem<T>[];
+  selection: T;
+  onSelectionChange: (tag: T) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * An edge-to-edge, icon-and-label tab bar. Presentational only — this
+ * library has no navigation dependency, so wire `onSelectionChange` into
+ * your own navigator.
+ */
+export function TabBar<T>({ items, selection, onSelectionChange, style }: TabBarProps<T>) {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.surface, borderTopColor: colors.border },
+        style,
+      ]}
+    >
+      {items.map((item, index) => {
+        const selected = item.tag === selection;
+        return (
+          <TouchableOpacity
+            key={index}
+            onPress={() => onSelectionChange(item.tag)}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            accessibilityLabel={item.label}
+            style={styles.item}
+          >
+            {item.icon}
+            <Text style={{ color: selected ? colors.primary : colors.textSecondary, fontSize: fontSizes.xs }}>
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingTop: spacing.xs,
+  },
+  item: {
+    flex: 1,
+    minHeight: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/navigation/TabBarItem.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/** A single destination shown in `TabBar` or `BottomNavigationBar`. */
+export interface TabBarItem<T> {
+  tag: T;
+  icon: React.ReactNode;
+  label: string;
+}

package/src/components/overlay/BottomSheet.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Dimensions, Modal, Pressable, StyleSheet, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+
+export interface BottomSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  children: React.ReactNode;
+}
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+/** A bottom-anchored sheet with a dimmed scrim, sliding up from the bottom edge. */
+export const BottomSheet: React.FC<BottomSheetProps> = ({ visible, onDismiss, children }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: visible ? 0 : SCREEN_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, translateY]);
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onDismiss}>
+      <Pressable style={[styles.backdrop, { backgroundColor: colors.overlay }]} onPress={onDismiss}>
+        <Animated.View
+          style={[
+            styles.sheet,
+            { backgroundColor: colors.surface, transform: [{ translateY }] },
+          ]}
+        >
+          <Pressable style={[styles.handle, { backgroundColor: colors.border }]} />
+          {children}
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: radius.lg,
+    borderTopRightRadius: radius.lg,
+    padding: spacing.lg,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    marginBottom: spacing.md,
+  },
+});