syzygy-ui-rn 2.0.0

package/src/components/display/DividerLine.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+
+export interface DividerLineProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A hairline horizontal rule. */
+export const DividerLine: React.FC<DividerLineProps> = ({ style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+      style={[styles.line, { backgroundColor: colors.border }, style]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  line: {
+    height: StyleSheet.hairlineWidth,
+    width: '100%',
+  },
+});

package/src/components/display/LazyImageView.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Image, StyleProp, StyleSheet, Text, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { ShimmerView } from '../feedback/ShimmerView';
+
+export interface LazyImageViewProps {
+  uri: string | null | undefined;
+  style?: StyleProp<ViewStyle>;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+}
+
+/**
+ * Asynchronously loads a remote image using React Native's core `Image`
+ * component (which handles async loading and caching natively — no
+ * third-party image-loading dependency needed), showing a `ShimmerView`
+ * placeholder while loading and a fallback glyph if the load fails.
+ */
+export const LazyImageView: React.FC<LazyImageViewProps> = ({ uri, style, resizeMode = 'cover' }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>(uri ? 'loading' : 'error');
+
+  if (!uri || status === 'error') {
+    return (
+      <View
+        style={[styles.fallback, { backgroundColor: colors.surfaceAlt }, style]}
+        accessibilityLabel="Image failed to load"
+      >
+        <Text style={{ color: colors.textSecondary }}>{'🖼'}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={style}>
+      {status === 'loading' ? (
+        <ShimmerView style={StyleSheet.absoluteFill} />
+      ) : null}
+      <Image
+        source={{ uri }}
+        resizeMode={resizeMode}
+        onLoad={() => setStatus('loaded')}
+        onError={() => setStatus('error')}
+        accessibilityLabel="Image"
+        style={StyleSheet.absoluteFillObject}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/display/ListRow.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+export interface ListRowProps {
+  title: string;
+  subtitle?: string;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A styled, optionally-tappable row wrapper with a leading slot, title,
+ * subtitle, and a trailing accessory slot. */
+export const ListRow: React.FC<ListRowProps> = ({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  onPress,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  const content = (
+    <View
+      style={[styles.container, style]}
+      accessibilityLabel={subtitle ? `${title}, ${subtitle}` : title}
+    >
+      {leading}
+      <View style={styles.textContainer}>
+        <Text style={{ color: colors.textPrimary, fontSize: fontSizes.md }}>{title}</Text>
+        {subtitle ? (
+          <Text style={{ color: colors.textSecondary, fontSize: fontSizes.sm }}>{subtitle}</Text>
+        ) : null}
+      </View>
+      {trailing}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress} accessibilityRole="button">
+        {content}
+      </TouchableOpacity>
+    );
+  }
+  return content;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: spacing.sm,
+  },
+});

package/src/components/display/SectionHeader.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+export interface SectionHeaderProps {
+  title: string;
+  actionLabel?: string;
+  onActionPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A section title with an optional trailing text action (e.g. "See All"). */
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  actionLabel,
+  onActionPress,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View style={[styles.container, style]} accessibilityRole="header">
+      <Text style={{ color: colors.textPrimary, fontSize: fontSizes.lg, fontWeight: fontWeights.semibold }}>
+        {title}
+      </Text>
+      {actionLabel && onActionPress ? (
+        <TouchableOpacity onPress={onActionPress} accessibilityRole="button" accessibilityLabel={actionLabel}>
+          <Text style={{ color: colors.primary, fontSize: fontSizes.sm }}>{actionLabel}</Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 32,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+  },
+});

package/src/components/display/StarRatingView.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+
+export interface StarRatingViewProps {
+  rating: number;
+  maxRating?: number;
+  onRatingChanged?: (rating: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A star rating display. Pass `onRatingChanged` to make it interactively
+ * tappable; omit it for a read-only display.
+ */
+export const StarRatingView: React.FC<StarRatingViewProps> = ({
+  rating,
+  maxRating = 5,
+  onRatingChanged,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const stars = Array.from({ length: maxRating }, (_, i) => i + 1);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityLabel={`Rating: ${rating} out of ${maxRating} stars`}
+    >
+      {stars.map((star) => {
+        const filled = star <= rating;
+        const glyph = filled ? '★' : '☆';
+        const color = filled ? colors.warning : colors.textSecondary;
+
+        if (!onRatingChanged) {
+          return (
+            <Text key={star} style={{ color, fontSize: 20 }}>
+              {glyph}
+            </Text>
+          );
+        }
+        return (
+          <TouchableOpacity
+            key={star}
+            onPress={() => onRatingChanged(star)}
+            accessibilityRole="button"
+            accessibilityLabel={`${star} star${star === 1 ? '' : 's'}`}
+            style={styles.star}
+          >
+            <Text style={{ color, fontSize: 20 }}>{glyph}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  star: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/feedback/EmptyStateView.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  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 EmptyStateViewProps {
+  icon?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  ctaLabel?: string;
+  onCtaPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const EmptyStateView: React.FC<EmptyStateViewProps> = ({
+  icon,
+  title,
+  subtitle,
+  ctaLabel,
+  onCtaPress,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View style={[styles.container, style]} accessibilityRole="text">
+      {icon ? <View style={styles.icon}>{icon}</View> : null}
+      <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
+      {subtitle ? (
+        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
+          {subtitle}
+        </Text>
+      ) : null}
+      {ctaLabel && onCtaPress ? (
+        <TouchableOpacity
+          onPress={onCtaPress}
+          accessibilityRole="button"
+          accessibilityLabel={ctaLabel}
+          style={[styles.cta, { backgroundColor: colors.primary }]}
+        >
+          <Text style={[styles.ctaText, { color: colors.primaryText }]}>
+            {ctaLabel}
+          </Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.xl,
+  },
+  icon: {
+    marginBottom: spacing.md,
+  },
+  title: {
+    fontSize: fontSizes.lg,
+    fontWeight: fontWeights.semibold,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: fontSizes.sm,
+    textAlign: 'center',
+    marginTop: spacing.xs,
+  },
+  cta: {
+    minHeight: 44,
+    paddingHorizontal: spacing.lg,
+    justifyContent: 'center',
+    borderRadius: radius.md,
+    marginTop: spacing.md,
+  },
+  ctaText: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.semibold,
+    textAlign: 'center',
+  },
+});

package/src/components/feedback/ErrorStateView.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, 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 ErrorStateViewProps {
+  title: string;
+  subtitle?: string;
+  retryLabel?: string;
+  onRetryPress: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * An icon, title, subtitle, and retry action for error states. Mirrors
+ * `EmptyStateView`'s structure with a destructive-tinted icon and a
+ * mandatory retry action.
+ */
+export const ErrorStateView: React.FC<ErrorStateViewProps> = ({
+  title,
+  subtitle,
+  retryLabel = 'Retry',
+  onRetryPress,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View style={[styles.container, style]} accessibilityRole="text">
+      <Text style={{ fontSize: 40, color: colors.destructive }}>{'⚠'}</Text>
+      <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
+      {subtitle ? (
+        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{subtitle}</Text>
+      ) : null}
+      <TouchableOpacity
+        onPress={onRetryPress}
+        accessibilityRole="button"
+        accessibilityLabel={retryLabel}
+        style={[styles.cta, { backgroundColor: colors.primary }]}
+      >
+        <Text style={{ color: colors.primaryText, fontWeight: fontWeights.semibold }}>{retryLabel}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.xl,
+  },
+  title: {
+    fontSize: fontSizes.lg,
+    fontWeight: fontWeights.semibold,
+    textAlign: 'center',
+    marginTop: spacing.sm,
+  },
+  subtitle: {
+    fontSize: fontSizes.sm,
+    textAlign: 'center',
+    marginTop: spacing.xs,
+  },
+  cta: {
+    minHeight: 44,
+    paddingHorizontal: spacing.lg,
+    justifyContent: 'center',
+    borderRadius: radius.md,
+    marginTop: spacing.md,
+  },
+});

package/src/components/feedback/LoadingView.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleProp,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+export interface LoadingViewProps {
+  message?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const LoadingView: React.FC<LoadingViewProps> = ({
+  message,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? message ?? 'Loading'}
+    >
+      <ActivityIndicator size="large" color={colors.primary} />
+      {message ? (
+        <Text style={[styles.message, { color: colors.textSecondary }]}>
+          {message}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.lg,
+  },
+  message: {
+    marginTop: spacing.sm,
+    fontSize: fontSizes.sm,
+    textAlign: 'center',
+  },
+});

package/src/components/feedback/ProgressBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+
+export interface ProgressBarProps {
+  progress: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A determinate linear progress indicator. */
+export const ProgressBar: React.FC<ProgressBarProps> = ({ progress, style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const clamped = Math.min(1, Math.max(0, progress));
+
+  return (
+    <View
+      style={[styles.track, { backgroundColor: colors.border }, style]}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 1, now: clamped }}
+    >
+      <View style={[styles.fill, { width: `${clamped * 100}%`, backgroundColor: colors.primary }]} />
+    </View>
+  );
+};
+
+const HEIGHT = 8;
+
+const styles = StyleSheet.create({
+  track: {
+    height: HEIGHT,
+    borderRadius: radius.full,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  fill: {
+    height: HEIGHT,
+    borderRadius: radius.full,
+  },
+});

package/src/components/feedback/PullToRefresh.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { RefreshControl, ScrollView, StyleProp, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+
+export interface PullToRefreshProps {
+  refreshing: boolean;
+  onRefresh: () => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A scrollable container with native pull-to-refresh wired to a refresh handler. */
+export const PullToRefresh: React.FC<PullToRefreshProps> = ({
+  refreshing,
+  onRefresh,
+  children,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <ScrollView
+      style={style}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={colors.primary}
+          colors={[colors.primary]}
+        />
+      }
+    >
+      {children}
+    </ScrollView>
+  );
+};

package/src/components/feedback/ShimmerView.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleProp, StyleSheet, ViewStyle, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+
+export interface ShimmerViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+/** An animated skeleton placeholder for list/table rows while content loads. */
+export const ShimmerView: React.FC<ShimmerViewProps> = ({ style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const opacity = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.7, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.3, duration: 700, useNativeDriver: true }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+      style={[
+        styles.base,
+        { backgroundColor: colors.surfaceAlt, opacity },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    height: 16,
+    borderRadius: radius.sm,
+    width: '100%',
+  },
+});