@planningcenter/chat-react-native 1.4.2-rc.1 → 1.4.2

package/build/vendor/tapestry/tokens.d.ts

@@ -1,38 +1,52 @@
 export declare const tokens: {
-    borderRadiusDefault: number;
-    spacingFourth: number;
-    spacingHalf: number;
-    spacing1: number;
-    spacing2: number;
-    spacing3: number;
-    spacing4: number;
-    spacing5: number;
-    spacing6: number;
-    spacing7: number;
-    borderRadiusSm: number;
-    borderRadiusMd: number;
-    borderRadiusLg: number;
-    borderRadiusXl: number;
-    borderRadiusRound: number;
-    borderSizeDefault: number;
-    borderSizeThick: number;
-    colorNeutral7: string;
-    colorNeutral12: string;
-    colorNeutral15: string;
-    colorNeutral17: string;
-    colorNeutral19: string;
-    colorNeutral24: string;
-    colorNeutral32: string;
-    colorNeutral45: string;
-    colorNeutral50: string;
-    colorNeutral58: string;
-    colorNeutral68: string;
-    colorNeutral81: string;
-    colorNeutral88: string;
-    colorNeutral93: string;
-    colorNeutral95: string;
-    colorNeutral97: string;
-    colorNeutral98: string;
-    colorNeutral100White: string;
+    colorInteractionOnlineDefault: "hsl(123, 38%, 57%)";
+    borderRadiusDefault: 4;
+    spacingFourth: 2;
+    spacingHalf: 4;
+    spacing1: 8;
+    spacing2: 16;
+    spacing3: 24;
+    spacing4: 32;
+    spacing5: 40;
+    spacing6: 48;
+    spacing7: 56;
+    borderRadiusSm: 2;
+    borderRadiusMd: 4;
+    borderRadiusLg: 8;
+    borderRadiusXl: 16;
+    borderRadiusRound: 56;
+    borderSizeDefault: 1;
+    borderSizeThick: 2;
+    fontWeightNormal: "400";
+    fontWeightMedium: "500";
+    fontWeightSemiBold: "600";
+    fontWeightBold: "700";
+    fontSize4xl: 32;
+    fontSize3xl: 28;
+    fontSize2xl: 24;
+    fontSizeXl: 20;
+    fontSizeLg: 18;
+    fontSizeMd: 16;
+    fontSizeSm: 14;
+    fontSizeXs: 12;
+    fontSize2xs: 10;
+    colorNeutral7: "hsl(0, 0%, 7%)";
+    colorNeutral12: "hsl(0, 0%, 12%)";
+    colorNeutral15: "hsl(0, 0%, 15%)";
+    colorNeutral17: "hsl(0, 0%, 17%)";
+    colorNeutral19: "hsl(0, 0%, 19%)";
+    colorNeutral24: "hsl(0, 0%, 24%)";
+    colorNeutral32: "hsl(0, 0%, 32%)";
+    colorNeutral45: "hsl(0, 0%, 45%)";
+    colorNeutral50: "hsl(0, 0%, 50%)";
+    colorNeutral58: "hsl(0, 0%, 58%)";
+    colorNeutral68: "hsl(0, 0%, 68%)";
+    colorNeutral81: "hsl(0, 0%, 81%)";
+    colorNeutral88: "hsl(0, 0%, 88%)";
+    colorNeutral93: "hsl(0, 0%, 93%)";
+    colorNeutral95: "hsl(0, 0%, 95%)";
+    colorNeutral97: "hsl(0, 0%, 97%)";
+    colorNeutral98: "hsl(0, 0%, 98%)";
+    colorNeutral100White: "hsl(0, 0%, 100%)";
 };
 //# sourceMappingURL=tokens.d.ts.map

package/build/vendor/tapestry/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AA4FA,eAAO,MAAM,MAAM;yBAPI,MAAM;mBAtCZ,MAAM;iBACR,MAAM;cACT,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;oBACA,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;uBACH,MAAM;uBACN,MAAM;qBACR,MAAM;mBAzDR,MAAM;oBACL,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;0BACA,MAAM;CA0E7B,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAkEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}

