@velion-la/onboarding-sdk-react-native 1.0.0-beta.2

package/src/ui/primitives/Banner.tsx

@@ -0,0 +1,81 @@
+/**
+ * Form-level error banner. Tinted background, error text, paired with an
+ * inline warning icon (single "!" character to keep zero asset dependencies).
+ */
+
+import { StyleSheet, Text, View } from 'react-native';
+import { mixHex, useTheme } from '../theme';
+
+export interface BannerProps {
+  message: string;
+  variant?: 'error' | 'warning';
+  testID?: string;
+}
+
+export function Banner({
+  message,
+  variant = 'error',
+  testID,
+}: BannerProps) {
+  const theme = useTheme();
+  const accent = variant === 'warning' ? theme.warningColor : theme.errorColor;
+  const tint = mixHex(accent, theme.backgroundColor, 12);
+
+  return (
+    <View
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      testID={testID}
+      style={[
+        styles.box,
+        {
+          backgroundColor: tint,
+          borderColor: theme.borderColor,
+          borderRadius: theme.borderRadiusPx,
+        },
+      ]}
+    >
+      <View
+        style={[
+          styles.icon,
+          { borderColor: accent, backgroundColor: theme.backgroundColor },
+        ]}
+      >
+        <Text style={[styles.iconText, { color: accent }]}>!</Text>
+      </View>
+      <Text style={[styles.message, { color: accent }]} numberOfLines={4}>
+        {message}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    padding: 10,
+    borderWidth: 1,
+    marginTop: 4,
+  },
+  icon: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 2,
+    borderWidth: 1,
+  },
+  iconText: {
+    fontWeight: '700',
+    fontSize: 12,
+    lineHeight: 14,
+  },
+  message: {
+    flex: 1,
+    fontSize: 13,
+    lineHeight: 18,
+  },
+});

package/src/ui/primitives/Button.tsx

