@planningcenter/chat-react-native 3.32.1-rc.1 → 3.33.0

package/build/screens/avatar_picker/avatar_picker_screen.js

@@ -0,0 +1,193 @@
+import { StackActions, useNavigation } from '@react-navigation/native';
+import React, { useCallback, useReducer } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { ConversationAvatar } from '../../components/display/conversation_avatar';
+import { Tabs } from '../../components/display/tabs';
+import { Text } from '../../components/display/text';
+import { coerceColorKey } from '../../components/display/utils/avatar_gradient_colors';
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet';
+import { useTheme } from '../../hooks';
+import { useConversation } from '../../hooks/use_conversation';
+import { useConversationAvatarUpdate, } from '../../hooks/use_conversation_avatar_update';
+import { useFontScale } from '../../hooks/use_font_scale';
+import { avatarPickerReducer, initAvatarPickerState, initAvatarPickerStateFromPayload, initEmptyAvatarPickerState, } from './avatar_picker_state';
+import { AvatarPreview } from './avatar_preview';
+import { ColorPicker } from './color_picker';
+import { EmojiTab } from './emoji_tab';
+import { IconGrid } from './icon_grid';
+import { UploadTab } from './upload_tab';
+export const AvatarPickerScreenOptions = getFormSheetScreenOptions({
+    headerTitle: 'Update avatar',
+    sheetAllowedDetents: Platform.select({
+        android: [0.94],
+        default: [1],
+    }),
+});
+export const AvatarPickerCreateScreenOptions = getFormSheetScreenOptions({
+    headerTitle: 'Choose avatar',
+    sheetAllowedDetents: Platform.select({
+        android: [0.94],
+        default: [1],
+    }),
+});
+const TABS = ['icon', 'emoji', 'upload'];
+const TAB_LABELS = {
+    icon: 'Icon',
+    emoji: 'Emoji',
+    upload: 'Upload',
+};
+export function AvatarPickerScreen({ route }) {
+    const { conversation_id, source_params, avatar_selection } = route.params;
+    if (conversation_id) {
+        return <EditModeContent conversationId={conversation_id}/>;
+    }
+    return <CreateModeContent sourceParams={source_params} existingSelection={avatar_selection}/>;
+}
+function EditModeContent({ conversationId }) {
+    const navigation = useNavigation();
+    const { data: conversation } = useConversation({ conversation_id: conversationId });
+    const mutation = useConversationAvatarUpdate({ conversationId });
+    const [state, dispatch] = useReducer(avatarPickerReducer, conversation, initAvatarPickerState);
+    const hasAvatar = state.selectedType !== null;
+    const handleDone = useCallback(() => {
+        if (!state.isDirty) {
+            navigation.goBack();
+            return;
+        }
+        const payload = buildPayload(state);
+        if (payload) {
+            mutation.mutate(payload);
+        }
+        navigation.goBack();
+    }, [state, mutation, navigation]);
+    const handleRemove = useCallback(() => {
+        mutation.mutate({ kind: 'clear' }, { onSuccess: () => dispatch({ type: 'CLEAR' }) });
+    }, [mutation, dispatch]);
+    return (<AvatarPickerFormSheet state={state} dispatch={dispatch} headerTitle="Update avatar" headerActions={<>
+          {hasAvatar && (<FormSheet.HeaderTextButton onPress={handleRemove} appearance="danger">
+              Remove
+            </FormSheet.HeaderTextButton>)}
+          <FormSheet.HeaderTextButton onPress={handleDone} disabled={mutation.isPending}>
+            Done
+          </FormSheet.HeaderTextButton>
+        </>} fallbackPreview={<ConversationAvatar conversation={conversation} size="2xl"/>}/>);
+}
+function CreateModeContent({ sourceParams, existingSelection }) {
+    const navigation = useNavigation();
+    const [state, dispatch] = useReducer(avatarPickerReducer, existingSelection, selection => selection ? initAvatarPickerStateFromPayload(selection) : initEmptyAvatarPickerState());
+    const handleDone = useCallback(() => {
+        if (!state.isDirty) {
+            navigation.goBack();
+            return;
+        }
+        const payload = buildPayload(state);
+        if (payload) {
+            navigation.dispatch(StackActions.popTo('ConversationNew', { ...sourceParams, avatar_selection: payload }));
+        }
+        else {
+            navigation.goBack();
+        }
+    }, [state, navigation, sourceParams]);
+    return (<AvatarPickerFormSheet state={state} dispatch={dispatch} headerTitle="Choose avatar" headerActions={<FormSheet.HeaderTextButton onPress={handleDone}>Done</FormSheet.HeaderTextButton>} fallbackPreview={<EmptyAvatarPlaceholder />}/>);
+}
+function AvatarPickerFormSheet({ state, dispatch, headerTitle, headerActions, fallbackPreview, }) {
+    const styles = useStyles();
+    return (<FormSheet.Root style={styles.formSheetRoot} contentStyle={styles.formSheetContent}>
+      <FormSheet.Header>
+        <FormSheet.HeaderTitle>{headerTitle}</FormSheet.HeaderTitle>
+        <FormSheet.HeaderActions>{headerActions}</FormSheet.HeaderActions>
+      </FormSheet.Header>
+
+      <AvatarPreview state={state} fallback={fallbackPreview}/>
+
+      <Tabs data={TABS} activeTab={state.activeTab} onTabPress={tab => dispatch({ type: 'SELECT_TAB', payload: tab })} renderItem={({ item }) => (<Text style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}>
+            {TAB_LABELS[item]}
+          </Text>)} style={styles.tabs}/>
+
+      <View style={styles.body}>
+        {state.activeTab === 'icon' && (<IconGrid selectedIconKey={state.selectedType === 'icon' ? state.selectedKey : null} onIconSelect={iconKey => dispatch({ type: 'SELECT_ICON', payload: iconKey })}/>)}
+        {state.activeTab === 'emoji' && (<EmojiTab onEmojiSelect={emoji => dispatch({ type: 'SELECT_EMOJI', payload: emoji })}/>)}
+        {state.activeTab === 'upload' && (<UploadTab imagePreviewUri={state.imagePreviewUri} onImageSelect={asset => dispatch({ type: 'SET_IMAGE', payload: asset })}/>)}
+      </View>
+
+      {state.activeTab !== 'upload' && (<View style={styles.colorPickerWrapper}>
+          <ColorPicker selectedColor={state.selectedColor} onColorSelect={color => dispatch({ type: 'SELECT_COLOR', payload: color })}/>
+        </View>)}
+    </FormSheet.Root>);
+}
+function EmptyAvatarPlaceholder() {
+    const styles = useStyles();
+    return <View style={styles.emptyAvatarPlaceholder}/>;
+}
+function hasValidSelection(state) {
+    switch (state.selectedType) {
+        case 'icon':
+        case 'emoji':
+            return state.selectedKey !== null;
+        case 'image':
+            return state.imageAsset !== null;
+        case null:
+            return false;
+    }
+}
+function buildPayload(state) {
+    if (!hasValidSelection(state))
+        return null;
+    const color = coerceColorKey(state.selectedColor);
+    switch (state.selectedType) {
+        case 'icon':
+            return { kind: 'icon', key: state.selectedKey, color };
+        case 'emoji':
+            return { kind: 'emoji', key: state.selectedKey, color };
+        case 'image':
+            return { kind: 'image', imageAsset: state.imageAsset, color };
+    }
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 });
+    const uncappedFontScale = useFontScale();
+    const emptyAvatarDiameter = 80 * uncappedFontScale;
+    return StyleSheet.create({
+        formSheetRoot: {
+            flex: 1,
+        },
+        formSheetContent: {
+            flex: 1,
+        },
+        tabs: {
+            minHeight: 52 * fontScale,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.borderColorDefaultBase,
+            backgroundColor: colors.fillColorNeutral100Inverted,
+            zIndex: 1,
+        },
+        tabLabel: {
+            fontSize: 14,
+            color: colors.textColorDefaultSecondary,
+            paddingVertical: 14 * fontScale,
+            minWidth: 56 * fontScale,
+            textAlign: 'center',
+        },
+        tabLabelActive: {
+            color: colors.textColorDefaultPrimary,
+        },
+        body: {
+            flex: 1,
+            overflow: 'hidden',
+        },
+        colorPickerWrapper: {
+            borderTopWidth: 1,
+            borderTopColor: colors.borderColorDefaultBase,
+        },
+        emptyAvatarPlaceholder: {
+            width: emptyAvatarDiameter,
+            height: emptyAvatarDiameter,
+            borderRadius: emptyAvatarDiameter / 2,
+            borderWidth: 2,
+            borderStyle: 'dashed',
+            borderColor: colors.borderColorDefaultBase,
+        },
+    });
+};
+//# sourceMappingURL=avatar_picker_screen.js.map

