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

package/dist/components/FeedbackSheet.js

@@ -0,0 +1,215 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackSheet = FeedbackSheet;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const hooks_1 = require("../hooks");
+const ThemedText_1 = require("./ThemedText");
+const ThemedTextInput_1 = require("./ThemedTextInput");
+const ThemedButton_1 = require("./ThemedButton");
+const CategorySelector_1 = require("./CategorySelector");
+/**
+ * A batteries-included feedback form component.
+ *
+ * Unlike `FeedbackForm` which is a "dumb" UI component requiring manual
+ * wiring, `FeedbackSheet` handles everything internally:
+ * - API submission via `useFeedback` hook
+ * - Success/error alerts
+ * - Form state management
+ * - Keyboard handling
+ *
+ * For attachment support, import from '@harkenapp/sdk-react-native/attachments'.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage
+ * <FeedbackSheet onSuccess={() => navigation.goBack()} />
+ *
+ * // With customization
+ * <FeedbackSheet
+ *   title="Report a Bug"
+ *   requireCategory
+ *   categories={[
+ *     { value: 'crash', label: 'App Crash', icon: '💥' },
+ *     { value: 'visual', label: 'Visual Bug', icon: '👁️' },
+ *   ]}
+ *   onSuccess={(result) => {
+ *     analytics.track('feedback_submitted');
+ *     navigation.goBack();
+ *   }}
+ *   onCancel={() => navigation.goBack()}
+ * />
+ * ```
+ */
+function FeedbackSheet({ onSuccess, onError, onCancel, title = 'Send Feedback', placeholder = 'What would you like to share?', submitLabel = 'Submit', cancelLabel = 'Cancel', categories = CategorySelector_1.DEFAULT_CATEGORIES, requireCategory = false, minMessageLength = 1, maxMessageLength = 5000, successMessage = 'Thank you for your feedback!', showSuccessAlert = true, clearOnSuccess = true, containerStyle, formStyle, }) {
+    const theme = (0, hooks_1.useHarkenTheme)();
+    const { submitFeedback, isSubmitting, error, clearError, isInitializing } = (0, hooks_1.useFeedback)();
+    const [message, setMessage] = (0, react_1.useState)('');
+    const [category, setCategory] = (0, react_1.useState)(null);
+    const trimmedMessage = message.trim();
+    const isMessageValid = trimmedMessage.length >= minMessageLength &&
+        trimmedMessage.length <= maxMessageLength;
+    const isCategoryValid = !requireCategory || category !== null;
+    const canSubmit = isMessageValid && isCategoryValid && !isSubmitting && !isInitializing;
+    const resetForm = (0, react_1.useCallback)(() => {
+        setMessage('');
+        setCategory(null);
+        clearError();
+    }, [clearError]);
+    const handleSubmit = (0, react_1.useCallback)(async () => {
+        if (!canSubmit)
+            return;
+        clearError();
+        try {
+            const result = await submitFeedback({
+                message: trimmedMessage,
+                category: category ?? 'other',
+            });
+            if (showSuccessAlert && successMessage) {
+                react_native_1.Alert.alert('Success', successMessage, [
+                    {
+                        text: 'OK',
+                        onPress: () => {
+                            if (clearOnSuccess) {
+                                resetForm();
+                            }
+                            onSuccess?.(result);
+                        },
+                    },
+                ]);
+            }
+            else {
+                if (clearOnSuccess) {
+                    resetForm();
+                }
+                onSuccess?.(result);
+            }
+        }
+        catch (e) {
+            const errorMessage = e instanceof Error ? e.message : 'Failed to submit feedback. Please try again.';
+            react_native_1.Alert.alert('Submission Failed', errorMessage);
+            onError?.(e instanceof Error ? e : new Error(errorMessage));
+        }
+    }, [
+        canSubmit,
+        clearError,
+        submitFeedback,
+        trimmedMessage,
+        category,
+        showSuccessAlert,
+        successMessage,
+        clearOnSuccess,
+        resetForm,
+        onSuccess,
+        onError,
+    ]);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        resetForm();
+        onCancel?.();
+    }, [resetForm, onCancel]);
+    const baseContainerStyle = {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    };
+    const contentStyle = {
+        flexGrow: 1,
+        padding: theme.spacing.lg,
+    };
+    const sectionStyle = {
+        marginBottom: theme.spacing.lg,
+    };
+    const buttonRowStyle = {
+        flexDirection: 'row',
+        gap: theme.spacing.sm,
+        marginTop: theme.spacing.md,
+    };
+    const characterCount = trimmedMessage.length;
+    const showCharacterWarning = characterCount > maxMessageLength * 0.9;
+    if (isInitializing) {
+        return (<react_native_1.View style={[baseContainerStyle, containerStyle, { justifyContent: 'center', alignItems: 'center' }]}>
+        <ThemedText_1.ThemedText variant="body" secondary>
+          Initializing...
+        </ThemedText_1.ThemedText>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={[baseContainerStyle, containerStyle]}>
+      <react_native_1.ScrollView contentContainerStyle={[contentStyle, formStyle]} keyboardShouldPersistTaps="handled">
+        {/* Title */}
+        <react_native_1.View style={sectionStyle}>
+          <ThemedText_1.ThemedText variant="title">{title}</ThemedText_1.ThemedText>
+        </react_native_1.View>
+
+        {/* Category selector */}
+        <react_native_1.View style={sectionStyle}>
+          <ThemedText_1.ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
+            Category{requireCategory ? '' : ' (optional)'}
+          </ThemedText_1.ThemedText>
+          <CategorySelector_1.CategorySelector value={category} onChange={setCategory} categories={categories} disabled={isSubmitting}/>
+        </react_native_1.View>
+
+        {/* Message input */}
+        <react_native_1.View style={sectionStyle}>
+          <ThemedText_1.ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
+            Message
+          </ThemedText_1.ThemedText>
+          <ThemedTextInput_1.ThemedTextInput value={message} onChangeText={setMessage} placeholder={placeholder} multiline numberOfLines={4} textAlignVertical="top" editable={!isSubmitting} style={{ minHeight: 120 }} maxLength={maxMessageLength + 100}/>
+          {showCharacterWarning && (<ThemedText_1.ThemedText variant="caption" color={characterCount > maxMessageLength
+                ? theme.colors.error
+                : theme.colors.textSecondary} style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}>
+              {characterCount}/{maxMessageLength}
+            </ThemedText_1.ThemedText>)}
+        </react_native_1.View>
+
+        {/* Error display */}
+        {error && (<react_native_1.View style={{ marginBottom: theme.spacing.md }}>
+            <ThemedText_1.ThemedText variant="caption" color={theme.colors.error}>
+              {error.message}
+            </ThemedText_1.ThemedText>
+          </react_native_1.View>)}
+
+        {/* Buttons */}
+        <react_native_1.View style={buttonRowStyle}>
+          {onCancel && (<react_native_1.View style={{ flex: 1 }}>
+              <ThemedButton_1.ThemedButton title={cancelLabel} variant="secondary" onPress={handleCancel} disabled={isSubmitting} fullWidth/>
+            </react_native_1.View>)}
+          <react_native_1.View style={{ flex: onCancel ? 1 : undefined }}>
+            <ThemedButton_1.ThemedButton title={submitLabel} variant="primary" onPress={handleSubmit} disabled={!canSubmit} loading={isSubmitting} fullWidth={!!onCancel}/>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.ScrollView>
+    </react_native_1.KeyboardAvoidingView>);
+}
+//# sourceMappingURL=FeedbackSheet.js.map

