syzygy-ui-rn 2.0.0

package/src/components/badges/Badge.tsx

@@ -0,0 +1,74 @@
+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 BadgeVariant = 'primary' | 'success' | 'warning' | 'error';
+
+export interface BadgeProps {
+  text: string;
+  variant?: BadgeVariant;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  text,
+  variant = 'primary',
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  const backgroundColor =
+    variant === 'primary'
+      ? colors.primary
+      : variant === 'success'
+      ? colors.success
+      : variant === 'warning'
+      ? colors.warning
+      : colors.error;
+
+  const textColor =
+    variant === 'primary'
+      ? colors.primaryText
+      : variant === 'success'
+      ? colors.successText
+      : variant === 'warning'
+      ? colors.warningText
+      : colors.errorText;
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor }, style]}
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? text}
+    >
+      <Text style={[styles.text, { color: textColor }]}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: radius.full,
+  },
+  text: {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.semibold,
+  },
+});

package/src/components/buttons/DestructiveButton.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  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 DestructiveButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const DestructiveButton: React.FC<DestructiveButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={[
+        styles.base,
+        {
+          backgroundColor: isDisabled ? colors.disabled : colors.destructive,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.destructiveText} />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            { color: isDisabled ? colors.disabledText : colors.destructiveText },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    minHeight: 44,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.semibold,
+  },
+});

package/src/components/buttons/GhostButton.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  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 GhostButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const GhostButton: React.FC<GhostButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={[styles.base, style]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.primary} />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            { color: isDisabled ? colors.disabledText : colors.primary },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    minHeight: 44,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+  text: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.semibold,
+  },
+});

package/src/components/buttons/IconButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  useColorScheme,
+  ViewStyle,
+} from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+
+export interface IconButtonProps {
+  icon: React.ReactNode;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel: string;
+}
+
+export const IconButton: React.FC<IconButtonProps> = ({
+  icon,
+  onPress,
+  disabled = false,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={[
+        styles.base,
+        {
+          backgroundColor: disabled ? colors.disabled : colors.surfaceAlt,
+        },
+        style,
+      ]}
+    >
+      {icon}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    width: 44,
+    height: 44,
+    borderRadius: radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.xs,
+  },
+});

package/src/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  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 PrimaryButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={[
+        styles.base,
+        {
+          backgroundColor: isDisabled ? colors.disabled : colors.primary,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.primaryText} />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            { color: isDisabled ? colors.disabledText : colors.primaryText },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    minHeight: 44,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.semibold,
+  },
+});

package/src/components/buttons/SecondaryButton.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  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 SecondaryButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const SecondaryButton: React.FC<SecondaryButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={[
+        styles.base,
+        {
+          backgroundColor: isDisabled ? colors.disabled : colors.secondary,
+          borderColor: colors.border,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.secondaryText} />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            { color: isDisabled ? colors.disabledText : colors.secondaryText },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    minHeight: 44,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.semibold,
+  },
+});

package/src/components/cards/CardView.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleProp, StyleSheet, useColorScheme, View, ViewStyle } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { radius } from '../../tokens/radius';
+import { spacing } from '../../tokens/spacing';
+
+export interface CardViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export const CardView: React.FC<CardViewProps> = ({
+  children,
+  style,
+  accessibilityLabel,
+}) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface,
+          borderColor: colors.border,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    padding: spacing.md,
+  },
+});

package/src/components/display/Avatar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native';
+
+import { getColors } from '../../tokens/colors';
+import { fontSizes, fontWeights } from '../../tokens/typography';
+
+export type AvatarSize = 'small' | 'medium' | 'large';
+
+const DIMENSIONS: Record<AvatarSize, number> = {
+  small: 32,
+  medium: 44,
+  large: 64,
+};
+
+export interface AvatarProps {
+  initials: string;
+  size?: AvatarSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A circular avatar showing a fallback initials label. */
+export const Avatar: React.FC<AvatarProps> = ({ initials, size = 'medium', style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+  const dimension = DIMENSIONS[size];
+
+  return (
+    <View
+      accessibilityLabel={initials}
+      style={[
+        styles.container,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: dimension / 2,
+          backgroundColor: colors.primary,
+        },
+        style,
+      ]}
+    >
+      <Text style={{ color: colors.primaryText, fontSize: fontSizes.sm, fontWeight: fontWeights.semibold }}>
+        {initials}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/display/Chip.tsx

@@ -0,0 +1,64 @@
+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 } from '../../tokens/typography';
+
+export interface ChipProps {
+  text: string;
+  onRemove?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A compact tag/chip with an optional trailing remove button. */
+export const Chip: React.FC<ChipProps> = ({ text, onRemove, style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: colors.surfaceAlt }, style]}
+      accessibilityLabel={text}
+    >
+      <Text style={{ color: colors.textPrimary, fontSize: fontSizes.sm }}>{text}</Text>
+      {onRemove ? (
+        <TouchableOpacity
+          onPress={onRemove}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${text}`}
+          style={styles.remove}
+        >
+          <Text style={{ color: colors.textSecondary }}>{'✕'}</Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: radius.full,
+  },
+  remove: {
+    marginLeft: spacing.xs,
+    minWidth: 20,
+    minHeight: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/display/CountBadge.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, 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 CountBadgeProps {
+  count?: number;
+  maxDisplayCount?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A small numeric/dot badge meant to overlay an icon (e.g. a bell with an
+ * unread count). Distinct from this library's own `Badge`, which is a
+ * standalone labeled pill.
+ */
+export const CountBadge: React.FC<CountBadgeProps> = ({ count, maxDisplayCount = 99, style }) => {
+  const scheme = useColorScheme();
+  const colors = getColors(scheme);
+
+  if (count != null && count > 0) {
+    const display = count > maxDisplayCount ? `${maxDisplayCount}+` : `${count}`;
+    return (
+      <View
+        style={[styles.numeric, { backgroundColor: colors.destructive }, style]}
+        accessibilityLabel={`${count} unread`}
+      >
+        <Text style={{ color: colors.destructiveText, fontSize: fontSizes.xs }}>{display}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.dot, { backgroundColor: colors.destructive }, style]}
+      accessibilityLabel="New"
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  numeric: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xs,
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+});