package/build/screens/avatar_picker/avatar_picker_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_picker_screen.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/avatar_picker_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, { useCallback, useReducer } from 'react'\nimport { Platform, StyleSheet, View } from 'react-native'\nimport { ConversationAvatar } from '../../components/display/conversation_avatar'\nimport { Tabs } from '../../components/display/tabs'\nimport { Text } from '../../components/display/text'\nimport { coerceColorKey } from '../../components/display/utils/avatar_gradient_colors'\nimport FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'\nimport { useTheme } from '../../hooks'\nimport { useConversation } from '../../hooks/use_conversation'\nimport {\n  useConversationAvatarUpdate,\n  type AvatarUpdatePayload,\n} from '../../hooks/use_conversation_avatar_update'\nimport { useFontScale } from '../../hooks/use_font_scale'\nimport type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'\nimport {\n  avatarPickerReducer,\n  initAvatarPickerState,\n  initAvatarPickerStateFromPayload,\n  initEmptyAvatarPickerState,\n  type AvatarPickerAction,\n  type AvatarPickerState,\n  type AvatarTab,\n} from './avatar_picker_state'\nimport { AvatarPreview } from './avatar_preview'\nimport { ColorPicker } from './color_picker'\nimport { EmojiTab } from './emoji_tab'\nimport { IconGrid } from './icon_grid'\nimport { UploadTab } from './upload_tab'\n\nexport const AvatarPickerScreenOptions = getFormSheetScreenOptions({\n  headerTitle: 'Update avatar',\n  sheetAllowedDetents: Platform.select({\n    android: [0.94],\n    default: [1],\n  }),\n})\n\nexport const AvatarPickerCreateScreenOptions = getFormSheetScreenOptions({\n  headerTitle: 'Choose avatar',\n  sheetAllowedDetents: Platform.select({\n    android: [0.94],\n    default: [1],\n  }),\n})\n\nexport type AvatarPickerScreenProps = StaticScreenProps<{\n  conversation_id?: number\n  source_params?: Record<string, unknown>\n  avatar_selection?: AvatarUpdatePayload\n}>\n\nconst TABS: AvatarTab[] = ['icon', 'emoji', 'upload']\n\nconst TAB_LABELS: Record<AvatarTab, string> = {\n  icon: 'Icon',\n  emoji: 'Emoji',\n  upload: 'Upload',\n}\n\nexport function AvatarPickerScreen({ route }: AvatarPickerScreenProps) {\n  const { conversation_id, source_params, avatar_selection } = route.params\n  if (conversation_id) {\n    return <EditModeContent conversationId={conversation_id} />\n  }\n  return <CreateModeContent sourceParams={source_params} existingSelection={avatar_selection} />\n}\n\nfunction EditModeContent({ conversationId }: { conversationId: number }) {\n  const navigation = useNavigation()\n  const { data: conversation } = useConversation({ conversation_id: conversationId })\n  const mutation = useConversationAvatarUpdate({ conversationId })\n\n  const [state, dispatch] = useReducer(avatarPickerReducer, conversation, initAvatarPickerState)\n\n  const hasAvatar = state.selectedType !== null\n\n  const handleDone = useCallback(() => {\n    if (!state.isDirty) {\n      navigation.goBack()\n      return\n    }\n\n    const payload = buildPayload(state)\n    if (payload) {\n      mutation.mutate(payload)\n    }\n    navigation.goBack()\n  }, [state, mutation, navigation])\n\n  const handleRemove = useCallback(() => {\n    mutation.mutate({ kind: 'clear' }, { onSuccess: () => dispatch({ type: 'CLEAR' }) })\n  }, [mutation, dispatch])\n\n  return (\n    <AvatarPickerFormSheet\n      state={state}\n      dispatch={dispatch}\n      headerTitle=\"Update avatar\"\n      headerActions={\n        <>\n          {hasAvatar && (\n            <FormSheet.HeaderTextButton onPress={handleRemove} appearance=\"danger\">\n              Remove\n            </FormSheet.HeaderTextButton>\n          )}\n          <FormSheet.HeaderTextButton onPress={handleDone} disabled={mutation.isPending}>\n            Done\n          </FormSheet.HeaderTextButton>\n        </>\n      }\n      fallbackPreview={<ConversationAvatar conversation={conversation} size=\"2xl\" />}\n    />\n  )\n}\n\ninterface CreateModeContentProps {\n  sourceParams?: Record<string, unknown>\n  existingSelection?: AvatarUpdatePayload\n}\n\nfunction CreateModeContent({ sourceParams, existingSelection }: CreateModeContentProps) {\n  const navigation = useNavigation()\n\n  const [state, dispatch] = useReducer(avatarPickerReducer, existingSelection, selection =>\n    selection ? initAvatarPickerStateFromPayload(selection) : initEmptyAvatarPickerState()\n  )\n\n  const handleDone = useCallback(() => {\n    if (!state.isDirty) {\n      navigation.goBack()\n      return\n    }\n\n    const payload = buildPayload(state)\n    if (payload) {\n      navigation.dispatch(\n        StackActions.popTo('ConversationNew', { ...sourceParams, avatar_selection: payload })\n      )\n    } else {\n      navigation.goBack()\n    }\n  }, [state, navigation, sourceParams])\n\n  return (\n    <AvatarPickerFormSheet\n      state={state}\n      dispatch={dispatch}\n      headerTitle=\"Choose avatar\"\n      headerActions={\n        <FormSheet.HeaderTextButton onPress={handleDone}>Done</FormSheet.HeaderTextButton>\n      }\n      fallbackPreview={<EmptyAvatarPlaceholder />}\n    />\n  )\n}\n\ninterface AvatarPickerFormSheetProps {\n  state: AvatarPickerState\n  dispatch: React.Dispatch<AvatarPickerAction>\n  headerTitle: string\n  headerActions: React.ReactNode\n  fallbackPreview: React.ReactNode\n}\n\nfunction AvatarPickerFormSheet({\n  state,\n  dispatch,\n  headerTitle,\n  headerActions,\n  fallbackPreview,\n}: AvatarPickerFormSheetProps) {\n  const styles = useStyles()\n\n  return (\n    <FormSheet.Root style={styles.formSheetRoot} contentStyle={styles.formSheetContent}>\n      <FormSheet.Header>\n        <FormSheet.HeaderTitle>{headerTitle}</FormSheet.HeaderTitle>\n        <FormSheet.HeaderActions>{headerActions}</FormSheet.HeaderActions>\n      </FormSheet.Header>\n\n      <AvatarPreview state={state} fallback={fallbackPreview} />\n\n      <Tabs\n        data={TABS}\n        activeTab={state.activeTab}\n        onTabPress={tab => dispatch({ type: 'SELECT_TAB', payload: tab })}\n        renderItem={({ item }) => (\n          <Text style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}>\n            {TAB_LABELS[item]}\n          </Text>\n        )}\n        style={styles.tabs}\n      />\n\n      <View style={styles.body}>\n        {state.activeTab === 'icon' && (\n          <IconGrid\n            selectedIconKey={state.selectedType === 'icon' ? state.selectedKey : null}\n            onIconSelect={iconKey => dispatch({ type: 'SELECT_ICON', payload: iconKey })}\n          />\n        )}\n        {state.activeTab === 'emoji' && (\n          <EmojiTab onEmojiSelect={emoji => dispatch({ type: 'SELECT_EMOJI', payload: emoji })} />\n        )}\n        {state.activeTab === 'upload' && (\n          <UploadTab\n            imagePreviewUri={state.imagePreviewUri}\n            onImageSelect={asset => dispatch({ type: 'SET_IMAGE', payload: asset })}\n          />\n        )}\n      </View>\n\n      {state.activeTab !== 'upload' && (\n        <View style={styles.colorPickerWrapper}>\n          <ColorPicker\n            selectedColor={state.selectedColor}\n            onColorSelect={color => dispatch({ type: 'SELECT_COLOR', payload: color })}\n          />\n        </View>\n      )}\n    </FormSheet.Root>\n  )\n}\n\nfunction EmptyAvatarPlaceholder() {\n  const styles = useStyles()\n  return <View style={styles.emptyAvatarPlaceholder} />\n}\n\ntype ValidAvatarPickerState = AvatarPickerState &\n  (\n    | { selectedType: 'icon' | 'emoji'; selectedKey: string }\n    | { selectedType: 'image'; imageAsset: ImagePickerAsset }\n  )\n\nfunction hasValidSelection(state: AvatarPickerState): state is ValidAvatarPickerState {\n  switch (state.selectedType) {\n    case 'icon':\n    case 'emoji':\n      return state.selectedKey !== null\n    case 'image':\n      return state.imageAsset !== null\n    case null:\n      return false\n  }\n}\n\nfunction buildPayload(state: AvatarPickerState): AvatarUpdatePayload | null {\n  if (!hasValidSelection(state)) return null\n\n  const color = coerceColorKey(state.selectedColor)\n\n  switch (state.selectedType) {\n    case 'icon':\n      return { kind: 'icon', key: state.selectedKey, color }\n    case 'emoji':\n      return { kind: 'emoji', key: state.selectedKey, color }\n    case 'image':\n      return { kind: 'image', imageAsset: state.imageAsset, color }\n  }\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })\n  const uncappedFontScale = useFontScale()\n  const emptyAvatarDiameter = 80 * uncappedFontScale\n\n  return StyleSheet.create({\n    formSheetRoot: {\n      flex: 1,\n    },\n    formSheetContent: {\n      flex: 1,\n    },\n    tabs: {\n      minHeight: 52 * fontScale,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.borderColorDefaultBase,\n      backgroundColor: colors.fillColorNeutral100Inverted,\n      zIndex: 1,\n    },\n    tabLabel: {\n      fontSize: 14,\n      color: colors.textColorDefaultSecondary,\n      paddingVertical: 14 * fontScale,\n      minWidth: 56 * fontScale,\n      textAlign: 'center',\n    },\n    tabLabelActive: {\n      color: colors.textColorDefaultPrimary,\n    },\n    body: {\n      flex: 1,\n      overflow: 'hidden',\n    },\n    colorPickerWrapper: {\n      borderTopWidth: 1,\n      borderTopColor: colors.borderColorDefaultBase,\n    },\n    emptyAvatarPlaceholder: {\n      width: emptyAvatarDiameter,\n      height: emptyAvatarDiameter,\n      borderRadius: emptyAvatarDiameter / 2,\n      borderWidth: 2,\n      borderStyle: 'dashed',\n      borderColor: colors.borderColorDefaultBase,\n    },\n  })\n}\n"]}