package/dist/components/FeedbackSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackSheet.js","sourceRoot":"","sources":["../../src/components/FeedbackSheet.tsx"],"names":[],"mappings":"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"}

package/dist/components/ThemedButton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { PressableProps, ViewStyle, StyleProp } from 'react-native';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+export interface ThemedButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Button text */
+    title: string;
+    /** Button variant */
+    variant?: ButtonVariant;
+    /** Loading state */
+    loading?: boolean;
+    /** Full width button */
+    fullWidth?: boolean;
+    /**
+     * Additional styles for the button container.
+     * Note: Function styles are not supported; use static StyleProp<ViewStyle>.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Themed button component with Harken styling.
+ */
+export declare function ThemedButton({ title, variant, loading, fullWidth, disabled, style, ...props }: ThemedButtonProps): React.JSX.Element;
+//# sourceMappingURL=ThemedButton.d.ts.map

package/dist/components/ThemedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedButton.d.ts","sourceRoot":"","sources":["../../src/components/ThemedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,OAAe,EACf,SAAiB,EACjB,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuFvC"}

package/dist/components/ThemedButton.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemedButton = ThemedButton;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const hooks_1 = require("../hooks");
+const ThemedText_1 = require("./ThemedText");
+/**
+ * Themed button component with Harken styling.
+ */
+function ThemedButton({ title, variant = 'primary', loading = false, fullWidth = false, disabled, style, ...props }) {
+    const theme = (0, hooks_1.useHarkenTheme)();
+    const getBackgroundColor = (pressed) => {
+        if (disabled) {
+            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';
+        }
+    };
+    const getTextColor = () => {
+        if (disabled) {
+            return theme.colors.textPlaceholder;
+        }
+        switch (variant) {
+            case 'primary':
+                return theme.colors.textOnPrimary;
+            case 'secondary':
+            case 'ghost':
+                return theme.colors.text;
+        }
+    };
+    const getBorderColor = () => {
+        switch (variant) {
+            case 'secondary':
+                return theme.colors.border;
+            default:
+                return 'transparent';
+        }
+    };
+    // Flatten the style prop to handle arrays and registered styles
+    const flattenedStyle = style ? react_native_1.StyleSheet.flatten(style) : undefined;
+    return (<react_native_1.Pressable disabled={disabled || loading} style={({ pressed }) => {
+            const baseStyle = {
+                backgroundColor: getBackgroundColor(pressed),
+                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,
+            };
+            if (fullWidth) {
+                baseStyle.width = '100%';
+            }
+            return [baseStyle, flattenedStyle];
+        }} {...props}>
+      {loading ? (<react_native_1.ActivityIndicator color={getTextColor()} size="small"/>) : (<ThemedText_1.ThemedText variant="label" color={getTextColor()}>
+          {title}
+        </ThemedText_1.ThemedText>)}
+    </react_native_1.Pressable>);
+}
+//# sourceMappingURL=ThemedButton.js.map

