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

package/src/components/AttachmentGrid.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
-import type { ViewStyle, StyleProp, ImageStyle } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
-import { AttachmentPreview } from './AttachmentPreview';
-import type { AttachmentState } from '../hooks/useAttachmentUpload';
-import type { UploadStatusLabels } from './UploadStatusOverlay';
+import React from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import type { ViewStyle, StyleProp, ImageStyle } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import { AttachmentPreview } from "./AttachmentPreview";
+import type { AttachmentState } from "../hooks/useAttachmentUpload";
+import type { UploadStatusLabels } from "./UploadStatusOverlay";
 
 export interface AttachmentGridProps {
   /** List of attachments to display */
@@ -61,6 +61,14 @@ export interface AttachmentGridProps {
  *
  * Shows attachment previews with upload status and an optional add button.
  *
+ * Uses the following theme tokens:
+ * - `colors.addButton*` for add button colors
+ * - `spacing.tileGap` for gap between tiles
+ * - `radii.tile` for tile border radius
+ * - `sizing.tileSize` for default tile size
+ * - `sizing.addButtonIconSize` for add icon size
+ * - `opacity.disabled` for disabled state
+ *
  * @example
  * ```tsx
  * // Basic usage
@@ -106,15 +114,15 @@ export function AttachmentGrid({
   onRemove,
   onAdd,
   maxAttachments = 10,
-  tileSize = 80,
+  tileSize,
   gap,
   showAddButton = true,
   disabled = false,
   style,
-  addButtonLabel = 'Add',
-  addButtonIcon = '+',
+  addButtonLabel = "Add",
+  addButtonIcon = "+",
   addButtonStyle,
-  emptyText = 'No attachments',
+  emptyText = "No attachments",
   renderAddButton,
   renderTile,
   tileStyle,
@@ -124,19 +132,16 @@ export function AttachmentGrid({
   renderPlaceholder,
 }: AttachmentGridProps): React.JSX.Element {
   const theme = useHarkenTheme();
-  const effectiveGap = gap ?? theme.spacing.sm;
+  const { tile, addButton } = theme.components;
+
+  const effectiveTileSize = tileSize ?? tile.size;
+  const effectiveGap = gap ?? tile.gap;
 
   const canAddMore = attachments.length < maxAttachments;
   const shouldShowAddButton = showAddButton && canAddMore && onAdd;
 
   return (
-    <View
-      style={[
-        styles.container,
-        { gap: effectiveGap },
-        style,
-      ]}
-    >
+    <View style={[styles.container, { gap: effectiveGap }, style]}>
       {attachments.map((attachment) => {
         const handleRetry = onRetry ? () => onRetry(attachment.attachmentId) : undefined;
         const handleRemove = onRemove ? () => onRemove(attachment.attachmentId) : undefined;
@@ -161,7 +166,7 @@ export function AttachmentGrid({
             error={attachment.error}
             onRetry={handleRetry}
             onRemove={handleRemove}
-            size={tileSize}
+            size={effectiveTileSize}
             style={tileStyle}
             imageStyle={tileImageStyle}
             statusLabels={statusLabels}
@@ -171,8 +176,8 @@ export function AttachmentGrid({
         );
       })}
 
-      {shouldShowAddButton && (
-        renderAddButton ? (
+      {shouldShowAddButton &&
+        (renderAddButton ? (
           renderAddButton(onAdd, disabled)
         ) : (
           <Pressable
@@ -181,33 +186,39 @@ export function AttachmentGrid({
             style={({ pressed }) => [
               styles.addButton,
               {
-                width: tileSize,
-                height: tileSize,
-                borderRadius: theme.radii.md,
-                backgroundColor: pressed
-                  ? theme.colors.border
-                  : theme.colors.backgroundSecondary,
+                width: effectiveTileSize,
+                height: effectiveTileSize,
+                borderRadius: tile.radius,
+                backgroundColor: pressed ? addButton.backgroundPressed : addButton.background,
                 borderWidth: 2,
-                borderColor: theme.colors.border,
-                borderStyle: 'dashed',
-                opacity: disabled ? 0.5 : 1,
+                borderColor: addButton.border,
+                borderStyle: "dashed",
+                opacity: disabled ? theme.opacity.disabled : 1,
               },
               addButtonStyle,
             ]}
           >
-            {typeof addButtonIcon === 'string' ? (
-              <ThemedText style={[styles.addIcon, { color: theme.colors.textSecondary }]}>
+            {typeof addButtonIcon === "string" ? (
+              <ThemedText
+                style={[
+                  styles.addIcon,
+                  {
+                    color: addButton.icon,
+                    fontSize: addButton.iconSize,
+                    lineHeight: addButton.iconSize * 1.15, // Scale lineHeight with iconSize
+                  },
+                ]}
+              >
                 {addButtonIcon}
               </ThemedText>
             ) : (
               addButtonIcon
             )}
-            <ThemedText variant="caption" secondary>
+            <ThemedText variant="caption" color={addButton.text}>
               {addButtonLabel}
             </ThemedText>
           </Pressable>
-        )
-      )}
+        ))}
 
       {attachments.length === 0 && !shouldShowAddButton && (
         <View
@@ -229,19 +240,17 @@ export function AttachmentGrid({
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
   },
   addButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   addIcon: {
-    fontSize: 28,
-    fontWeight: '300',
-    lineHeight: 32,
+    fontWeight: "300",
   },
   emptyState: {
-    alignItems: 'center',
+    alignItems: "center",
   },
 });

package/src/components/AttachmentPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from "react";
 import {
   View,
   Modal,
@@ -7,13 +7,13 @@ import {
   Platform,
   ActionSheetIOS,
   StyleSheet,
-} from 'react-native';
-import type { ViewStyle, StyleProp } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
+} from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
 
-export type AttachmentSource = 'camera' | 'library' | 'document';
+export type AttachmentSource = "camera" | "library" | "document";
 
 /**
  * Configuration for a single picker option.
@@ -126,17 +126,18 @@ export function AttachmentPicker({
   onTakePhoto,
   onPickFromLibrary,
   onPickDocument,
-  title = 'Add Attachment',
+  title = "Add Attachment",
   renderIcon,
   options: optionOverrides,
-  cancelLabel = 'Cancel',
+  cancelLabel = "Cancel",
   overlayColor,
   sheetRadius,
   sheetStyle,
   optionStyle,
 }: AttachmentPickerProps): React.JSX.Element | null {
   const theme = useHarkenTheme();
-  const screenHeight = Dimensions.get('window').height;
+  const { picker } = theme.components;
+  const screenHeight = Dimensions.get("window").height;
 
   // Prevent double-triggering ActionSheetIOS if callbacks change
   const isShowingRef = useRef(false);
@@ -144,37 +145,35 @@ export function AttachmentPicker({
   // Build options with defaults and overrides
   const options: PickerOption[] = [
     {
-      key: 'camera',
-      label: optionOverrides?.camera?.label ?? 'Camera',
-      description: optionOverrides?.camera?.description ?? 'Take a new photo',
+      key: "camera",
+      label: optionOverrides?.camera?.label ?? "Camera",
+      description: optionOverrides?.camera?.description ?? "Take a new photo",
       color: optionOverrides?.camera?.color ?? theme.colors.accent1,
       icon:
         optionOverrides?.camera?.icon ??
-        (renderIcon ? renderIcon('camera') : <DefaultIcon emoji="📷" />),
+        (renderIcon ? renderIcon("camera") : <DefaultIcon emoji="📷" />),
       action: onTakePhoto,
       hidden: optionOverrides?.camera?.hidden ?? false,
     },
     {
-      key: 'library',
-      label: optionOverrides?.library?.label ?? 'Photo Library',
-      description:
-        optionOverrides?.library?.description ?? 'Choose from existing photos',
+      key: "library",
+      label: optionOverrides?.library?.label ?? "Photo Library",
+      description: optionOverrides?.library?.description ?? "Choose from existing photos",
       color: optionOverrides?.library?.color ?? theme.colors.accent2,
       icon:
         optionOverrides?.library?.icon ??
-        (renderIcon ? renderIcon('library') : <DefaultIcon emoji="🖼️" />),
+        (renderIcon ? renderIcon("library") : <DefaultIcon emoji="🖼️" />),
       action: onPickFromLibrary,
       hidden: optionOverrides?.library?.hidden ?? false,
     },
     {
-      key: 'document',
-      label: optionOverrides?.document?.label ?? 'Files',
-      description:
-        optionOverrides?.document?.description ?? 'Browse documents and files',
+      key: "document",
+      label: optionOverrides?.document?.label ?? "Files",
+      description: optionOverrides?.document?.description ?? "Browse documents and files",
       color: optionOverrides?.document?.color ?? theme.colors.accent3,
       icon:
         optionOverrides?.document?.icon ??
-        (renderIcon ? renderIcon('document') : <DefaultIcon emoji="📄" />),
+        (renderIcon ? renderIcon("document") : <DefaultIcon emoji="📄" />),
       action: onPickDocument,
       hidden: optionOverrides?.document?.hidden ?? false,
     },
@@ -195,7 +194,7 @@ export function AttachmentPicker({
       return;
     }
 
-    if (visible && Platform.OS === 'ios' && !isShowingRef.current) {
+    if (visible && Platform.OS === "ios" && !isShowingRef.current) {
       isShowingRef.current = true;
 
       // Build iOS action sheet options from visible options
@@ -222,21 +221,16 @@ export function AttachmentPicker({
   }, [visible, onClose, visibleOptions, title, cancelLabel]);
 
   // iOS: Don't render modal - we use ActionSheetIOS instead
-  if (Platform.OS === 'ios') {
+  if (Platform.OS === "ios") {
     return null;
   }
 
-  const resolvedOverlayColor = overlayColor ?? theme.colors.overlay;
-  const resolvedSheetRadius = sheetRadius ?? theme.radii.xl;
+  const resolvedOverlayColor = overlayColor ?? picker.overlay;
+  const resolvedSheetRadius = sheetRadius ?? picker.radius;
 
   // Android: Use bottom sheet modal
   return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide"
-      onRequestClose={onClose}
-    >
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <SafeAreaView style={styles.modalContainer}>
         {/* Background overlay */}
         <Pressable
@@ -248,7 +242,7 @@ export function AttachmentPicker({
             style={[
               styles.bottomSheet,
               {
-                backgroundColor: theme.colors.background,
+                backgroundColor: picker.background,
                 maxHeight: screenHeight * 0.6,
                 borderTopLeftRadius: resolvedSheetRadius,
                 borderTopRightRadius: resolvedSheetRadius,
@@ -260,12 +254,7 @@ export function AttachmentPicker({
           >
             {/* Handle bar */}
             <View style={styles.handleContainer}>
-              <View
-                style={[
-                  styles.handle,
-                  { backgroundColor: theme.colors.textSecondary },
-                ]}
-              />
+              <View style={[styles.handle, { backgroundColor: picker.handle }]} />
             </View>
 
             {/* Title */}
@@ -284,8 +273,8 @@ export function AttachmentPicker({
                     styles.option,
                     {
                       backgroundColor: pressed
-                        ? theme.colors.border
-                        : theme.colors.backgroundSecondary,
+                        ? picker.optionBackgroundPressed
+                        : picker.optionBackground,
                       borderRadius: theme.radii.md,
                     },
                     optionStyle,
@@ -296,6 +285,8 @@ export function AttachmentPicker({
                     style={[
                       styles.iconContainer,
                       {
+                        width: picker.iconSize,
+                        height: picker.iconSize,
                         backgroundColor: option.color,
                         borderRadius: theme.radii.full,
                       },
@@ -314,7 +305,7 @@ export function AttachmentPicker({
 
               {/* Cancel Button */}
               <Pressable style={styles.cancelButton} onPress={onClose}>
-                <ThemedText secondary>{cancelLabel}</ThemedText>
+                <ThemedText color={picker.cancelText}>{cancelLabel}</ThemedText>
               </Pressable>
             </View>
           </View>
@@ -337,13 +328,13 @@ const styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   bottomSheet: {
     paddingBottom: 20,
   },
   handleContainer: {
-    alignItems: 'center',
+    alignItems: "center",
     paddingVertical: 12,
   },
   handle: {
@@ -357,23 +348,21 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
   },
   title: {
-    textAlign: 'center',
+    textAlign: "center",
   },
   optionsContainer: {
     paddingHorizontal: 20,
   },
   option: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingVertical: 16,
     paddingHorizontal: 16,
     marginBottom: 8,
   },
   iconContainer: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     marginRight: 16,
   },
   defaultIcon: {
@@ -385,7 +374,7 @@ const styles = StyleSheet.create({
   },
   cancelButton: {
     paddingVertical: 16,
-    alignItems: 'center',
+    alignItems: "center",
     marginTop: 12,
   },
 });

package/src/components/AttachmentPreview.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { View, Image, StyleSheet } from 'react-native';
-import type { ViewStyle, StyleProp, ImageStyle } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
-import { UploadStatusOverlay } from './UploadStatusOverlay';
-import type { UploadStatusLabels } from './UploadStatusOverlay';
-import { UploadPhase } from '../domain';
+import React from "react";
+import { View, Image, StyleSheet } from "react-native";
+import type { ViewStyle, StyleProp, ImageStyle } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import { UploadStatusOverlay } from "./UploadStatusOverlay";
+import type { UploadStatusLabels } from "./UploadStatusOverlay";
+import type { UploadPhase } from "../domain";
 
 export interface AttachmentPreviewProps {
   /** Local file URI for preview */
@@ -44,6 +44,12 @@ export interface AttachmentPreviewProps {
  * Shows image thumbnail for images, file icon for other types.
  * Includes upload status overlay with progress/retry/remove actions.
  *
+ * Uses the following theme tokens:
+ * - `colors.tileBackground` for background
+ * - `colors.tileBorder` for border
+ * - `radii.tile` for border radius
+ * - `sizing.tileSize` for default size
+ *
  * @example
  * ```tsx
  * // Basic usage
@@ -89,7 +95,7 @@ export function AttachmentPreview({
   error,
   onRetry,
   onRemove,
-  size = 80,
+  size,
   style,
   imageStyle,
   renderPlaceholder,
@@ -97,7 +103,10 @@ export function AttachmentPreview({
   statusLabels,
 }: AttachmentPreviewProps): React.JSX.Element {
   const theme = useHarkenTheme();
-  const isImage = mimeType?.startsWith('image/') ?? true;
+  const { tile } = theme.components;
+  const isImage = mimeType?.startsWith("image/") ?? true;
+
+  const effectiveSize = size ?? tile.size;
 
   const renderFileContent = () => {
     if (renderPlaceholder && mimeType) {
@@ -105,23 +114,14 @@ export function AttachmentPreview({
     }
 
     const icon = customGetFileIcon
-      ? customGetFileIcon(mimeType ?? '')
+      ? customGetFileIcon(mimeType ?? "")
       : getDefaultFileIcon(mimeType);
 
     return (
       <View style={styles.filePreview}>
-        {typeof icon === 'string' ? (
-          <ThemedText style={styles.fileIcon}>{icon}</ThemedText>
-        ) : (
-          icon
-        )}
+        {typeof icon === "string" ? <ThemedText style={styles.fileIcon}>{icon}</ThemedText> : icon}
         {fileName && (
-          <ThemedText
-            variant="caption"
-            secondary
-            numberOfLines={2}
-            style={styles.fileName}
-          >
+          <ThemedText variant="caption" secondary numberOfLines={2} style={styles.fileName}>
             {fileName}
           </ThemedText>
         )}
@@ -134,13 +134,13 @@ export function AttachmentPreview({
       style={[
         styles.container,
         {
-          width: size,
-          height: size,
-          borderRadius: theme.radii.md,
-          backgroundColor: theme.colors.backgroundSecondary,
+          width: effectiveSize,
+          height: effectiveSize,
+          borderRadius: tile.radius,
+          backgroundColor: tile.background,
           borderWidth: 1,
-          borderColor: theme.colors.border,
-          overflow: 'hidden',
+          borderColor: tile.border,
+          overflow: "hidden",
         },
         style,
       ]}
@@ -148,7 +148,15 @@ export function AttachmentPreview({
       {isImage ? (
         <Image
           source={{ uri }}
-          style={[styles.image, { width: size, height: size }, imageStyle]}
+          style={[
+            styles.image,
+            {
+              width: effectiveSize,
+              height: effectiveSize,
+              backgroundColor: tile.background,
+            },
+            imageStyle,
+          ]}
           resizeMode="cover"
         />
       ) : (
@@ -171,32 +179,28 @@ export function AttachmentPreview({
  * Get default file icon emoji based on MIME type.
  */
 function getDefaultFileIcon(mimeType?: string): string {
-  if (!mimeType) return '📄';
+  if (!mimeType) return "📄";
 
-  if (mimeType.startsWith('image/')) return '🖼️';
-  if (mimeType.startsWith('video/')) return '🎬';
-  if (mimeType === 'application/pdf') return '📕';
-  if (mimeType.includes('spreadsheet') || mimeType.includes('excel'))
-    return '📊';
-  if (mimeType.includes('document') || mimeType.includes('word')) return '📝';
-  if (mimeType.includes('presentation') || mimeType.includes('powerpoint'))
-    return '📽️';
-  if (mimeType.includes('zip') || mimeType.includes('archive')) return '📦';
+  if (mimeType.startsWith("image/")) return "🖼️";
+  if (mimeType.startsWith("video/")) return "🎬";
+  if (mimeType === "application/pdf") return "📕";
+  if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return "📊";
+  if (mimeType.includes("document") || mimeType.includes("word")) return "📝";
+  if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) return "📽️";
+  if (mimeType.includes("zip") || mimeType.includes("archive")) return "📦";
 
-  return '📄';
+  return "📄";
 }
 
 const styles = StyleSheet.create({
   container: {
-    position: 'relative',
-  },
-  image: {
-    backgroundColor: '#f0f0f0',
+    position: "relative",
   },
+  image: {},
   filePreview: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 8,
   },
   fileIcon: {
@@ -204,7 +208,7 @@ const styles = StyleSheet.create({
   },
   fileName: {
     marginTop: 4,
-    textAlign: 'center',
+    textAlign: "center",
     fontSize: 10,
   },
 });