package/build/screens/avatar_picker/avatar_picker_state.d.ts

@@ -0,0 +1,38 @@
+import { CustomAvatarColorKey } from '../../components/display/utils/avatar_gradient_colors';
+import type { AvatarType, AvatarUpdatePayload } from '../../hooks/use_conversation_avatar_update';
+import type { ConversationResource } from '../../types';
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker';
+export type { AvatarType };
+export type AvatarTab = 'icon' | 'emoji' | 'upload';
+export interface AvatarPickerState {
+    activeTab: AvatarTab;
+    selectedType: AvatarType | null;
+    selectedKey: string | null;
+    selectedColor: string;
+    imagePreviewUri: string | null;
+    imageAsset: ImagePickerAsset | null;
+    isDirty: boolean;
+}
+export type AvatarPickerAction = {
+    type: 'SELECT_TAB';
+    payload: AvatarTab;
+} | {
+    type: 'SELECT_ICON';
+    payload: string;
+} | {
+    type: 'SELECT_EMOJI';
+    payload: string;
+} | {
+    type: 'SELECT_COLOR';
+    payload: CustomAvatarColorKey;
+} | {
+    type: 'SET_IMAGE';
+    payload: ImagePickerAsset;
+} | {
+    type: 'CLEAR';
+};
+export declare function avatarPickerReducer(state: AvatarPickerState, action: AvatarPickerAction): AvatarPickerState;
+export declare function initEmptyAvatarPickerState(): AvatarPickerState;
+export declare function initAvatarPickerState(conversation: Pick<ConversationResource, 'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'>): AvatarPickerState;
+export declare function initAvatarPickerStateFromPayload(payload: AvatarUpdatePayload): AvatarPickerState;
+//# sourceMappingURL=avatar_picker_state.d.ts.map