package/build/vendor/tapestry/tokens.js

@@ -38,13 +38,31 @@ const numericPrimtives = {
     borderRadiusRound: 56,
     borderSizeDefault: 1,
     borderSizeThick: 2,
+    fontWeightNormal: '400',
+    fontWeightMedium: '500',
+    fontWeightSemiBold: '600',
+    fontWeightBold: '700',
+    fontSize4xl: 32,
+    fontSize3xl: 28,
+    fontSize2xl: 24,
+    fontSizeXl: 20,
+    fontSizeLg: 18,
+    fontSizeMd: 16,
+    fontSizeSm: 14,
+    fontSizeXs: 12,
+    fontSize2xs: 10,
 };
 const numericAliases = {
     borderRadiusDefault: numericPrimtives.borderRadiusMd,
 };
+// These tokens are specfic to Chat will not be replaced by the Tapestry library
+const localChatTokens = {
+    colorInteractionOnlineDefault: 'hsl(123, 38%, 57%)',
+};
 export const tokens = {
     ...colorPrimitives,
     ...numericPrimtives,
     ...numericAliases,
+    ...localChatTokens,
 };
 //# sourceMappingURL=tokens.js.map

package/build/vendor/tapestry/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAuB1G,MAAM,eAAe,GAAmB;IACtC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,oBAAoB,EAAE,kBAAkB;CACzC,CAAA;AAqBD,MAAM,gBAAgB,GAAsB;IAC1C,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;CACnB,CAAA;AAMD,MAAM,cAAc,GAAmB;IACrC,mBAAmB,EAAE,gBAAgB,CAAC,cAAc;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,GAAG,eAAe;IAClB,GAAG,gBAAgB;IACnB,GAAG,cAAc;CAClB,CAAA","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface ColorPrimitves {\n  colorNeutral7: string\n  colorNeutral12: string\n  colorNeutral15: string\n  colorNeutral17: string\n  colorNeutral19: string\n  colorNeutral24: string\n  colorNeutral32: string\n  colorNeutral45: string\n  colorNeutral50: string\n  colorNeutral58: string\n  colorNeutral68: string\n  colorNeutral81: string\n  colorNeutral88: string\n  colorNeutral93: string\n  colorNeutral95: string\n  colorNeutral97: string\n  colorNeutral98: string\n  colorNeutral100White: string\n}\n\nconst colorPrimitives: ColorPrimitves = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n}\n\ninterface NumericPrimitives {\n  spacingFourth: number\n  spacingHalf: number\n  spacing1: number\n  spacing2: number\n  spacing3: number\n  spacing4: number\n  spacing5: number\n  spacing6: number\n  spacing7: number\n  borderRadiusSm: number\n  borderRadiusMd: number\n  borderRadiusLg: number\n  borderRadiusXl: number\n  borderRadiusRound: number\n  borderSizeDefault: number\n  borderSizeThick: number\n}\n\nconst numericPrimtives: NumericPrimitives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n}\n\ninterface NumericAliases {\n  borderRadiusDefault: number\n}\n\nconst numericAliases: NumericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n}\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n}\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAE1G,MAAM,eAAe,GAAG;IACtB,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,oBAAoB,EAAE,kBAAkB;CAChC,CAAA;AAEV,MAAM,gBAAgB,GAAG;IACvB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,KAAK;IACvB,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,KAAK;IACzB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;CACP,CAAA;AAEV,MAAM,cAAc,GAAG;IACrB,mBAAmB,EAAE,gBAAgB,CAAC,cAAc;CAC5C,CAAA;AAEV,gFAAgF;AAChF,MAAM,eAAe,GAAG;IACtB,6BAA6B,EAAE,oBAAoB;CAC3C,CAAA;AAEV,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,GAAG,eAAe;IAClB,GAAG,gBAAgB;IACnB,GAAG,cAAc;IACjB,GAAG,eAAe;CACnB,CAAA","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\nconst colorPrimitives = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n} as const\n\nconst numericPrimtives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemiBold: '600',\n  fontWeightBold: '700',\n  fontSize4xl: 32,\n  fontSize3xl: 28,\n  fontSize2xl: 24,\n  fontSizeXl: 20,\n  fontSizeLg: 18,\n  fontSizeMd: 16,\n  fontSizeSm: 14,\n  fontSizeXs: 12,\n  fontSize2xs: 10,\n} as const\n\nconst numericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n} as const\n\n// These tokens are specfic to Chat will not be replaced by the Tapestry library\nconst localChatTokens = {\n  colorInteractionOnlineDefault: 'hsl(123, 38%, 57%)',\n} as const\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n  ...localChatTokens,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.4.2-rc.1",
+  "version": "1.4.2",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,7 +17,7 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.4.0"
+    "@planningcenter/chat-core": "^1.4.2"
   },
   "peerDependencies": {
     "@react-navigation/elements": "*",
@@ -25,18 +25,17 @@
     "@tanstack/react-query": "^5.0.0",
     "lodash": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-device-info": "*"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.77.0",
-    "@react-navigation/elements": "^2.2.3",
-    "@react-navigation/native": "^7.0.14",
-    "@tanstack/react-query": "^5.66.0",
+    "@types/jest": "^29.5.14",
     "@typescript-eslint/parser": "^8.23.0",
     "expo-module-scripts": "^4.0.3",
-    "lodash": "^4.17.21",
+    "jest": "^29.4.0",
     "prettier": "^3.4.2",
-    "react-native": "0.74.5"
+    "typescript": "<5.6.0"
   },