package/dist/components/ThemedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedButton.js","sourceRoot":"","sources":["../../src/components/ThemedButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/ThemedText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TextProps } from 'react-native';
+export type TextVariant = 'title' | 'body' | 'label' | 'caption';
+export interface ThemedTextProps extends TextProps {
+    /** Text variant determining size and weight */
+    variant?: TextVariant;
+    /** Text color override (defaults to theme text color) */
+    color?: string;
+    /** Whether to use secondary text color */
+    secondary?: boolean;
+}
+/**
+ * Themed text component that uses Harken theme typography.
+ */
+export declare function ThemedText({ variant, color, secondary, style, children, ...props }: ThemedTextProps): React.JSX.Element;
+//# sourceMappingURL=ThemedText.d.ts.map

package/dist/components/ThemedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../src/components/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAGzD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+CAA+C;IAC/C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsCrC"}

package/dist/components/ThemedText.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemedText = ThemedText;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const hooks_1 = require("../hooks");
+/**
+ * Themed text component that uses Harken theme typography.
+ */
+function ThemedText({ variant = 'body', color, secondary = false, style, children, ...props }) {
+    const theme = (0, hooks_1.useHarkenTheme)();
+    const variantStyles = {
+        title: {
+            fontSize: theme.typography.titleSize,
+            lineHeight: theme.typography.titleSize * theme.typography.titleLineHeight,
+            fontWeight: theme.typography.titleWeight,
+            fontFamily: theme.typography.fontFamilyHeading ?? theme.typography.fontFamily,
+        },
+        body: {
+            fontSize: theme.typography.bodySize,
+            lineHeight: theme.typography.bodySize * theme.typography.bodyLineHeight,
+            fontWeight: theme.typography.bodyWeight,
+            fontFamily: theme.typography.fontFamily,
+        },
+        label: {
+            fontSize: theme.typography.labelSize,
+            fontWeight: theme.typography.labelWeight,
+            fontFamily: theme.typography.fontFamily,
+        },
+        caption: {
+            fontSize: theme.typography.captionSize,
+            fontWeight: theme.typography.captionWeight,
+            fontFamily: theme.typography.fontFamily,
+        },
+    };
+    const textColor = color ?? (secondary ? theme.colors.textSecondary : theme.colors.text);
+    return (<react_native_1.Text style={[variantStyles[variant], { color: textColor }, style]} {...props}>
+      {children}
+    </react_native_1.Text>);
+}
+//# sourceMappingURL=ThemedText.js.map

