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

package/src/components/CategorySelector.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { View, Pressable } from 'react-native';
-import type { ViewStyle, StyleProp } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
-import type { FeedbackCategory } from '../types';
+import React from "react";
+import { View, Pressable } from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import type { FeedbackCategory } from "../types";
 
 export interface CategoryOption {
   value: FeedbackCategory;
@@ -14,10 +14,10 @@ export interface CategoryOption {
 }
 
 export const DEFAULT_CATEGORIES: CategoryOption[] = [
-  { value: 'bug', label: 'Bug', emoji: '🐛' },
-  { value: 'idea', label: 'Idea', emoji: '💡' },
-  { value: 'ux', label: 'UX', emoji: '✨' },
-  { value: 'other', label: 'Other', emoji: '💬' },
+  { value: "bug", label: "Bug", emoji: "🐛" },
+  { value: "idea", label: "Idea", emoji: "💡" },
+  { value: "ux", label: "UX", emoji: "✨" },
+  { value: "other", label: "Other", emoji: "💬" },
 ];
 
 export interface CategorySelectorProps {
@@ -100,11 +100,12 @@ export function CategorySelector({
   selectedChipStyle,
 }: CategorySelectorProps): React.JSX.Element {
   const theme = useHarkenTheme();
+  const { chip } = theme.components;
 
   const containerStyle: ViewStyle = {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.spacing.sm,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: chip.gap,
   };
 
   return (
@@ -123,22 +124,18 @@ export function CategorySelector({
         }
 
         const baseChipStyle: ViewStyle = {
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingVertical: theme.spacing.sm,
-          paddingHorizontal: theme.spacing.md,
-          borderRadius: theme.radii.full,
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: chip.paddingVertical,
+          paddingHorizontal: chip.paddingHorizontal,
+          borderRadius: chip.radius,
           borderWidth: 1,
-          borderColor: isSelected ? theme.colors.primary : theme.colors.border,
-          backgroundColor: isSelected
-            ? theme.colors.primary
-            : theme.colors.backgroundSecondary,
-          opacity: disabled ? 0.6 : 1,
+          borderColor: isSelected ? chip.borderSelected : chip.border,
+          backgroundColor: isSelected ? chip.backgroundSelected : chip.background,
+          opacity: disabled ? theme.opacity.disabled : 1,
         };
 
-        const textColor = isSelected
-          ? theme.colors.textOnPrimary
-          : theme.colors.text;
+        const textColor = isSelected ? chip.textSelected : chip.text;
 
         return (
           <Pressable
@@ -149,19 +146,16 @@ export function CategorySelector({
               baseChipStyle,
               chipStyle,
               isSelected && selectedChipStyle,
-              pressed && !disabled && {
-                opacity: 0.8,
-              },
+              pressed &&
+                !disabled && {
+                  opacity: theme.opacity.pressed,
+                },
             ]}
           >
             {category.icon ? (
-              <View style={{ marginRight: theme.spacing.xs }}>
-                {category.icon}
-              </View>
+              <View style={{ marginRight: theme.spacing.xs }}>{category.icon}</View>
             ) : category.emoji ? (
-              <ThemedText style={{ marginRight: theme.spacing.xs }}>
-                {category.emoji}
-              </ThemedText>
+              <ThemedText style={{ marginRight: theme.spacing.xs }}>{category.emoji}</ThemedText>
             ) : null}
             <ThemedText variant="label" color={textColor}>
               {category.label}

package/src/components/FeedbackForm.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useCallback } from 'react';
-import { View, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
-import { ThemedTextInput } from './ThemedTextInput';
-import { ThemedButton } from './ThemedButton';
-import { CategorySelector } from './CategorySelector';
-import type { CategoryOption } from './CategorySelector';
-import type { FeedbackCategory } from '../types';
+import React, { useState, useCallback } from "react";
+import { View, KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+import type { ViewStyle } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import { ThemedTextInput } from "./ThemedTextInput";
+import { ThemedButton } from "./ThemedButton";
+import { CategorySelector } from "./CategorySelector";
+import type { CategoryOption } from "./CategorySelector";
+import type { FeedbackCategory } from "../types";
 
 export interface FeedbackFormData {
   message: string;
@@ -59,10 +59,10 @@ export interface FeedbackFormProps {
 export function FeedbackForm({
   onSubmit,
   onCancel,
-  title = 'Send Feedback',
-  placeholder = 'What would you like to share?',
-  submitLabel = 'Submit',
-  cancelLabel = 'Cancel',
+  title = "Send Feedback",
+  placeholder = "What would you like to share?",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
   categories,
   requireCategory = false,
   minMessageLength = 1,
@@ -72,7 +72,7 @@ export function FeedbackForm({
 }: FeedbackFormProps): React.JSX.Element {
   const theme = useHarkenTheme();
 
-  const [message, setMessage] = useState(initialValues?.message ?? '');
+  const [message, setMessage] = useState(initialValues?.message ?? "");
   const [category, setCategory] = useState<FeedbackCategory | null>(
     initialValues?.category ?? null
   );
@@ -80,8 +80,7 @@ export function FeedbackForm({
 
   const trimmedMessage = message.trim();
   const isMessageValid =
-    trimmedMessage.length >= minMessageLength &&
-    trimmedMessage.length <= maxMessageLength;
+    trimmedMessage.length >= minMessageLength && trimmedMessage.length <= maxMessageLength;
   const isCategoryValid = !requireCategory || category !== null;
   const canSubmit = isMessageValid && isCategoryValid && !loading && !isSubmitting;
 
@@ -110,7 +109,7 @@ export function FeedbackForm({
   };
 
   const buttonRowStyle: ViewStyle = {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: theme.spacing.sm,
     marginTop: theme.spacing.md,
   };
@@ -120,13 +119,10 @@ export function FeedbackForm({
 
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
     >
-      <ScrollView
-        contentContainerStyle={{ flexGrow: 1 }}
-        keyboardShouldPersistTaps="handled"
-      >
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled">
         <View style={containerStyle}>
           {/* Title */}
           <View style={sectionStyle}>
@@ -135,12 +131,8 @@ export function FeedbackForm({
 
           {/* Category selector */}
           <View style={sectionStyle}>
-            <ThemedText
-              variant="label"
-              secondary
-              style={{ marginBottom: theme.spacing.sm }}
-            >
-              Category{requireCategory ? '' : ' (optional)'}
+            <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
+              Category{requireCategory ? "" : " (optional)"}
             </ThemedText>
             <CategorySelector
               value={category}
@@ -152,11 +144,7 @@ export function FeedbackForm({
 
           {/* Message input */}
           <View style={sectionStyle}>
-            <ThemedText
-              variant="label"
-              secondary
-              style={{ marginBottom: theme.spacing.sm }}
-            >
+            <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
               Message
             </ThemedText>
             <ThemedTextInput
@@ -178,7 +166,7 @@ export function FeedbackForm({
                     ? theme.colors.error
                     : theme.colors.textSecondary
                 }
-                style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}
+                style={{ marginTop: theme.spacing.xs, textAlign: "right" }}
               >
                 {characterCount}/{maxMessageLength}
               </ThemedText>

package/src/components/FeedbackSheet.tsx

@@ -1,22 +1,16 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  Alert,
-} from 'react-native';
-import type { ViewStyle } from 'react-native';
-import type { components } from '../types/index.js';
-import { useHarkenTheme, useFeedback } from '../hooks';
-import { ThemedText } from './ThemedText';
-import { ThemedTextInput } from './ThemedTextInput';
-import { ThemedButton } from './ThemedButton';
-import { CategorySelector, DEFAULT_CATEGORIES } from './CategorySelector';
-import type { CategoryOption } from './CategorySelector';
-import type { FeedbackCategory } from '../types';
+import React, { useState, useCallback } from "react";
+import { View, KeyboardAvoidingView, Platform, ScrollView, Alert } from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import type { components } from "../types/index.js";
+import { useHarkenTheme, useFeedback } from "../hooks";
+import { ThemedText } from "./ThemedText";
+import { ThemedTextInput } from "./ThemedTextInput";
+import { ThemedButton } from "./ThemedButton";
+import { CategorySelector, DEFAULT_CATEGORIES } from "./CategorySelector";
+import type { CategoryOption } from "./CategorySelector";
+import type { FeedbackCategory } from "../types";
 
-type FeedbackSubmissionResponse = components['schemas']['FeedbackSubmissionResponse'];
+type FeedbackSubmissionResponse = components["schemas"]["FeedbackSubmissionResponse"];
 
 export interface FeedbackSheetProps {
   /** Called when feedback is successfully submitted */
@@ -26,7 +20,7 @@ export interface FeedbackSheetProps {
   /** Called when user cancels/dismisses the form */
   onCancel?: () => void;
 
-  /** Title text */
+  /** Title text. Set to empty string to hide title section entirely. */
   title?: string;
   /** Placeholder text for message input */
   placeholder?: string;
@@ -52,10 +46,21 @@ export interface FeedbackSheetProps {
   /** Whether to clear form on success. @default true */
   clearOnSuccess?: boolean;
 
-  /** Container style override */
-  containerStyle?: ViewStyle;
-  /** Form content style override */
-  formStyle?: ViewStyle;
+  /**
+   * Layout mode for the container.
+   * - 'flex': Uses flex: 1 (default, requires parent with explicit height)
+   * - 'auto': Content determines height (for bottom sheet modal embedding)
+   */
+  layout?: "flex" | "auto";
+
+  /** Container style override (outer KeyboardAvoidingView) */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Content style override (inner ScrollView content) */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * @deprecated Use `contentStyle` instead
+   */
+  formStyle?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -70,11 +75,24 @@ export interface FeedbackSheetProps {
  *
  * For attachment support, import from '@harkenapp/sdk-react-native/attachments'.
  *
+ * Uses the following theme tokens:
+ * - `colors.formBackground` for background
+ * - `spacing.formPadding` for padding
+ * - `spacing.sectionGap` for section gaps
+ * - `radii.form` for border radius
+ *
  * @example
  * ```tsx
  * // Minimal usage
  * <FeedbackSheet onSuccess={() => navigation.goBack()} />
  *
+ * // For bottom sheet modal embedding
+ * <FeedbackSheet
+ *   layout="auto"
+ *   title=""
+ *   onSuccess={() => closeModal()}
+ * />
+ *
  * // With customization
  * <FeedbackSheet
  *   title="Report a Bug"
@@ -95,36 +113,37 @@ export function FeedbackSheet({
   onSuccess,
   onError,
   onCancel,
-  title = 'Send Feedback',
-  placeholder = 'What would you like to share?',
-  submitLabel = 'Submit',
-  cancelLabel = 'Cancel',
+  title = "Send Feedback",
+  placeholder = "What would you like to share?",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
   categories = DEFAULT_CATEGORIES,
   requireCategory = false,
   minMessageLength = 1,
   maxMessageLength = 5000,
-  successMessage = 'Thank you for your feedback!',
+  successMessage = "Thank you for your feedback!",
   showSuccessAlert = true,
   clearOnSuccess = true,
+  layout = "flex",
   containerStyle,
+  contentStyle,
   formStyle,
 }: FeedbackSheetProps): React.JSX.Element {
   const theme = useHarkenTheme();
-  const { submitFeedback, isSubmitting, error, clearError, isInitializing } =
-    useFeedback();
+  const { form } = theme.components;
+  const { submitFeedback, isSubmitting, error, clearError, isInitializing } = useFeedback();
 
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState("");
   const [category, setCategory] = useState<FeedbackCategory | null>(null);
 
   const trimmedMessage = message.trim();
   const isMessageValid =
-    trimmedMessage.length >= minMessageLength &&
-    trimmedMessage.length <= maxMessageLength;
+    trimmedMessage.length >= minMessageLength && trimmedMessage.length <= maxMessageLength;
   const isCategoryValid = !requireCategory || category !== null;
   const canSubmit = isMessageValid && isCategoryValid && !isSubmitting && !isInitializing;
 
   const resetForm = useCallback(() => {
-    setMessage('');
+    setMessage("");
     setCategory(null);
     clearError();
   }, [clearError]);
@@ -137,13 +156,13 @@ export function FeedbackSheet({
     try {
       const result = await submitFeedback({
         message: trimmedMessage,
-        category: category ?? 'other',
+        category: category ?? "other",
       });
 
       if (showSuccessAlert && successMessage) {
-        Alert.alert('Success', successMessage, [
+        Alert.alert("Success", successMessage, [
           {
-            text: 'OK',
+            text: "OK",
             onPress: () => {
               if (clearOnSuccess) {
                 resetForm();
@@ -160,8 +179,8 @@ export function FeedbackSheet({
       }
     } catch (e) {
       const errorMessage =
-        e instanceof Error ? e.message : 'Failed to submit feedback. Please try again.';
-      Alert.alert('Submission Failed', errorMessage);
+        e instanceof Error ? e.message : "Failed to submit feedback. Please try again.";
+      Alert.alert("Submission Failed", errorMessage);
       onError?.(e instanceof Error ? e : new Error(errorMessage));
     }
   }, [
@@ -184,21 +203,22 @@ export function FeedbackSheet({
   }, [resetForm, onCancel]);
 
   const baseContainerStyle: ViewStyle = {
-    flex: 1,
-    backgroundColor: theme.colors.background,
+    ...(layout === "flex" ? { flex: 1 } : {}),
+    backgroundColor: form.background,
+    borderRadius: form.radius,
   };
 
-  const contentStyle: ViewStyle = {
-    flexGrow: 1,
-    padding: theme.spacing.lg,
+  const scrollContentStyle: ViewStyle = {
+    ...(layout === "flex" ? { flexGrow: 1 } : {}),
+    padding: form.padding,
   };
 
   const sectionStyle: ViewStyle = {
-    marginBottom: theme.spacing.lg,
+    marginBottom: form.sectionGap,
   };
 
   const buttonRowStyle: ViewStyle = {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: theme.spacing.sm,
     marginTop: theme.spacing.md,
   };
@@ -206,9 +226,18 @@ export function FeedbackSheet({
   const characterCount = trimmedMessage.length;
   const showCharacterWarning = characterCount > maxMessageLength * 0.9;
 
+  // Support deprecated formStyle prop
+  const effectiveContentStyle = contentStyle ?? formStyle;
+
   if (isInitializing) {
     return (
-      <View style={[baseContainerStyle, containerStyle, { justifyContent: 'center', alignItems: 'center' }]}>
+      <View
+        style={[
+          baseContainerStyle,
+          containerStyle,
+          { justifyContent: "center", alignItems: "center" },
+        ]}
+      >
         <ThemedText variant="body" secondary>
           Initializing...
         </ThemedText>
@@ -218,26 +247,24 @@ export function FeedbackSheet({
 
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={[baseContainerStyle, containerStyle]}
     >
       <ScrollView
-        contentContainerStyle={[contentStyle, formStyle]}
+        contentContainerStyle={[scrollContentStyle, effectiveContentStyle]}
         keyboardShouldPersistTaps="handled"
       >
-        {/* Title */}
-        <View style={sectionStyle}>
-          <ThemedText variant="title">{title}</ThemedText>
-        </View>
+        {/* Title - only render if provided */}
+        {title ? (
+          <View style={sectionStyle}>
+            <ThemedText variant="title">{title}</ThemedText>
+          </View>
+        ) : null}
 
         {/* Category selector */}
         <View style={sectionStyle}>
-          <ThemedText
-            variant="label"
-            secondary
-            style={{ marginBottom: theme.spacing.sm }}
-          >
-            Category{requireCategory ? '' : ' (optional)'}
+          <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
+            Category{requireCategory ? "" : " (optional)"}
           </ThemedText>
           <CategorySelector
             value={category}
@@ -249,11 +276,7 @@ export function FeedbackSheet({
 
         {/* Message input */}
         <View style={sectionStyle}>
-          <ThemedText
-            variant="label"
-            secondary
-            style={{ marginBottom: theme.spacing.sm }}
-          >
+          <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
             Message
           </ThemedText>
           <ThemedTextInput
@@ -271,11 +294,9 @@ export function FeedbackSheet({
             <ThemedText
               variant="caption"
               color={
-                characterCount > maxMessageLength
-                  ? theme.colors.error
-                  : theme.colors.textSecondary
+                characterCount > maxMessageLength ? theme.colors.error : theme.colors.textSecondary
               }
-              style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}
+              style={{ marginTop: theme.spacing.xs, textAlign: "right" }}
             >
               {characterCount}/{maxMessageLength}
             </ThemedText>

package/src/components/ThemedButton.tsx

@@ -1,16 +1,12 @@
-import React from 'react';
-import {
-  Pressable,
-  ActivityIndicator,
-  StyleSheet,
-} from 'react-native';
-import type { PressableProps, ViewStyle, StyleProp } from 'react-native';
-import { useHarkenTheme } from '../hooks';
-import { ThemedText } from './ThemedText';
+import React from "react";
+import { Pressable, ActivityIndicator, StyleSheet } from "react-native";
+import type { PressableProps, ViewStyle, TextStyle, StyleProp } from "react-native";
+import { useHarkenTheme } from "../hooks";
+import { ThemedText } from "./ThemedText";
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+export type ButtonVariant = "primary" | "secondary" | "ghost";
 
-export interface ThemedButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+export interface ThemedButtonProps extends Omit<PressableProps, "children" | "style"> {
   /** Button text */
   title: string;
   /** Button variant */
@@ -24,36 +20,47 @@ export interface ThemedButtonProps extends Omit<PressableProps, 'children' | 'st
    * Note: Function styles are not supported; use static StyleProp<ViewStyle>.
    */
   style?: StyleProp<ViewStyle>;
+  /** Additional styles for the button text */
+  textStyle?: StyleProp<TextStyle>;
 }
 
 /**
  * Themed button component with Harken styling.
+ *
+ * Uses the following theme tokens:
+ * - `colors.buttonPrimary*` for primary variant
+ * - `colors.buttonSecondary*` for secondary variant
+ * - `colors.buttonGhostText` for ghost variant
+ * - `spacing.buttonPadding*` for padding
+ * - `radii.button` for border radius
+ * - `sizing.buttonMinHeight` for minimum height
+ * - `opacity.disabled` for disabled state
  */
 export function ThemedButton({
   title,
-  variant = 'primary',
+  variant = "primary",
   loading = false,
   fullWidth = false,
   disabled,
   style,
+  textStyle,
   ...props
 }: ThemedButtonProps): React.JSX.Element {
   const theme = useHarkenTheme();
+  const { button } = theme.components;
 
   const getBackgroundColor = (pressed: boolean): string => {
     if (disabled) {
-      return variant === 'primary'
-        ? theme.colors.border
-        : 'transparent';
+      return variant === "primary" ? theme.colors.border : "transparent";
     }
 
     switch (variant) {
-      case 'primary':
-        return pressed ? theme.colors.primaryPressed : theme.colors.primary;
-      case 'secondary':
-        return pressed ? theme.colors.border : theme.colors.backgroundSecondary;
-      case 'ghost':
-        return pressed ? theme.colors.backgroundSecondary : 'transparent';
+      case "primary":
+        return pressed ? button.primary.backgroundPressed : button.primary.background;
+      case "secondary":
+        return pressed ? theme.colors.border : button.secondary.background;
+      case "ghost":
+        return pressed ? theme.colors.surface : "transparent";
     }
   };
 
@@ -63,20 +70,21 @@ export function ThemedButton({
     }
 
     switch (variant) {
-      case 'primary':
-        return theme.colors.textOnPrimary;
-      case 'secondary':
-      case 'ghost':
-        return theme.colors.text;
+      case "primary":
+        return button.primary.text;
+      case "secondary":
+        return button.secondary.text;
+      case "ghost":
+        return button.ghost.text;
     }
   };
 
   const getBorderColor = (): string => {
     switch (variant) {
-      case 'secondary':
-        return theme.colors.border;
+      case "secondary":
+        return button.secondary.border;
       default:
-        return 'transparent';
+        return "transparent";
     }
   };
 
@@ -89,20 +97,20 @@ export function ThemedButton({
       style={({ pressed }) => {
         const baseStyle: ViewStyle = {
           backgroundColor: getBackgroundColor(pressed),
-          borderWidth: variant === 'secondary' ? 1 : 0,
+          borderWidth: variant === "secondary" ? 1 : 0,
           borderColor: getBorderColor(),
-          borderRadius: theme.radii.md,
-          paddingVertical: theme.spacing.sm + 4,
-          paddingHorizontal: theme.spacing.md,
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'row',
-          minHeight: 48,
-          opacity: disabled ? 0.6 : 1,
+          borderRadius: button.radius,
+          paddingVertical: button.paddingVertical + 4,
+          paddingHorizontal: button.paddingHorizontal,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          minHeight: button.minHeight,
+          opacity: disabled ? theme.opacity.disabled : 1,
         };
 
         if (fullWidth) {
-          baseStyle.width = '100%';
+          baseStyle.width = "100%";
         }
 
         return [baseStyle, flattenedStyle];
@@ -110,15 +118,9 @@ export function ThemedButton({
       {...props}
     >
       {loading ? (
-        <ActivityIndicator
-          color={getTextColor()}
-          size="small"
-        />
+        <ActivityIndicator color={getTextColor()} size="small" />
       ) : (
-        <ThemedText
-          variant="label"
-          color={getTextColor()}
-        >
+        <ThemedText variant="label" color={getTextColor()} style={textStyle}>
           {title}
         </ThemedText>
       )}