-  "gitHead": "bffd2651f686d7894cc0c8bfb4c0d7ae0dc2643e"
+  "gitHead": "5f14aa33a101f75e5abf85636d6e1492123595cf"
 }

package/src/__mocks__/@react-native-async-storage/async-storage.js

@@ -0,0 +1,3 @@
+import AsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock'
+
+export default AsyncStorage

package/src/__mocks__/react-native-device-info.js

@@ -0,0 +1,3 @@
+import mockRNDeviceInfo from 'react-native-device-info/jest/react-native-device-info-mock'
+
+export default mockRNDeviceInfo

package/src/__tests__/hooks/useTheme.tsx

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react-native'
+import { useTheme } from '../../hooks'
+import { ChatProvider } from '../../contexts'
+import React from 'react'
+
+const theme = {
+  colors: {
+    primary: '#0070f3',
+  },
+}
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ChatProvider
+      value={{
+        token: {
+          access_token: '',
+          created_at: 0,
+          expires_in: 0,
+          scope: '',
+          refresh_token: '',
+          token_type: '',
+        },
+        onTokenExpired: () => null,
+        theme,
+      }}
+    >
+      {children}
+    </ChatProvider>
+  )
+}
+
+test('should use theme', () => {
+  const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+  expect(result.current).toBeDefined()
+})

package/src/__tests__/utils/space.tsx

@@ -0,0 +1,60 @@
+import { space, SpacingValues } from '../../utils/space'
+import { tokens } from '../../vendor/tapestry/tokens'
+
+describe('space function', () => {
+  // Spy on console.warn to check for invalid inputs
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  const validTokenValues: Record<SpacingValues, number> = {
+    0.25: tokens.spacingFourth,
+    0.5: tokens.spacingHalf,
+    1: tokens.spacing1,
+    1.5: tokens.spacing1 + tokens.spacingHalf,
+    2: tokens.spacing2,
+    2.5: tokens.spacing2 + tokens.spacingHalf,
+    3: tokens.spacing3,
+    3.5: tokens.spacing3 + tokens.spacingHalf,
+    4: tokens.spacing4,
+    4.5: tokens.spacing4 + tokens.spacingHalf,
+    5: tokens.spacing5,
+    5.5: tokens.spacing5 + tokens.spacingHalf,
+    6: tokens.spacing6,
+    6.5: tokens.spacing6 + tokens.spacingHalf,
+    7: tokens.spacing7,
+    7.5: tokens.spacing7 + tokens.spacingHalf,
+  }
+
+  it('should return the correct token values for all valid SpacingValues', () => {
+    Object.entries(validTokenValues).forEach(([value, expected]) => {
+      expect(space(Number(value) as SpacingValues)).toBe(expected)
+    })
+  })
+
+  it('should warn and return 0 for an invalid value less than 1 (e.g., 0.8)', () => {
+    const result = space(0.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('0.8'))
+  })
+
+  it('should warn and return 0 for an invalid fractional value (e.g., 1.8)', () => {
+    const result = space(1.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('1.8'))
+  })
+
+  it('should warn and return 0 for a value greater than 7.5 (e.g., 19)', () => {
+    const result = space(19 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('19'))
+  })
+})
+
+function warnText(value: string) {
+  return `Invalid space value: ${value} — Must be a whole or half number between 1–7.`
+}

