syzygy-ui-rn 2.0.0

package/src/components/feedback/ToastView.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  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 type ToastVariant = 'success' | 'warning' | 'error';
+
+export interface ToastViewProps {
+  message: string;
+  variant?: ToastVariant;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const ToastView: React.FC<ToastViewProps> = ({
+  message,
+  variant = 'success',
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  const backgroundColor =
+    variant === 'success'
+      ? colors.success
+      : variant === 'warning'
+      ? colors.warning
+      : colors.error;
+
+  const textColor =
+    variant === 'success'
+      ? colors.successText
+      : variant === 'warning'
+      ? colors.warningText
+      : colors.errorText;
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor }, style]}
+      accessibilityRole="alert"
+      accessibilityLabel={accessibilityLabel ?? message}
+    >
+      <Text style={[styles.text, { color: textColor }]}>{message}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.medium,
+  },
+});

package/src/components/inputs/CheckboxInput.tsx

@@ -0,0 +1,73 @@
+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';
+
+export interface CheckboxInputProps {
+  label: string;
+  checked: boolean;
+  onValueChange: (checked: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/** A labeled checkbox. React Native has no core `Checkbox`, so this owns the name. */
+export const CheckboxInput: React.FC<CheckboxInputProps> = ({
+  label,
+  checked,
+  onValueChange,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <TouchableOpacity
+      onPress={() => onValueChange(!checked)}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[styles.container, style]}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: checked ? colors.primary : 'transparent',
+            borderColor: checked ? colors.primary : colors.border,
+          },
+        ]}
+      >
+        {checked ? <Text style={{ color: colors.primaryText }}>{'✓'}</Text> : null}
+      </View>
+      <Text style={{ color: colors.textPrimary, marginLeft: spacing.sm }}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/inputs/Dropdown.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  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 } from '../../tokens/typography';
+
+export interface DropdownProps<T> {
+  label: string;
+  selection: T;
+  options: T[];
+  onSelectionChange: (option: T) => void;
+  optionTitle: (option: T) => string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/** A labeled dropdown / picker, selecting from a fixed list of options. */
+export function Dropdown<T>({
+  label,
+  selection,
+  options,
+  onSelectionChange,
+  optionTitle,
+  style,
+  accessibilityLabel,
+}: DropdownProps<T>) {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={style}>
+      <Text style={[styles.label, { color: colors.textSecondary }]}>{label}</Text>
+      <TouchableOpacity
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        style={[styles.trigger, { backgroundColor: colors.surface, borderColor: colors.border }]}
+      >
+        <Text style={{ color: colors.textPrimary }}>{optionTitle(selection)}</Text>
+        <Text style={{ color: colors.textSecondary }}>{'⌄'}</Text>
+      </TouchableOpacity>
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+          <View style={[styles.sheet, { backgroundColor: colors.surface }]}>
+            <FlatList
+              data={options}
+              keyExtractor={(item, index) => `${optionTitle(item)}-${index}`}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  onPress={() => {
+                    onSelectionChange(item);
+                    setOpen(false);
+                  }}
+                  style={styles.option}
+                >
+                  <Text style={{ color: colors.textPrimary }}>{optionTitle(item)}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: fontSizes.sm,
+    marginBottom: spacing.xs,
+  },
+  trigger: {
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: radius.lg,
+    borderTopRightRadius: radius.lg,
+    maxHeight: '60%',
+  },
+  option: {
+    minHeight: 44,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.md,
+  },
+});

package/src/components/inputs/QuantityStepper.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle, useColorScheme } 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 QuantityStepperProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  step?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A +/- quantity control, bounded to [minimumValue, maximumValue]. */
+export const QuantityStepper: React.FC<QuantityStepperProps> = ({
+  value,
+  onValueChange,
+  minimumValue = 0,
+  maximumValue = 99,
+  step = 1,
+  style,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const atMin = value <= minimumValue;
+  const atMax = value >= maximumValue;
+
+  return (
+    <View
+      style={[styles.container, { borderColor: colors.border }, style]}
+      accessibilityLabel={`Quantity: ${value}`}
+    >
+      <TouchableOpacity
+        onPress={() => onValueChange(Math.max(minimumValue, value - step))}
+        disabled={atMin}
+        accessibilityRole="button"
+        accessibilityLabel="Decrease"
+        style={styles.button}
+      >
+        <Text style={{ color: atMin ? colors.disabledText : colors.primary, fontWeight: fontWeights.bold }}>
+          {'−'}
+        </Text>
+      </TouchableOpacity>
+      <Text style={{ color: colors.textPrimary, fontSize: fontSizes.md, minWidth: 24, textAlign: 'center' }}>
+        {value}
+      </Text>
+      <TouchableOpacity
+        onPress={() => onValueChange(Math.min(maximumValue, value + step))}
+        disabled={atMax}
+        accessibilityRole="button"
+        accessibilityLabel="Increase"
+        style={styles.button}
+      >
+        <Text style={{ color: atMax ? colors.disabledText : colors.primary, fontWeight: fontWeights.bold }}>
+          {'+'}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: radius.md,
+    alignSelf: 'flex-start',
+  },
+  button: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xs,
+  },
+});

package/src/components/inputs/RadioButtonInput.tsx

