syzygy-ui-rn 2.0.0

package/src/components/overlay/CollapsibleView.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+  ViewStyle,
+  useColorScheme,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export interface CollapsibleViewProps {
+  title: string;
+  initiallyExpanded?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** An expandable/collapsible section (accordion) with a tappable header. */
+export const CollapsibleView: React.FC<CollapsibleViewProps> = ({
+  title,
+  initiallyExpanded = false,
+  children,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const [expanded, setExpanded] = useState(initiallyExpanded);
+
+  const toggle = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded((prev) => !prev);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.surface }, style]}>
+      <TouchableOpacity
+        onPress={toggle}
+        accessibilityRole="button"
+        accessibilityLabel={`${title}, ${expanded ? 'expanded' : 'collapsed'}`}
+        style={styles.header}
+      >
+        <Text style={{ color: colors.textPrimary, fontSize: fontSizes.lg, fontWeight: fontWeights.semibold }}>
+          {title}
+        </Text>
+        <Text style={{ color: colors.textSecondary }}>{expanded ? '⌃' : '⌄'}</Text>
+      </TouchableOpacity>
+      {expanded ? <View style={styles.content}>{children}</View> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  header: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+  },
+  content: {
+    paddingHorizontal: spacing.md,
+    paddingBottom: spacing.md,
+  },
+});

package/src/components/overlay/ModalDialog.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Modal, Pressable, StyleSheet, useColorScheme } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+
+export interface ModalDialogProps {
+  visible: boolean;
+  onDismiss: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * A centered dialog card over a dimmed scrim, wrapping React Native's core
+ * `Modal`. Named `ModalDialog` (not `Modal`) to avoid ambiguity with the
+ * `Modal` import from `react-native`.
+ */
+export const ModalDialog: React.FC<ModalDialogProps> = ({ visible, onDismiss, children }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onDismiss}>
+      <Pressable style={[styles.backdrop, { backgroundColor: colors.overlay }]} onPress={onDismiss}>
+        <Pressable style={[styles.card, { backgroundColor: colors.surface }]}>
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.lg,
+  },
+  card: {
+    borderRadius: radius.lg,
+    padding: spacing.lg,
+    width: '100%',
+    maxWidth: 400,
+  },
+});

package/src/index.ts

@@ -0,0 +1,54 @@
+export * from './tokens';
+
+export * from './components/buttons/PrimaryButton';
+export * from './components/buttons/SecondaryButton';
+export * from './components/buttons/DestructiveButton';
+export * from './components/buttons/GhostButton';
+export * from './components/buttons/IconButton';
+
+export * from './components/inputs/TextInput';
+export * from './components/inputs/SecureInput';
+export * from './components/inputs/SearchInput';
+export * from './components/inputs/ToggleSwitch';
+export * from './components/inputs/CheckboxInput';
+export * from './components/inputs/RadioButtonInput';
+export * from './components/inputs/SliderInput';
+export * from './components/inputs/Dropdown';
+export * from './components/inputs/SegmentedControl';
+export * from './components/inputs/QuantityStepper';
+
+export * from './components/feedback/LoadingView';
+export * from './components/feedback/EmptyStateView';
+export * from './components/feedback/ToastView';
+export * from './components/feedback/ShimmerView';
+export * from './components/feedback/ProgressBar';
+export * from './components/feedback/PullToRefresh';
+export * from './components/feedback/ErrorStateView';
+
+export * from './components/cards/CardView';
+
+export * from './components/badges/Badge';
+
+export * from './components/display/Avatar';
+export * from './components/display/DividerLine';
+export * from './components/display/Chip';
+export * from './components/display/ListRow';
+export * from './components/display/SectionHeader';
+export * from './components/display/LazyImageView';
+export * from './components/display/StarRatingView';
+export * from './components/display/CountBadge';
+
+export * from './components/overlay/ModalDialog';
+export * from './components/overlay/BottomSheet';
+export * from './components/overlay/CollapsibleView';
+
+export * from './components/navigation/BackButton';
+export * from './components/navigation/TabBarItem';
+export * from './components/navigation/TabBar';
+export * from './components/navigation/BottomNavigationBar';
+export * from './components/navigation/AppBar';
+export * from './components/navigation/PagerView';
+
+export * from './components/layout/KeyboardAvoidingScrollView';
+
+export * from './transitions/navigationTransitions';

package/src/tokens/colors.ts