package/src/components/display/avatar.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import AvatarPrimitive, {
+  type AvatarImageProps,
+  type AvatarPresenceProps,
+  type AvatarRootProps,
+} from '../primitive/avatar_primitive'
+
+interface AvatarProps {
+  sourceUri: AvatarImageProps['sourceUri']
+  size?: AvatarRootProps['size']
+  presence?: AvatarPresenceProps['presence']
+}
+
+export function Avatar({ presence, size = 'lg', sourceUri }: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <AvatarPrimitive.Image sourceUri={sourceUri} />
+      </AvatarPrimitive.Mask>
+      {presence && <AvatarPrimitive.Presence presence={presence} />}
+    </AvatarPrimitive.Root>
+  )
+}

package/src/components/display/avatar_group.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import AvatarPrimitive, {
+  type AvatarGroupProps,
+  type AvatarRootProps,
+} from '../primitive/avatar_primitive'
+
+interface AvatarGroupDisplayProps {
+  sourceUris: AvatarGroupProps['sourceUris']
+  size?: AvatarRootProps['size']
+}
+
+export function AvatarGroup({ sourceUris, size = 'lg' }: AvatarGroupDisplayProps) {
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <AvatarPrimitive.Group sourceUris={sourceUris} />
+        <AvatarPrimitive.GroupLoader />
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}

package/src/components/display/heading.tsx

@@ -0,0 +1,71 @@
+import { useTheme } from '../../hooks'
+import React from 'react'
+import {
+  Platform,
+  StyleSheet,
+  Text as ReactNativeText,
+  TextProps as ReactNativeTextProps,
+} from 'react-native'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { platformFontWeightBold } from '../../utils/platform_styles'
+
+interface TextProps extends ReactNativeTextProps {
+  variant?: 'h1' | 'h2' | 'h3' | 'h4'
+}
+
+export function Heading({ style, variant = 'h1', children, ...props }: TextProps) {
+  const styles = useStyles()
+  const variantStyleMap = {
+    h1: styles.heading1,
+    h2: styles.heading2,
+    h3: styles.heading3,
+    h4: styles.heading4,
+  }
+
+  return (
+    <ReactNativeText
+      style={[styles.global, variantStyleMap[variant], style]}
+      accessibilityRole="header"
+      {...props}
+    >
+      {children}
+    </ReactNativeText>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    global: {
+      fontFamily: Platform.select({
+        ios: 'System',
+        android: 'normal',
+      }),
+    },
+    heading1: {
+      color: colors.textColorDefaultHeadline,
+      fontSize: 25, // Todo: Check with UX on correct token
+      lineHeight: 32,
+    },
+    heading2: {
+      color: colors.textColorDefaultHeadline,
+      fontWeight: platformFontWeightBold,
+      fontSize: 21, // Todo: Check with UX on correct token
+      lineHeight: 24,
+    },
+    heading3: {
+      color: colors.textColorDefaultHeadline,
+      fontWeight: platformFontWeightBold,
+      fontSize: tokens.fontSizeLg,
+      lineHeight: 22,
+    },
+    heading4: {
+      color: colors.textColorDefaultSecondary,
+      fontWeight: platformFontWeightBold,
+      fontSize: tokens.fontSizeSm,
+      lineHeight: 20,
+      textTransform: 'uppercase',
+    },
+  })
+}

