@crafter/rn-ai-elements 0.0.1

package/src/theme/defaultTheme.ts

@@ -0,0 +1,93 @@
+import type { AIElementsTheme } from './tokens';
+
+const sharedTokens: Pick<AIElementsTheme, 'spacing' | 'radius' | 'typography'> = {
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    '2xl': 32,
+  },
+  radius: {
+    sm: 6,
+    md: 10,
+    lg: 16,
+    full: 9999,
+  },
+  typography: {
+    fontFamily: 'System',
+    monoFontFamily: 'monospace',
+    fontSize: {
+      xs: 11,
+      sm: 13,
+      md: 15,
+      lg: 17,
+      xl: 20,
+      '2xl': 24,
+    },
+    lineHeight: {
+      tight: 1.25,
+      normal: 1.5,
+      relaxed: 1.75,
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+  },
+};
+
+export const lightTheme: AIElementsTheme = {
+  ...sharedTokens,
+  dark: false,
+  colors: {
+    primary: '#18181B',
+    primaryForeground: '#FAFAFA',
+    secondary: '#F4F4F5',
+    secondaryForeground: '#18181B',
+    background: '#FFFFFF',
+    foreground: '#09090B',
+    muted: '#F4F4F5',
+    mutedForeground: '#71717A',
+    card: '#FFFFFF',
+    cardForeground: '#09090B',
+    border: '#E4E4E7',
+    destructive: '#EF4444',
+    destructiveForeground: '#FAFAFA',
+    success: '#22C55E',
+    successForeground: '#FAFAFA',
+    warning: '#F59E0B',
+    warningForeground: '#18181B',
+    accent: '#F4F4F5',
+    accentForeground: '#18181B',
+  },
+};
+
+export const darkTheme: AIElementsTheme = {
+  ...sharedTokens,
+  dark: true,
+  colors: {
+    primary: '#FAFAFA',
+    primaryForeground: '#18181B',
+    secondary: '#27272A',
+    secondaryForeground: '#FAFAFA',
+    background: '#09090B',
+    foreground: '#FAFAFA',
+    muted: '#27272A',
+    mutedForeground: '#A1A1AA',
+    card: '#09090B',
+    cardForeground: '#FAFAFA',
+    border: '#27272A',
+    destructive: '#DC2626',
+    destructiveForeground: '#FAFAFA',
+    success: '#16A34A',
+    successForeground: '#FAFAFA',
+    warning: '#D97706',
+    warningForeground: '#FAFAFA',
+    accent: '#27272A',
+    accentForeground: '#FAFAFA',
+  },
+};

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { AIElementsProvider, useAIElementsTheme } from './ThemeProvider';
+export type { AIElementsProviderProps, ColorSchemeMode } from './ThemeProvider';
+export type { AIElementsTheme, ColorTokens, SpacingTokens, RadiusTokens, TypographyTokens } from './tokens';
+export { lightTheme, darkTheme } from './defaultTheme';

package/src/theme/tokens.ts

@@ -0,0 +1,69 @@
+export interface ColorTokens {
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  background: string;
+  foreground: string;
+  muted: string;
+  mutedForeground: string;
+  card: string;
+  cardForeground: string;
+  border: string;
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  accent: string;
+  accentForeground: string;
+}
+
+export interface SpacingTokens {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  '2xl': number;
+}
+
+export interface RadiusTokens {
+  sm: number;
+  md: number;
+  lg: number;
+  full: number;
+}
+
+export interface TypographyTokens {
+  fontFamily: string;
+  monoFontFamily: string;
+  fontSize: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+  };
+  lineHeight: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+  };
+  fontWeight: {
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+  };
+}
+
+export interface AIElementsTheme {
+  colors: ColorTokens;
+  spacing: SpacingTokens;
+  radius: RadiusTokens;
+  typography: TypographyTokens;
+  dark: boolean;
+}

package/src/types.d.ts