@@ -0,0 +1,164 @@
+/**
+ * Themed button — primary / secondary / ghost variants.
+ *
+ * Matches the visual language of `.vl-btn--primary` / `.vl-retry-dialog__btn--ghost`:
+ *   - Primary: filled with `primaryColor`, white text.
+ *   - Secondary: filled with `secondaryColor`.
+ *   - Ghost: transparent with border + text in `textColor`.
+ *
+ * 44 px min tap target (Apple HIG / WCAG 2.5.5). Disabled state dims at 0.45
+ * opacity (matches `.vl-btn:disabled`).
+ */
+
+import { useMemo } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, withAlpha } from '../theme';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+
+export interface ButtonProps {
+  label: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Fills the parent's width — most form CTAs want this. */
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export function Button({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  style,
+  accessibilityLabel,
+  testID,
+}: ButtonProps) {
+  const theme = useTheme();
+  const variantStyles = useMemo(() => buildVariantStyles(theme, variant), [
+    theme,
+    variant,
+  ]);
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      disabled={isDisabled}
+      onPress={onPress}
+      testID={testID}
+      style={({ pressed }) => [
+        styles.base,
+        { borderRadius: theme.borderRadiusPx },
+        variantStyles.container,
+        fullWidth && styles.fullWidth,
+        pressed && !isDisabled && variantStyles.pressed,
+        isDisabled && styles.disabled,
+        style,
+      ]}
+    >
+      {loading ? (
+        <View style={styles.row}>
+          <ActivityIndicator color={variantStyles.activityColor} size="small" />
+          <Text style={[styles.label, variantStyles.label, styles.labelGap]}>
+            {label}
+          </Text>
+        </View>
+      ) : (
+        <Text style={[styles.label, variantStyles.label]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+interface VariantStyleSet {
+  container: ViewStyle;
+  pressed: ViewStyle;
+  label: { color: string };
+  activityColor: string;
+}
+
+function buildVariantStyles(
+  theme: ReturnType<typeof useTheme>,
+  variant: ButtonVariant,
+): VariantStyleSet {
+  switch (variant) {
+    case 'secondary':
+      return {
+        container: {
+          backgroundColor: theme.secondaryColor,
+          borderColor: theme.secondaryColor,
+        },
+        pressed: { opacity: 0.85 },
+        label: { color: '#FFFFFF' },
+        activityColor: '#FFFFFF',
+      };
+    case 'ghost':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderColor: theme.borderColor,
+        },
+        pressed: { backgroundColor: withAlpha(theme.textColor, 0.06) },
+        label: { color: theme.textColor },
+        activityColor: theme.textColor,
+      };
+    case 'primary':
+    default:
+      return {
+        container: {
+          backgroundColor: theme.primaryColor,
+          borderColor: theme.primaryColor,
+        },
+        pressed: { opacity: 0.85 },
+        label: { color: '#FFFFFF' },
+        activityColor: '#FFFFFF',
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  base: {
+    minHeight: 44,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  labelGap: {
+    marginLeft: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/ui/primitives/Card.tsx

@@ -0,0 +1,55 @@
+/**
+ * Plain themed surface used by step shells, dialog cards, etc. Adds the
+ * standard radius + shadow elevation pair without forcing a specific layout.
+ */
+
+import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import { useTheme } from '../theme';
+
+export interface CardProps extends ViewProps {
+  elevated?: boolean;
+}
+
+export function Card({
+  elevated = false,
+  style,
+  children,
+  ...rest
+}: CardProps) {
+  const theme = useTheme();
+  return (
+    <View
+      {...rest}
+      style={[
+        styles.card,
+        {
+          backgroundColor: theme.backgroundColor,
+          borderColor: theme.borderColor,
+          borderRadius: theme.borderRadiusPx,
+        },
+        elevated && (Platform.OS === 'android' ? androidElevation : iosShadow),
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    padding: 16,
+  },
+});
+
+const iosShadow = {
+  shadowColor: '#000',
+  shadowOpacity: 0.1,
+  shadowRadius: 6,
+  shadowOffset: { width: 0, height: 4 },
+};
+
+const androidElevation = {
+  elevation: 3,
+};

package/src/ui/primitives/Checkbox.tsx

@@ -0,0 +1,153 @@
+/**
+ * Themed checkbox with optional title + description.
+ *
+ * Two visual modes:
+ *   - `inline`: checkbox + single-line label (T&C list rows).
+ *   - `card`: checkbox + title + description inside a tinted card —
+ *     used by SWORN_DECLARATION.
+ *
+ * No external icon dependency: the check is a tinted square with a "✓" glyph.
+ */
+
+import { StyleSheet, Text, View } from 'react-native';
+import { Pressable } from 'react-native';
+import { mixHex, useTheme } from '../theme';
+
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  /** Single-line label (used when `description` is absent). */
+  label?: string;
+  /** Card title — paired with `description` switches the layout to `card` mode. */
+  title?: string;
+  description?: string;
+  disabled?: boolean;
+  /** Show as a card with tinted background and selected-state border. */
+  variant?: 'inline' | 'card';
+  testID?: string;
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  title,
+  description,
+  disabled = false,
+  variant = 'inline',
+  testID,
+}: CheckboxProps) {
+  const theme = useTheme();
+  const cardBgIdle = mixHex(theme.primaryColor, theme.backgroundColor, 8);
+  const cardBgActive = mixHex(theme.primaryColor, theme.backgroundColor, 14);
+  const isCard = variant === 'card';
+
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ disabled, checked }}
+      accessibilityLabel={title ?? label}
+      accessibilityHint={description}
+      disabled={disabled}
+      testID={testID}
+      onPress={() => onChange(!checked)}
+      style={({ pressed }) => [
+        isCard ? styles.card : styles.inline,
+        isCard && {
+          borderColor: checked ? theme.primaryColor : theme.borderColor,
+          backgroundColor: checked ? cardBgActive : cardBgIdle,
+          borderRadius: theme.borderRadiusPx,
+        },
+        pressed && !disabled && { opacity: 0.85 },
+        disabled && styles.disabled,
+      ]}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            borderColor: checked ? theme.primaryColor : theme.borderColor,
+            backgroundColor: checked ? theme.primaryColor : 'transparent',
+          },
+        ]}
+      >
+        {checked ? <Text style={styles.tick}>✓</Text> : null}
+      </View>
+      <View style={styles.copy}>
+        {isCard ? (
+          <>
+            {title ? (
+              <Text style={[styles.title, { color: theme.textColor }]}>
+                {title}
+              </Text>
+            ) : null}
+            {description ? (
+              <Text
+                style={[styles.description, { color: theme.textSecondaryColor }]}
+              >
+                {description}
+              </Text>
+            ) : null}
+          </>
+        ) : (
+          <Text style={[styles.label, { color: theme.textColor }]}>
+            {label ?? title ?? ''}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  inline: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+    paddingVertical: 8,
+    minHeight: 44,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+    padding: 12,
+    borderWidth: 1,
+    minHeight: 64,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  box: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 2,
+  },
+  tick: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '900',
+    lineHeight: 16,
+  },
+  copy: {
+    flex: 1,
+    gap: 3,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+});