package/src/components/display/image.tsx

@@ -12,11 +12,15 @@ import {
 import { useTheme } from '../../hooks'
 import { Spinner } from './spinner'
 
-interface ImageProps extends ReactNativeImageProps {
+export interface ImageProps extends ReactNativeImageProps {
   /**
    * Should the image show the loading indicator by default.
    */
   defaultLoading?: boolean
+  /**
+   * Turn on or off loading spinner.
+   */
+  loadingEnabled?: boolean
   /**
    * Size of the loading spinner.
    */
@@ -25,16 +29,22 @@ interface ImageProps extends ReactNativeImageProps {
    * Style object for the preload background.
    */
   loadingBackgroundStyles?: ViewStyle
+  /**
+   * Style the outer View of the image.
+   */
+  wrapperStyle?: ViewStyle
 }
 
 export function Image({
   source,
   onLoad = noop,
   defaultLoading = true,
+  loadingEnabled = true,
   loaderSize = 24,
   loadingBackgroundStyles,
-  style,
-  ...restProps
+  style = {},
+  wrapperStyle = {},
+  ...props
 }: ImageProps) {
   const [loading, setLoading] = useState(defaultLoading)
 
@@ -48,14 +58,14 @@ export function Image({
   }
 
   return (
-    <View>
+    <View style={wrapperStyle}>
       <ReactNativeImage
         style={[styles.image, imageStyles]}
         onLoad={handleOnLoad}
         source={source}
-        {...restProps}
+        {...props}
       />
-      {loading && (
+      {loading && loadingEnabled && (
         <View style={[styles.loadingBackground, loadingBackgroundStyles]}>
           <Spinner size={loaderSize} />
         </View>
@@ -67,7 +77,7 @@ export function Image({
 const useStyles = (
   width: DimensionValue,
   height: DimensionValue,
-  borderRadius: AnimatableNumericValue
+  borderRadius: AnimatableNumericValue | string
 ) => {
   const { colors } = useTheme()
 
@@ -82,7 +92,9 @@ const useStyles = (
       height,
     },
     image: {
-      backgroundColor: 'transparent',
+      backgroundColor: colors.fillColorNeutral070,
+      width,
+      height,
     },
   })
 }

package/src/components/display/index.ts

@@ -1,3 +1,6 @@
+export { Avatar } from './avatar'
+export { AvatarGroup } from './avatar_group'
+export { Heading } from './heading'
+export { Image, ImageProps } from './image'
 export { Spinner } from './spinner'
-export { Image } from './image'
 export { Text } from './text'

package/src/components/display/text.tsx

@@ -6,12 +6,13 @@ import {
   Text as ReactNativeText,
   TextProps as ReactNativeTextProps,
 } from 'react-native'
+import { tokens } from '../../vendor/tapestry/tokens'
 
 interface TextProps extends ReactNativeTextProps {
   variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote'
 }
 
-export function Text({ style, variant = 'plain', children, ...rest }: TextProps) {
+export function Text({ style, variant = 'plain', children, ...props }: TextProps) {
   const styles = useStyles()
   const variantStyleMap = {
     plain: styles.plain,
@@ -21,7 +22,7 @@ export function Text({ style, variant = 'plain', children, ...rest }: TextProps)
   }
 
   return (
-    <ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...rest}>
+    <ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>
       {children}
     </ReactNativeText>
   )
@@ -38,22 +39,22 @@ const useStyles = () => {
     },
     plain: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 16,
+      fontSize: tokens.fontSizeMd,
       lineHeight: 24,
     },
     secondary: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 15,
+      fontSize: 15, // TODO: Check with UX on correct token
       lineHeight: 22,
     },
     tertiary: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 14,
+      fontSize: tokens.fontSizeSm,
       lineHeight: 20,
     },
     footnote: {
       color: colors.textColorDefaultSecondary,
-      fontSize: 13,
+      fontSize: 13, // TODO: Check with UX on correct token
       lineHeight: 16,
     },
   })