package/build/screens/avatar_picker/avatar_picker_state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_picker_state.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/avatar_picker_state.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAErB,MAAM,uDAAuD,CAAA;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAA;AACjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAEhF,YAAY,EAAE,UAAU,EAAE,CAAA;AAC1B,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAA;IAC/B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACnC,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,GAC1C;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,oBAAoB,CAAA;CAAE,GACvD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAErB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,kBAAkB,GACzB,iBAAiB,CA4CnB;AAED,wBAAgB,0BAA0B,IAAI,iBAAiB,CAU9D;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,IAAI,CAChB,oBAAoB,EACpB,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,sBAAsB,CACtF,GACA,iBAAiB,CAiBnB;AAED,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,mBAAmB,GAAG,iBAAiB,CA0BhG"}

package/build/screens/avatar_picker/avatar_picker_state.js

@@ -0,0 +1,101 @@
+import { DEFAULT_AVATAR_COLOR_KEY, } from '../../components/display/utils/avatar_gradient_colors';
+export function avatarPickerReducer(state, action) {
+    switch (action.type) {
+        case 'SELECT_TAB':
+            return { ...state, activeTab: action.payload };
+        case 'SELECT_ICON':
+            return {
+                ...state,
+                selectedType: 'icon',
+                selectedKey: action.payload,
+                isDirty: true,
+            };
+        case 'SELECT_EMOJI':
+            return {
+                ...state,
+                selectedType: 'emoji',
+                selectedKey: action.payload,
+                isDirty: true,
+            };
+        case 'SELECT_COLOR':
+            return {
+                ...state,
+                selectedColor: action.payload,
+                isDirty: true,
+            };
+        case 'SET_IMAGE':
+            return {
+                ...state,
+                selectedType: 'image',
+                selectedKey: null,
+                imagePreviewUri: action.payload.uri,
+                imageAsset: action.payload,
+                isDirty: true,
+            };
+        case 'CLEAR':
+            return {
+                ...state,
+                selectedType: null,
+                selectedKey: null,
+                selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+                imagePreviewUri: null,
+                imageAsset: null,
+                isDirty: true,
+            };
+    }
+}
+export function initEmptyAvatarPickerState() {
+    return {
+        activeTab: 'icon',
+        selectedType: null,
+        selectedKey: null,
+        selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+        imagePreviewUri: null,
+        imageAsset: null,
+        isDirty: false,
+    };
+}
+export function initAvatarPickerState(conversation) {
+    const tabFromType = {
+        icon: 'icon',
+        emoji: 'emoji',
+        image: 'upload',
+    };
+    return {
+        activeTab: (conversation.customAvatarType && tabFromType[conversation.customAvatarType]) ?? 'icon',
+        selectedType: conversation.customAvatarType ?? null,
+        selectedKey: conversation.customAvatarKey ?? null,
+        selectedColor: conversation.customAvatarColor || DEFAULT_AVATAR_COLOR_KEY,
+        imagePreviewUri: conversation.customAvatarImageUrl ?? null,
+        imageAsset: null,
+        isDirty: false,
+    };
+}
+export function initAvatarPickerStateFromPayload(payload) {
+    switch (payload.kind) {
+        case 'icon':
+        case 'emoji':
+            return {
+                activeTab: payload.kind,
+                selectedType: payload.kind,
+                selectedKey: payload.key,
+                selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
+                imagePreviewUri: null,
+                imageAsset: null,
+                isDirty: false,
+            };
+        case 'image':
+            return {
+                activeTab: 'upload',
+                selectedType: 'image',
+                selectedKey: null,
+                selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
+                imagePreviewUri: payload.imageAsset.uri,
+                imageAsset: payload.imageAsset,
+                isDirty: false,
+            };
+        default:
+            return initEmptyAvatarPickerState();
+    }
+}
+//# sourceMappingURL=avatar_picker_state.js.map

