@compsych/mobile-ui 1.0.10 → 1.0.13

package/src/components/Slider/index.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   LayoutChangeEvent,
@@ -10,7 +16,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export interface SliderProps {
   /** Controlled value */
@@ -34,8 +40,6 @@ export interface SliderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
 // ── Layout constants ──────────────────────────────────────────────────────────
 const TRACK_HEIGHT = 8;
 const THUMB_SIZE = 24;
@@ -67,6 +71,8 @@ export function Slider({
   accessibilityLabel,
   style,
 }: SliderProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = useState<number>(
     defaultValue ?? min,
@@ -181,10 +187,69 @@ export function Slider({
         elevation: 1,
       };
 
+  // ── Token-derived styles ──────────────────────────────────────────────────────
+  const tokenStyles = useMemo(
+    () => ({
+      root: {
+        gap: dim.spacing.padding.sysPadding8,
+        alignSelf: 'stretch' as const,
+      },
+      label: {
+        color: cr.surface.surface.sysOnSurface,
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        letterSpacing: ts.labelMedium.sysTracking,
+        fontWeight: '400' as const,
+        includeFontPadding: false,
+      },
+      row: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: dim.spacing.padding.sysPadding8,
+      },
+      rangeLabel: {
+        color: cr.surface.surface.sysOnSurfaceVariant,
+        fontSize: ts.bodySmall.sysFontSize,
+        lineHeight: ts.bodySmall.sysLineHeight,
+        fontWeight: '400' as const,
+        includeFontPadding: false,
+        flexShrink: 0,
+      },
+      trackBg: {
+        position: 'absolute' as const,
+        top: TRACK_TOP,
+        left: 0,
+        right: 0,
+        height: TRACK_HEIGHT,
+        borderRadius: 9999,
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+      },
+      trackFill: {
+        position: 'absolute' as const,
+        top: TRACK_TOP,
+        left: 0,
+        height: TRACK_HEIGHT,
+        borderRadius: 9999,
+        backgroundColor: cr.accent.primary.sysPrimary,
+      },
+      thumb: {
+        position: 'absolute' as const,
+        top: THUMB_TOP,
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: 9999,
+        backgroundColor: cr.surface.surface.sysSurface,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      },
+    }),
+    [cr, dim, ts],
+  );
+
   // ── Render ────────────────────────────────────────────────────────────────────
   return (
     <View
-      style={[styles.root, style]}
+      style={[tokenStyles.root, style]}
       accessible
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel ?? label}
@@ -202,12 +267,12 @@ export function Slider({
       onBlur={() => setFocused(false)}
     >
       {/* ── Optional label ────────────────────────────────────────────────── */}
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && <Text style={tokenStyles.label}>{label}</Text>}
 
       {/* ── Slider row ────────────────────────────────────────────────────── */}
-      <View style={[styles.row, disabled && styles.rowDisabled]}>
+      <View style={[tokenStyles.row, disabled && styles.rowDisabled]}>
         {/* Min label */}
-        {showMinMax && <Text style={styles.rangeLabel}>{min}</Text>}
+        {showMinMax && <Text style={tokenStyles.rangeLabel}>{min}</Text>}
 
         {/* ── Track container — the gesture zone ──────────────────────────── */}
         <View
@@ -216,13 +281,13 @@ export function Slider({
           {...panResponder.panHandlers}
         >
           {/* Track background (unfilled — full width) */}
-          <View style={styles.trackBg} />
+          <View style={tokenStyles.trackBg} />
 
           {/* Track fill (filled — up to thumb center) */}
-          <View style={[styles.trackFill, { width: fillWidth }]} />
+          <View style={[tokenStyles.trackFill, { width: fillWidth }]} />
 
           {/* ── Thumb ─────────────────────────────────────────────────────── */}
-          <View style={[styles.thumb, { left: thumbLeft }, thumbShadow]}>
+          <View style={[tokenStyles.thumb, { left: thumbLeft }, thumbShadow]}>
             {/* Focus ring — 1px outside thumb (26×26 centered over 24×24) */}
             {focused && (
               <View
@@ -240,48 +305,17 @@ export function Slider({
         </View>
 
         {/* Max label */}
-        {showMinMax && <Text style={styles.rangeLabel}>{max}</Text>}
+        {showMinMax && <Text style={tokenStyles.rangeLabel}>{max}</Text>}
       </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  root: {
-    gap: dim.spacing.padding.sysPadding8,
-    alignSelf: 'stretch',
-  },
-
-  // ── Label ─────────────────────────────────────────────────────────────────
-  label: {
-    color: cr.surface.surface.sysOnSurface,
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    letterSpacing: ts.labelMedium.sysTracking,
-    fontWeight: '400',
-    includeFontPadding: false,
-  },
-
-  // ── Row ───────────────────────────────────────────────────────────────────
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: dim.spacing.padding.sysPadding8,
-  },
   rowDisabled: {
     opacity: 0.48,
   },
 
-  // ── Range labels ──────────────────────────────────────────────────────────
-  rangeLabel: {
-    color: cr.surface.surface.sysOnSurfaceVariant,
-    fontSize: ts.bodySmall.sysFontSize,
-    lineHeight: ts.bodySmall.sysLineHeight,
-    fontWeight: '400',
-    includeFontPadding: false,
-    flexShrink: 0,
-  },
-
   // ── Track container ───────────────────────────────────────────────────────
   trackContainer: {
     flex: 1,
@@ -291,40 +325,6 @@ const styles = StyleSheet.create({
     overflow: 'visible',
   },
 
-  // ── Track background ──────────────────────────────────────────────────────
-  trackBg: {
-    position: 'absolute',
-    top: TRACK_TOP,
-    left: 0,
-    right: 0,
-    height: TRACK_HEIGHT,
-    borderRadius: 9999,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-  },
-
-  // ── Track fill ────────────────────────────────────────────────────────────
-  trackFill: {
-    position: 'absolute',
-    top: TRACK_TOP,
-    left: 0,
-    height: TRACK_HEIGHT,
-    borderRadius: 9999,
-    backgroundColor: cr.accent.primary.sysPrimary,
-  },
-
-  // ── Thumb ─────────────────────────────────────────────────────────────────
-  thumb: {
-    position: 'absolute',
-    top: THUMB_TOP,
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
-    borderRadius: 9999,
-    backgroundColor: cr.surface.surface.sysSurface,
-    // Focus ring is absolutely positioned inside the thumb
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
   // ── Focus ring: 1px outside the 24×24 thumb → 26×26 ─────────────────────
   focusRing: {
     position: 'absolute',

package/src/components/Snackbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import {
   Animated,
@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 export type SnackbarVariant = 'filled' | 'outlined';
@@ -26,8 +26,6 @@ export interface SnackbarProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 export function Snackbar({
   visible,
   message,
@@ -37,6 +35,8 @@ export function Snackbar({
   onClose,
   style,
 }: SnackbarProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
   const translateY = useRef(new Animated.Value(100)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -73,9 +73,61 @@ export function Snackbar({
 
   const isFilled = variant === 'filled';
 
-  const containerStyle = isFilled
-    ? styles.containerFilled
-    : styles.containerOutlined;
+  const tokenStyles = useMemo(
+    () => ({
+      wrapper: {
+        position: 'absolute' as const,
+        bottom: dim.spacing.padding.sysPadding24,
+        left: dim.spacing.padding.sysPadding16,
+        right: dim.spacing.padding.sysPadding16,
+        alignItems: 'center' as const,
+      },
+      container: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        paddingVertical: dim.spacing.padding.sysPadding12,
+        paddingHorizontal: dim.spacing.padding.sysPadding16,
+        borderRadius: dim.borderRadius.sysRadiusMd,
+        gap: dim.spacing.padding.sysPadding16,
+        width: '100%' as const,
+        // Elevation/lv3: Figma radius=16 (primary), radius=6 (secondary). RN iOS
+        // supports one shadow; use the dominant layer. Android uses elevation.
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.16,
+        shadowRadius: 16,
+        elevation: 6,
+      },
+      containerFilled: {
+        backgroundColor: cr.accent.primary.sysPrimaryContainer,
+      },
+      containerOutlined: {
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderWidth: dim.borderWidth.sysStrokeThin,
+        borderColor: cr.outline.sysOutlineVariant,
+      },
+      actionSlot: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: dim.spacing.padding.sysPadding12,
+      },
+      actionButton: {
+        paddingVertical: dim.spacing.padding.sysPadding4,
+      },
+      closeButton: {
+        width: 24,
+        height: 24,
+        borderRadius: dim.borderRadius.sysRadiusFull,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      },
+    }),
+    [cr, dim],
+  );
+
+  const containerVariantStyle = isFilled
+    ? tokenStyles.containerFilled
+    : tokenStyles.containerOutlined;
   const labelColor = isFilled
     ? cr.accent.primary.sysOnPrimary
     : cr.surface.surface.sysOnSurface;
@@ -91,10 +143,14 @@ export function Snackbar({
 
   return (
     <Animated.View
-      style={[styles.wrapper, { opacity, transform: [{ translateY }] }, style]}
+      style={[
+        tokenStyles.wrapper,
+        { opacity, transform: [{ translateY }] },
+        style,
+      ]}
       pointerEvents={visible ? 'box-none' : 'none'}
     >
-      <View style={[styles.container, containerStyle]}>
+      <View style={[tokenStyles.container, containerVariantStyle]}>
         <BodyText
           variant="medium"
           color={labelColor}
@@ -104,18 +160,18 @@ export function Snackbar({
           {message}
         </BodyText>
 
-        <View style={styles.actionSlot}>
+        <View style={tokenStyles.actionSlot}>
           {actionLabel && onAction && (
             <Pressable
               onPress={onAction}
               accessibilityRole="button"
               accessibilityLabel={actionLabel}
               style={({ pressed }) => [
-                styles.actionButton,
+                tokenStyles.actionButton,
                 pressed && styles.pressed,
               ]}
             >
-              <BodyText variant="small" emphasized color={actionColor}>
+              <BodyText variant="labelMedium" color={actionColor}>
                 {actionLabel}
               </BodyText>
             </Pressable>
@@ -127,7 +183,7 @@ export function Snackbar({
               accessibilityRole="button"
               accessibilityLabel="Dismiss"
               style={({ pressed }) => [
-                styles.closeButton,
+                tokenStyles.closeButton,
                 { backgroundColor: closeBg },
                 pressed && styles.pressed,
               ]}
@@ -142,53 +198,9 @@ export function Snackbar({
 }
 
 const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    bottom: dim.spacing.padding.sysPadding24,
-    left: dim.spacing.padding.sysPadding16,
-    right: dim.spacing.padding.sysPadding16,
-    alignItems: 'center',
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: dim.spacing.padding.sysPadding12,
-    paddingHorizontal: dim.spacing.padding.sysPadding16,
-    borderRadius: dim.borderRadius.sysRadiusMd,
-    gap: dim.spacing.padding.sysPadding16,
-    width: '100%',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.12,
-    shadowRadius: 12,
-    elevation: 6,
-  },
-  containerFilled: {
-    backgroundColor: cr.accent.primary.sysPrimaryContainer,
-  },
-  containerOutlined: {
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-    borderColor: cr.outline.sysOutline,
-  },
   label: {
     flex: 1,
   },
-  actionSlot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: dim.spacing.padding.sysPadding12,
-  },
-  actionButton: {
-    paddingVertical: dim.spacing.padding.sysPadding4,
-  },
-  closeButton: {
-    width: 24,
-    height: 24,
-    borderRadius: dim.borderRadius.sysRadiusFull,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   pressed: {
     opacity: 0.7,
   },

package/src/components/Switch/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Animated,
@@ -9,7 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export interface SwitchProps {
   /** Controlled value. Omit to use internal state. */
@@ -23,17 +23,10 @@ export interface SwitchProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 // ── Layout constants ──────────────────────────────────────────────────────────
 const TRACK_W = 56;
 const TRACK_H = 32;
 const THUMB_SIZE = 24;
-const TRACK_PADDING = dim.spacing.padding.sysPadding4;
-
-// Thumb translateX: off=left edge, on=right edge
-const THUMB_OFF = TRACK_PADDING; // 4
-const THUMB_ON = TRACK_W - TRACK_PADDING - THUMB_SIZE; // 56 - 4 - 24 = 28
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -45,6 +38,14 @@ export function Switch({
   accessibilityLabel,
   style,
 }: SwitchProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
+  const trackPadding = useMemo(() => dim.spacing.padding.sysPadding4, [dim]);
+
+  // Thumb translateX: off=left edge, on=right edge
+  const thumbOff = trackPadding; // 4
+  const thumbOn = TRACK_W - trackPadding - THUMB_SIZE; // 56 - 4 - 24 = 28
+
   // Controlled vs uncontrolled
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = useState(defaultValue);
@@ -54,14 +55,14 @@ export function Switch({
 
   // ── Animation ──────────────────────────────────────────────────────────────
   const thumbAnim = useRef(
-    new Animated.Value(toggled ? THUMB_ON : THUMB_OFF),
+    new Animated.Value(toggled ? thumbOn : thumbOff),
   ).current;
   const bgAnim = useRef(new Animated.Value(toggled ? 1 : 0)).current;
 
   useEffect(() => {
     Animated.parallel([
       Animated.timing(thumbAnim, {
-        toValue: toggled ? THUMB_ON : THUMB_OFF,
+        toValue: toggled ? thumbOn : thumbOff,
         duration: 150,
         useNativeDriver: true,
       }),
@@ -137,6 +138,7 @@ export function Switch({
           style={[
             styles.thumb,
             {
+              top: trackPadding,
               backgroundColor: thumbBg,
               transform: [{ translateX: thumbAnim }],
             },
@@ -167,7 +169,6 @@ const styles = StyleSheet.create({
   },
   thumb: {
     position: 'absolute',
-    top: TRACK_PADDING,
     left: 0, // translateX drives actual X position
     width: THUMB_SIZE,
     height: THUMB_SIZE,

package/src/components/Tooltip/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type TooltipVariant = 'filled' | 'elevated';
 /**
@@ -24,8 +24,6 @@ export interface TooltipProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
 // ── Arrow dimensions ─────────────────────────────────────────────────────────
 const ARROW_BASE = 16; // px — wide axis
 const ARROW_HEIGHT = 6; // px — narrow axis
@@ -38,6 +36,8 @@ export function Tooltip({
   direction = 'none',
   style,
 }: TooltipProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
   const isFilled = variant === 'filled';
 
   const bg = isFilled

package/src/index.ts

@@ -131,6 +131,15 @@ export type {
   ActionSheetAction,
 } from './components/ActionSheet';
 
+export { ChatBubble } from './components/ChatBubble';
+export type {
+  ChatBubbleProps,
+  ChatBubbleVariant,
+} from './components/ChatBubble';
+
+export { ChatInput } from './components/ChatInput';
+export type { ChatInputProps, ChatAttachment } from './components/ChatInput';
+
 export { BodyText } from './components/BodyText';
 export type { BodyTextProps, BodyVariant } from './components/BodyText';
 
@@ -140,6 +149,10 @@ export type { HeaderTextProps, HeaderVariant } from './components/HeaderText';
 // Re-export tokens for consumers who need direct access
 export { sys } from './tokens';
 
+// Theme system — override the default GuidanceNow theme per-app or per-subtree
+export { ThemeProvider, useTheme, defaultTheme } from './theme';
+export type { ThemeProviderProps, Theme, ThemeOverride } from './theme';
+
 // Icons
 export {
   UserRoundIcon,

package/src/theme/ThemeContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { sys } from '../tokens';
+import type { Theme } from './types';
+
+/**
+ * Provides the active resolved theme to all components.
+ * Default value is the GuidanceNow theme so components render correctly
+ * even when no ThemeProvider is present in the tree.
+ */
+export const ThemeContext = createContext<Theme>(sys as unknown as Theme);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+
+import { ThemeContext } from './ThemeContext';
+import { mergeTheme } from './mergeTheme';
+import type { ThemeOverride } from './types';
+
+export interface ThemeProviderProps {
+  /**
+   * Optional partial theme override. Keys present here replace the
+   * corresponding GuidanceNow default values; all other tokens keep their
+   * defaults. Pass `undefined` (or omit this prop) to use the GuidanceNow
+   * theme unchanged.
+   */
+  theme?: ThemeOverride;
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps your application (or a subtree) and provides a resolved theme to all
+ * `@compsych/mobile-ui` components beneath it.
+ *
+ * @example — default GuidanceNow theme
+ * <ThemeProvider>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example — custom brand override
+ * <ThemeProvider theme={{ colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } } }}>
+ *   <App />
+ * </ThemeProvider>
+ */
+export function ThemeProvider({ theme, children }: ThemeProviderProps) {
+  const resolvedTheme = useMemo(() => mergeTheme(theme), [theme]);
+
+  return (
+    <ThemeContext.Provider value={resolvedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}