@@ -0,0 +1,84 @@
+export type ColorScheme = 'light' | 'dark';
+
+export interface ColorPalette {
+  background: string;
+  surface: string;
+  surfaceAlt: string;
+  border: string;
+  textPrimary: string;
+  textSecondary: string;
+  textInverse: string;
+  primary: string;
+  primaryText: string;
+  secondary: string;
+  secondaryText: string;
+  destructive: string;
+  destructiveText: string;
+  success: string;
+  successText: string;
+  warning: string;
+  warningText: string;
+  error: string;
+  errorText: string;
+  disabled: string;
+  disabledText: string;
+  overlay: string;
+}
+
+export const lightColors: ColorPalette = {
+  background: '#FFFFFF',
+  surface: '#F5F5F7',
+  surfaceAlt: '#ECECEE',
+  border: '#D8D8DC',
+  textPrimary: '#1A1A1E',
+  textSecondary: '#6B6B72',
+  textInverse: '#FFFFFF',
+  primary: '#2F6FED',
+  primaryText: '#FFFFFF',
+  secondary: '#ECECEE',
+  secondaryText: '#1A1A1E',
+  destructive: '#E5484D',
+  destructiveText: '#FFFFFF',
+  success: '#1F9254',
+  successText: '#FFFFFF',
+  warning: '#B7791F',
+  warningText: '#FFFFFF',
+  error: '#E5484D',
+  errorText: '#FFFFFF',
+  disabled: '#D8D8DC',
+  disabledText: '#9A9AA1',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+export const darkColors: ColorPalette = {
+  background: '#101012',
+  surface: '#1C1C1F',
+  surfaceAlt: '#27272B',
+  border: '#3A3A3F',
+  textPrimary: '#F5F5F7',
+  textSecondary: '#A5A5AC',
+  textInverse: '#101012',
+  primary: '#5C8DF6',
+  primaryText: '#101012',
+  secondary: '#27272B',
+  secondaryText: '#F5F5F7',
+  destructive: '#F2555A',
+  destructiveText: '#101012',
+  success: '#3DD68C',
+  successText: '#101012',
+  warning: '#E3A008',
+  warningText: '#101012',
+  error: '#F2555A',
+  errorText: '#101012',
+  disabled: '#3A3A3F',
+  disabledText: '#6B6B72',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const colors: Record<ColorScheme, ColorPalette> = {
+  light: lightColors,
+  dark: darkColors,
+};
+
+export const getColors = (scheme: ColorScheme | 'unspecified' | null | undefined): ColorPalette =>
+  colors[scheme === 'dark' ? 'dark' : 'light'];

package/src/tokens/index.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './radius';

package/src/tokens/radius.ts

@@ -0,0 +1,8 @@
+export const radius = {
+  sm: 4,
+  md: 8,
+  lg: 16,
+  full: 9999,
+} as const;
+
+export type RadiusToken = keyof typeof radius;

package/src/tokens/spacing.ts

@@ -0,0 +1,10 @@
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+} as const;
+
+export type SpacingToken = keyof typeof spacing;

package/src/tokens/typography.ts

@@ -0,0 +1,27 @@
+export const fontSizes = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 22,
+  xxl: 28,
+} as const;
+
+export const fontWeights = {
+  regular: '400' as const,
+  medium: '500' as const,
+  semibold: '600' as const,
+  bold: '700' as const,
+};
+
+export const lineHeights = {
+  xs: 16,
+  sm: 20,
+  md: 22,
+  lg: 24,
+  xl: 28,
+  xxl: 34,
+} as const;
+
+export type FontSizeToken = keyof typeof fontSizes;
+export type LineHeightToken = keyof typeof lineHeights;

package/src/transitions/navigationTransitions.ts

@@ -0,0 +1,66 @@
+import { Animated } from 'react-native';
+
+/**
+ * Reusable `Animated`-driven transition helpers for common
+ * navigation/presentation motion. Each returns an interpolated style object
+ * to spread onto an `Animated.View`, driven by an `Animated.Value` that the
+ * caller animates from 0 to 1 with `Animated.timing`.
+ */
+
+export type HorizontalDirection = 'leftToRight' | 'rightToLeft';
+
+/** Slides content in/out horizontally as `progress` animates 0 -> 1. */
+export const slideTransition = (progress: Animated.Value, direction: HorizontalDirection, width: number) => {
+  const sign = direction === 'leftToRight' ? 1 : -1;
+  return {
+    opacity: progress,
+    transform: [
+      {
+        translateX: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [sign * width, 0],
+        }),
+      },
+    ],
+  };
+};
+
+/** A plain cross-fade as `progress` animates 0 -> 1. */
+export const crossFadeTransition = (progress: Animated.Value) => ({
+  opacity: progress,
+});
+
+export type VerticalDirection = 'topToBottom' | 'bottomToTop';
+
+/** Slides content in/out vertically as `progress` animates 0 -> 1. */
+export const slideVerticalTransition = (
+  progress: Animated.Value,
+  direction: VerticalDirection,
+  height: number
+) => {
+  const sign = direction === 'topToBottom' ? -1 : 1;
+  return {
+    opacity: progress,
+    transform: [
+      {
+        translateY: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [sign * height, 0],
+        }),
+      },
+    ],
+  };
+};
+
+/** A slide-up-and-fade transition suited to modal/sheet presentation. */
+export const modalPresentationTransition = (progress: Animated.Value, height: number) => ({
+  opacity: progress,
+  transform: [
+    {
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [height, 0],
+      }),
+    },
+  ],
+});