package/build/screens/avatar_picker/avatar_picker_state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_picker_state.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/avatar_picker_state.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CustomAvatarColorKey,\n  DEFAULT_AVATAR_COLOR_KEY,\n} from '../../components/display/utils/avatar_gradient_colors'\nimport type { AvatarType, AvatarUpdatePayload } from '../../hooks/use_conversation_avatar_update'\nimport type { ConversationResource } from '../../types'\nimport type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'\n\nexport type { AvatarType }\nexport type AvatarTab = 'icon' | 'emoji' | 'upload'\n\nexport interface AvatarPickerState {\n  activeTab: AvatarTab\n  selectedType: AvatarType | null\n  selectedKey: string | null\n  selectedColor: string\n  imagePreviewUri: string | null\n  imageAsset: ImagePickerAsset | null\n  isDirty: boolean\n}\n\nexport type AvatarPickerAction =\n  | { type: 'SELECT_TAB'; payload: AvatarTab }\n  | { type: 'SELECT_ICON'; payload: string }\n  | { type: 'SELECT_EMOJI'; payload: string }\n  | { type: 'SELECT_COLOR'; payload: CustomAvatarColorKey }\n  | { type: 'SET_IMAGE'; payload: ImagePickerAsset }\n  | { type: 'CLEAR' }\n\nexport function avatarPickerReducer(\n  state: AvatarPickerState,\n  action: AvatarPickerAction\n): AvatarPickerState {\n  switch (action.type) {\n    case 'SELECT_TAB':\n      return { ...state, activeTab: action.payload }\n    case 'SELECT_ICON':\n      return {\n        ...state,\n        selectedType: 'icon',\n        selectedKey: action.payload,\n        isDirty: true,\n      }\n    case 'SELECT_EMOJI':\n      return {\n        ...state,\n        selectedType: 'emoji',\n        selectedKey: action.payload,\n        isDirty: true,\n      }\n    case 'SELECT_COLOR':\n      return {\n        ...state,\n        selectedColor: action.payload,\n        isDirty: true,\n      }\n    case 'SET_IMAGE':\n      return {\n        ...state,\n        selectedType: 'image',\n        selectedKey: null,\n        imagePreviewUri: action.payload.uri,\n        imageAsset: action.payload,\n        isDirty: true,\n      }\n    case 'CLEAR':\n      return {\n        ...state,\n        selectedType: null,\n        selectedKey: null,\n        selectedColor: DEFAULT_AVATAR_COLOR_KEY,\n        imagePreviewUri: null,\n        imageAsset: null,\n        isDirty: true,\n      }\n  }\n}\n\nexport function initEmptyAvatarPickerState(): AvatarPickerState {\n  return {\n    activeTab: 'icon',\n    selectedType: null,\n    selectedKey: null,\n    selectedColor: DEFAULT_AVATAR_COLOR_KEY,\n    imagePreviewUri: null,\n    imageAsset: null,\n    isDirty: false,\n  }\n}\n\nexport function initAvatarPickerState(\n  conversation: Pick<\n    ConversationResource,\n    'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'\n  >\n): AvatarPickerState {\n  const tabFromType: Record<AvatarType, AvatarTab> = {\n    icon: 'icon',\n    emoji: 'emoji',\n    image: 'upload',\n  }\n\n  return {\n    activeTab:\n      (conversation.customAvatarType && tabFromType[conversation.customAvatarType]) ?? 'icon',\n    selectedType: conversation.customAvatarType ?? null,\n    selectedKey: conversation.customAvatarKey ?? null,\n    selectedColor: conversation.customAvatarColor || DEFAULT_AVATAR_COLOR_KEY,\n    imagePreviewUri: conversation.customAvatarImageUrl ?? null,\n    imageAsset: null,\n    isDirty: false,\n  }\n}\n\nexport function initAvatarPickerStateFromPayload(payload: AvatarUpdatePayload): AvatarPickerState {\n  switch (payload.kind) {\n    case 'icon':\n    case 'emoji':\n      return {\n        activeTab: payload.kind,\n        selectedType: payload.kind,\n        selectedKey: payload.key,\n        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,\n        imagePreviewUri: null,\n        imageAsset: null,\n        isDirty: false,\n      }\n    case 'image':\n      return {\n        activeTab: 'upload',\n        selectedType: 'image',\n        selectedKey: null,\n        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,\n        imagePreviewUri: payload.imageAsset.uri,\n        imageAsset: payload.imageAsset,\n        isDirty: false,\n      }\n    default:\n      return initEmptyAvatarPickerState()\n  }\n}\n"]}