@@ -0,0 +1,71 @@
+// ---------------------------------------------------------------------------
+// Ambient module declarations for untyped peer dependencies.
+// ---------------------------------------------------------------------------
+//
+// NOTE: the previous version of this file ALSO shadowed `lucide-react-native`
+// with a manual enumeration of a subset of icons. That was written before
+// lucide shipped proper types, and it silently broke any icon we hadn't
+// listed (the listed icons took precedence via TypeScript's module
+// augmentation rules, and unlisted ones failed to resolve entirely).
+// Deleting the lucide block lets the real package types flow through. If
+// you see "Module has no exported member 'X'" from lucide, add the icon
+// to the actual lucide-react-native package, not here.
+// ---------------------------------------------------------------------------
+
+declare module 'react-native-markdown-display' {
+  import { ComponentType } from 'react';
+  import { TextStyle, ViewStyle, ImageStyle } from 'react-native';
+
+  type MarkdownStyle = {
+    body?: TextStyle;
+    heading1?: TextStyle;
+    heading2?: TextStyle;
+    heading3?: TextStyle;
+    heading4?: TextStyle;
+    heading5?: TextStyle;
+    heading6?: TextStyle;
+    hr?: ViewStyle;
+    strong?: TextStyle;
+    em?: TextStyle;
+    s?: TextStyle;
+    blockquote?: ViewStyle;
+    bullet_list?: ViewStyle;
+    ordered_list?: ViewStyle;
+    list_item?: ViewStyle;
+    bullet_list_icon?: TextStyle;
+    ordered_list_icon?: TextStyle;
+    code_inline?: TextStyle;
+    code_block?: TextStyle;
+    fence?: TextStyle;
+    table?: ViewStyle;
+    thead?: ViewStyle;
+    tbody?: ViewStyle;
+    th?: ViewStyle;
+    tr?: ViewStyle;
+    td?: ViewStyle;
+    link?: TextStyle;
+    blocklink?: ViewStyle;
+    image?: ImageStyle;
+    text?: TextStyle;
+    textgroup?: ViewStyle;
+    paragraph?: ViewStyle;
+    hardbreak?: ViewStyle;
+    softbreak?: ViewStyle;
+    pre?: ViewStyle;
+    inline?: ViewStyle;
+    span?: ViewStyle;
+    [key: string]: any;
+  };
+
+  interface MarkdownProps {
+    children: string;
+    style?: MarkdownStyle;
+    mergeStyle?: boolean;
+    rules?: Record<string, any>;
+    onLinkPress?: (url: string) => boolean;
+    debugPrintTree?: boolean;
+  }
+
+  const Markdown: ComponentType<MarkdownProps>;
+  export default Markdown;
+}

package/src/voice/index.ts

@@ -0,0 +1,15 @@
+// ---------------------------------------------------------------------------
+// @crafter/rn-ai-elements/voice — speech-recognition hook
+// ---------------------------------------------------------------------------
+//
+// This subpath export exists so consumers who want voice input install
+// `expo-speech-recognition` themselves (it's an optional peer dep) and
+// import from `@crafter/rn-ai-elements/voice`. Consumers who don't want
+// voice input never trigger the import and don't need the peer dep.
+// ---------------------------------------------------------------------------
+
+export { useSpeechRecognition } from './useSpeechRecognition';
+export type {
+  UseSpeechRecognitionOptions,
+  UseSpeechRecognitionReturn,
+} from './useSpeechRecognition';

package/src/voice/useSpeechRecognition.ts