@@ -0,0 +1,73 @@
+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';
+
+export interface RadioButtonInputProps {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A single labeled radio option. Compose several with shared parent state to
+ * build a radio group. React Native has no core `RadioButton`, so this owns
+ * the name.
+ */
+export const RadioButtonInput: React.FC<RadioButtonInputProps> = ({
+  label,
+  selected,
+  onPress,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[styles.container, style]}
+    >
+      <View style={[styles.outer, { borderColor: selected ? colors.primary : colors.border }]}>
+        {selected ? <View style={[styles.inner, { backgroundColor: colors.primary }]} /> : null}
+      </View>
+      <Text style={{ color: colors.textPrimary, marginLeft: spacing.sm }}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  outer: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+});

package/src/components/inputs/SearchInput.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput as RNTextInput,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+export interface SearchInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+  onSearchTextChanged?: (text: string) => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A search field with a leading icon, trailing clear button, and built-in
+ * debounce. Named `SearchInput` to match this library's `*Input` naming
+ * convention (see `TextInput`/`SecureInput`).
+ */
+export const SearchInput: React.FC<SearchInputProps> = ({
+  value,
+  onChangeText,
+  placeholder = 'Search',
+  debounceMs = 300,
+  onSearchTextChanged,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    if (!onSearchTextChanged) return;
+    if (timer.current !== undefined) clearTimeout(timer.current);
+    timer.current = setTimeout(() => onSearchTextChanged(value), debounceMs);
+    return () => {
+      if (timer.current !== undefined) clearTimeout(timer.current);
+    };
+  }, [value, debounceMs, onSearchTextChanged]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        style,
+      ]}
+    >
+      <Text style={{ color: colors.textSecondary }}>{'\u{1F50D}'}</Text>
+      <RNTextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textSecondary}
+        accessibilityLabel={accessibilityLabel ?? placeholder}
+        style={[styles.input, { color: colors.textPrimary }]}
+      />
+      {value.length > 0 ? (
+        <TouchableOpacity
+          onPress={() => onChangeText('')}
+          accessibilityRole="button"
+          accessibilityLabel="Clear search"
+          style={styles.clear}
+        >
+          <Text style={{ color: colors.textSecondary }}>{'✕'}</Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.sm,
+  },
+  input: {
+    flex: 1,
+    fontSize: fontSizes.md,
+    minHeight: 44,
+    marginLeft: spacing.xs,
+  },
+  clear: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/inputs/SecureInput.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  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 SecureInputProps
+  extends Omit<RNTextInputProps, 'style' | 'secureTextEntry'> {
+  label: string;
+  error?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const SecureInput: React.FC<SecureInputProps> = ({
+  label,
+  error,
+  style,
+  accessibilityLabel,
+  ...rest
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const [visible, setVisible] = useState(false);
+  const hasError = Boolean(error);
+
+  return (
+    <View style={style}>
+      <Text style={[styles.label, { color: colors.textSecondary }]}>{label}</Text>
+      <View
+        style={[
+          styles.inputRow,
+          {
+            backgroundColor: colors.surface,
+            borderColor: hasError ? colors.error : colors.border,
+          },
+        ]}
+      >
+        <RNTextInput
+          accessibilityLabel={accessibilityLabel ?? label}
+          placeholderTextColor={colors.textSecondary}
+          secureTextEntry={!visible}
+          style={[styles.input, { color: colors.textPrimary }]}
+          {...rest}
+        />
+        <TouchableOpacity
+          onPress={() => setVisible((v) => !v)}
+          accessibilityRole="button"
+          accessibilityLabel={visible ? 'Hide password' : 'Show password'}
+          style={styles.toggle}
+        >
+          <Text style={{ color: colors.primary, fontWeight: fontWeights.medium }}>
+            {visible ? 'Hide' : 'Show'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      {hasError ? (
+        <Text style={[styles.error, { color: colors.error }]}>{error}</Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.medium,
+    marginBottom: spacing.xs,
+  },
+  inputRow: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+  },
+  input: {
+    flex: 1,
+    fontSize: fontSizes.md,
+    minHeight: 44,
+  },
+  toggle: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  error: {
+    fontSize: fontSizes.xs,
+    marginTop: spacing.xs,
+  },
+});

package/src/components/inputs/SegmentedControl.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';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+import { fontSizes } from '../../tokens/typography';
+
+export interface SegmentedControlProps<T> {
+  options: T[];
+  selection: T;
+  onSelectionChange: (option: T) => void;
+  optionTitle: (option: T) => string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * An inline, single-row segmented picker for switching between a small set
+ * of content states — distinct from `TabBar`/`BottomNavigationBar`, which
+ * are for primary app navigation.
+ */
+export function SegmentedControl<T>({
+  options,
+  selection,
+  onSelectionChange,
+  optionTitle,
+  style,
+}: SegmentedControlProps<T>) {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.surface, borderColor: colors.border }, style]}>
+      {options.map((option, index) => {
+        const selected = option === selection;
+        return (
+          <TouchableOpacity
+            key={index}
+            onPress={() => onSelectionChange(option)}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            accessibilityLabel={optionTitle(option)}
+            style={[styles.segment, selected ? { backgroundColor: colors.primary } : null]}
+          >
+            <Text style={{ color: selected ? colors.primaryText : colors.textPrimary, fontSize: fontSizes.sm }}>
+              {optionTitle(option)}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: radius.md,
+    padding: 2,
+  },
+  segment: {
+    flex: 1,
+    minHeight: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.sm,
+    paddingHorizontal: spacing.sm,
+  },
+});