package/build/screens/avatar_picker/avatar_preview.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { AvatarPickerState } from './avatar_picker_state';
+interface AvatarPreviewProps {
+    state: AvatarPickerState;
+    fallback: React.ReactNode;
+}
+export declare function AvatarPreview({ state, fallback }: AvatarPreviewProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=avatar_preview.d.ts.map

package/build/screens/avatar_picker/avatar_preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_preview.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/avatar_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAE9D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAwBD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAGpE"}

package/build/screens/avatar_picker/avatar_preview.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { EmojiAvatar } from '../../components/display/emoji_avatar';
+import { IconAvatar } from '../../components/display/icon_avatar';
+import AvatarPrimitive from '../../components/primitive/avatar_primitive';
+function getPreviewNode(state) {
+    switch (state.selectedType) {
+        case 'icon':
+            if (!state.selectedKey)
+                return null;
+            return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} size="2xl"/>;
+        case 'emoji':
+            if (!state.selectedKey)
+                return null;
+            return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} size="2xl"/>;
+        case 'image':
+            if (!state.imagePreviewUri)
+                return null;
+            return (<AvatarPrimitive.Root size="2xl">
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={state.imagePreviewUri}/>
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>);
+        default:
+            return null;
+    }
+}
+export function AvatarPreview({ state, fallback }) {
+    const preview = getPreviewNode(state);
+    return <View style={styles.container}>{preview ?? fallback}</View>;
+}
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        paddingTop: 24,
+        paddingBottom: 16,
+    },
+});
+//# sourceMappingURL=avatar_preview.js.map

package/build/screens/avatar_picker/avatar_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_preview.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/avatar_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAA;AACjE,OAAO,eAAe,MAAM,6CAA6C,CAAA;AAQzE,SAAS,cAAc,CAAC,KAAwB;IAC9C,QAAQ,KAAK,CAAC,YAAY,EAAE,CAAC;QAC3B,KAAK,MAAM;YACT,IAAI,CAAC,KAAK,CAAC,WAAW;gBAAE,OAAO,IAAI,CAAA;YACnC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAG,CAAA;QAC1F,KAAK,OAAO;YACV,IAAI,CAAC,KAAK,CAAC,WAAW;gBAAE,OAAO,IAAI,CAAA;YACnC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAG,CAAA;QACzF,KAAK,OAAO;YACV,IAAI,CAAC,KAAK,CAAC,eAAe;gBAAE,OAAO,IAAI,CAAA;YACvC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAC9B;UAAA,CAAC,eAAe,CAAC,IAAI,CACnB;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,EAC1D;UAAA,EAAE,eAAe,CAAC,IAAI,CACxB;QAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;QACH;YACE,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB;IACnE,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;IACrC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAA;AACpE,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,EAAE;QACd,aAAa,EAAE,EAAE;KAClB;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { EmojiAvatar } from '../../components/display/emoji_avatar'\nimport { IconAvatar } from '../../components/display/icon_avatar'\nimport AvatarPrimitive from '../../components/primitive/avatar_primitive'\nimport type { AvatarPickerState } from './avatar_picker_state'\n\ninterface AvatarPreviewProps {\n  state: AvatarPickerState\n  fallback: React.ReactNode\n}\n\nfunction getPreviewNode(state: AvatarPickerState): React.ReactNode {\n  switch (state.selectedType) {\n    case 'icon':\n      if (!state.selectedKey) return null\n      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} size=\"2xl\" />\n    case 'emoji':\n      if (!state.selectedKey) return null\n      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} size=\"2xl\" />\n    case 'image':\n      if (!state.imagePreviewUri) return null\n      return (\n        <AvatarPrimitive.Root size=\"2xl\">\n          <AvatarPrimitive.Mask>\n            <AvatarPrimitive.Image sourceUri={state.imagePreviewUri} />\n          </AvatarPrimitive.Mask>\n        </AvatarPrimitive.Root>\n      )\n    default:\n      return null\n  }\n}\n\nexport function AvatarPreview({ state, fallback }: AvatarPreviewProps) {\n  const preview = getPreviewNode(state)\n  return <View style={styles.container}>{preview ?? fallback}</View>\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    paddingTop: 24,\n    paddingBottom: 16,\n  },\n})\n"]}