@@ -0,0 +1,230 @@
+import { useCallback, useRef, useState } from 'react';
+import {
+  ExpoSpeechRecognitionModule,
+  useSpeechRecognitionEvent,
+  type ExpoSpeechRecognitionErrorCode,
+  type ExpoSpeechRecognitionOptions,
+} from 'expo-speech-recognition';
+
+// ---------------------------------------------------------------------------
+// useSpeechRecognition — React wrapper around ExpoSpeechRecognitionModule
+// ---------------------------------------------------------------------------
+//
+// Wraps the imperative `ExpoSpeechRecognitionModule.start / stop / abort`
+// API with React state so a component can just read `isListening` +
+// `transcript` and call `start()` / `stop()` / `toggle()`. Handles:
+//
+//  - Permission request + gating (asks once, then uses the cached result)
+//  - Transcript accumulation across interim and final results
+//  - Automatic cleanup if the component unmounts mid-recognition
+//  - Error surfacing as a discriminated `error` state
+//
+// **Peer dependency:** this hook imports from `expo-speech-recognition`,
+// which is declared as an **optional** peer dependency of
+// `@crafter/rn-ai-elements`. Consumers who don't want voice input don't
+// have to install it — they just don't import from
+// `@crafter/rn-ai-elements/voice`. Consumers who do want voice input
+// install `expo-speech-recognition` themselves, add its config plugin to
+// `app.json`, and rebuild the native app.
+//
+// Intentionally minimal: no language picker, no contextual biasing, no
+// audio persistence. Covers the common case of "tap mic, speak, text
+// appears in the input field" and nothing more — add config props later
+// if a consumer needs them.
+// ---------------------------------------------------------------------------
+
+export interface UseSpeechRecognitionOptions {
+  /** BCP-47 locale tag for recognition. Default `'en-US'`. */
+  lang?: string;
+  /**
+   * Emit interim (partial) results as the user speaks. Default `true` —
+   * gives a ChatGPT-style live transcription feel.
+   */
+  interimResults?: boolean;
+  /**
+   * Keep recognizing after a pause instead of auto-stopping on silence.
+   * Default `false` — the user typically taps-to-stop anyway, and
+   * continuous mode has caveats on Android 12-.
+   */
+  continuous?: boolean;
+  /**
+   * Insert punctuation into the transcript automatically. Default `true`
+   * — matches the feel of iOS's built-in dictation.
+   */
+  addsPunctuation?: boolean;
+  /**
+   * Called when a final transcript is available. Useful for auto-submit
+   * flows; the transcript is also available via the `transcript` state.
+   */
+  onFinalResult?: (transcript: string) => void;
+}
+
+export interface UseSpeechRecognitionReturn {
+  /** True while the recognizer is actively listening. */
+  isListening: boolean;
+  /**
+   * The current transcript — updates live with interim results while
+   * `isListening`, then settles on the final transcript when recognition
+   * stops. Cleared by `reset()` or by calling `start()` again.
+   */
+  transcript: string;
+  /** Last error from the recognizer, or `null` if nothing has gone wrong. */
+  error: { code: ExpoSpeechRecognitionErrorCode; message: string } | null;
+  /** Request permissions (if needed) and start recognition. */
+  start: () => Promise<void>;
+  /** Stop recognition — final result will be delivered before isListening flips. */
+  stop: () => void;
+  /** Shortcut: start if idle, stop if listening. Most common press handler. */
+  toggle: () => Promise<void>;
+  /** Clear the transcript and reset the error state. */
+  reset: () => void;
+}
+
+const DEFAULT_LANG = 'en-US';
+
+/**
+ * React hook wrapping `expo-speech-recognition` for chat-style voice input.
+ *
+ * @example
+ * ```tsx
+ * import { useSpeechRecognition } from '@crafter/rn-ai-elements/voice';
+ *
+ * const { isListening, transcript, toggle } = useSpeechRecognition({
+ *   onFinalResult: (text) => console.log('final:', text),
+ * });
+ *
+ * // Pipe transcript into your input state
+ * useEffect(() => {
+ *   if (transcript) setInput(transcript);
+ * }, [transcript]);
+ *
+ * // Wire the mic button
+ * <PromptInput
+ *   value={input}
+ *   onChangeText={setInput}
+ *   isListening={isListening}
+ *   onMicPress={toggle}
+ *   ...
+ * />
+ * ```
+ */
+export function useSpeechRecognition(
+  options: UseSpeechRecognitionOptions = {},
+): UseSpeechRecognitionReturn {
+  const {
+    lang = DEFAULT_LANG,
+    interimResults = true,
+    continuous = false,
+    addsPunctuation = true,
+    onFinalResult,
+  } = options;
+
+  const [isListening, setIsListening] = useState(false);
+  const [transcript, setTranscript] = useState('');
+  const [error, setError] = useState<UseSpeechRecognitionReturn['error']>(null);
+
+  // Keep the latest onFinalResult in a ref so consumers don't have to
+  // memoize it to avoid re-registering listeners.
+  const onFinalResultRef = useRef(onFinalResult);
+  onFinalResultRef.current = onFinalResult;
+
+  // --- Native event listeners (auto-cleanup on unmount) -------------------
+
+  useSpeechRecognitionEvent('start', () => {
+    setIsListening(true);
+    setError(null);
+  });
+
+  useSpeechRecognitionEvent('end', () => {
+    setIsListening(false);
+  });
+
+  useSpeechRecognitionEvent('result', (event) => {
+    // `event.results` is an array of alternatives; the first entry is the
+    // best transcript per the platform's ranking. We only render that one.
+    const best = event.results[0]?.transcript ?? '';
+    setTranscript(best);
+
+    if (event.isFinal) {
+      onFinalResultRef.current?.(best);
+    }
+  });
+
+  useSpeechRecognitionEvent('error', (event) => {
+    // `no-speech` is a soft "nothing was said" signal, not a hard error —
+    // it still fires `end` afterwards, so just surface it quietly.
+    setError({ code: event.error, message: event.message });
+  });
+
+  // --- Control methods -----------------------------------------------------
+
+  const start = useCallback(async () => {
+    // Check current permissions first, only prompt if they're missing —
+    // requesting every time is jarring and will hit the dialog dismissal
+    // cap on iOS.
+    const current = await ExpoSpeechRecognitionModule.getPermissionsAsync();
+    if (!current.granted) {
+      const requested =
+        await ExpoSpeechRecognitionModule.requestPermissionsAsync();
+      if (!requested.granted) {
+        setError({
+          code: 'not-allowed',
+          message:
+            'Speech recognition permission was denied. Enable it in Settings to use voice input.',
+        });
+        return;
+      }
+    }
+
+    // Fresh run → clear any stale transcript/error from the previous turn.
+    setTranscript('');
+    setError(null);
+
+    const recognitionOptions: ExpoSpeechRecognitionOptions = {
+      lang,
+      interimResults,
+      continuous,
+      addsPunctuation,
+    };
+
+    try {
+      ExpoSpeechRecognitionModule.start(recognitionOptions);
+    } catch (err) {
+      setError({
+        code: 'client',
+        message: err instanceof Error ? err.message : String(err),
+      });
+    }
+  }, [lang, interimResults, continuous, addsPunctuation]);
+
+  const stop = useCallback(() => {
+    try {
+      ExpoSpeechRecognitionModule.stop();
+    } catch {
+      // If stop is called while not listening it's a no-op — swallow.
+    }
+  }, []);
+
+  const toggle = useCallback(async () => {
+    if (isListening) {
+      stop();
+    } else {
+      await start();
+    }
+  }, [isListening, start, stop]);
+
+  const reset = useCallback(() => {
+    setTranscript('');
+    setError(null);
+  }, []);
+
+  return {
+    isListening,
+    transcript,
+    error,
+    start,
+    stop,
+    toggle,
+    reset,
+  };
+}