@harkenapp/sdk-react-native 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/ThemedText.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { TextProps, TextStyle } from 'react-native';
-import { useHarkenTheme } from '../hooks';
+import React from "react";
+import { Text } from "react-native";
+import type { TextProps, TextStyle } from "react-native";
+import { useHarkenTheme } from "../hooks";
 
-export type TextVariant = 'title' | 'body' | 'label' | 'caption';
+export type TextVariant = "title" | "body" | "label" | "caption";
 
 export interface ThemedTextProps extends TextProps {
   /** Text variant determining size and weight */
@@ -18,7 +18,7 @@ export interface ThemedTextProps extends TextProps {
  * Themed text component that uses Harken theme typography.
  */
 export function ThemedText({
-  variant = 'body',
+  variant = "body",
   color,
   secondary = false,
   style,
@@ -55,10 +55,7 @@ export function ThemedText({
   const textColor = color ?? (secondary ? theme.colors.textSecondary : theme.colors.text);
 
   return (
-    <Text
-      style={[variantStyles[variant], { color: textColor }, style]}
-      {...props}
-    >
+    <Text style={[variantStyles[variant], { color: textColor }, style]} {...props}>
       {children}
     </Text>
   );

package/src/components/ThemedTextInput.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { TextInput, View } from 'react-native';
-import type { TextInputProps, ViewStyle, TextStyle, StyleProp } from 'react-native';
-import { useHarkenTheme } from '../hooks';
+import React, { useState } from "react";
+import { TextInput, View } from "react-native";
+import type { TextInputProps, ViewStyle, TextStyle, StyleProp } from "react-native";
+import { useHarkenTheme } from "../hooks";
 
 export interface ThemedTextInputProps extends TextInputProps {
   /** Error state */
@@ -12,6 +12,15 @@ export interface ThemedTextInputProps extends TextInputProps {
 
 /**
  * Themed text input component with Harken styling.
+ *
+ * Uses the following theme tokens:
+ * - `colors.inputBackground` for background
+ * - `colors.inputBorder`, `inputBorderFocused`, `inputBorderError` for border states
+ * - `colors.inputText` for text color
+ * - `colors.inputPlaceholder` for placeholder
+ * - `spacing.inputPadding` for padding
+ * - `radii.input` for border radius
+ * - `sizing.inputMinHeight` for minimum height
  */
 export function ThemedTextInput({
   error = false,
@@ -22,34 +31,35 @@ export function ThemedTextInput({
   ...props
 }: ThemedTextInputProps): React.JSX.Element {
   const theme = useHarkenTheme();
+  const { input } = theme.components;
   const [isFocused, setIsFocused] = useState(false);
 
   const getBorderColor = () => {
-    if (error) return theme.colors.error;
-    if (isFocused) return theme.colors.borderFocused;
-    return theme.colors.border;
+    if (error) return input.borderError;
+    if (isFocused) return input.borderFocused;
+    return input.border;
   };
 
   const inputStyle: TextStyle = {
     fontSize: theme.typography.bodySize,
     fontFamily: theme.typography.fontFamily,
-    color: theme.colors.text,
-    padding: theme.spacing.md,
-    minHeight: 44,
+    color: input.text,
+    padding: input.padding,
+    minHeight: input.minHeight,
   };
 
   const containerStyles: ViewStyle = {
-    backgroundColor: theme.colors.backgroundSecondary,
+    backgroundColor: input.background,
     borderWidth: 1,
     borderColor: getBorderColor(),
-    borderRadius: theme.radii.md,
+    borderRadius: input.radius,
   };
 
   return (
     <View style={[containerStyles, containerStyle]}>
       <TextInput
         style={[inputStyle, style]}
-        placeholderTextColor={theme.colors.textPlaceholder}
+        placeholderTextColor={input.placeholder}
         onFocus={(e) => {
           setIsFocused(true);
           onFocus?.(e);

package/src/components/UploadStatusOverlay.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { View, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
-import type { ViewStyle, StyleProp } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
-import { UploadPhase } from '../domain';
+import React from "react";
+import { View, Pressable, ActivityIndicator, StyleSheet } from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import { UploadPhase } from "../domain";
 
 /**
  * Customizable labels for upload status states.
@@ -41,11 +41,7 @@ export interface UploadStatusOverlayProps {
   /** Custom progress renderer */
   renderProgress?: (progress: number) => React.ReactNode;
   /** Custom error renderer */
-  renderError?: (
-    error: string,
-    onRetry?: () => void,
-    onRemove?: () => void
-  ) => React.ReactNode;
+  renderError?: (error: string, onRetry?: () => void, onRemove?: () => void) => React.ReactNode;
   /** Custom success/completed renderer */
   renderSuccess?: (onRemove?: () => void) => React.ReactNode;
 }
@@ -59,6 +55,14 @@ export interface UploadStatusOverlayProps {
  * - Checkmark when complete
  * - Error with retry button when failed
  *
+ * Uses the following theme tokens:
+ * - `colors.uploadOverlay` for overlay background
+ * - `colors.uploadOverlayError` for error overlay background
+ * - `colors.uploadProgressTrack` for progress bar track
+ * - `colors.uploadProgressFill` for progress bar fill
+ * - `colors.uploadBadgeSuccess` for success badge
+ * - `colors.uploadText` for overlay text
+ *
  * @example
  * ```tsx
  * // Basic usage
@@ -101,23 +105,22 @@ export function UploadStatusOverlay({
   renderSuccess,
 }: UploadStatusOverlayProps): React.JSX.Element | null {
   const theme = useHarkenTheme();
+  const { upload } = theme.components;
 
   // Merge labels with defaults
   const resolvedLabels: Required<UploadStatusLabels> = {
-    retry: labels?.retry ?? 'Retry',
-    remove: labels?.remove ?? 'Remove',
-    cancel: labels?.cancel ?? 'Cancel',
-    confirming: labels?.confirming ?? 'Confirming...',
-    waiting: labels?.waiting ?? 'Waiting...',
-    uploadFailed: labels?.uploadFailed ?? 'Upload failed',
+    retry: labels?.retry ?? "Retry",
+    remove: labels?.remove ?? "Remove",
+    cancel: labels?.cancel ?? "Cancel",
+    confirming: labels?.confirming ?? "Confirming...",
+    waiting: labels?.waiting ?? "Waiting...",
+    uploadFailed: labels?.uploadFailed ?? "Upload failed",
   };
 
   // Completed state - just show a subtle checkmark
   if (phase === UploadPhase.COMPLETED) {
     if (renderSuccess) {
-      return (
-        <View style={[styles.overlay, style]}>{renderSuccess(onRemove)}</View>
-      );
+      return <View style={[styles.overlay, style]}>{renderSuccess(onRemove)}</View>;
     }
 
     return (
@@ -126,12 +129,12 @@ export function UploadStatusOverlay({
           style={[
             styles.badge,
             {
-              backgroundColor: theme.colors.success,
+              backgroundColor: upload.badgeSuccess,
               borderRadius: theme.radii.full,
             },
           ]}
         >
-          <ThemedText style={styles.badgeIcon}>✓</ThemedText>
+          <ThemedText style={[styles.badgeIcon, { color: upload.text }]}>✓</ThemedText>
         </View>
         {onRemove && (
           <Pressable
@@ -157,9 +160,7 @@ export function UploadStatusOverlay({
 
     if (renderError) {
       return (
-        <View style={[styles.overlay, style]}>
-          {renderError(errorMessage, onRetry, onRemove)}
-        </View>
+        <View style={[styles.overlay, style]}>{renderError(errorMessage, onRetry, onRemove)}</View>
       );
     }
 
@@ -168,12 +169,12 @@ export function UploadStatusOverlay({
         style={[
           styles.overlay,
           styles.fullOverlay,
-          { backgroundColor: theme.colors.overlayDark },
+          { backgroundColor: upload.overlayError },
           style,
         ]}
       >
         <ThemedText style={styles.errorIcon}>⚠️</ThemedText>
-        <ThemedText style={styles.errorText} numberOfLines={2}>
+        <ThemedText style={[styles.errorText, { color: upload.text }]} numberOfLines={2}>
           {errorMessage}
         </ThemedText>
         <View style={styles.buttonRow}>
@@ -188,7 +189,7 @@ export function UploadStatusOverlay({
                 },
               ]}
             >
-              <ThemedText style={styles.actionButtonText}>
+              <ThemedText style={[styles.actionButtonText, { color: upload.text }]}>
                 {resolvedLabels.retry}
               </ThemedText>
             </Pressable>
@@ -204,7 +205,7 @@ export function UploadStatusOverlay({
                 },
               ]}
             >
-              <ThemedText style={styles.actionButtonText}>
+              <ThemedText style={[styles.actionButtonText, { color: upload.text }]}>
                 {resolvedLabels.remove}
               </ThemedText>
             </Pressable>
@@ -221,12 +222,7 @@ export function UploadStatusOverlay({
     if (renderProgress) {
       return (
         <View
-          style={[
-            styles.overlay,
-            styles.fullOverlay,
-            { backgroundColor: theme.colors.overlay },
-            style,
-          ]}
+          style={[styles.overlay, styles.fullOverlay, { backgroundColor: upload.overlay }, style]}
         >
           {renderProgress(progress)}
         </View>
@@ -235,19 +231,16 @@ export function UploadStatusOverlay({
 
     return (
       <View
-        style={[
-          styles.overlay,
-          styles.fullOverlay,
-          { backgroundColor: theme.colors.overlay },
-          style,
-        ]}
+        style={[styles.overlay, styles.fullOverlay, { backgroundColor: upload.overlay }, style]}
       >
-        <ThemedText style={styles.progressText}>{progressPercent}%</ThemedText>
+        <ThemedText style={[styles.progressText, { color: upload.text }]}>
+          {progressPercent}%
+        </ThemedText>
         <View
           style={[
             styles.progressBarContainer,
             {
-              backgroundColor: 'rgba(255,255,255,0.3)',
+              backgroundColor: upload.progressTrack,
               borderRadius: theme.radii.sm,
             },
           ]}
@@ -257,7 +250,7 @@ export function UploadStatusOverlay({
               styles.progressBarFill,
               {
                 width: `${progressPercent}%`,
-                backgroundColor: theme.colors.primary,
+                backgroundColor: upload.progressFill,
                 borderRadius: theme.radii.sm,
               },
             ]}
@@ -269,11 +262,12 @@ export function UploadStatusOverlay({
             style={[
               styles.cancelButton,
               {
+                backgroundColor: upload.progressTrack,
                 borderRadius: theme.radii.sm,
               },
             ]}
           >
-            <ThemedText style={styles.cancelText}>
+            <ThemedText style={[styles.cancelText, { color: upload.text }]}>
               {resolvedLabels.cancel}
             </ThemedText>
           </Pressable>
@@ -286,15 +280,10 @@ export function UploadStatusOverlay({
   if (phase === UploadPhase.CONFIRMING) {
     return (
       <View
-        style={[
-          styles.overlay,
-          styles.fullOverlay,
-          { backgroundColor: theme.colors.overlay },
-          style,
-        ]}
+        style={[styles.overlay, styles.fullOverlay, { backgroundColor: upload.overlay }, style]}
       >
-        <ActivityIndicator color="#fff" size="small" />
-        <ThemedText style={styles.confirmingText}>
+        <ActivityIndicator color={upload.text} size="small" />
+        <ThemedText style={[styles.confirmingText, { color: upload.text }]}>
           {resolvedLabels.confirming}
         </ThemedText>
       </View>
@@ -305,15 +294,10 @@ export function UploadStatusOverlay({
   if (phase === UploadPhase.QUEUED) {
     return (
       <View
-        style={[
-          styles.overlay,
-          styles.fullOverlay,
-          { backgroundColor: theme.colors.overlay },
-          style,
-        ]}
+        style={[styles.overlay, styles.fullOverlay, { backgroundColor: upload.overlay }, style]}
       >
-        <ActivityIndicator color="#fff" size="small" />
-        <ThemedText style={styles.queuedText}>
+        <ActivityIndicator color={upload.text} size="small" />
+        <ThemedText style={[styles.queuedText, { color: upload.text }]}>
           {resolvedLabels.waiting}
         </ThemedText>
         {onRemove && (
@@ -322,11 +306,12 @@ export function UploadStatusOverlay({
             style={[
               styles.cancelButton,
               {
+                backgroundColor: upload.progressTrack,
                 borderRadius: theme.radii.sm,
               },
             ]}
           >
-            <ThemedText style={styles.cancelText}>
+            <ThemedText style={[styles.cancelText, { color: upload.text }]}>
               {resolvedLabels.cancel}
             </ThemedText>
           </Pressable>
@@ -343,33 +328,32 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
   },
   fullOverlay: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 8,
   },
   completedOverlay: {
-    alignItems: 'flex-end',
-    justifyContent: 'space-between',
-    flexDirection: 'row',
+    alignItems: "flex-end",
+    justifyContent: "space-between",
+    flexDirection: "row",
     padding: 4,
   },
   badge: {
     width: 24,
     height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   badgeIcon: {
-    color: '#fff',
     fontSize: 14,
-    fontWeight: '700',
+    fontWeight: "700",
   },
   removeButton: {
     width: 24,
     height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.2,
     shadowRadius: 2,
@@ -377,40 +361,35 @@ const styles = StyleSheet.create({
   },
   removeIcon: {
     fontSize: 18,
-    fontWeight: '700',
+    fontWeight: "700",
     lineHeight: 20,
   },
   progressText: {
-    color: '#fff',
     fontSize: 16,
-    fontWeight: '600',
+    fontWeight: "600",
     marginBottom: 8,
   },
   progressBarContainer: {
-    width: '80%',
+    width: "80%",
     height: 6,
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   progressBarFill: {
-    height: '100%',
+    height: "100%",
   },
   cancelButton: {
     marginTop: 8,
     paddingHorizontal: 12,
     paddingVertical: 4,
-    backgroundColor: 'rgba(255,255,255,0.2)',
   },
   cancelText: {
-    color: '#fff',
     fontSize: 12,
   },
   confirmingText: {
-    color: '#fff',
     fontSize: 12,
     marginTop: 4,
   },
   queuedText: {
-    color: '#fff',
     fontSize: 12,
     marginTop: 4,
   },
@@ -419,13 +398,12 @@ const styles = StyleSheet.create({
     marginBottom: 4,
   },
   errorText: {
-    color: '#fff',
     fontSize: 11,
-    textAlign: 'center',
+    textAlign: "center",
     marginBottom: 8,
   },
   buttonRow: {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: 8,
   },
   actionButton: {
@@ -433,8 +411,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
   },
   actionButtonText: {
-    color: '#fff',
     fontSize: 12,
-    fontWeight: '600',
+    fontWeight: "600",
   },
 });

package/src/components/index.ts

@@ -1,39 +1,36 @@
 // Base themed components
-export { ThemedText } from './ThemedText';
-export type { ThemedTextProps, TextVariant } from './ThemedText';
+export { ThemedText } from "./ThemedText";
+export type { ThemedTextProps, TextVariant } from "./ThemedText";
 
-export { ThemedTextInput } from './ThemedTextInput';
-export type { ThemedTextInputProps } from './ThemedTextInput';
+export { ThemedTextInput } from "./ThemedTextInput";
+export type { ThemedTextInputProps } from "./ThemedTextInput";
 
-export { ThemedButton } from './ThemedButton';
-export type { ThemedButtonProps, ButtonVariant } from './ThemedButton';
+export { ThemedButton } from "./ThemedButton";
+export type { ThemedButtonProps, ButtonVariant } from "./ThemedButton";
 
 // Feedback components
-export { CategorySelector, DEFAULT_CATEGORIES } from './CategorySelector';
-export type { CategorySelectorProps, CategoryOption } from './CategorySelector';
+export { CategorySelector, DEFAULT_CATEGORIES } from "./CategorySelector";
+export type { CategorySelectorProps, CategoryOption } from "./CategorySelector";
 
-export { FeedbackForm } from './FeedbackForm';
-export type { FeedbackFormProps, FeedbackFormData } from './FeedbackForm';
+export { FeedbackForm } from "./FeedbackForm";
+export type { FeedbackFormProps, FeedbackFormData } from "./FeedbackForm";
 
 // Note: FeedbackSheet is exported from the main entry point (comes from attachments module)
 // to provide full attachment support by default.
 
 // Attachment components
-export { AttachmentPicker } from './AttachmentPicker';
+export { AttachmentPicker } from "./AttachmentPicker";
 export type {
   AttachmentPickerProps,
   AttachmentSource,
   PickerOptionConfig,
-} from './AttachmentPicker';
+} from "./AttachmentPicker";
 
-export { UploadStatusOverlay } from './UploadStatusOverlay';
-export type {
-  UploadStatusOverlayProps,
-  UploadStatusLabels,
-} from './UploadStatusOverlay';
+export { UploadStatusOverlay } from "./UploadStatusOverlay";
+export type { UploadStatusOverlayProps, UploadStatusLabels } from "./UploadStatusOverlay";
 
-export { AttachmentPreview } from './AttachmentPreview';
-export type { AttachmentPreviewProps } from './AttachmentPreview';
+export { AttachmentPreview } from "./AttachmentPreview";
+export type { AttachmentPreviewProps } from "./AttachmentPreview";
 
-export { AttachmentGrid } from './AttachmentGrid';
-export type { AttachmentGridProps } from './AttachmentGrid';
+export { AttachmentGrid } from "./AttachmentGrid";
+export type { AttachmentGridProps } from "./AttachmentGrid";

package/src/context/HarkenContext.tsx

@@ -1,17 +1,17 @@
-import React, { createContext, useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-import type { HarkenTheme, ThemeMode } from '../theme';
-import { lightTheme, darkTheme, createTheme } from '../theme';
-import type { HarkenConfig, HarkenProviderProps } from '../types';
-import { IdentityStore, createDefaultStorage } from '../storage';
-import { HarkenClient } from '../api/client';
+import React, { createContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+import type { ResolvedHarkenTheme, ThemeMode } from "../theme";
+import { lightTheme, darkTheme, resolveTheme } from "../theme";
+import type { HarkenConfig, HarkenProviderProps } from "../types";
+import { IdentityStore, createDefaultStorage } from "../storage";
+import { HarkenClient } from "../api/client";
 
 /**
  * Context value provided by HarkenProvider.
  */
 export interface HarkenContextValue {
-  /** The resolved theme based on mode and overrides */
-  theme: HarkenTheme;
+  /** The resolved theme with all fallbacks applied */
+  theme: ResolvedHarkenTheme;
   /** Current theme mode */
   themeMode: ThemeMode;
   /** Whether dark mode is currently active */
@@ -52,20 +52,25 @@ export const HarkenContext = createContext<HarkenContextValue | null>(null);
  *
  * @example
  * ```tsx
- * // With custom storage implementation
- * import { HarkenProvider, createSecureStoreAdapter } from '@harkenapp/sdk-react-native';
- * import * as SecureStore from 'expo-secure-store';
- *
- * const storage = createSecureStoreAdapter(SecureStore);
- *
- * <HarkenProvider config={{ publishableKey: 'pk_live_xxxx' }} storage={storage}>
- *   <YourApp />
+ * // With custom theme for modal embedding
+ * <HarkenProvider
+ *   config={{ publishableKey: 'pk_live_xxxx' }}
+ *   themeMode="dark"
+ *   darkTheme={{
+ *     colors: {
+ *       surface: '#2d2d2d',
+ *       chipBackground: '#3d3d3d',
+ *       formBackground: 'transparent',
+ *     },
+ *   }}
+ * >
+ *   <FeedbackSheet layout="auto" />
  * </HarkenProvider>
  * ```
  */
 export function HarkenProvider({
   config,
-  themeMode = 'system',
+  themeMode = "system",
   lightTheme: lightOverrides,
   darkTheme: darkOverrides,
   storage,
@@ -76,17 +81,17 @@ export function HarkenProvider({
 
   // Determine if dark mode should be active
   const isDarkMode = useMemo(() => {
-    if (themeMode === 'dark') return true;
-    if (themeMode === 'light') return false;
+    if (themeMode === "dark") return true;
+    if (themeMode === "light") return false;
     // 'system' mode - follow device preference
-    return systemColorScheme === 'dark';
+    return systemColorScheme === "dark";
   }, [themeMode, systemColorScheme]);
 
-  // Build the resolved theme
+  // Build the resolved theme using the centralized resolver
   const theme = useMemo(() => {
     const baseTheme = isDarkMode ? darkTheme : lightTheme;
     const overrides = isDarkMode ? darkOverrides : lightOverrides;
-    return createTheme(baseTheme, overrides);
+    return resolveTheme(baseTheme, overrides);
   }, [isDarkMode, lightOverrides, darkOverrides]);
 
   // Create identity store (memoized to persist across re-renders)
@@ -121,9 +126,5 @@ export function HarkenProvider({
     [theme, themeMode, isDarkMode, config, identityStore, client]
   );
 
-  return (
-    <HarkenContext.Provider value={contextValue}>
-      {children}
-    </HarkenContext.Provider>
-  );
+  return <HarkenContext.Provider value={contextValue}>{children}</HarkenContext.Provider>;
 }

package/src/context/index.ts

@@ -1,2 +1,2 @@
-export { HarkenProvider, HarkenContext } from './HarkenContext';
-export type { HarkenContextValue } from './HarkenContext';
+export { HarkenProvider, HarkenContext } from "./HarkenContext";
+export type { HarkenContextValue } from "./HarkenContext";

package/src/domain/index.ts

@@ -1,7 +1,4 @@
-export {
-  UploadPhase,
-  DEFAULT_UPLOAD_RETRY_CONFIG,
-} from './upload-queue';
+export { UploadPhase, DEFAULT_UPLOAD_RETRY_CONFIG } from "./upload-queue";
 
 export type {
   QueueItem,
@@ -9,4 +6,4 @@ export type {
   UploadProgress,
   PersistedQueue,
   UploadRetryConfig,
-} from './upload-queue';
+} from "./upload-queue";

package/src/domain/upload-queue.ts

@@ -9,15 +9,15 @@
  */
 export enum UploadPhase {
   /** Waiting in queue to be processed */
-  QUEUED = 'queued',
+  QUEUED = "queued",
   /** Currently uploading to storage */
-  UPLOADING = 'uploading',
+  UPLOADING = "uploading",
   /** Upload complete, confirming with server */
-  CONFIRMING = 'confirming',
+  CONFIRMING = "confirming",
   /** Successfully uploaded and confirmed */
-  COMPLETED = 'completed',
+  COMPLETED = "completed",
   /** Failed after max retries */
-  FAILED = 'failed',
+  FAILED = "failed",
 }
 
 /**