package/build/screens/avatar_picker/color_picker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type CustomAvatarColorKey } from '../../components/display/utils/avatar_gradient_colors';
+interface ColorPickerProps {
+    selectedColor: string;
+    onColorSelect: (color: CustomAvatarColorKey) => void;
+}
+export declare function ColorPicker({ selectedColor, onColorSelect }: ColorPickerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=color_picker.d.ts.map

package/build/screens/avatar_picker/color_picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/color_picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,uDAAuD,CAAA;AAI9D,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAA;CACrD;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,gBAAgB,qBAkC7E"}

package/build/screens/avatar_picker/color_picker.js

@@ -0,0 +1,53 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import React, { useCallback } from 'react';
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { COLOR_KEYS, getAvatarGradientProps, } from '../../components/display/utils/avatar_gradient_colors';
+import { useTheme } from '../../hooks';
+import { GRID_COLUMNS } from './constants';
+export function ColorPicker({ selectedColor, onColorSelect }) {
+    const styles = useStyles();
+    const renderItem = useCallback(({ item }) => {
+        const gradientProps = getAvatarGradientProps(item);
+        const isSelected = item === selectedColor;
+        return (<PlatformPressable onPress={() => onColorSelect(item)} style={[styles.swatchOuter, isSelected && styles.swatchSelected]} accessibilityRole="button" accessibilityLabel={`${item.replace(/-/g, ' ')} color`} accessibilityState={{ selected: isSelected }}>
+          <LinearGradient {...gradientProps} style={styles.swatch}/>
+        </PlatformPressable>);
+    }, [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]);
+    return (<FlatList data={COLOR_KEYS} numColumns={GRID_COLUMNS} keyExtractor={item => item} renderItem={renderItem} contentContainerStyle={styles.grid} columnWrapperStyle={styles.row} scrollEnabled={false}/>);
+}
+const PADDING = 16;
+const GAP = 8;
+const useStyles = () => {
+    const { colors } = useTheme();
+    const { width: screenWidth } = useWindowDimensions();
+    const swatchSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS);
+    const innerSize = swatchSize - 6;
+    return StyleSheet.create({
+        grid: {
+            paddingHorizontal: PADDING,
+            paddingVertical: 12,
+        },
+        row: {
+            gap: GAP,
+            marginBottom: GAP,
+        },
+        swatchOuter: {
+            width: swatchSize,
+            height: swatchSize,
+            borderRadius: swatchSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        swatchSelected: {
+            borderWidth: 3,
+            borderColor: colors.interaction,
+        },
+        swatch: {
+            width: innerSize,
+            height: innerSize,
+            borderRadius: innerSize / 2,
+        },
+    });
+};
+//# sourceMappingURL=color_picker.js.map

package/build/screens/avatar_picker/color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/color_picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport React, { useCallback } from 'react'\nimport { FlatList, StyleSheet, useWindowDimensions } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport {\n  COLOR_KEYS,\n  type CustomAvatarColorKey,\n  getAvatarGradientProps,\n} from '../../components/display/utils/avatar_gradient_colors'\nimport { useTheme } from '../../hooks'\nimport { GRID_COLUMNS } from './constants'\n\ninterface ColorPickerProps {\n  selectedColor: string\n  onColorSelect: (color: CustomAvatarColorKey) => void\n}\n\nexport function ColorPicker({ selectedColor, onColorSelect }: ColorPickerProps) {\n  const styles = useStyles()\n\n  const renderItem = useCallback(\n    ({ item }: { item: CustomAvatarColorKey }) => {\n      const gradientProps = getAvatarGradientProps(item)\n      const isSelected = item === selectedColor\n\n      return (\n        <PlatformPressable\n          onPress={() => onColorSelect(item)}\n          style={[styles.swatchOuter, isSelected && styles.swatchSelected]}\n          accessibilityRole=\"button\"\n          accessibilityLabel={`${item.replace(/-/g, ' ')} color`}\n          accessibilityState={{ selected: isSelected }}\n        >\n          <LinearGradient {...gradientProps} style={styles.swatch} />\n        </PlatformPressable>\n      )\n    },\n    [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]\n  )\n\n  return (\n    <FlatList\n      data={COLOR_KEYS}\n      numColumns={GRID_COLUMNS}\n      keyExtractor={item => item}\n      renderItem={renderItem}\n      contentContainerStyle={styles.grid}\n      columnWrapperStyle={styles.row}\n      scrollEnabled={false}\n    />\n  )\n}\n\nconst PADDING = 16\nconst GAP = 8\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { width: screenWidth } = useWindowDimensions()\n  const swatchSize = Math.floor(\n    (screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS\n  )\n  const innerSize = swatchSize - 6\n\n  return StyleSheet.create({\n    grid: {\n      paddingHorizontal: PADDING,\n      paddingVertical: 12,\n    },\n    row: {\n      gap: GAP,\n      marginBottom: GAP,\n    },\n    swatchOuter: {\n      width: swatchSize,\n      height: swatchSize,\n      borderRadius: swatchSize / 2,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    swatchSelected: {\n      borderWidth: 3,\n      borderColor: colors.interaction,\n    },\n    swatch: {\n      width: innerSize,\n      height: innerSize,\n      borderRadius: innerSize / 2,\n    },\n  })\n}\n"]}

package/build/screens/avatar_picker/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AVATAR_ICON_KEYS: string[];
+export declare const GRID_COLUMNS = 6;
+//# sourceMappingURL=constants.d.ts.map

package/build/screens/avatar_picker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,EAkDpC,CAAA;AAED,eAAO,MAAM,YAAY,IAAI,CAAA"}

package/build/screens/avatar_picker/constants.js

@@ -0,0 +1,53 @@
+export const AVATAR_ICON_KEYS = [
+    // Church
+    'book-bible',
+    'church',
+    'cross',
+    'dove',
+    'hands-heart',
+    'person-rays',
+    'praying-hands',
+    'podium',
+    'droplet',
+    'person-drowning',
+    'lighthouse',
+    // Services
+    'guitar',
+    'guitar-electric',
+    'violin',
+    'calendar-heart',
+    'hand-heart',
+    'hand-wave',
+    'baby',
+    'children',
+    'mug-hot',
+    'video-camera',
+    'music',
+    'piano-keyboard',
+    'drum',
+    'user-graduate',
+    'comments-question',
+    'presentation',
+    'microphone-stand',
+    'id-badge',
+    'book-user',
+    'hand-holding-heart',
+    'guitars',
+    'amp-guitar',
+    'school-flag',
+    'shield-check',
+    'projector',
+    // Groups
+    'people',
+    'people-group',
+    'person-dress',
+    'person',
+    'seedling',
+    'comments-alt',
+    'globe',
+    'book-open-reader',
+    'running',
+    'leaf',
+];
+export const GRID_COLUMNS = 6;
+//# sourceMappingURL=constants.js.map

package/build/screens/avatar_picker/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/screens/avatar_picker/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAa;IACxC,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,OAAO;IACP,MAAM;IACN,aAAa;IACb,aAAa;IACb,eAAe;IACf,QAAQ;IACR,SAAS;IACT,iBAAiB;IACjB,YAAY;IACZ,WAAW;IACX,QAAQ;IACR,iBAAiB;IACjB,QAAQ;IACR,gBAAgB;IAChB,YAAY;IACZ,WAAW;IACX,MAAM;IACN,UAAU;IACV,SAAS;IACT,cAAc;IACd,OAAO;IACP,gBAAgB;IAChB,MAAM;IACN,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,oBAAoB;IACpB,SAAS;IACT,YAAY;IACZ,aAAa;IACb,cAAc;IACd,WAAW;IACX,SAAS;IACT,QAAQ;IACR,cAAc;IACd,cAAc;IACd,QAAQ;IACR,UAAU;IACV,cAAc;IACd,OAAO;IACP,kBAAkB;IAClB,SAAS;IACT,MAAM;CACP,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAA","sourcesContent":["export const AVATAR_ICON_KEYS: string[] = [\n  // Church\n  'book-bible',\n  'church',\n  'cross',\n  'dove',\n  'hands-heart',\n  'person-rays',\n  'praying-hands',\n  'podium',\n  'droplet',\n  'person-drowning',\n  'lighthouse',\n  // Services\n  'guitar',\n  'guitar-electric',\n  'violin',\n  'calendar-heart',\n  'hand-heart',\n  'hand-wave',\n  'baby',\n  'children',\n  'mug-hot',\n  'video-camera',\n  'music',\n  'piano-keyboard',\n  'drum',\n  'user-graduate',\n  'comments-question',\n  'presentation',\n  'microphone-stand',\n  'id-badge',\n  'book-user',\n  'hand-holding-heart',\n  'guitars',\n  'amp-guitar',\n  'school-flag',\n  'shield-check',\n  'projector',\n  // Groups\n  'people',\n  'people-group',\n  'person-dress',\n  'person',\n  'seedling',\n  'comments-alt',\n  'globe',\n  'book-open-reader',\n  'running',\n  'leaf',\n]\n\nexport const GRID_COLUMNS = 6\n"]}

package/build/screens/avatar_picker/emoji_tab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmojiTabProps {
+    onEmojiSelect: (emoji: string) => void;
+}
+export declare function EmojiTab({ onEmojiSelect }: EmojiTabProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=emoji_tab.d.ts.map

package/build/screens/avatar_picker/emoji_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_tab.d.ts","sourceRoot":"","sources":["../../../src/screens/avatar_picker/emoji_tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,UAAU,aAAa;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,wBAAgB,QAAQ,CAAC,EAAE,aAAa,EAAE,EAAE,aAAa,qBAuDxD"}