package/dist/components/ThemedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedText.js","sourceRoot":"","sources":["../../src/components/ThemedText.tsx"],"names":[],"mappings":";;;;;AAmBA,gCA6CC;AAhED,kDAA0B;AAC1B,+CAAoC;AAEpC,oCAA0C;AAa1C;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,MAAM,KAAK,GAAG,IAAA,sBAAc,GAAE,CAAC;IAE/B,MAAM,aAAa,GAAmC;QACpD,KAAK,EAAE;YACL,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;YACpC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe;YACzE,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;YACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,IAAI,KAAK,CAAC,UAAU,CAAC,UAAU;SAC9E;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;YACnC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc;YACvE,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;YACvC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;SACxC;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;YACpC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;YACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;SACxC;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;YACtC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa;YAC1C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;SACxC;KACF,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAExF,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7D,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/ThemedTextInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TextInputProps, ViewStyle, StyleProp } from 'react-native';
+export interface ThemedTextInputProps extends TextInputProps {
+    /** Error state */
+    error?: boolean;
+    /** Container style override */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * Themed text input component with Harken styling.
+ */
+export declare function ThemedTextInput({ error, containerStyle, style, onFocus, onBlur, ...props }: ThemedTextInputProps): React.JSX.Element;
+//# sourceMappingURL=ThemedTextInput.d.ts.map

package/dist/components/ThemedTextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedTextInput.d.ts","sourceRoot":"","sources":["../../src/components/ThemedTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAa,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0C1C"}

package/dist/components/ThemedTextInput.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemedTextInput = ThemedTextInput;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const hooks_1 = require("../hooks");
+/**
+ * Themed text input component with Harken styling.
+ */
+function ThemedTextInput({ error = false, containerStyle, style, onFocus, onBlur, ...props }) {
+    const theme = (0, hooks_1.useHarkenTheme)();
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const getBorderColor = () => {
+        if (error)
+            return theme.colors.error;
+        if (isFocused)
+            return theme.colors.borderFocused;
+        return theme.colors.border;
+    };
+    const inputStyle = {
+        fontSize: theme.typography.bodySize,
+        fontFamily: theme.typography.fontFamily,
+        color: theme.colors.text,
+        padding: theme.spacing.md,
+        minHeight: 44,
+    };
+    const containerStyles = {
+        backgroundColor: theme.colors.backgroundSecondary,
+        borderWidth: 1,
+        borderColor: getBorderColor(),
+        borderRadius: theme.radii.md,
+    };
+    return (<react_native_1.View style={[containerStyles, containerStyle]}>
+      <react_native_1.TextInput style={[inputStyle, style]} placeholderTextColor={theme.colors.textPlaceholder} onFocus={(e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+        }} onBlur={(e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+        }} {...props}/>
+    </react_native_1.View>);
+}
+//# sourceMappingURL=ThemedTextInput.js.map

package/dist/components/ThemedTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedTextInput.js","sourceRoot":"","sources":["../../src/components/ThemedTextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,0CAiDC;AAhED,+CAAwC;AACxC,+CAA+C;AAE/C,oCAA0C;AAS1C;;GAEG;AACH,SAAgB,eAAe,CAAC,EAC9B,KAAK,GAAG,KAAK,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACa;IACrB,MAAM,KAAK,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACrC,IAAI,SAAS;YAAE,OAAO,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACjD,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAc;QAC5B,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACnC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;QACvC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACxB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACzB,SAAS,EAAE,EAAE;KACd,CAAC;IAEF,MAAM,eAAe,GAAc;QACjC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,mBAAmB;QACjD,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,cAAc,EAAE;QAC7B,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;KAC7B,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAC7C;MAAA,CAAC,wBAAS,CACR,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAC3B,oBAAoB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CACnD,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC,CAAC,CACF,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,EAEd;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/UploadStatusOverlay.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import { UploadPhase } from '../domain';
+/**
+ * Customizable labels for upload status states.
+ */
+export interface UploadStatusLabels {
+    /** Label for retry button (default: "Retry") */
+    retry?: string;
+    /** Label for remove/cancel button (default: "Remove") */
+    remove?: string;
+    /** Label for cancel during upload (default: "Cancel") */
+    cancel?: string;
+    /** Label while confirming (default: "Confirming...") */
+    confirming?: string;
+    /** Label while queued (default: "Waiting...") */
+    waiting?: string;
+    /** Default error message (default: "Upload failed") */
+    uploadFailed?: string;
+}
+export interface UploadStatusOverlayProps {
+    /** Current upload phase */
+    phase: UploadPhase;
+    /** Upload progress (0.0 - 1.0) */
+    progress: number;
+    /** Error message if failed */
+    error?: string;
+    /** Callback when retry is pressed */
+    onRetry?: () => void;
+    /** Callback when remove/cancel is pressed */
+    onRemove?: () => void;
+    /** Additional container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom labels for status text */
+    labels?: UploadStatusLabels;
+    /** Custom progress renderer */
+    renderProgress?: (progress: number) => React.ReactNode;
+    /** Custom error renderer */
+    renderError?: (error: string, onRetry?: () => void, onRemove?: () => void) => React.ReactNode;
+    /** Custom success/completed renderer */
+    renderSuccess?: (onRemove?: () => void) => React.ReactNode;
+}
+/**
+ * Overlay component showing upload status on attachments.
+ *
+ * Shows:
+ * - Progress bar during upload
+ * - Spinner during confirmation
+ * - Checkmark when complete
+ * - Error with retry button when failed
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UploadStatusOverlay
+ *   phase={attachment.phase}
+ *   progress={attachment.progress}
+ *   onRetry={() => retryAttachment(attachment.attachmentId)}
+ *   onRemove={() => removeAttachment(attachment.attachmentId)}
+ * />
+ *
+ * // With custom labels
+ * <UploadStatusOverlay
+ *   phase={phase}
+ *   progress={progress}
+ *   labels={{
+ *     retry: 'Try Again',
+ *     remove: 'Delete',
+ *     confirming: 'Processing...',
+ *   }}
+ * />
+ *
+ * // With custom progress renderer
+ * <UploadStatusOverlay
+ *   phase={phase}
+ *   progress={progress}
+ *   renderProgress={(p) => <CustomProgressBar value={p} />}
+ * />
+ * ```
+ */
+export declare function UploadStatusOverlay({ phase, progress, error, onRetry, onRemove, style, labels, renderProgress, renderError, renderSuccess, }: UploadStatusOverlayProps): React.JSX.Element | null;
+//# sourceMappingURL=UploadStatusOverlay.d.ts.map

package/dist/components/UploadStatusOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadStatusOverlay.d.ts","sourceRoot":"","sources":["../../src/components/UploadStatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,wBAAwB;IACvC,2BAA2B;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACvD,4BAA4B;IAC5B,WAAW,CAAC,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,MAAM,IAAI,EACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,KAClB,KAAK,CAAC,SAAS,CAAC;IACrB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,aAAa,GACd,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA6OrD"}